max-width 를 넘어 전체 100% 를 사용하는 레이어를 만들려면?

max-width 를 넘어 전체 100% 를 사용하는 레이어를 만들려면?

QA

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 속성도 추가해줘야 합니다.

이런거요?

- https://phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=290395

답변을 작성하시기 전에 로그인 해주세요.
전체 5
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT