CSS 컨테이너 쿼리 검사 및 디버그

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

이 가이드에서는 Chrome DevTools의 Elements 패널에서 CSS 컨테이너 쿼리를 검사하고 디버그하는 방법을 설명합니다.

CSS 컨테이너 쿼리를 사용하면 상위 컨테이너 속성을 기반으로 요소의 스타일을 조작할 수 있습니다. 이 기능은 반응형 웹 디자인의 개념을 페이지 기반에서 컨테이너 기반으로 전환합니다.

이 가이드의 스크린샷은 이 데모 페이지에서 가져온 것입니다.

컨테이너 및 그 하위 요소 탐색

쿼리 컨테이너로 정의된 모든 요소에는 요소 패널에서 옆에 container 배지가 있습니다. 배지는 컨테이너와 그 하위 요소의 점선 오버레이를 전환합니다.

오버레이를 전환하는 방법:

  1. DevTools를 엽니다.
  2. 요소 패널에서 컨테이너로 정의된 요소 옆에 있는 container 배지를 클릭합니다.

컨테이너 배지

이 예에서 container-type: inline-size 속성은 컨테이너 요소를 정의합니다. 하위 요소는 인라인 크기 (가로축)를 쿼리하고 컨테이너의 너비에 따라 스타일을 변경할 수 있습니다.

컨테이너 쿼리 검사

쿼리 선언이 하위 요소에 적용될 때, 즉 컨테이너가 쿼리의 조건을 충족할 때 요소 패널에 쿼리 선언이 @container 표시됩니다.

이 데모 페이지에서 @container 선언을 검사할 수 있는 경우를 이해하려면 다음 코드 샘플을 살펴보세요.

@container (inline-size > 400px) {
  .coffee p {
    display: block;
  }
}

@container (inline-size > 600px) {
  .coffee {
    display: grid;
    grid-template-columns: 280px auto;
  }

  .coffee h1 {
    grid-column: 1/3;
  }

  .coffee img {
    grid-row: 2/4;
  }

이 예에서 컨테이너의 너비가 다음 픽셀 수를 초과하면 해당 스타일이 적용됩니다.

  • 400px 초과: 단락 (p) 요소가 페이지에 블록으로 표시됩니다. 새 줄에서 시작하여 전체 너비를 차지합니다.
  • 600px 초과: 하위 요소가 상단에 제목 (h1)이 있고 왼쪽에 이미지 (img)가 있는 가로 그리드 레이아웃을 채택합니다.

첫 번째 @container 선언을 검사하려면 다음을 실행합니다.

  1. 요소 패널에서 컨테이너의 너비를 500px로 설정합니다. p 요소가 나타납니다.

  2. p 요소를 선택합니다. Styles 창에 @container 선언과 함께 상위 컨테이너 article.card의 링크가 표시됩니다.

    @container 선언을 사용하세요.

  3. 너비를 600px보다 크게 설정한 다음 영향을 받는 요소를 선택하세요. 가로 레이아웃을 구현하는 @container 선언을 확인합니다.

    더 많은 @container 선언

컨테이너 요소 찾기

쿼리를 실행시킨 컨테이너 요소를 찾아 선택하려면 @container 선언 위에 있는 요소 이름 위로 마우스를 가져가 클릭합니다.

요소 이름 위로 마우스를 가져갑니다.

마우스를 가져가면 이름이 Elements 패널의 요소로 연결되는 링크로 바뀌고 Styles 창에 쿼리된 속성과 현재 값이 표시됩니다.

컨테이너 쿼리 수정

쿼리를 디버그하려면 CSS 보기 및 변경에 설명된 대로 스타일 창에서 다른 CSS 선언으로 쿼리를 수정하면 됩니다.

이 예에서 컨테이너의 너비는 500px입니다. 페이지에 단락 (p) 요소가 표시됩니다.

  1. p 요소를 선택합니다. 스타일 창 @container (inline-size > 400px) 선언을 확인할 수 있습니다.
  2. inline-size를 400px에서 520px로 변경합니다.
  3. 단락 (p) 요소가 쿼리 기준을 충족하지 않아 페이지에서 사라집니다.