Wrapper

게시 2023/04/14 업데이트 2024/08/10

By Psmin

1 m읽는 시간

Wrapper나 Container는 보통 그룹이 다른 요소 안에 감싸져있거나 포함되어 있는 것을 말합니다.

위 그림에서 Wrapper는 aside와 main을 감싸고 있습니다.

  
<div class="Wrapper">
  <aside></aside>
  <main></main>
</div>

Wrapper가 필요한 이유

wrapper로 컨텐츠들을 감싸주어 너비를 조정하거나 간격을 조절하는 등의 작업을 한번에 할 수 있습니다.

이는 컨텐츠의 가독성을 높혀줍니다.

너비 추가하기
Wrapper에 width, max-width, min-width 값을 주어 너비를 지정할 수 있습니다.
정렬하기
Wrapper에 margin 값을 주어 컨텐츠들을 정렬할 수 있습니다.
margin : 0 auto는 Wrapper를 중앙으로 자동정렬해줍니다.
좌우 패딩
양쪽에 padding 값을 주어 공간이 충분하지 않을 때 래퍼가 뷰포트 가장자리에 달라붙는 것을 방지합니다.
padding: 16px은 width : calc(100% - 32px)로 대체할 수도 있습니다.