[CSS] Container 쿼리(특정 요소 크기에 따라 스타일링하기)

⭐ 이번 시간에는 viewport가 아닌 특정 요소의 크기에 따라 스타일링을 할 수 있는 container 쿼리에 대해 알아보았다! 포스팅 시점에는 호환 가능한 브라우저가 제한적이며 완성된 것이 아니므로 사용시에는 caniuse와 MDN 문서, CSS 초안을 체크하자 🙂 (만약 쿼리를 사용하고 싶다면, polyfill을 사용하자)

1. container query?

1) container 쿼리란?

• container 쿼리는 viewport기준이 아닌, 특정 요소의 크기에 따라 반응적으로 스타일링이 가능하다.
• container 쿼리를 사용하기 위해선 container-name, container-type 지정이 필요하다.

2) container 쿼리 사용하기

(1) container-type

• container-type을 사용해 특정 요소를 쿼리 컨테이너로 지정할 수 있다.
• 자식요소는 쿼리 컨테이너의 사이즈에 따라 반응적으로 스타일링할 수 있다.
• container-type에는 size, inline-size 등이 존재한다.

(2) container-name

• 쿼리 컨테이너의 이름을 지정한다.
• 지정된 이름은 @container container-name 형식으로 쓰인다.

.parent {
  container-type: inline-size;
  container-name: parent;       /* 쿼리 컨테이너 이름 지정 */
}

@container parent (min-width: 300px) { /* 쿼리 컨테이너 이름 사용 */
  .child {
   /* styling */
  }
}

(3) 예시 보기

• 아래 예시에서는 컨테이너 요소의 너비에 따라 배경색이 변한다.

See the Pen Untitled by KumJungMin (@kumjungmin) on CodePen.

• 두 번째는 요소의 너비에 따라 컨텐츠의 배열이 바뀌는 예시이다.

See the Pen CSS Container Queries Demo (+ polyfill) by KumJungMin (@kumjungmin) on CodePen.

앞서 설명했듯이 container query는 (포스팅시점) 브라우저 제한, 기능 미완성 단계이므로 만약 요소의 크기가 변할 때 내부 컨텐츠의 배열을 바꾸고 싶다면 display: grid를 대체로 쓸 수도 있다!