css 반응형 레이아웃 질문 있는데요
본문
안녕하세요 다름이 아니라 밑에 이미지처럼 제가 만드는중인데요
div로 list라고 아이디를 감싼 상태에서 좌측 이미지는 고정이 되어야하고 중간에는 유동적으로 쭐였다가 커졌다가 할수있어야하고 우측에는 고정되어야하는데 근데 반응형으로도 가능하게끔 만들어야하는데 어떻게 해야할지 모르겠어요 참고로 반응형일때는 이미지가 위로가고 유동형부분은 중간으로 가고 끝부분은 맨밑으로해서 하게끔해야되요 밑에 그림처럼 만들긴했는데 전체적으로 화면을 줄이면
좌측 이미지랑 중간부분은 가만히 줄여지는데 우측에 고정된부분은 자꾸 밑으로 가게되요 어떻게 해야하나요 전체적으로 줄여져야하는데요 감이 안잡히네요 알려주실분 있을까요? ㅠㅜㅠ
답변 2
가운데를 감싸는 너비보다,
가운데 3개와 사이사이 여백을 합치 너비가 크기 때문에 우측 끝이 밑으로 내려가는 것 같네요.
@media 속성을 이용해 해상도마다 가운데 들어가는 요소들의 너비 처리를 비율 등으로 하시고,
margin padding border 너비등도 너비에 포함되는데, 이것을 잘 계산하셔서 너비 처리 해보세요.
일괄적으로 위 부분을 무시하고 width로만 너비를 계산하려면,
box-sizing:border-box 속성을 넣으면 되는데,
이건 익스 하위 브라우저에서 호환 안 되는 걸로 압니다.
음... 어렵네요 일단 답변 감사합니다...
부트스트랩 검색하셔서 col-md-4이런 스타일을 활용해보세요.
테이블 클래스를 col-md-12로 하면 나머지테이블은 아래로 쫒아낼듯 합니다.
부트스트랩 용어로 숫자 12는 테이블 크기 100%와 동일합니다.
예제로 col-xs-4 이클래스를 div에 넣게되면 해상도가 모바일사이즈가 됐을때는 휴대폰 화면의 3분의 1을 차지하겠다는 뜻입니다.
부트스트랩의 표준CSS에는 반응형에 기초하여 함수들이 기본적으로 표현이 되어 있기때문에 클래스명만 따와서 사용하시면 됩니다.
그누의 CSS와 부트스트랩 표준CSS와는 충돌이 있을 수 있기때문에 일부 클래스를 변경 해 주셔야 합니다.
릴보이즈님의 질문에 대해서 간단한 해결방법은 아니지만 많은 모션설정이 필요없으므로 이 방법을 추천합니다.
그러게요.. 회사일이라서 부트스트랩으로 할순없어서요 ㅠㅠ 쉬운방법인데.. 허.. 어렵게 하고있네요
부트스트랩의 col 스타일을 참고하셔서 만들어보세요.
스타일만 따오고 클래스명은 다르게 표현하시면 부트스트랩 사용했는지 모를수도요 ㅎ
ㅋㅋ 암튼 답변감사합니다~
