CSS / 2026 모던 CSS 2026.06.02

Part 5: 컨테이너 쿼리(@container)

Part 5: 컨테이너 쿼리(@container) — 컴포넌트 중심 반응형

지금까지 CSS 네스팅, 최신 선택자, 커스텀 프로퍼티 등을 배웠습니다. 이번 파트에서는 반응형 디자인의 패러다임을 바꾼 기능인 컨테이너 쿼리(Container Queries)에 대해 자세히 알아보겠습니다.

기존에 우리가 사용하던 @media (min-width: 768px) 같은 미디어 쿼리는 브라우저 전체 화면 크기를 기준으로 스타일을 변경합니다. 하지만 실제로 컴포넌트가 반응해야 하는 것은 브라우저 크기가 아니라, 자신이 들어있는 부모 컨테이너의 크기인 경우가 훨씬 많습니다.

이 문제를 해결하기 위해 등장한 것이 바로 컨테이너 쿼리입니다. 2026년 현재 모든 주요 브라우저에서 지원되는 이 기능을 제대로 이해하면, 컴포넌트 단위로 훨씬 더 정교하고 재사용 가능한 반응형을 만들 수 있습니다.

1. 왜 컨테이너 쿼리가 필요한가?

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

유니버설 스튜디오 재팬 입장권

₩84,000

KKday

[타임특가] 캘러웨이 CG 버킷햇 골프 스포츠 벙거지 캐주얼 빅사이즈 대두 모자

₩39,900

₩50,000

딜팡

도쿄 해리포터 스튜디오 투어 입장권

₩59,768

KKday

기존 미디어 쿼리의 한계를 생각해보겠습니다.

예를 들어 사이드바 안에 카드 컴포넌트가 있다고 가정해보죠. 브라우저가 넓을 때는 사이드바가 넓게 보이지만, 브라우저가 좁아지면 사이드바가 좁아집니다. 이 경우 카드는 사이드바 안에서 좁은 공간에 들어가야 합니다.

하지만 기존 @media로는 사이드바의 크기를 기준으로 카드 스타일을 바꾸기 매우 어렵습니다. 왜냐하면 미디어 쿼리는 브라우저 전체 크기만 볼 수 있기 때문입니다.

이때 컨테이너 쿼리를 사용하면, 카드가 들어있는 부모(사이드바)의 크기를 기준으로 카드의 레이아웃을 변경할 수 있습니다.

2. 컨테이너 쿼리 기본 사용법

컨테이너 쿼리를 사용하려면 먼저 부모 요소를 컨테이너로 지정해야 합니다.

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

@container sidebar (min-width: 300px) {
  .card {
    flex-direction: row;
    gap: 20px;
    align-items: center;
  }

  .card img {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
  }
}

container-type: inline-size는 가로 크기를 기준으로 쿼리를 동작시키겠다는 의미입니다. 현재 가장 많이 사용되는 방식입니다.

3. container-type 종류

inline-size: 가로 크기를 기준으로 함 (가장 많이 사용)
size: 가로와 세로 크기 모두 기준으로 함
normal: 컨테이너 쿼리를 사용하지 않음 (기본값)

4. 실전 예제: 반응형 카드 그리드

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

.product-grid {
  container-type: inline-size;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

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

  .product-card .image {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
  }
}

@container (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

위 예시처럼 컨테이너 크기에 따라 카드의 방향을 바꾸거나, 그리드 컬럼 수를 조절할 수 있습니다.

5. container-name 사용하기

페이지에 여러 개의 컨테이너가 있을 때는 container-name을 지정해서 구분할 수 있습니다.

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

.main-content {
  container-type: inline-size;
  container-name: main;
}

@container sidebar (min-width: 280px) {
  /* 사이드바 안의 카드 스타일 */
}

@container main (min-width: 700px) {
  /* 메인 콘텐츠 안의 카드 스타일 */
}