컨테이너 쿼리와 :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)입니다. :has()에 관한 자세한 내용은 Jhey Tompkins의 기사에서 확인할 수 있습니다.
컨테이너 쿼리와 :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 개발자가 될 수 있는 멋진 순간입니다.