css 네이밍 container vs wrapper

container vs wrapper

  • container
    • 컨테이너
    • 여러가지를 모와 두는 곳
    • <container-A>
        <wrapper-A>
        <node-B>
        <node-C>
      </container-A>
  • wrapper (wrap)
    • 래퍼, 랩
    • 기능 단일 요소를 감쌈
    • <wrapper-A>
        <wrapper-A-header>
        <wrapper-A-content>
        <wrapper-A-footer>
      </wrapper-A>

물론 꼭 이에 맞지 않을 수도 있고, 다를 수도 있고, 하다 보면 섞일 수도 있음.
container를 container로 감쌀 수도 있는 것이고,
wrapper속에 container가 있을 수도 있음.





좀 더 상세


<container-A>
  <wrapper-A>
    <list>
<wrapper-item><item /></wrapper-item>
<wrapper-item><item /></wrapper-item>
<wrapper-item><item /></wrapper-item>
    </list>
  </wrapper-A>
  <wrapper-B>
    <list>
<wrapper-item><item /></wrapper-item>
<wrapper-item><item /></wrapper-item>
<wrapper-item><item /></wrapper-item>
    </list>
  </wrapper-B>
</container-A>

list를 wapper로 해도 될테고, item을 굳지 wapper 감쌀 필요도 없고...
list 부터보면 wrapper가 없어도 충분할 정도고...



여담

내가 쓸 땐 container 나 wrapper에는 될 수 있는 한 border나 background 를 넣지 않는다.
레이아웃 설정용으로 위치와 너비만 잡도록 한다.
댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
제목 작성자 날짜
공대여자
공대여자
mins01
공대여자