미디어 쿼리(@media)는 브라우저 전체 화면(Viewport) 크기에 따라 디자인을 변경합니다. 하지만 컴포넌트 기반 개발(React, Vue 등)에서는 카드가 좁은 사이드바에 들어갈지, 넓은 메인 영역에 들어갈지 예측하기 어렵습니다.

컨테이너 쿼리(@container)는 뷰포트가 아닌 자신을 감싸고 있는 부모 컨테이너의 크기에 반응합니다. 부모 요소에 container-type: inline-size;를 선언하고, 자식 요소에서 @container (max-width: 400px)와 같이 작성하면, 배치되는 위치에 따라 컴포넌트가 스스로 모습을 바꾸는 진정한 모듈형 반응형 웹을 구축할 수 있습니다.