안정적인 브라우저에 도입되는 컨테이너 쿼리

이번 밸런타인데이에는 모든 안정적인 브라우저에 크기 컨테이너 쿼리와 컨테이너 쿼리 단위가 출시된 것을 기념합니다.

Una Kravets

컨테이너 쿼리 사랑이 샘솟고 있습니다. 밸런타인데이, 크기 컨테이너 쿼리 및 컨테이너 쿼리 단위는 모든 최신 브라우저에서 안정적으로 작동합니다.

컨테이너 쿼리를 사용하면 inline-size와 같은 상위 요소의 스타일 지정 정보를 쿼리할 수 있습니다. 미디어 쿼리를 사용하면 뷰포트의 크기를 쿼리할 수 있고, 컨테이너 쿼리를 사용하면 UI의 위치에 따라 변경될 수 있는 구성요소를 사용할 수 있습니다.

컨테이너 쿼리는 반응형 디자인 및 재사용 가능한 구성요소에 특히 유용합니다. 예를 들어 사이드바에 배치할 때는 한 가지 방식으로 레이아웃을 지정하고 제품 그리드 내에서는 다른 구성으로 레이아웃을 지정할 수 있는 카드 구성요소를 사용 설정할 수 있습니다.

컨테이너 쿼리 사용

컨테이너 쿼리를 사용하려면 먼저 상위 요소에 포함을 설정합니다. 이렇게 하려면 상위 컨테이너에 container-type를 설정하거나 container 바로가기를 사용하여 유형과 이름을 동시에 지정합니다.

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

container-type를 inline-size로 설정하면 상위 요소의 인라인 방향 크기를 쿼리합니다. 영어와 같은 라틴어 언어의 경우 텍스트가 왼쪽에서 오른쪽으로 인라인으로 흐르므로 카드의 너비가 됩니다.

이제 이 컨테이너를 사용하여 @container를 통해 하위 요소에 스타일을 적용할 수 있습니다.

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

또한 뷰포트 기반 단위 값을 사용하는 것과 동일한 방식으로 컨테이너 쿼리 길이 단위 값을 사용할 수 있습니다. 컨테이너 단위가 표시 영역이 아니라 컨테이너에 상응한다는 점이 다릅니다. 다음 예에서는 컨테이너 쿼리 단위와 clamp() 함수를 사용하여 최소 및 최대 크기 값을 제공하는 반응형 서체를 보여줍니다.

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

위의 15cqi는 컨테이너의 인라인 크기의 15% 를 나타냅니다. clamp() 함수는 최솟값 2rem, 최대값 4rem을 제공합니다. 그동안 15cqi가 이 값 사이이면 텍스트가 그에 따라 축소 및 확대됩니다.

컨테이너 쿼리 밸런타인데이

연말연시를 맞아 컨테이너 쿼리에 대한 사랑을 기념하기 위해, 어떤 (최신 버전) 안정적인 브라우저에서 이 페이지를 보시는지와 관계없이 모두가 즐길 수 있는 발렌타인 카드를 준비했습니다.