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

동물원

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2020-08-06 (목) 18:18:59 4,681

반응형 사이트를 만들면서, 최대사이즈를 1200px로 설정하고 작업중인데요.

중간중간에 max-width 를 넘어 가로폭 전체 100% 를 사용하는 영역을 만들고 싶은데 width:100%

만으로는 적용이 안되는데, 어떻게 하면 될까요?

그누보드5 가로폭100% max-width 반응형

답변 3개 / 댓글 3개

채택된 답변

+20 포인트

DSLOVE

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2020-08-06 (목) 19:00:54

이런 경우는 wrap이란 클래스를 하나 만들고,

필요에 의해 wrap 을 씌우면서 작업해 나가야 합니다.

.wrap {max-width:1200px; margin:0 auto;}

1번섹션은 1200px 에 다 들어간다? 그러면은

다음 2번섹션은 100% 로 들어가는 배경이 들어간다?

그럼

</div>

이런식의 구성을 짜야합니다.

답변에 대한 댓글 2개

동물원

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2020-08-06 (목) 19:26:18

역시 그 방법 밖에 없는 거군요. 우선순위나 절대값등을 부여해서 max-width 영역안에서도 해당 부분을 적용받지 않고, 전체폭을 쓸 수 있는 방법이 혹시 있을까 궁금했는데, 다른 방법이 없나 보네요. 답변 주신 내용대로 적용해 봐야 겠네요. 정말 감사합니다.^^

DSLOVE

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2020-08-07 (금) 11:17:37

이미지 배경 100% 깔리는건 고정폭을 잡아둔 상태에서는 안되더라구요. 저도 작업해두고, 업체에서 갑작스런 이미지를 100% 깔아달라던가..ㅠㅠ 이런게 워낙 많았어서 연구를 많이 해봤는데 못찾았네요 ㅠㅠ

하지만!!
고정폭 잡아둔 상태에서 단순히 양옆을 배경색으로 꽉차게하는건 가능합니다.
부모요소에 overflow:hidden 과 가상요소로 before, after 를 사용하면 가능해요!