[CSS] Container 와 Wrapper 의 차이점

페이지를 제작하다 보면 공통 요소들이나 단일 요소를 담거나 감쌀 때 container나 wrapper를 많이 사용하게 됩니다. container와 wrapper 모두 일반적으로 '어떠한 요소들을 포함한다'는 의미를 지니고 있으며 클래스 네임으로 많이 사용되는 단어입니다.

CSS 코드를 작성하면서 제가 작성한 코드를 확인해보니 두 용어를 혼용하여 사용하고 있었다는 점을 알게 되었습니다. 해당 이슈에 대해 향후 코드를 작성하거나 리뷰할 때 참고할 만한 Coding Convention이 있을까 궁금하여 자료 조사를 시작하였습니다. 

 

클래스 네이밍을 container로 정할까, wrapper로 정할까

container와 wrapper 모두 무언가를 포함한다는 점에서 같은 의미의 단어로 사용할 수 있습니다. Reader와 Writer 모두 해당 내용을 받아들이는 데에 큰 문제가 없기 때문에 container와 wrapper를 혼용하여 사용하더라도 무방하지만, Coding Convention의 측면에서 container와 wrapper의 차이를 구분 지을 수 있습니다. 

 

Container vs Wrapper 

프로그래밍적 관점에서 container는 하나 이상의 요소를 포괄하는 개체를 지칭하고 wrapper는 하나의 개체만을 포함하는 것을 뜻합니다.

 

이해를 돕기 위해 비유를 통해 자세히 알아볼까요 ?

수제 사탕을 선물 상자에 포장하여 판매하는 가게가 있습니다. 점원은 개별 사탕들을 포장지(wrapper)에 포장한 후 상자(container)에 넣습니다. 이 때 개별 사탕들을 담는 포장지는 Wrapper로 볼 수 있고, 포장지 뿐만 아니라 편지 등을 담는 상자를 Container로 볼 수 있습니다.

 

해당 예시를 코드로 작성하면 다음과 같습니다. 

<ul class="items-container">
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
</ul>

 

위의 예시를 통해 알게 된 점을 요약하면 다음과 같습니다.

---

📦 container(컨테이너)

하나 이상의 요소를 포함할 수 있는 구조

 

📁 wrapper(래퍼)

단일 개체를 감싸는 것

 

---

마치며

지금까지 CSS의 클래스 네이밍 컨벤션을 바탕으로 Container와 Wrapper를 사용하는 상황에 대해 예시와 함께 알아보았습니다. 

 

하지만 코드를 작성하는 사람이 일관된 기준을 준수한다면 위의 논의와 무관하게 container와 wrapper 중 편한 네이밍으로 코드를 작성하여도 상관없습니다. 저 또한 다른 사람들이 작성한 코드를 분석할 때 wrapper로 전체 요소를 감싸는 경우도 많이 보았으며 크게 이질감을 느끼진 않았습니다. 하지만 협업의 관점에선 CSS 코드가 일관된 기준을 준수하여 작성되는 것이 중요합니다. 이러한 경우엔 팀원 간의 충분한 논의, 협의를 통해서 클래스 네이밍 컨벤션을 결정하면 좋을 것 같습니다.