반응형 웹 디자인에서 미디어 쿼리는 오랫동안 표준으로 사용되어 왔지만, 최근에는 컨테이너 쿼리(Container Queries)가 주목받고 있습니다. 기존 미디어 쿼리와의 차이점을 이해하고, 실전 적용 방법을 살펴보겠습니다.
1. 기존 미디어 쿼리 vs 컨테이너 쿼리: 핵심 차이점
📌 미디어 쿼리(Media Queries)의 한계
미디어 쿼리는 뷰포트(Viewport)의 크기에 따라 스타일을 적용합니다. 즉, 화면 전체 크기를 기준으로 요소의 스타일을 변경하는 방식입니다.
@media (max-width: 768px) {
.card {
width: 100%;
font-size: 14px;
}
}
❌ 문제점:
- 특정 요소가 아니라 브라우저 전체 크기를 기준으로 스타일이 적용됨
- 다양한 레이아웃에서 컴포넌트 단위로 조정이 어려움
📌 컨테이너 쿼리(Container Queries)의 등장
컨테이너 쿼리는 개별 요소(컨테이너)의 크기에 따라 스타일을 적용할 수 있도록 도와줍니다. 즉, 요소가 포함된 컨테이너의 크기에 따라 반응형 스타일을 지정하는 방식입니다.
@container (max-width: 600px) {
.card {
font-size: 14px;
}
}
✅ 장점:
- 컴포넌트 단위로 반응형 스타일 적용 가능
- 다양한 레이아웃에서도 일관된 스타일 유지 가능
- 중첩된 구조에서도 효과적
2. CSS 컨테이너쿼리 기본 사용법
🔹 컨테이너 정의하기
컨테이너쿼리를 사용하려면 먼저 container-type을 설정해야 합니다.
.container {
container-type: inline-size;
container-name: card-container;
}
container-type: inline-size;→ 컨테이너의 가로 크기(width)에 따라 반응형 적용container-name: card-container;→ 컨테이너를 특정 이름으로 정의
🔹 컨테이너 크기에 따른 스타일 적용
@container card-container (max-width: 500px) {
.card {
font-size: 14px;
padding: 10px;
}
}
👉 뷰포트 크기와 관계없이 .card가 포함된 .container 크기에 따라 스타일이 변경됩니다.
3. 컨테이너쿼리 실전 적용법
📌 (1) 카드 레이아웃에서 유연한 반응형 스타일 적용
<div class="container"> <div class="card">Responsive Card</div> </div>
.container {
container-type: inline-size;
}
.card {
background: #f5f5f5;
padding: 20px;
border-radius: 8px;
}
@container (max-width: 400px) {
.card {
font-size: 14px;
padding: 10px;
}
}
✔️ 컨테이너 크기가 400px 이하일 때 font-size와 padding이 줄어듦
📌 (2) 다단 레이아웃(Grid)에서 유동적인 스타일 적용
<div class="grid-container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
container-type: inline-size;
}
@container (max-width: 600px) {
.item {
font-size: 14px;
text-align: center;
}
}
✔️ 그리드 컨테이너의 크기에 따라 내부 아이템 스타일이 자동 조정됨
4. 컨테이너쿼리 적용 시 고려해야 할 사항
✅ 브라우저 지원 여부 확인
현재 컨테이너쿼리는 최신 브라우저(Chrome, Edge, Firefox)에서 지원되며, 일부 구형 브라우저에서는 완전한 지원이 이루어지지 않았습니다.
Can I Use: Container Queries에서 최신 지원 여부를 확인하세요.
✅ 레이아웃 구조 설계 시 유연성을 고려
컨테이너쿼리는 개별 요소 기준으로 반응형을 적용하므로, 레이아웃을 설계할 때 컴포넌트 기반으로 스타일을 정의하는 것이 중요합니다.
| 비교 항목 | 미디어 쿼리 | 컨테이너 쿼리 |
|---|---|---|
| 기준 값 | 뷰포트 크기 | 개별 컨테이너 크기 |
| 적용 방식 | 페이지 전체 레이아웃 기준 | 컴포넌트 단위 스타일 적용 |
| 유연성 | 낮음 (레이아웃에 의존) | 높음 (독립적인 컴포넌트 스타일 가능) |
| 적용 사례 | 전체 페이지 반응형 | 재사용 가능한 UI 컴포넌트 |
👉 컨테이너 쿼리는 UI 컴포넌트 단위에서 반응형 디자인을 더 유연하게 적용할 수 있는 강력한 도구입니다. 미디어 쿼리와 함께 적절히 활용하면 더욱 강력한 반응형 웹 퍼블리싱이 가능합니다.
