CSS Container Queries — 반응형 디자인의 새로운 패러다임

미디어 쿼리의 한계

미디어 쿼리는 뷰포트 크기를 기준으로 합니다. 하지만 컴포넌트가 사이드바에 들어갈 때와 메인 콘텐츠에 들어갈 때 다르게 보여야 하는 경우, 뷰포트 크기는 도움이 되지 않습니다.

Container Queries

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

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

@container card (max-width: 399px) {
  .card { display: block; }
}