빔캠프 종찬님 특강 - .wrapper는 어디에 쓰는고?

이렇게 생긴 웹의 레이아웃을 짠다고 하면, 우리는 크게 위의 사진영역 하나, 그리고 아래의 메인 컨테이너 영역 하나 이렇게 나누게 된다는 것은 어렵지 않게 예상해 볼 수 있다. 

 

 

아래와 같이,

 

위 헤더영역

아래 컨텐츠영역으로 나눈 다음,

 

차례차례 윗영역을 작업하고, 아래 영역을 작업하는 것이다. 

 

 

그런데 종찬님은 여기서 하나의 큰 레이아웃을 더 보셨다. 

 

바로 윗영역이나 아래영역이나 공통적으로 존재하는, 중간 컨텐츠 영역이다.

종찬님은 이 컨텐츠들을 한번에 묶어 클래스명 .wrapper로 하나의 요소 안에 넣어주시곤 하는데,

 

 

이를 하는 이유는 

 

1. 직관적이고 명시적으로 우리가 작업할 공간이 정해진다.
2. 공통된 위치를 정해줌으로써, 우리는 윗영역과 아랫영역의 레이아웃을 한번에 짤 수 있고 나중에 유지보수도 편해진다.
3. wrapper는 고정값을 주고 그 안에있는 요소들을 유연하게 만듦으로써 wrapper의 고정값만 변경하면 안의 컨텐츠들이 자연스럽게 늘어나거나 줄어드는 반응형 웹에 최적이다! (나중에 미디어쿼리를 사용해서 width값만 조절해주면 그게바로 반응형!)

 

 

더 확실한 예시를 보자면, 

 

(위즈코어 홈페이지 감사합니다. 흥하세요)

 

위의 예시처럼 각각 다른섹션임에도 불구하고 컨텐츠가 들어가는 하나의 영역이 고정되어있다는 것을 알 수 있다,

 

이를 하나의 wrapper로 주면, 하나하나 width를 정해주지 않아도 되서 좋고, 한번에 통일성을 유지할 수 있어서도 좋고, 나중에 변경사항이 있을때도 wrapper에서만 수정하면 되니 이 얼마나 직관적이고 편리한가?

 

레이아웃의 기초라고 생각하고, 앞으론 레이아웃을 짤 때 중간 컨텐츠 영역을 .wrapper로 감싸서 컨트롤하는 연습을 해야겠다.