Container Queries란?

Container Queries란?

미디어 쿼리는 뷰포트 크기에 반응한다. Container Query는 해당 컴포넌트가 놓인 컨테이너 크기에 반응한다.

예

.card-wrapper {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card { display: flex; }
}

왜 중요한가

같은 컴포넌트가 메인 영역(폭 800px)과 사이드바(300px)에 동시에 놓일 때 각각 다른 레이아웃으로. 진정한 "컴포넌트 중심 반응형".

지원

모든 주요 브라우저(2023~). Tailwind 4에도 공식 지원.