[TIL] CSS wrapper 추가 학습

[CSS] 레이아웃 Wrapper 만들기

1. 너비 추가하기

• wrapper를 구현할 때 가장 먼저 결정할 것은 너비이다.
• 보통 1000px - 1300px 사이 값이 일반적이다.

tip

화면 크기가 1170px 미만일 경우 가로 스크롤이 발생하므로, max-width로 최대 너비만 사용할 수도 있다.

 .wrapper { max-width : 1170px;}

2. 중앙 정렬하기

'margin-left'와 'margin-right'가 모두 'auto'이면 사용되는 값은 동일합니다.
컨테이닝 블록의 가장자리를 기준으로 요소를 가로로 중앙에 배치합니다.
상업기술-CSS사양 재인용

.wrapper {
  max-width: 1170px;
  margin: 0 auto;
}

3. 좌우 패딩

"뷰포트 크기" 가 '래퍼의 최대 너비'보다 작으면,
래퍼의 가장자리가 뷰포트에 고정된다.

wrapper에 좌우 패딩을 추가하면 얻는 이점은,
wrapper와 뷰포트 가장 자리에 달라붙는 현상을 방지해 줄 수 있다.

.wrapper {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

4. Display type

관심사 분리에 위배 되므로 권장하지 않는 방법이다.

wrapper는 기본적으로 블록 수준 요소이다.

문제 발생!

이때, wrapper 내부의 콘텐츠를 그리드에 배치해야 할 때,
어떻게 디스플레이 타입을 그리드로 변경할 수 있을까?

방법(권장 X)

그리드 래퍼가 필요한 경우 래퍼 내부에 다른 div 를 추가하면 된다.

<div class="wrapper">
  <div class="featured-news">
    <!-- Elements that needs to be placed in a grid -->
  </div>
</div>

.featured-news {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 16px;
}

5. 전체 화면 섹션 내부의 wrapper

뷰포트 내부 모든 컨텐츠의 너비는 wrapper의 너비에 의해 제한 한다.

관심사 분리를 적용하기 위해, 뷰포트와 내부 컨텐츠를 분리하여, 너비를 분리 시켜야 한다.
이때, 내부 컨텐츠를 각각 wrapper 로 관리하여, 배경 색이나, 이미지가 뷰포트 전체 너비를 차지하지 않도록 방지할 수 있다.