이렇게 생긴 웹의 레이아웃을 짠다고 하면, 우리는 크게 위의 사진영역 하나, 그리고 아래의 메인 컨테이너 영역 하나 이렇게 나누게 된다는 것은 어렵지 않게 예상해 볼 수 있다.
아래와 같이,
위 헤더영역
아래 컨텐츠영역으로 나눈 다음,
차례차례 윗영역을 작업하고, 아래 영역을 작업하는 것이다.
그런데 종찬님은 여기서 하나의 큰 레이아웃을 더 보셨다.
바로 윗영역이나 아래영역이나 공통적으로 존재하는, 중간 컨텐츠 영역이다.
종찬님은 이 컨텐츠들을 한번에 묶어 클래스명 .wrapper로 하나의 요소 안에 넣어주시곤 하는데,
이를 하는 이유는
- 직관적이고 명시적으로 우리가 작업할 공간이 정해진다.
- 공통된 위치를 정해줌으로써, 우리는 윗영역과 아랫영역의 레이아웃을 한번에 짤 수 있고 나중에 유지보수도 편해진다.
- wrapper는 고정값을 주고 그 안에있는 요소들을 유연하게 만듦으로써 wrapper의 고정값만 변경하면 안의 컨텐츠들이 자연스럽게 늘어나거나 줄어드는 반응형 웹에 최적이다! (나중에 미디어쿼리를 사용해서 width값만 조절해주면 그게바로 반응형!)
더 확실한 예시를 보자면,
(위즈코어 홈페이지 감사합니다. 흥하세요)
위의 예시처럼 각각 다른섹션임에도 불구하고 컨텐츠가 들어가는 하나의 영역이 고정되어있다는 것을 알 수 있다,
이를 하나의 wrapper로 주면, 하나하나 width를 정해주지 않아도 되서 좋고, 한번에 통일성을 유지할 수 있어서도 좋고, 나중에 변경사항이 있을때도 wrapper에서만 수정하면 되니 이 얼마나 직관적이고 편리한가?
레이아웃의 기초라고 생각하고, 앞으론 레이아웃을 짤 때 중간 컨텐츠 영역을 .wrapper로 감싸서 컨트롤하는 연습을 해야겠다.
'Front-End Developer > CSS' 카테고리의 다른 글
가지고 놀면서 배우는 position: absolute; (3) | 2022.04.25 |
---|---|
Sass 연습 - @function 와 @return (0) | 2022.04.25 |
헷갈리는 CSS Combinators - 형제선택자 편 (0) | 2022.04.21 |
background-image에 no-repeat이 안되요 - 초심자의 깜찍한 실수 (0) | 2022.04.19 |
항상 헷갈리는 text-align, 딱 두 가지만 기억하자 (4) | 2022.04.19 |