Container Query는 Media Query와 어떻게 다른가요?

Media Query는 주로 뷰포트 크기를 기준으로 스타일을 바꾸고, Container Query는 컴포넌트가 속한 컨테이너의 크기를 기준으로 스타일을 바꿉니다. 재사용 컴포넌트가 사이드바, 카드 그리드, 본문 영역 등 다양한 폭에 놓일 때 더 유연합니다.

핵심 개념

핵심 기준은 화면 전체가 아니라 컴포넌트 주변 공간에 반응입니다. 이 개념은 단순히 용어를 외우는 것보다, 어떤 문제를 줄이기 위해 등장했는지와 실제 코드나 운영 환경에서 어떤 trade-off를 만드는지 함께 이해하는 것이 중요합니다.

뷰포트 크기와 컴포넌트가 놓인 컨테이너 크기 중 무엇을 기준으로 삼는지 비교해보세요.

동작 흐름

1. 먼저 문제가 발생하는 조건과 입력을 확인합니다.
2. 관련된 런타임, 브라우저, 서버, 데이터 저장소의 책임을 나눠 봅니다.
3. 가장 작은 범위에서 안전한 해결책을 적용합니다.
4. 로그, 테스트, 모니터링으로 실제로 문제가 줄었는지 확인합니다.

실제 예시

상품 카드가 넓은 컨테이너에서는 이미지와 설명을 가로 배치하고, 좁은 컨테이너에서는 세로 배치하도록 만들 수 있습니다.

실무에서 적용하는 방법

부모 요소에 container-type을 지정하고, 컴포넌트 내부에서 @container 규칙으로 레이아웃을 조정합니다.

실무에서 주의할 점

• 컨테이너로 지정한 요소와 실제 반응해야 하는 요소의 관계를 잘못 잡으면 기대대로 동작하지 않습니다.
• 전역 페이지 레이아웃 변화에는 여전히 Media Query가 더 단순할 수 있습니다.
• 개념을 적용하기 전에 현재 시스템의 규모, 병목, 장애 영향도를 함께 확인해야 합니다.
• 팀 규칙이나 프레임워크 기본 동작과 충돌하지 않는지도 점검하는 것이 좋습니다.

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

CSS, 반응형, ContainerQuery, UI

면접에서 짚으면 좋은 포인트

• 정의만 말하기보다 어떤 문제를 줄이기 위한 개념인지 먼저 설명하면 좋습니다.
• 장점과 함께 비용, 한계, 적용하지 않아도 되는 상황을 같이 말하면 실무 이해도가 드러납니다.

정리

한 줄로 정리하면, Media Query는 주로 뷰포트 크기를 기준으로 스타일을 바꾸고, Container Query는 컴포넌트가 속한 컨테이너의 크기를 기준으로 스타일을 바꿉니다. 재사용 컴포넌트가 사이드바, 카드 그리드, 본문 영역 등 다양한 폭에 놓일 때 더 유연합니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.