[CSS]container와 wrapper의 차이

STUDY/HTML, CSS

능히버섯와나 2023. 6. 6. 20:37

✒︎ 인강을 통해 만들어 낸 결과물에 css를 적용하던 도중, 요소를 정렬하는 과정에서 애를 먹고 있었다.

인터넷 검색을 통해 알아낸 정보들에서는 공통적으로 <div>를 이용하여 요소들을 한 덩어리로 묶어준 뒤,

container 또는 wrapper(wrap)라는 classname을 부여해 주었고, 나도 똑같이 적용시켜보려고 했다.

그러나 같은 용도에서 사용되는 것이 이름은 제각각이라, container 또는 wrapper 중 뭘 사용해야 하는지 의문이 들었다.

그래서 container와 wrapper의 차이점을 알아보았는데, 그 내용들을 요약하자면 이렇다.

현재로써 container와 wrapper의 차이가 명확하게 정의되어 있다고 어려우나, 크게 두 가지 부류로 나뉘고 있었다.

1. 둘다 같은 의미이다.
2. container는 두 개 이상의 요소를 감싸줄 때, wrapper는 하나의 요소를 감싸줄 때 사용한다.

둘 중 후자쪽을 더 많이 볼 수 있었는데, 프로그래밍 언어에 있어 container는 두 개 이상의 요소를 포함한 구조를 뜻하고,

wrapper는 각 요소들에게 별도의 인터페이스를 가지도록 하는 것으로 유연성을 부여하여 더 많은 기능을 제공하게 하는데

의미를 두기 때문이라는게 그들의 주장이다. container가 과일바구니 라면 wrapper는 랩에 싸인 과일들이라는 느낌?

나 또한 이에 대해 조사해보면서 후자 쪽이 맞다는 생각이 들었는데, 개발자에게는 항상 네이밍의 중요성이 강조되고 있고

코드가 길어질 수록 container와 wrapper 구분에 대한 필요성이 절실할 것이기 때문에 나름의 규칙을 가지고 사용하는게

좋을 것 같다.

✓ 참고 페이지

‣ container 와 wrapper의 차이점