배지 참조

소피아 에멜리아노바
소피아 에멜리아노바
GitHub

요소 패널에서 배지를 종합적으로 참고해 다양한 오버레이를 전환하고 DOM 트리 탐색 속도를 높일 수 있습니다.

배지 표시 또는 숨기기

배지를 표시하거나 숨기려면 다음 단계를 따르세요.

  1. DevTools를 엽니다.
  2. DOM 트리에서 요소를 마우스 오른쪽 버튼으로 클릭하고 배지 설정...을 선택합니다. 배지 설정을 클릭합니다.
  3. 선택한 배지 옆의 체크박스를 선택하거나 선택 해제합니다.

요소 패널에는 DOM 트리의 해당 요소 옆에 선택한 배지가 표시됩니다. 다음 섹션에서 모든 배지에 대해 설명합니다.

그리드

display CSS 속성이 grid 또는 inline-grid로 설정된 경우 HTML 요소는 그리드 컨테이너입니다. 이러한 요소에는 해당 오버레이를 전환하는 요소 옆에 grid 배지가 있습니다.

다음 미리보기에서 오버레이를 전환합니다.

  1. 미리보기에서 요소를 검사합니다.
  2. DOM 트리에서 요소 옆에 있는 grid 배지를 클릭하고 오버레이를 관찰합니다.

그리드 오버레이

오버레이는 열, 행, 그 숫자, 간격을 표시합니다.

그리드 레이아웃을 디버그하는 방법을 알아보려면 CSS 그리드 검사를 참고하세요.

서브 그리드

서브 그리드는 상위 그리드와 동일한 트랙을 사용하는 중첩 그리드입니다. grid-template-columns, grid-template-rows 속성 중 하나 또는 둘 다가 subgrid로 설정된 경우 요소는 서브그리드 컨테이너입니다. 이러한 요소에는 해당 오버레이를 전환하는 요소 옆에 subgrid 배지가 있습니다.

다음 미리보기에서 오버레이를 전환합니다.

  1. 미리보기에서 요소를 검사합니다.
  2. DOM 트리에서 요소 옆에 있는 subgrid 배지를 클릭하고 오버레이를 관찰합니다.

하위 그리드 오버레이

오버레이에는 서브 그리드의 열, 행, 그 숫자, 간격이 표시됩니다.

Flex

display CSS 속성이 flex 또는 inline-flex로 설정된 경우 HTML 요소는 Flex 컨테이너입니다. 이러한 요소에는 해당 오버레이를 전환하는 요소 옆에 flex 배지가 있습니다.

다음 미리보기에서 오버레이를 전환합니다.

  1. 미리보기에서 요소를 검사합니다.
  2. DOM 트리에서 요소 옆에 있는 flex 배지를 클릭하고 오버레이를 관찰합니다.

Flex 오버레이

오버레이는 하위 요소 위치를 표시합니다.

Flex 레이아웃을 디버그하는 방법을 알아보려면 CSS Flexbox 검사 및 디버그를 참고하세요.

DevTools는 일부 광고 프레임을 감지하고 태그를 지정할 수 있습니다. 이러한 프레임 옆에는 ad 배지가 있습니다.

다음 미리보기에서 광고를 확인해 보세요.

  1. 미리보기에서 요소를 검사합니다.
  2. DOM 트리에서 옆에 ad 배지가 있는 요소를 찾습니다.

광고 배지

ad 배지는 클릭할 수 없지만 렌더링 탭을 사용하여 빨간색으로 광고 프레임을 강조표시할 수 있습니다.

스크롤-스냅

HTML 요소는 overflow CSS 속성이 scroll로 설정된 경우 스크롤 컨테이너이고 오버플로를 일으킬 만한 콘텐츠가 충분한 경우 auto입니다. 스크롤 컨테이너에는 스냅 지점을 구성하는 CSS 속성이 있을 수 있습니다. 이러한 요소에는 해당 오버레이를 전환하는 요소 옆에 scroll-snap 배지가 있습니다.

다음 미리보기에서 오버레이를 전환합니다.

  1. 미리보기에서 요소를 검사합니다.
  2. DOM 트리에서 요소 옆에 있는 scroll-snap 배지를 클릭합니다.
  3. 요소를 오른쪽으로 스크롤하고 오버레이를 관찰해 보세요.

스크롤-스냅 오버레이

오버레이에는 요소 위치와 스냅 지점이 표시됩니다.

컨테이너

HTML 요소에 container-type CSS 속성이 있으면 컨테이너입니다. 이러한 요소에는 해당 오버레이를 전환하는 요소 옆에 container 배지가 있습니다.

다음 미리보기에서 오버레이를 전환합니다.

  1. 미리보기에서 요소를 검사합니다.
  2. DOM 트리에서 요소 옆에 있는 container 배지를 클릭합니다.
  3. 오른쪽 하단을 드래그하여 요소의 크기를 조절하고 레이아웃 변경과 오버레이를 확인합니다.

컨테이너 오버레이

오버레이는 하위 요소 위치를 표시합니다.

컨테이너 쿼리를 디버그하는 방법을 알아보려면 CSS 컨테이너 쿼리 검사 및 디버그를 참고하세요.

슬롯

<slot> HTML 요소는 자체 콘텐츠로 채울 수 있는 자리표시자입니다. <template> 요소와 함께 <slot>를 사용하면 별도의 DOM 트리를 만들어 함께 표시할 수 있습니다. 슬롯 콘텐츠 요소 옆에는 해당 슬롯으로 연결되는 링크 역할을 하는 슬롯.slot 배지가 있습니다.

다음 미리보기에서 슬롯.slot 배지를 확인해 보세요.

  1. 미리보기에서 요소를 검사합니다.
  2. DOM 트리에서 요소 옆에 있는 슬롯.slot 배지를 클릭하여 상응하는 슬롯을 찾습니다. 슬롯을 설정하고 배지를 공개하세요.
  3. 정답 확인reveal 배지를 클릭하여 슬롯의 콘텐츠로 돌아갑니다.

상단 레이어

이 배지는 상단 레이어의 개념을 이해하고 시각화하는 데 도움이 됩니다. 상단 레이어는 z-index에 관계없이 다른 모든 레이어 위에 콘텐츠를 렌더링합니다. .showModal() 메서드를 사용하여 <dialog> 요소를 열면 브라우저에서 이를 최상위 레이어에 배치합니다.

상단 레이어 요소를 시각화하는 데 도움이 되도록 요소 패널에서는 닫는 </html> 태그 뒤에 #top-layer 컨테이너를 DOM 트리에 추가합니다.

상단 레이어 요소 옆에는 연결을 탭합니다.top-layer (N) 배지가 있습니다. 여기서 N는 요소의 색인 번호입니다. 배지는 #top-layer 컨테이너의 상응하는 요소로 연결되는 링크입니다.

다음 미리보기에서 연결을 탭합니다.top-layer (N) 배지를 확인해 보세요.

  1. 미리보기에서 대화상자 열기를 클릭합니다.
  2. 대화상자 검사.
  3. DOM 트리에서 <dialog> 요소 옆에 있는 연결을 탭합니다.top-layer (1) 배지를 클릭합니다. Elements 패널을 사용하면 닫는 </html> 태그 뒤에 있는 #top-layer 컨테이너의 상응하는 요소로 이동합니다. 상단 레이어 컨테이너 및 배지입니다.
  4. 요소 또는 ::backdrop 옆에 있는 정답 확인reveal 배지를 클릭하여 <dialog> 요소로 돌아갑니다.

미디어

media 배지는 기본적으로 사용 중지되어 있습니다. 사용 설정된 경우 <audio> 및 <video> 요소 옆에 표시됩니다. 이 배지를 클릭하여 미디어 패널을 열고 미디어를 디버그합니다.

배지 설정에서 사용 설정된 미디어 배지가 동영상 요소 옆에 표시됩니다.

자세한 내용은 미디어 패널을 사용하여 미디어 플레이어 디버그를 참고하세요.