CSS Container Queries 실전 가이드

Media Query vs Container Query — 근본 차이

@container 문법 완전 정리

기본 문법 — container-type 선언 + @container 조건
/* 1. 부모를 컨테이너로 등록 */
.card-wrapper {
  container-type: inline-size;  /* 폭 기준 */
  container-name: card;         /* 이름 (선택) */
}

/* 단축 속성 */
.card-wrapper {
  container: card / inline-size;
}

/* 2. 자식에 조건부 스타일 적용 */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

실전 레이아웃 예시 — 카드 컴포넌트

카드 컴포넌트 — 사이드바(좁음)와 메인 영역(넓음) 동시 대응
/* 컨테이너 등록 */
.article-card-wrapper {
  container: article-card / inline-size;
}

/* 기본 스타일 — 좁은 공간 (세로 레이아웃) */
.article-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.article-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* 컨테이너 폭 >= 480px — 가로 레이아웃 */
@container article-card (min-width: 480px) {
  .article-card {
    flex-direction: row;
    align-items: flex-start;
  }

  .article-card img {
    width: 180px;
    aspect-ratio: 4 / 3;
    flex-shrink: 0;
  }
}

/* 컨테이너 폭 >= 700px — 제목 폰트 확대 */
@container article-card (min-width: 700px) {
  .article-card__title {
    font-size: 1.25rem;
  }
}

Container Query 단위 — cqw, cqh, cqi, cqb

브라우저 지원 현황과 폴백 전략

폴백 — @supports로 Container Query 지원 여부 분기
/* Container Query 미지원 브라우저용 기본 스타일 */
.card {
  display: flex;
  flex-direction: column;
}

/* Container Query 지원 브라우저에서만 적용 */
@supports (container-type: inline-size) {
  .card-wrapper {
    container-type: inline-size;
  }

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

요약 및 참고 자료