max-width 를 넘어 전체 100% 를 사용하는 레이어를 만들려면?
본문
반응형 사이트를 만들면서, 최대사이즈를 1200px로 설정하고 작업중인데요.
중간중간에 max-width 를 넘어 가로폭 전체 100% 를 사용하는 영역을 만들고 싶은데 width:100%
만으로는 적용이 안되는데, 어떻게 하면 될까요?
답변 3
이런 경우는 wrap이란 클래스를 하나 만들고,
필요에 의해 wrap 을 씌우면서 작업해 나가야 합니다.
.wrap {max-width:1200px; margin:0 auto;}
1번섹션은 1200px 에 다 들어간다? 그러면은
<div class="wrap"> 내용 </div>
다음 2번섹션은 100% 로 들어가는 배경이 들어간다?
그럼
<div class="all_bg">
<div class="wrap">내용</div>
</div>
이런식의 구성을 짜야합니다.
역시 그 방법 밖에 없는 거군요. 우선순위나 절대값등을 부여해서 max-width 영역안에서도 해당 부분을 적용받지 않고, 전체폭을 쓸 수 있는 방법이 혹시 있을까 궁금했는데, 다른 방법이 없나 보네요. 답변 주신 내용대로 적용해 봐야 겠네요. 정말 감사합니다.^^
이미지 배경 100% 깔리는건 고정폭을 잡아둔 상태에서는 안되더라구요. 저도 작업해두고, 업체에서 갑작스런 이미지를 100% 깔아달라던가..ㅠㅠ 이런게 워낙 많았어서 연구를 많이 해봤는데 못찾았네요 ㅠㅠ
하지만!!
고정폭 잡아둔 상태에서 단순히 양옆을 배경색으로 꽉차게하는건 가능합니다.
부모요소에 overflow:hidden 과 가상요소로 before, after 를 사용하면 가능해요!
질문에 대한 해결책은 여러 방법으로 구현 가능하지만 가장 쉬운 접근법은,
position:absolute; 속성으로 width px 지정하는 것입니다.
반응형으로 만들려면 css @media 속성도 추가해줘야 합니다.
네~ 원했던 게 이게 맞고요. 한번 테스트해봐야 겠네요. 채택된 답변글인데도 관심갖고 답변 주셔서 감사드립니다.
