CSS 컨테이너 쿼리 : 반응 형 디자인 혁신

이 발췌문 CSS의 힘을 발휘하면 는 적응 가능하고 탄력적 인 웹 구성 요소를 제작할 때 컨테이너 쿼리의 변형 가능성을 탐색합니다. 전체 브라우저 창 크기에 반응하는 Viewport 미디어 쿼리와 달리 컨테이너 쿼리는 요소의 가용 공간 를 기반으로 스타일링을 허용하므로 진정으로 구성 요소 수준의 응답 성이 가능합니다.

컨테이너 쿼리 대 뷰포트 미디어 쿼리

기존의 뷰포트 기반 응답 디자인은 종종 레이아웃 그리드와 결합 된 단순화 된 장치 크기 (모바일, 태블릿, 데스크탑)와 연계 된 중단 점에 의존합니다. 이 접근법은 개별 구성 요소 적응성으로 어려움을 겪고 있습니다. 더 큰 요소는 별도로 조정될 수 있지만 일반적으로 글로벌 중단 점을 따릅니다.

컨테이너 쿼리는 우수한 솔루션을 제공합니다. 다음 이미지는 컨테이너 쿼리가있는 카드 구성 요소를 뷰포트 크기와 완전히 독립적으로 보여줍니다. 카드의 외관은 사용 가능한 공간에 동적으로 적응합니다.

참고 : Firefox 110이므로 컨테이너 쿼리에 대한 광범위한 브라우저 지원이 존재합니다. Polyfills는 이전 브라우저에서 사용할 수 있습니다.

컨테이너 쿼리 정의

컨테이너 쿼리를 사용하려면 먼저 컨테이너 유형 속성을 사용하여 컨테이너로 요소를 선언합니다. 인라인 크기 (수평 쓰기 모드의 너비에 해당)는 가장 일반적이고 널리 지원되는 값입니다 :

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

다음, 다음, @컨테이너 at-rule을 사용하여 쿼리를 정의하십시오. 다음 예제는 컨테이너가 40ch 너비 이상인 경우 h2 색상을 파란색으로 설정합니다.

@container (min-width: 40ch) {
  h2 {
    color: blue;
  }
}

쓰기 모드에서 더 넓은 호환성을 위해 논리적 특성을 사용하십시오 :

@container (inline-size > 40ch) {
  h2 {
    color: blue;
  }
}

인라인 크기 를 넘어서 옵션에는 블록 크기 및 측면-레이오 가 포함됩니다. 자세한 내용은 공식 사양을 참조하십시오.

카드 구성 요소 업그레이드 : 실제 예

컨테이너 쿼리가 없으면 카드 변형에는 일반적으로 뷰포트 브레이크 포인트와 관련된 수정 자 클래스가 포함됩니다. 아래 이미지는 3 개의 카드 크기와 해당 클래스를 보여줍니다.

[CodePen Demo : Viewport Media Query Cards] (Codepen 링크)

컨테이너 쿼리를 사용하여 기본 카드 스타일 (지원되지 않는 브라우저의 경우)을 유지하고 컨테이너 폭에 따라 추가 스타일을 정의합니다.

• 350px 이상 : 수평 레이아웃
• 600px 이상 : 배경으로 이미지

[CodePen Demo : 카드 용 컨테이너 쿼리] (CodePen 링크)

이 발췌문은 CSS의 힘을 발휘합니다 : 반응 형 사용자 인터페이스를위한 고급 기술 , sitepoint premium에서 사용할 수 있습니다.

키 테이크 아웃 :

• 컨테이너 쿼리는 구성 요소 수준의 응답 성을 제공합니다.
• 컨테이너 유형 및 @컨테이너 .
를 사용하여 정의됩니다.
• 논리적 특성은 교차 쓰기 모드 호환성을 향상시킵니다.
• 그들은 뷰포트 미디어 쿼리보다 반응 형 디자인에 대한보다 유연하고 세분화 된 접근 방식을 제공합니다.

(참고 : 가능한 경우 실제 코피 펜 링크로 "코드 펜으로 링크"를 바꾸십시오.)