CSS Container Queries 실전 — 미디어 쿼리 작별, 컴포넌트 단위 반응형 | 기술노트

핵심 요약

2026년 모든 모던 브라우저가 Container Queries를 지원한 지 2년. "뷰포트 단위 반응형"의 한계가 드러나면서 컴포넌트 단위 반응형이 표준 패턴이 됐다.

1. 미디어 쿼리의 한계

/* 사이드바 안 카드 vs 메인 영역 카드 — 같은 너비 분기 */
.card { padding: 16px }
@media (min-width: 768px) {
  .card { padding: 24px }    /* 사이드바 안에선 너무 큼 */
}

사이드바 폭이 320px이어도 뷰포트가 768px 이상이면 카드는 동일하게 동작. 컴포넌트 자체의 너비는 모름.

2. Container Queries — 기본

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

.card { padding: 16px }

@container card (min-width: 400px) {
  .card { padding: 24px; display: flex; gap: 16px }
}

@container card (min-width: 600px) {
  .card { padding: 32px; flex-direction: row }
}

이제 같은 카드 컴포넌트가 사이드바·메인·풀폭 모두에서 자기 너비에 맞게 적응한다.

3. container-type 옵션

값	의미
inline-size	너비만 컨테이너 (가장 흔함)
size	너비+높이
normal	style query만 허용

size는 contain: size를 강제해서 자식 콘텐츠가 부모 크기에 영향 못 줌. 일반적으로 inline-size가 안전.

4. Container Query Units

.card-wrapper { container-type: inline-size }

.card-title {
  font-size: clamp(1rem, 5cqi, 2rem);  /* 컨테이너 너비의 5% */
  padding: 1cqh;                        /* 컨테이너 높이의 1% */
}

단위	의미
cqw / cqh	컨테이너 너비/높이의 1%
cqi / cqb	인라인/블록 축
cqmin / cqmax	두 축 중 작은/큰 값

5. Style Queries

.theme-dark { --bg: #111; --fg: #eee }

@container style(--bg: #111) {
  .icon { filter: invert(1) }
}

커스텀 프로퍼티를 컨테이너 조건으로 사용 — 다크모드 컴포넌트 분기 등에 유용.

6. 디자인 시스템 — 카드 컴포넌트 예

<div class="card-wrapper">
  <article class="card">
    <img class="card-thumb" src="...">
    <div class="card-body">
      <h3 class="card-title">제목</h3>
      <p class="card-desc">설명</p>
    </div>
  </article>
</div>

.card-wrapper { container-type: inline-size }

.card { display: grid; gap: 12px; padding: 16px }
.card-thumb { width: 100%; aspect-ratio: 16/9 }
.card-title { font-size: 1rem }

/* 작은 컨테이너 (320px+) — 세로 */
@container (min-width: 320px) {
  .card { grid-template-columns: 1fr; gap: 16px }
}

/* 중간 (480px+) — 가로 */
@container (min-width: 480px) {
  .card { grid-template-columns: 1fr 2fr; gap: 20px; padding: 24px }
  .card-title { font-size: 1.25rem }
}

/* 큰 (720px+) — 가로 + 큰 폰트 */
@container (min-width: 720px) {
  .card { grid-template-columns: 1fr 3fr; gap: 24px; padding: 32px }
  .card-title { font-size: 1.5rem }
}

7. 미디어 쿼리와의 공존

Container Queries가 모든 미디어 쿼리를 대체하진 않는다. 다음은 미디어 쿼리 영역.

레이아웃 그리드 (3컬럼 ↔ 1컬럼) — 페이지 단위 결정
다크모드 (prefers-color-scheme)
모션 감소 (prefers-reduced-motion)
인쇄용 스타일

8. Tailwind v4 통합

<div class="@container">
  <article class="@md:flex @md:gap-4 @lg:gap-8">
    <img class="@md:w-1/3">
    <div class="@md:flex-1">
      ...
    </div>
  </article>
</div>

v4부터 @ prefix가 컨테이너 단위. @sm·@md·@lg·@xl·@2xl 5개 분기 기본.

9. 성능

Container Queries는 layout containment를 강제해 오히려 성능에 유리. 잘못된 사용:

최상위 <body>를 컨테이너로 — 의미 없음, 미디어 쿼리 쓰면 됨
모든 div를 컨테이너로 — 불필요한 layout containment
size 사용 — 자식 콘텐츠 영향 차단되어 의도치 않은 잘림

10. 브라우저 지원·Fallback

브라우저	지원
Chrome 105+	O (2022)
Safari 16+	O (2022)
Firefox 110+	O (2023)
iOS Safari 16+	O
Samsung Internet 21+	O

2026 시점에 글로벌 99.5% 지원. @supports (container-type: inline-size)로 fallback 분기 가능하지만 거의 불필요.

11. 결론

새 컴포넌트는 무조건 Container Queries로 시작. 기존 미디어 쿼리 코드는 Major 리팩토링 시점에 점진 이전. 디자인 시스템 라이브러리(SUI·shadcn 등)는 이미 Container 기반으로 재작성됐음을 참고.

참고

web.dev/articles/cq-stable
tailwindcss.com/docs/responsive-design#container-queries