훨씬 더 정교해진 반응형 구현 방법: 컨테이너 쿼리

Media Query

• 디바이스의 유형(인쇄물, 스크린 등)이나, 특성(디바이스의 방향, 터치 스크린 환경 등) 수치(화면 해상도, 뷰포트 너비 등)에 따라 레이아웃이나 스타일을 다르게 적용하고자 할 때 사용

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

▼ 뷰포트 너비가 360px 이하인 경우 텍스트 크기를 줄여 표시하기

body {
  font-size: 11px;
}


@media screen and (max-width: 360px) {
  body {
    font-size: 11px;
  }
}

▼ 뷰포트 너비가 1920px 이상인 스크린이고 디바이스의 방향이 landscape(가로 방향)인 경우

@media (min-width: 1920px), screen and (orientation: landscape) { ... }

Container Queries

엘리먼트의 컨테이너 크기를 기준으로 엘리먼트에 스타일을 적용할 수 있는 방법
뷰포트의 크기나 디바이스 특성을 기준으로 삼아 스타일을 분기하는 미디어 쿼리보다 훨씬 세밀하고 정확하게 엘리먼트에 스타일을 지정할 수 있음

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

트래킹할 컨테이너 요소에 container-type 속성을 명시해주고,
@container 쿼리를 사용해서 조건을 작성하면 됨

.post {
  container-type: inline-size;
}

.card h2 {
  font-size: 1em;
}

@container (min-width: 300px) {
  .card h2 {
    font-size: 2em;
  }
}

컨테이너에 명시적인 이름을 지정해서 사용할 수도 있음

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

  /* 줄여서 쓰면 이렇게 */
  container: inline-size / sidebar;
}

@container sidebar (min-width: 300px) {
  .card h2 {
    font-size: 2em;
  }
}

만약 '쿼리 컨테이너'가 될 수 있는 엘리먼트가 여러 개일 때 아래와 같이 사용한다면

/* 모든 컨테이너 요소에 반응 */
@container (min-width: 300px) { ... }

/* 모든 `sidebar`라는 container-name 속성을 가진 컨테이너 요소에 반응 */
@container sidebar (min-width: 300px) { ... }

See the Pen Simplified CQ Card Demo in Grid - Polyfill by web.dev (@web-dot-dev) on CodePen.

container-type

컨테이너 쿼리를 사용하고자 한다면 "쿼리 컨테이너"가 될 요소에 container-type 속성을 지정해야 함

• size: inline과 block 축 모두를 기준으로 삼음 (쉽게 말해 일반적인 경우 width와 height 값에 따라 반응형)
• inline-size: inline 축만을 기준으로 삼음 (쉽게 말해 일반적인 경우 width 값에 따라 반응형)
• normal: default 값. 해당 값이 부여된 요소를 "쿼리 컨테이너"가 되지 않게 함

Block and inline dimensions 🔗

block과 inline은
"정렬"에 대해 이야기할 때 left, right, top, bottom이라는 기준 대신 도입한 개념

• inline: 텍스트 진행 방향
  • 한국어는 left → right로 horizontal
  • 아랍어는 right → left로 horizontal
  • 중세 국어는 top → bottom으로 vertical
• block: 문단이 쌓이는 방향
  • 한국어, 아랍어 등은 vertical
  • 중세 국어는 horizontal

Horizontal writing mode	Vertical writing mode

Container Query Length Units

컨테이너의 크기에 비례하는 길이를 대상 요소에 지정하고자 할 때 사용할 수 있는 단위

• cqw: 1% of a query container's width
• cqh: 1% of a query container's height
• cqi: 1% of a query container's inline size
• cqb: 1% of a query container's block size
• cqmin: The smaller value of either cqi or cqb
• cqmax: The larger value of either cqi or cqb

뷰포트 크기를 기준으로 하는 vw, vh 등보다 훨씬 유용하게 사용 가능
max(), min(), clamp()와 함께 사용해서 굉장히 구체적으로 규칙을 적용할 수 있음

@container (min-width: 700px) {
  .card h2 {
    font-size: max(1.5em, 1.23em + 2cqi);
  }
}

Can I Use...

Container Queries

크롬은 2022년 9월, 엣지는 10월
사파리는 2022년 9월,
파이어폭스는 2023년 2월 배포

현 시점(2024. 02.) 기준 메이저 브라우저에서 모두 사용 가능

Container Query Units

크롬은 2022년 8월 말, 엣지와 사파리는 9월
파이어폭스는 2023년 2월 배포

역시나 현 시점(2024. 02.) 기준 메이저 브라우저에서 모두 사용 가능