CSS 컨테이너 쿼리: 컴포넌트 수준의 반응형 디자인

오랫동안 반응형 디자인은 미디어 쿼리로 뷰포트 너비에 반응하는 것을 의미했습니다. 컨테이너 쿼리는 이를 바꿉니다 — 컴포넌트가 이제 자신의 컨테이너 크기에 반응할 수 있습니다.

미디어 쿼리의 문제

3열 사이드바와 전체 너비 콘텐츠 영역 모두에서 사용되는 카드 컴포넌트를 상상해보세요. 미디어 쿼리로는 두 인스턴스가 동일한 뷰포트 너비에 반응하기 때문에 독립적으로 스타일을 지정하는 것이 불가능합니다.

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card { flex-direction: row; }
}

이제 카드 레이아웃은 뷰포트가 아닌 래퍼의 너비에 반응합니다. 좁은 사이드바에 있는 동일한 카드는 수직으로 유지되고, 넓은 콘텐츠 영역에 있는 동일한 카드는 수평으로 표시됩니다.

컨테이너 쿼리는 이제 모든 최신 브라우저(Chrome 105+, Firefox 110+, Safari 16+)에서 기본적으로 사용 가능합니다.

컨테이너 쿼리는 다음과 같은 경우에 이상적입니다: