컨테이너 쿼리 (Container Queries)
미디어 쿼리(@media)는 브라우저 전체 화면(Viewport) 크기에 따라 디자인을 변경합니다. 하지만 컴포넌트 기반 개발(React, Vue 등)에서는 카드가 좁은 사이드바에 들어갈지, 넓은 메인 영역에 들어갈지 예측하기 어렵습니다.
컨테이너 쿼리(@container)는 뷰포트가 아닌 자신을 감싸고 있는 부모 컨테이너의 크기에 반응합니다. 부모 요소에 container-type: inline-size;를 선언하고, 자식 요소에서 @container (max-width: 400px)와 같이 작성하면, 배치되는 위치에 따라 컴포넌트가 스스로 모습을 바꾸는 진정한 모듈형 반응형 웹을 구축할 수 있습니다.
<div class="layout-wrapper" style="width: 250px;">
<!-- 부모 크기가 250px이므로 세로 배치 형태가 됩니다. -->
<p style="color:#94a3b8; font-size:12px;">오른쪽 끝을 드래그해서 늘려보세요!</p>
<div class="user-card">
<div class="avatar"></div>
<div class="info">
<h4>John Doe</h4>
<p>Frontend Developer</p>
</div>
</div>
</div>