[CSS] 클래스 네이밍 시 container와 wrapper의 차이

 

🚀

<div class="container">
    ...
</div>

<div class="wrapper">
    ...
</div>

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

퍼블리싱 업무를 하면서 코드를 보니 문득 제가 container와 wrapper를 혼용해서 사용하고 있다는 사실을 알게 되었고, 해당 단어에 대해 규칙이나 관례가 있는지 한번 찾아보았습니다.

 

2010년 스택오버플로우에 container vs wrapper 관련 토론 게시글이 있어서 공유드립니다.

https://stackoverflow.com/questions/4059163/css-language-speak-container-vs-wrapper

CSS Language Speak: Container vs Wrapper?

스택 오버플로우의 내용을 요약하자면 

 

📦 container(컨테이너)

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

✉️ wrapper(래퍼)

단일 개체를 감싸는 것

 

사탕을 상자에 담는다고 가정했을 때 개별 사탕들을 포장지(wrapper)에 포장한 후 상자(container)에 넣습니다.

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

<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>

 

🧑‍🤝‍🧑

하지만 사람들마다 wrapper나 container를 사용하는 방법과 보는 관점, 취향이 다르므로 어느 것이 맞고 어느 것이 틀리다고 단정 지을 수는 없습니다. 저 또한 다른 웹페이지들을 분석했을 때 페이지 html 최상단에 전체를 감싸는 것을 wrapper로 되어 있는 것을 많이 봐왔으며 사람에 따라서 "하나의 페이지를 감싸는 wrapper가 맞다", "아니다 페이지 내의 구성요소들을 담고 있으므로 container가 맞다" 등등 의견의 서로 다를 수 도 있기 때문입니다. 따라서 협업을 할 때 위의 내용을 토대로 팀원 간의 충분한 논의, 협의를 통해서 클래스 네이밍을 하시면 좋을 것 같습니다.