컨테이너 쿼리와 :has()는 반응형 천상의 일치 항목입니다. 다행히 Chromium 105에서는 이 두 기능이 모두 함께 제공됩니다. 이 버전은 많은 요청이 있었던 두 가지 반응형 인터페이스 기능이 포함된 대규모 버전입니다.
컨테이너 쿼리: 간단한 요약
컨테이너 쿼리를 사용하면 개발자가 상위 선택기에 크기 및 스타일 지정 정보를 쿼리하여 하위 요소가 웹페이지의 어디에 있든지 반응형 스타일 지정 로직을 소유할 수 있습니다.
사용 가능한 공간과 같은 입력 스타일 지정에 표시 영역에 의존하는 대신 개발자가 인페이지 요소의 크기도 쿼리할 수 있게 되었습니다. 이 기능은 구성요소가 반응형 스타일 지정 로직을 소유한다는 것을 의미합니다. 이렇게 하면 페이지에 표시되는 위치에 관계없이 스타일 지정 로직이 구성요소에 연결되므로 구성요소의 복원력이 훨씬 향상됩니다.
컨테이너 쿼리 사용
컨테이너 쿼리로 빌드하려면 먼저 상위 요소에 포함을 설정해야 합니다. 상위 컨테이너에서 container-type를 설정하면 됩니다. 이미지와 다음과 같은 텍스트 콘텐츠가 포함된 카드가 있을 수 있습니다.
컨테이너 쿼리를 만들려면 카드 컨테이너에서 container-type를 설정합니다.
.card-container {
container-type: inline-size;
}
container-type를 inline-size로 설정하면 상위 요소의 인라인 방향 크기를 쿼리합니다. 영어와 같은 라틴 언어에서는 텍스트가 왼쪽에서 오른쪽으로 인라인으로 이동하므로 카드의 너비가 여기에 해당합니다.
이제 이 컨테이너를 사용하여 @container을 사용하는 하위 요소에 스타일을 적용할 수 있습니다.
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
:has() 상위 선택기
CSS :has() 의사 클래스를 사용하면 개발자가 상위 요소에 특정 매개변수가 있는 하위 요소가 포함되어 있는지 확인할 수 있습니다.
예를 들어 p:has(span)은 내부에 span가 있는 단락 (p) 선택기를 나타냅니다. 이를 사용하여 상위 단락 자체의 스타일을 지정하거나 상위 단락 또는 그 안에 있는 모든 항목의 스타일을 지정할 수 있습니다. 한 가지 유용한 예는 캡션이 포함된 figure 요소의 스타일을 지정하는 figure:has(figcaption)입니다. Jhey Tompkins의 이 기사에서 :has()에 관해 자세히 알아보세요.
컨테이너 쿼리와 :has()
:has()의 상위 선택 기능과 상위 쿼리 기능을 컨테이너 쿼리의 기능과 결합하여 매우 동적인 고유 스타일을 만들 수 있습니다.
로켓 카드에 관한 첫 번째 예시를 자세히 살펴보겠습니다. 이미지가 없는 카드가 있다면 어떻게 해야 할까요? 이미지 없이 더 의도적으로 표시되도록 제목의 크기를 늘리고 그리드 레이아웃을 단일 열로 조정하는 것이 좋습니다.
이 예에서 이미지가 포함된 카드에는 2열 그리드 템플릿이 있는 반면, 이미지가 없는 카드에는 단일 열 레이아웃이 있습니다. 또한 이미지가 없는 카드의 제목이 더 큽니다. :has()를 사용하여 작성하려면 다음 CSS를 사용하세요.
.card:has(.visual) {
grid-template-columns: 1fr 1fr;
}
위의 2열 스타일을 적용할 클래스가 visual인 요소를 찾고 있습니다. 또 다른 멋진 CSS 함수는 :not()입니다. 이는 :has()와 동일한 사양의 일부이지만 훨씬 더 오래 사용되었으며 더 나은 브라우저 지원을 제공합니다. 다음과 같이 :has()와 :not()를 결합할 수도 있습니다.
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
위 코드에서는 visual 클래스가 포함되지 않은 카드 내에서 h1의 스타일을 지정하는 선택기를 작성하고 있습니다. 이렇게 하면 글꼴 크기를 아주 명확하게 조정할 수 있습니다.
종합적으로 살펴보기
위의 데모는 :has(), :not(), @container의 조합을 보여주지만 여러 위치에서 동일한 요소가 사용되는 것을 볼 때 컨테이너 쿼리가 실제로 유용합니다. 스타일을 더하고 이러한 카드를 나란히 그리드로 표시해 보겠습니다.
이제 최신 CSS의 강력한 기능을 직접 확인할 수 있습니다. 로직에 기반해 로직을 빌드하고 매우 강력한 구성요소를 생성하는 타겟팅된 스타일을 사용하여 명확한 스타일을 작성할 수 있습니다. Chromium 105에 이 두 가지 강력한 기능이 도입되고 교차 브라우저 지원 모멘텀이 축적되고 있어, 지금이야말로 UI 개발자가 되어볼 수 있는 절호의 기회입니다.