# [[CSS Container Queries]]

## 📌 Brief Summary
CSS Container Queries(컨테이너 쿼리)는 전체 뷰포트(브라우저 창)의 크기가 아닌, 컴포넌트가 속한 부모 컨테이너의 가용 공간을 기준으로 스타일과 레이아웃을 조정하는 강력한 CSS 기능입니다 [1-3]. 이는 좁은 사이드바에 위치한 카드와 넓은 메인 화면에 위치한 카드가 동일한 뷰포트 너비 환경에서도 각기 다른 형태를 가져야 하는 기존 미디어 쿼리(Media Queries)의 근본적인 한계를 해결해 줍니다 [1, 4]. 결과적으로 웹 디자인의 패러다임을 페이지 수준에서 컴포넌트 수준으로 전환시키며, 2026년 기준 모듈식 반응형 디자인 및 디자인 시스템 구축을 위한 필수적인 표준 기술로 자리 잡았습니다 [1, 5, 6].

## 📖 Core Content
* **작동 원리 및 문법 적용**
  컨테이너 쿼리를 사용하려면 부모 컨테이너에 `container-type: inline-size;` 속성을 선언하여 컨텍스트를 활성화해야 합니다 [4, 7]. 이후 `@container (min-width: 600px)`와 같은 문법을 작성하면, 전체 화면의 크기와 상관없이 해당 컨테이너가 지정된 임계값에 도달했을 때 자식 요소의 스타일(예: 1열에서 2열 레이아웃으로 변경)이 적용됩니다 [2, 7]. 

* **가변 타이포그래피(Fluid Typography)와의 결합**
  컨테이너 쿼리는 크기 기반 레이아웃뿐만 아니라 텍스트 크기 조정에도 활용됩니다. `cqw`나 `cqi`와 같은 전용 단위(컨테이너 인라인 너비의 1%를 의미)를 `clamp()` 함수 등과 함께 사용하면, 뷰포트가 아닌 컨테이너 크기에 반응하여 유동적으로 조절되는 가변 타이포그래피를 구현할 수 있습니다 [8-10].

* **모듈식 아키텍처 및 유지보수성 극대화**
  컨테이너 쿼리를 도입하면 개별 컴포넌트가 자신이 배치된 환경(Context)을 자체적으로 인지하고 구조를 조정하는 완전한 자립형(Self-contained) 모듈이 됩니다 [1, 4]. 따라서 동일한 컴포넌트를 애플리케이션의 어느 위치에 재사용하더라도 깨짐 없이 일관되게 동작하며, 이는 독립적인 UI 단위 구성을 지향하는 현대의 디자인 시스템(Design Systems) 철학과 완벽하게 부합합니다 [1, 4, 11, 12].

* **실무 활용 및 2026년 표준 관행**
  과거에는 실험적인 고급 기술이었으나 2024년 이후 모든 최신 브라우저에서 온전히 지원되며 프로덕션 환경에서 안전하게 사용할 수 있습니다 [1]. 2026년 현재, 이커머스의 다중 패널 레이아웃이나 공간 제약이 많은 SaaS 대시보드에서 데이터 테이블을 카드 스택으로 유연하게 변환하는 등, 자바스크립트에 의존하지 않고도 컴포넌트 수준의 복잡한 반응형 동작을 처리하는 기본 관행(Default practice)이 되었습니다 [5, 7, 13-15].

## 🔗 Knowledge Connections
- **Related Topics:** [[미디어 쿼리 (Media Queries)]], [[반응형 웹 디자인 (Responsive Web Design)]], [[디자인 시스템 (Design Systems)]], [[모듈식 컴포넌트 (Modular Components)]]
- **Projects/Contexts:** [[SaaS 대시보드 및 이커머스 레이아웃 구축]], [[가변 타이포그래피 (Fluid Typography)]]
- **Contradictions/Notes:** 컨테이너 쿼리는 미디어 쿼리를 완전히 대체하는 것이 아닙니다. 미디어 쿼리가 디바이스나 뷰포트 너비에 대응하는 전역적(페이지 수준) 레이아웃을 관리한다면, 컨테이너 쿼리는 "뷰포트 중심에서 컴포넌트 중심"으로 관점을 전환하여 개별 요소 내부의 지역적인 공간 적응을 전담함으로써 상호 보완적으로 작동합니다 [1, 3, 6].

---
*Last updated: 2026-04-26*