출처
- https://css-tricks.com/best-way-implement-wrapper-css/
- https://css-tricks.com/best-way-implement-wrapper-css/
- https://uxdev.org/entry/CSS-%ED%81%B4%EB%9E%98%EC%8A%A4-%EB%84%A4%EC%9D%B4%EB%B0%8D-%EC%8B%9C-container-vs-wrapper-%EC%B0%A8%EC%9D%B4-%EA%B5%AC%EB%B6%84%ED%95%98%EA%B8%B0
왜 궁금했을까
(이미지 출처 : 네이버 메인)
얘는 왜 래퍼로 네이밍 하고
얘는 왜 컨테이너로 네이밍 하지 ? 정해진 네이밍 컨벤션 같은게 있나 ?
차이가 있다면, 래퍼는 어떻게 스타일링하고 컨테이너는 어떻게 스타일링하는게 보편적일까??
문뜩 궁금해져서 공부해보기로 했다 !
동일한 질문에 40만뷰나 달린 모습이다. 나만 궁금한건 아닌가 보다 :)
wrapper vs container
프로그래밍 언어에서, container라는 용어는 일반적으로 둘 이상의 요소를 포함할 수 있는 구조를 나타낸다. 반면에 wrapper는 단일 객체를 감싸서 더 많은 기능과 인터페이스를 제공하는 것이다.
-
wrapper에 대해 이야기할 때, 문서의 모든 나머지 HTML을 포함하는
<div>를 고려하는 것이 일반적이다. 보통의 경우, 주 내용을 중앙 정렬하고자 하는데,wrapper가 이들을 감싸는 방식으로 동작한다. 뿐만 아니라, Wrapper는sticky footer를 적용하는 데 사용된다. -
반면에
container는 일반적으로 다른 종류의 포함을 의도한다. 종종 여러 구성 요소의 동작이나 스타일을 구현하는 데 필요한 것인데, 이는 요소를 의미적으로나 시각적으로 그룹화하는 목적을 제공한다.
wrapper와 container라는 용어는 개발자와 그들의 의도에 따라 동일한 의미를 가질 수도 있다. 다른 관례도 있을 수 있으므로, 가장 중요한 것은 주로 우리가 가장 이해하기 쉬운 방법을 구현하는 것이다.
그러나 기억해야 할 것은 네이밍이 개발자 활동의 가장 기본적이고 중요한 부분 중 하나이다. 네이밍 규칙은 우리의 코드를 더 읽기 쉽고 예측 가능하게 만드므로, 신중하게 선택해야 한다.
여기 일반적인 페이지 wrapper의 예시이다:
/**
* 1. Centers the content. Yes, it's a bit opinionated.
* 2. See the "width vs max-width" section
* 3. See the "Additional Padding" section
*/
.wrapper {
margin-right: auto; /* 1 */
margin-left: auto; /* 1 */
max-width: 960px; /* 2 */
padding-right: 10px; /* 3 */
padding-left: 10px; /* 3 */
}width vs max-width
블록 요소의 너비를 설정하면, 해당 요소가 컨테이너의 가장자리로 확장되는 것을 방지할 수 있다. 따라서 wrapper 요소는 지정된 너비를 차지하는 것이 보편적이다. 문제는 브라우저 창이 래퍼의 특정 너비보다 좁을 때 발생한다. 그러면 거의 항상 원하지 않는 가로 스크롤바가 트리거되기 때문이다.
이런 상황에서는 대신 max-width를 사용하는 것이 좋다. 특히 좁은 브라우저 창에서 더 활약하는 방법이다. 작은 장치에서 사이트를 사용할 때 max-width를 설정하는 것은 중요하다.
반응형 웹을 만드는데 있어서는 width 보다 max-width 를 사용하는 것을 권장한다.
wrapper 의 max-width 를 설정했다면, padding 을 주는 것도 잊어선 안된다.
wrapper 요소에 적절한 패딩 값이 주어지지 않으면, 문서의 가독성이 떨어지고 답답해 보일 수 있다.
which html tag to use
wrapper는 시맨틱 태그도 아니고, 의미론적 의미가 없다. 단순히 페이지의 모든 시각적 요소와 콘텐츠를 보유하는 일반적인 상자일 뿐이다. 의미론적으로는 <div>가 최선의 선택인데, <div>도 의미론적 의미가 없으며 그저 일반적인 상자일 뿐이다.
<section> 요소를 사용하는건 어떨까? 그러나 W3C 사양에서는 다음과 같이 설명한다:
<section>요소는 일반적인 컨테이너 요소가 아닙니다. 스타일링 목적이나 스크립팅 편의를 위해서만 요소가 필요한 경우, 작성자들은 대신 div 요소를 사용하도록 권장됩니다. 일반적인 규칙은 섹션 요소가 콘텐츠의 명시적인 목록이 문서의 개요에 나열될 때만 적합하다는 것입니다.
<section>요소는 자체적인 의미를 가지고 있습니다. 콘텐츠의 테마적 그룹을 나타냅니다. 각 섹션의 주제는 일반적으로 섹션 요소의 자식으로 제목(h1-h6 요소)을 포함하여 식별되어야 합니다.
섹션의 예로는 장(chapter), 탭 대화 상자의 각 탭 페이지, 논문의 번호가 매겨진 섹션 등이 있습니다. 웹 사이트의 홈 페이지는 소개, 뉴스 항목 및 연락처 정보에 대한 섹션으로 분할될 수 있습니다.
처음에는 매우 명확하지 않을 수 있지만, <div>가 래퍼로 가장 알맞다..!
body vs additional wrapper
body {
margin-right: auto;
margin-left: auto;
max-width: 960px;
padding-right: 10px;
padding-left: 10px;
}다음과 같이 래퍼 요소를 만들지 않고, 바디 태그에 직접 스타일링을 할 수도 있다.
하지만, 추천되는 방식은 아니다. 유연성과 변경에 대한 저항력 때문이다. 프로젝트의 나중 단계에서 다음과 같은 시나리오가 발생하는 경우를 상상해보면 이해가 될 것이다.
- 문서의 끝(문서가 짧을 때 뷰포트의 맨 아래)에 푸터를 고정해야 할 때 :
가장 최신 방법을 사용하여 플렉스박스로 할 수 있더라도, 추가적인 래퍼<div>가 필요하다.- 전체 페이지의 배경색을 설정해야 할 때 :
보통<body>에 설정한 배경은 이미<html>요소에 설정된 것처럼 작동한다. 이는 단순히 CSS에서 발생하는 이상한 현상이다. 그러나<html>요소에 이미 배경이 있고, body에 다른 것을 설정하고 body에 어떤 종류의 간격 제약이 있다면 배경이 이상하게 될 것이다
결론적으로 CSS 래퍼를 구현하기 위해 추가 <div>를 가지는 것이 여전히 최선의 방법이라고 결론지을 수 있다. 이렇게 하면 나중에 사양 요구 사항이 변경되어도 나중에 래퍼를 추가하고 스타일을 옮겨야 하는 번거로움이 없고, 래퍼를 위해 div 하나를 추가하는 것은 큰 일이 아니기 때문이다.
