CSS 컨테이너 쿼리 ✅ 컴포넌트 단위 반응형 디자인 구현법

 

 

기존 **미디어 쿼리(@media)**는 브라우저 전체 뷰포트 크기를 기준으로 반응형 디자인을 적용합니다.
하지만 컴포넌트 기반 UI(React, Vue, Angular)에서는 부모 컨테이너 크기에 따라 반응형 스타일이 필요합니다.
이를 해결해주는 최신 기능이 바로 @container입니다.

---

📌 1. 기본 문법

 

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

 

👉 부모 컨테이너의 너비가 600px 이상일 때 .card 스타일 적용

---

📌 2. 컨테이너 선언

컨테이너 쿼리를 쓰려면 부모 요소에 container-type을 지정해야 합니다.

 

.wrapper {
  container-type: inline-size; /* width 기준 */
}

---

📌 3. 실무 예제 – 카드 UI

 

.card-container {
  display: flex;
  flex-wrap: wrap;
  container-type: inline-size;
}

.card {
  flex: 1 1 100%;
}

/* 부모 컨테이너가 600px 이상일 때 */
@container (min-width: 600px) {
  .card {
    flex: 1 1 45%;
  }
}

/* 부모 컨테이너가 900px 이상일 때 */
@container (min-width: 900px) {
  .card {
    flex: 1 1 30%;
  }
}

 

📌 카드 UI가 부모 박스 크기에 따라 자동으로 레이아웃 변경됨

---

📌 4. 컨테이너 네이밍

 

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (min-width: 400px) {
  .menu {
    display: flex;
  }
}

 

👉 여러 컨테이너가 있을 때 container-name으로 구분 가능

---

📌 5. 미디어 쿼리 vs 컨테이너 쿼리 비교

구분	미디어 쿼리	컨테이너 쿼리
기준	뷰포트(브라우저 전체)	부모 컨테이너
적용 단위	페이지 전체	컴포넌트 단위
장점	단순, 브라우저 지원 높음	컴포넌트 기반 반응형 최적
단점	컴포넌트 재사용 불편	아직 일부 브라우저만 지원 (크롬/엣지/사파리)

---

⚡ 6. 실무 활용 팁

• ✅ 컴포넌트 단위 반응형 → React/Vue 프로젝트에서 적극 활용
• ✅ 대시보드, 카드 레이아웃 등 모듈화된 UI에 적합
• ⚠️ 아직 구형 브라우저(특히 IE, 일부 모바일 브라우저) 지원 부족
• 👉 점진적 도입 전략 필요 (Fallback 제공)

---

📝 마무리 정리

• @media → 뷰포트 기준 반응형
• @container → 부모 컨테이너 기준 반응형 (컴포넌트 지향)
• 앞으로의 반응형 디자인 표준은 컨테이너 쿼리!