HTML/CSS 네이밍 시 container와 wrapper의 차이

HTML/CSS 네이밍 시 container와 wrapper의 차이

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

모달 컴포넌트를 만들다가 문득 container와 wrapper의 차이가 궁금해졌다.

퍼블리싱할 때 별 생각 없이 혼용해서 사용하던 단어였는데 규칙이나 관례가 있는지 찾아봤는데

stackoverflow의 한 답변이 가장 잘 정리되어 공유한다.

결론

둘다 레이아웃을 위한 div지만

container는 주로 여러 개의 요소를 감싸는 div이고,

wrapper는 단일 요소의 레이아웃을 위한 div를 말한다.

예를 들면 아래와 같다.

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