Container Query는 Media Query와 어떤 차이가 있나요?

Media Query는 viewport나 기기 환경을 기준으로 스타일을 바꾸고, Container Query는 컴포넌트가 놓인 컨테이너의 크기나 스타일을 기준으로 스타일을 바꿉니다. 컴포넌트 재사용이 많은 UI에서는 화면 전체보다 부모 영역의 폭이 더 중요한 경우가 많기 때문에 Container Query가 강력합니다.

핵심 개념

• Media Query는 페이지 레이아웃의 큰 분기, Container Query는 컴포넌트 내부 레이아웃 분기에 적합합니다.
• Container Query를 쓰려면 기준이 되는 요소에 container-type 또는 container를 지정해야 합니다.
• 같은 카드 컴포넌트라도 사이드바에서는 세로형, 메인 영역에서는 가로형으로 자연스럽게 바꿀 수 있습니다.

동작 방식 또는 판단 기준

이 주제를 이해할 때는 다음 순서로 보면 실무 적용이 쉬워집니다.

1. 무엇을 해결하려는가: 성능, 표현력, 안정성, 접근성 중 어떤 문제를 줄이려는지 확인합니다.
2. 전제 조건은 무엇인가: 정렬 여부, 브라우저 지원, 네트워크 특성, 동시성 조건처럼 성립해야 하는 조건을 점검합니다.
3. 비용은 어디서 발생하는가: 시간 복잡도, 메모리, 캐시, 재시도, 렌더링 비용처럼 병목 지점을 나눠 봅니다.
4. 실패 시 어떤 문제가 생기는가: 잘못 적용했을 때의 버그나 운영 리스크를 함께 고려합니다.

실제 예시

.card-shell {
  container: product-card / inline-size;
}

.product-card {
  display: grid;
  gap: 12px;
}

@container product-card (min-width: 420px) {
  .product-card {
    grid-template-columns: 160px 1fr;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .page-layout {
    grid-template-columns: 280px 1fr;
  }
}

실무에서 주의할 점

• 컨테이너 자기 자신의 스타일을 자기 크기 조건으로 직접 바꾸는 순환 의존은 피해야 합니다.
• 브라우저 지원 범위를 확인하고, 핵심 기능이 깨지지 않는 기본 스타일을 먼저 작성해야 합니다.
• Container Query가 전체 레이아웃 설계까지 대체하는 것은 아닙니다. 페이지 단위 분기는 여전히 Media Query가 자연스럽습니다.

실무 적용 가이드

• 모바일/기본 스타일을 먼저 작성하고 넓은 컨테이너에서 확장합니다.
• 재사용 컴포넌트의 breakpoint는 viewport가 아니라 실제 컴포넌트 최소/최대 폭에서 정합니다.
• 디자인 QA에서 같은 컴포넌트를 서로 다른 슬롯에 넣어 테스트합니다.

함께 연결해서 보면 좋은 키워드

CSS, Container Query, Media Query, Responsive Design

정리

Media Query는 viewport나 기기 환경을 기준으로 스타일을 바꾸고, Container Query는 컴포넌트가 놓인 컨테이너의 크기나 스타일을 기준으로 스타일을 바꿉니다입니다. 다만 개념 자체보다 중요한 것은 적용 조건과 한계를 함께 이해하는 것입니다. 작은 예제에서는 단순해 보여도 실제 서비스에서는 성능, 보안, 유지보수성, 접근성 요구사항이 함께 얽히므로, 문제의 성격을 먼저 파악한 뒤 적절한 도구로 선택하는 것이 좋습니다.