Kayce Basques
Sofia Emelianova
동영상을 시청하고 대화형 튜토리얼을 완료하여 Chrome DevTools로 페이지의 DOM을 보고 변경하는 기본사항을 알아보세요.
이 튜토리얼에서는 DOM과 HTML의 차이점을 알고 있다고 가정합니다. 부록: HTML과 DOM 비교에서 복습하세요.
DOM 노드 보기
요소 패널의 DOM 트리는 DevTools에서 모든 DOM 관련 활동을 수행하는 곳입니다.
노드 검사
특정 DOM 노드에 관심이 있는 경우 검사는 DevTools를 열고 해당 노드를 조사하는 빠른 방법입니다.
다음 목록에서 Michelangelo를 마우스 오른쪽 버튼으로 클릭합니다. 메뉴에서 검사를 선택합니다.
- 미켈란젤로
- 라파엘
DevTools의 요소 패널이 열립니다.
<li>Michelangelo</li>이 DOM 트리에서 강조 표시됩니다.