📦
CSS Container Queries
부모 컨테이너 크기에 반응하는 컴포넌트
미디어 쿼리는 뷰포트 크기에만 반응하기 때문에, 같은 컴포넌트가 사이드바와 메인 영역에서 다르게 보여야 할 때 한계가 있었습니다. Container Queries는 container-type을 선언한 부모의 크기를 기준으로 @container 규칙을 적용합니다.
이를 통해 재사용 가능한 컴포넌트가 배치된 위치에 관계없이 올바르게 반응하는 진정한 컴포넌트 기반 디자인이 가능해집니다.
적용 방법
1
부모 요소에 container-type: inline-size를 선언한다
2
필요에 따라 container-name으로 이름을 부여한다
3
@container 규칙으로 컨테이너 크기 기반 스타일을 작성한다
4
기존 미디어 쿼리 기반 반응형 코드와 비교하여 점진적으로 전환한다
장점
- ✓ 컴포넌트가 배치 위치에 독립적으로 반응한다
- ✓ 미디어 쿼리 의존도를 줄여 코드가 간결해진다
단점
- ✗ container-type이 새로운 포맷팅 컨텍스트를 생성하여 레이아웃에 영향을 줄 수 있다
- ✗ 중첩된 컨테이너 쿼리는 디버깅이 어려울 수 있다
사용 사례
대시보드 위젯이 배치 영역에 따라 자동 적응
디자인 시스템의 컴포넌트를 다양한 컨텍스트에서 재사용