컨테이너 쿼리

미디어 쿼리를 사용하면 표시 영역의 크기나 사용 중인 기기의 유형에 따라 레이아웃을 조정할 수 있습니다. 컨테이너 쿼리를 사용하면 상위 요소 또는 컨테이너의 크기와 상태에 따라 요소에 더 구체적인 조정을 할 수 있습니다.

사이트의 여러 컨텍스트에서 사용해야 하는 뉴스레터 가입 양식이 있다고 가정해 보겠습니다. 가입 페이지에서는 페이지의 전체 너비에 걸쳐 표시되지만 다른 콘텐츠가 있는 페이지에서는 분할된 열에 표시되도록 할 수 있습니다.

이 데모에 표시된 것처럼 컨테이너 쿼리를 사용하면 뷰포트 크기와 관계없이 가장 가까운 컨테이너의 속성을 기반으로 글꼴 크기, 패딩, 요소 레이아웃과 같은 속성을 조정할 수 있습니다.

컨테이너 쿼리 설정

미디어 쿼리와 달리 컨테이너 쿼리는 다음 두 부분으로 설정됩니다.

1. 컨테이너를 정의합니다.
2. 상위 컨테이너가 쿼리의 조건과 일치할 때 적용할 하위 요소의 스타일을 작성합니다.

컨테이너 정의

container-type 속성을 사용하여 컨테이너를 정의할 수 있습니다.

.my-container-element {
  container-type: inline-size;
}

inline-size의 container-type를 사용하면 컨테이너의 인라인 축을 쿼리할 수 있습니다.

inline 및 block 축 모두에 대해 쿼리하려면 container-type: size를 사용합니다.

main,
.my-component {
  container-type: size;
}

container-type의 두 값은 서로 다른 유형의 크기 포함을 적용합니다. 요소의 Inline-size 포함은 하위 요소가 inline-size에 영향을 미치지 않도록 합니다.

size 격리가 적용된 요소는 하위 요소가 블록 및 인라인 축에서 크기에 영향을 미치지 못하도록 합니다.

이 예에서는 크기 포함이 적용된 요소에 영향을 미칠 수 있음을 확인할 수 있습니다.

하위 요소 (<p> 요소)의 크기를 기반으로 크기가 조정되지 않으므로 컨테이너는 크기를 명시적으로 설정 (즉, inline-size, block-size, aspect-ratio)하거나 명시적으로 크기가 지정된 레이아웃에 배치하지 않으면 축소됩니다.

컨테이너 쿼리 조건

컨테이너가 설정되면 컨테이너 쿼리 내부의 스타일이 적용되려면 참이어야 하는 조건을 괄호로 묶어 추가할 수 있습니다. 상위 요소의 크기를 기반으로 하는 컨테이너 크기 쿼리의 경우 조건은 다음으로 구성됩니다.

• 크기 기능: width, height, inline-size, block-size, aspect-ratio 또는 orientation
• 비교 연산자 (즉, >, <, =, >=)
• 길이 값을 지정합니다.

.my-container-element {
  container-type: inline-size;
}

@container (inline-size > 30em) {
  .my-child-element {
    /* styles to apply when .my-container-element is wider than 30em */
  }
}

크기 기능 조건은 콜론과 테스트할 단일 값으로 작성할 수도 있습니다.

@container (orientation: landscape) {
  /*...*/
}

@container (min-width: 300px) {
  /*...*/
}

and 및 or과 같은 키워드를 사용하거나 연산자를 사용하여 여러 조건을 연결하여 여러 조건을 결합할 수도 있습니다.

@container (inline-size > 40em) and (orientation: landscape)  {
  /*...*/
}

@container (height > 25vh) or (orientation: portrait) {
  /*...*/
}

@container ( 10em <= width <= 500px) {
  /*...*/
}

컨테이너 이름 지정

가장 가까운 상위 요소가 아니더라도 특정 컨테이너를 타겟팅하려면 container-name 속성으로 컨테이너 이름을 지정하면 됩니다. 그런 다음 조건을 정의하기 전에 쿼리할 컨테이너 이름을 참조할 수 있습니다.

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

@container main-sidebar (inline-size > 20em)  {
  .button-group {
    display: flex;
    padding-inline: 1.25em;
  }
}

이름이 지정된 컨테이너는 스타일이 지정된 요소의 상위 요소여야 합니다.

container 속성과 함께 약식 사용

container 속성을 사용하면 약식 구문을 사용하여 컨테이너를 정의하고 컨테이너 유형을 지정할 수 있습니다.

.sidebar {
  container: main-sidebar / inline-size;
}

컨테이너 이름은 슬래시 앞에 오고 컨테이너 유형은 슬래시 뒤에 옵니다.

컨테이너 쿼리 단위

컨테이너 내에서 컨테이너 상대 길이 단위에도 액세스할 수 있습니다. 이렇게 하면 컨테이너의 크기에 따라 상대 길이가 조정되므로 다양한 컨테이너에 있을 수 있는 구성요소에 더 많은 유연성을 제공할 수 있습니다.

여기서는 컨테이너 길이 단위 cqi (쿼리 컨테이너의 인라인 크기의 1%)가 버튼의 패딩에 사용되고 있습니다.

.container {
  container: button-container / inline-size;
}

.one {
  inline-size: 30vw;
}

.two {
  inline-size: 50vw;
}

button {
  padding: 2cqi 5cqi;
}

두 버튼 모두 동일한 상대 단위가 적용되었지만, 단위가 컨테이너의 크기에 상대적이므로 두 번째 버튼은 컨테이너가 더 커서 패딩이 더 많습니다.

컨테이너 쿼리 중첩

선택기 내에 컨테이너 쿼리를 중첩할 수 있습니다.

.my-element {
  display: grid;
  padding: 1em 2em;

  @container my-container (min-inline-size: 22em) {
    /* styles to apply when element's container is wider than 22em */
  }
}

/* equivalent to */
.my-element {
  display: grid;
  padding: 1em 2em;
}

@container my-container (min-inline-size: 22em) {
  .my-element {
     /* styles to apply when element's is wider than 22em */
  }
}

또는 다른 컨테이너 쿼리나 at-rule 내에 중첩할 수 있습니다.

@container my-container (min-inline-size: 22em) {
  .my-element {
      /* styles to apply when element's is wider than 22em */
  }
}

@layer base {
  @container my-container (min-inline-size: 22em) {
    .my-element {
    /* styles to apply */
    }
  }
}

이해도 확인