배지 참조

Sofia Emelianova
Sofia Emelianova
GitHub

요소 패널에 있는 배지의 포괄적인 참조를 사용하여 다양한 오버레이를 전환하고 DOM 트리 탐색 속도를 높이세요.

배지 표시 또는 숨기기

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

  1. DevTools를 엽니다.
  2. DOM 트리에서 요소를 마우스 오른쪽 버튼으로 클릭하고 배지 설정 하위 메뉴에서 하나 이상의 배지를 선택합니다.

'배지 설정' 메뉴

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

소스 보기

view-source 배지는 HTML 페이지의 루트에 있는 <html> 태그 옆에 있습니다. 이 버튼을 클릭하면 소스 패널에서 페이지의 소스를 볼 수 있습니다.

&#39;소스 보기&#39; 배지입니다.

이 배지는 Chrome의 페이지 컨텍스트 (마우스 오른쪽 버튼 클릭) 메뉴에 있는 페이지 소스 보기 옵션의 대체 워크플로를 제공합니다.

  1. Chrome에서 페이지를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
  2. 요소 패널에서 <html> 태그 옆에 있는 view-source 배지를 클릭합니다.
  3. 소스 패널에서 페이지 소스를 검사합니다.

그리드

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 배지를 클릭하고 오버레이를 확인합니다.

플렉스 오버레이입니다.

오버레이에 하위 요소 위치가 표시됩니다.

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

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

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

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

광고 배지입니다.

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

스크롤

overflow CSS 속성이 scroll 또는 오버플로를 일으킬 만큼 콘텐츠가 충분한 경우 auto로 설정되면 HTML 요소는 스크롤 컨테이너입니다. 이러한 요소에는 옆에 scroll 배지가 표시됩니다.

DOM 트리 노드에서 배지를 스크롤합니다.

scroll-snap

스크롤 컨테이너에는 스냅 포인트를 구성하는 CSS 속성이 있을 수 있습니다. 이러한 요소에는 해당 오버레이를 전환하는 scroll-snap 배지가 옆에 있습니다.

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

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

스크롤-스냅 오버레이

오버레이에 요소 위치와 스냅 포인트가 표시됩니다.

컨테이너

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

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

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

컨테이너 오버레이

오버레이에 하위 요소 위치가 표시됩니다.

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

슬롯

<slot> HTML 요소는 자체 콘텐츠로 채울 수 있는 자리표시자입니다. <slot>를 사용하면 <template> 요소와 함께 별도의 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) 배지를 확인하세요.

(CodePen의 sofiayem이 작성한 펜 ExEGRvR 보기)
  1. 미리보기에서 대화상자 열기를 클릭합니다.
  2. 대화상자를 검사합니다.
  3. DOM 트리에서 <dialog> 요소 옆에 있는 top-layer (1) 배지를 클릭합니다. 요소 패널은 </html> 태그가 닫힌 후 #top-layer 컨테이너의 해당 요소로 이동합니다. 최상위 레이어 컨테이너 및 배지
  4. 요소 또는 해당 ::backdrop 옆에 있는 reveal 배지를 클릭하여 <dialog> 요소로 돌아갑니다.

미디어

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

배지 설정에서 사용 설정되어 동영상 요소 옆에 표시되는 미디어 배지

자세한 내용은 미디어 패널로 미디어 플레이어 디버깅을 참고하세요.

팝오버

팝오버는 popover 속성이 있는 요소이며, 툴팁, 알림, 토스트 등 다양한 대화형 패턴에 유용합니다. 이러한 요소에는 옆에 popover 배지가 표시됩니다.

이 배지는 옆에 있는 top-layer 배지를 전환하여 #top-layer 컨테이너의 해당 요소에 연결합니다.

다음 미리보기에서 popover 배지를 확인하세요.

  1. 미리보기에서 팝오버 전환을 클릭합니다.
  2. 표시되는 팝오버를 검사합니다.

  3. DOM 트리에서 <div popover> 요소 옆에 있는 popover 배지를 클릭합니다. 요소 패널에 top-layer 배지가 표시됩니다.

    popover 속성이 있는 요소 옆에 있는 팝오버 배지

  4. 상위 레이어 섹션의 단계를 따릅니다.

자세한 내용은 https://web.dev/learn/css/popover-and-dialog를 참고하세요.

시작 스타일

@starting-style 규칙은 페이지에 렌더링되기 전 요소의 초기 스타일을 정의합니다. display: none에서 애니메이션으로 표시되는 요소에는 애니메이션으로 표시될 상태가 필요하므로 이 속성이 필요합니다. 이러한 요소에는 옆에 starting-style 배지가 표시됩니다.

이 배지는 @starting-style 규칙의 스타일을 전환하므로 애니메이션이 작동하는 것을 확인할 수 있습니다.

다음 미리보기에서 starting-style 배지를 확인하세요.

  1. 미리보기에서 팝오버 열기를 클릭합니다.
  2. 표시되는 팝오버를 검사합니다.

  3. DOM 트리에서 <div popover> 요소 옆에 있는 starting-style 배지를 전환합니다.

    @starting-style 규칙이 있는 요소 옆에 있는 시작 스타일 배지

  4. 요소 > 스타일 탭에서 애니메이션이 작동하고 스타일이 적용되는 것을 확인합니다.

자세한 내용은 팝오버 애니메이션 적용을 참고하세요.