CSS 컨테이너 쿼리(Container Queries)는 기존의 미디어 쿼리(Media Queries)와 다르게 부모 요소의 크기에 따라 스타일을 적용할 수 있는 최신 CSS 기능입니다. 기존 반응형 디자인 기법이 화면 전체 크기를 기준으로 동작하는 반면, 컨테이너쿼리는 개별 컴포넌트 단위에서 스타일을 조정할 수 있도록 해 더욱 유연한 디자인을 가능하게 합니다. 이 글에서는 미디어 쿼리와 컨테이너쿼리의 차이점, 실전 적용법, 그리고 현재 지원되는 브라우저 현황을 살펴봅니다.
1. 기존 미디어 쿼리와 컨테이너 쿼리의 차이점
📌 기존 미디어 쿼리의 한계
미디어 쿼리는 @media 규칙을 사용하여 화면(뷰포트)의 크기에 따라 스타일을 변경하는 방식입니다. 하지만 문제는 특정 컴포넌트의 크기에 따라 반응형 스타일을 조정하는 것이 어렵다는 점입니다.
예를 들어, 동일한 card 컴포넌트를 사이드바와 본문 영역에서 사용할 때, 부모 컨테이너의 크기가 다르다면 각 컨텍스트에 맞는 스타일을 적용하는 것이 힘들었습니다.
@media (max-width: 600px) {
.card {
flex-direction: column;
}
}
위와 같은 코드에서는 뷰포트 크기가 600px 이하일 때만 .card의 스타일이 변경됩니다. 하지만 .card가 사이드바 안에 있을 경우에도 적절한 크기를 유지하려면 추가적인 클래스나 조작이 필요했습니다.
📌 컨테이너 쿼리의 등장
컨테이너쿼리는 부모 요소(컨테이너)의 크기를 기준으로 스타일을 적용할 수 있어 더 세밀한 반응형 디자인을 가능하게 합니다. 즉, 컴포넌트 중심의 스타일링이 가능해지며, 독립적인 디자인 시스템을 구축하는 데 유리합니다.
@container (max-width: 400px) {
.card {
flex-direction: column;
}
}
위 코드에서는 .card의 부모 컨테이너 크기가 400px 이하일 때 스타일이 적용됩니다. 즉, 화면 크기와 무관하게 .card를 감싸는 컨테이너의 크기에 따라 반응형 스타일이 적용되는 것입니다.
2. CSS 컨테이너 쿼리 실전 적용법
📌 컨테이너 속성 정의
컨테이너쿼리를 사용하려면 먼저 container-type을 정의해야 합니다.
.card-wrapper {
container-type: inline-size;
}
inline-size→ 가로(width) 기준으로 컨테이너 크기를 측정size→ 가로와 세로(width & height) 기준으로 컨테이너 크기 측정
이제 .card-wrapper 내부의 .card 요소는 부모 크기에 따라 스타일을 변경할 수 있습니다.
📌 컨테이너 쿼리 활용 예제
.card-wrapper {
container-type: inline-size;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.card {
display: flex;
gap: 20px;
}
@container (max-width: 600px) {
.card {
flex-direction: column;
}
}
📌 설명:
.card-wrapper를 컨테이너로 지정하고,- 내부
.card가 600px 이하로 줄어들면 flex-direction을 column으로 변경
이제 .card-wrapper의 크기가 600px 이하가 되면 .card 내부 요소가 세로 배치됩니다.
3. 지원 브라우저 현황
컨테이너 쿼리는 현재 최신 브라우저에서 지원이 점진적으로 확대되고 있는 기능입니다.
| 브라우저 | 지원 여부 |
|---|---|
| Chrome 105+ | ✅ 지원 |
| Edge 105+ | ✅ 지원 |
| Safari 16+ | ✅ 지원 |
| Firefox | 🚧 실험적 지원 (기본 비활성) |
| Internet Explorer | ❌ 미지원 |
💡 실험적 기능이므로 일부 구버전 브라우저에서는 @container를 인식하지 못할 수 있습니다.
🔹 기존 미디어 쿼리는 뷰포트 기준으로 동작하여 컴포넌트 단위 스타일 조정이 어려웠다.
🔹 컨테이너 쿼리는 개별 컨테이너의 크기에 따라 스타일을 변경할 수 있어 더 유연한 디자인이 가능하다.
🔹 실제 사용 시 container-type을 먼저 지정한 후 @container 규칙을 사용해야 한다.
🔹 현재 대부분의 최신 브라우저에서 지원하며, Firefox는 실험적으로 지원 중이다.
컨테이너쿼리를 활용하면 컴포넌트 단위에서 더 정밀한 반응형 스타일을 적용할 수 있습니다. 앞으로 웹 퍼블리싱에서 미디어 쿼리와 함께 컨테이너쿼리를 활용하면 더욱 유연한 디자인을 구현할 수 있을 것입니다. 🚀
