CSS 클래스 네이밍 시 container vs wrapper 차이 구분하기

콘테이너로 정할까, 랩퍼로 정할까...

container와 wrapper 모두 일반적으로 엘레먼트를 포괄하는 요소로서의 의미를 지니고, 클래스 이름으로 많이 사용되는 단어들입니다. 무언가를 포함한단는 데에서 같은 의미의 단어로 사용할 수 있고, 작성자와 해독자 입장에서 구분 없이 해당 내용을 받아들이는 데에 큰 문제가 없을 것입니다. 

 

다만 보다 엄격하게 두 단어를 구분하여 사용한다고 하면 다음과 같은 내용을 참고하여 의미 구분을 할 수 있을 것으로 보입니다. 본 내용은 스택오버플로우에서 2010년 논의된 'CSS Language Speak: Container vs Wrapper?'의 내용을 기반으로 작성되었습니다. 해당 논의 내용을 보면, 기보적으로 차이를 두지 않고서 사용해도 무방하지만, 엄격하게 구분을 한다고 하면 프로그래밍 관행 상으로 container와 wrapper의 원론적 기능상 의미에 따라 차이를 파악하는 것이 가능하다고 합니다.

원론적 의미 구분 : container는 하나 이상, wrapper는 하나의 요소를 포함

• 프로그래밍 세계에서 일반적으로 container는 하나 이상의 요소를 포괄하는 개체를 지칭하는 의미를 지니며, wrapper는 하나의 개체만을 포함하는 것을 뜻합니다. 
• 본 답변은 상기 스택오버플로우 스레드와 유사한 내용을 지니는 'Difference between container and wrapper'의 답변내용을 기반으로 합니다.
• 더 자세한 의미론적 구분법을 파악하기 위해서는 소프트웨어 공학 측면에서 'Adapter pattern'의 내용을 참고할 수 있다고 합니다. DOM, XML 등에 적용되는 패턴으로 wrapper의 특징을 이해하는 데에 도움을 줄 수 있다고 합니다. 하나의 요소를 다른 데에 적용할 수 있도록 하는 adapter 역할을 하는 것이 wrapper라고 기술되어 있습니다.
• 위 의미 구분에 따른 DOM 작성 예시는 다음과 같습니다.

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

참고자료

• 스택오버플로우, CSS Language Speak: Container vs Wrapper?
• 스택오버플로우, Difference between container and wrapper
• 위키피디아, Adapter pattern