Contents
see List개요
CSS Container Queries는 미디어 쿼리가 뷰포트 기준으로만 반응하던 한계를 깨고, 부모 컨테이너의 크기에 따라 자식 요소의 스타일을 변경할 수 있는 혁신적인 CSS 기능입니다. 2023년부터 주요 브라우저에서 지원이 시작되었으며, 2025년 현재 모든 모던 브라우저에서 안정적으로 사용할 수 있습니다.
컴포넌트 기반 개발이 대세인 현재, Container Queries는 진정한 의미의 재사용 가능한 컴포넌트를 만드는 핵심 도구입니다. 뷰포트가 아닌 컴포넌트가 배치된 영역의 크기에 따라 레이아웃을 조정하므로, 같은 컴포넌트를 사이드바와 메인 영역에서 각각 다르게 표현할 수 있습니다.
핵심 개념
Container Queries를 사용하려면 먼저 container-type 속성으로 containment context를 설정해야 합니다. 세 가지 유형이 있습니다.
- inline-size: 인라인 축(보통 가로)의 크기 변화에 반응합니다. 가장 많이 사용됩니다.
- size: 인라인과 블록 양축 모두의 크기 변화에 반응합니다.
- normal: containment context를 생성하지 않습니다(기본값).
container-name 속성으로 컨테이너에 이름을 붙이면, 여러 중첩된 컨테이너 중 특정 컨테이너를 기준으로 쿼리할 수 있습니다. container 단축 속성을 사용하면 이름과 타입을 한 번에 지정할 수 있습니다.
실전 예제
카드 컴포넌트가 배치된 영역의 너비에 따라 레이아웃이 변경되는 예제입니다.
/* 컨테이너 설정 */
.card-wrapper {
container: card / inline-size;
}
/* 기본: 좁은 영역 (세로 배치) */
.card {
display: flex;
flex-direction: column;
gap: 1rem;
}
.card__image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* 컨테이너가 400px 이상이면 가로 배치 */
@container card (min-width: 400px) {
.card {
flex-direction: row;
}
.card__image {
width: 40%;
aspect-ratio: 1;
}
}
/* 컨테이너가 700px 이상이면 리치 레이아웃 */
@container card (min-width: 700px) {
.card {
flex-direction: row;
align-items: center;
}
.card__image {
width: 30%;
}
.card__meta {
display: flex;
gap: 2rem;
}
}HTML 구조는 다음과 같습니다.
<div class="card-wrapper">
<article class="card">
<img class="card__image" src="thumbnail.jpg" alt="카드 썸네일">
<div class="card__body">
<h3 class="card__title">제목</h3>
<p class="card__description">설명 텍스트</p>
<div class="card__meta">
<span>2025.01.15</span>
<span>5분 읽기</span>
</div>
</div>
</article>
</div>활용 팁
- container 단축 속성을 적극 활용하세요.
container: sidebar / inline-size처럼 이름과 타입을 한 줄로 작성하면 코드가 깔끔해집니다. - 컨테이너 쿼리 단위(cqw, cqh 등)도 함께 사용하면 더욱 유연한 반응형 디자인이 가능합니다.
font-size: clamp(1rem, 3cqw, 2rem)과 같이 활용할 수 있습니다. - 미디어 쿼리와 함께 사용하는 것이 좋습니다. 전체 페이지 레이아웃은 미디어 쿼리로, 개별 컴포넌트는 컨테이너 쿼리로 관리하면 유지보수성이 높아집니다.
- container-type: inline-size를 사용하면 블록 축 방향의 내재적 크기가 유지되므로, 대부분의 경우 이것으로 충분합니다.
- 디자인 시스템에서 Container Queries를 기본으로 채택하면 컴포넌트 재사용성이 크게 향상됩니다.
마무리
CSS Container Queries는 오랫동안 웹 개발자들이 기다려온 기능입니다. 뷰포트가 아닌 컴포넌트의 컨텍스트에 따라 스타일을 적용할 수 있어, 진정한 의미의 컴포넌트 기반 반응형 디자인을 구현할 수 있습니다. 이제 모든 주요 브라우저에서 지원하므로 프로덕션에서 적극적으로 활용해 보시기 바랍니다.