동영상을 보고 대화형 튜토리얼을 완료하여 동영상 보기의 기본 사항을 익히고 Chrome DevTools를 사용하여 페이지의 DOM을 변경하는 것입니다.
이 튜토리얼에서는 개발자가 DOM과 HTML의 차이점을 알고 있다고 가정합니다. 자세한 내용은 부록: HTML과 DOM 비교를 참고하세요.
DOM 노드 보기
Elements 패널의 DOM 트리에서는 DevTools에서 DOM 관련 활동을 모두 수행할 수 있습니다.
노드 검사
특정 DOM 노드에 관심이 있는 경우 검사를 사용하면 DevTools를 빠르게 열 수 있습니다. 해당 노드를 조사할 수 있습니다
- 아래의 Michelangelo를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
- 미켈란젤로
- 라파엘
DevTools의 Elements 패널이 열립니다.
DOM 트리에서
<li>Michelangelo</li>
가 강조표시됨
- 앱의 왼쪽 상단에 있는 검사 아이콘을 클릭합니다. DevTools를 사용할 수 있습니다. <ph type="x-smartling-placeholder"></ph>
아래의 도쿄 텍스트를 클릭하세요.
- 도쿄
베이루트
이제 DOM 트리에서
<li>Tokyo</li>
가 강조표시됩니다.
노드 검사는 노드의 스타일을 보고 변경하는 첫 번째 단계이기도 합니다. CSS 보기 및 변경 시작하기를 참조하세요.
키보드를 사용하여 DOM 트리 탐색
DOM 트리에서 노드를 선택한 후에는 사용할 수 있습니다.
아래의 Ringo를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
<li>Ringo</li>
이(가) 선택된 위치: 있습니다.- George
- 링고
- 폴
존
위쪽 화살표 키를 두 번 누릅니다.
<ul>
이(가) 선택되었습니다.왼쪽 화살표 키를 누릅니다.
<ul>
목록이 접힙니다.왼쪽 화살표 키를 다시 누릅니다.
<ul>
노드의 상위 요소 선택합니다. 여기서는 1단계의 안내가 포함된<li>
노드입니다.아래쪽 화살표 키를 3번 눌러
<ul>
을(를) 다시 선택했습니다. 확인할 수 있습니다 다음과 같이 표시됩니다.<ul>...</ul>
오른쪽 화살표 키를 누릅니다. 목록이 펼쳐집니다.
뷰로 스크롤
DOM 트리를 볼 때
선택할 수 있습니다. 예를 들어 캠페인의 맨 아래로 스크롤했다고 가정해 봅시다.
페이지 상단의 <h1>
노드에 관심이 있습니다. 스크롤하여 보기
를 사용하면 노드를 볼 수 있도록 표시 영역의 위치를 빠르게 변경할 수 있습니다.
아래 Magritte를 마우스 오른쪽 버튼으로 클릭하고 Inspect를 선택합니다.
- 마그리트
- 수틴
이 페이지 하단의 부록: 뷰로 스크롤 섹션으로 이동합니다. 이 페이지에서도 안내가 계속됩니다.
페이지 하단의 안내를 따른 후에는 여기로 다시 이동해야 합니다.
눈금자 표시
표시 영역 상단 및 왼쪽의 눈금자를 사용하여 Elements 패널에서 요소 위로 마우스를 가져가면 너비와 높이를 측정할 수 있습니다.
다음 두 가지 방법 중 하나로 눈금자를 사용 설정합니다.
- Control+Shift+P 또는 Command+Shift+P (Mac)를 눌러 Command 메뉴를 열고
Show rulers on hover
을 입력한 다음 Enter 키를 누릅니다. - 설정을 확인합니다. 환경설정 > Elements > 마우스 오버 시 눈금자 표시
눈금자의 크기 단위는 픽셀입니다.
노드 검색
문자열, CSS 선택자 또는 XPath 선택기로 DOM 트리를 검색할 수 있습니다.
- Elements 패널에 커서를 둡니다.
- Control+F 또는 Command+F (Mac)를 누릅니다. DOM 트리 하단에 검색창이 열립니다.
The Moon is a Harsh Mistress
를 입력합니다. DOM 트리에서 마지막 문장이 강조표시됩니다.
위에서 설명한 것처럼 검색창은 CSS 및 XPath 선택기도 지원합니다.
Elements 패널은 DOM 트리에서 일치하는 첫 번째 결과를 선택하고 이를 표시 영역의 뷰로 롤아웃합니다. 기본적으로 입력과 동시에 이 작업이 수행됩니다. 항상 긴 검색어를 사용하여 작업하는 경우 Enter 키를 누를 때만 DevTools가 검색을 실행하도록 할 수 있습니다.
노드 간의 불필요한 이동을 방지하려면 설정 > 환경설정 > 전역 > 입력과 동시에 검색 체크박스
DOM 편집
DOM을 즉시 수정하고 이러한 변경사항이 페이지에 미치는 영향을 확인할 수 있습니다.
콘텐츠 수정
노드의 콘텐츠를 편집하려면 DOM 트리의 콘텐츠를 더블클릭합니다.
아래의 Michelle을 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
- 튀김
- Michelle
DOM 트리에서
Michelle
를 더블클릭합니다. 즉, 텍스트 상자 사이에 있는 텍스트를<li>
및</li>
텍스트가 파란색으로 강조 표시되어 선택되었음을 나타냅니다.Michelle
를 삭제하고Leela
을 입력한 후 Enter 키를 눌러 변경사항을 확인합니다. 텍스트 위의 변경사항을 미셸에서 릴라로 변경합니다.
속성 수정
속성을 수정하려면 속성 이름 또는 값을 더블클릭합니다. 안내를 따릅니다. 노드에 속성을 추가하는 방법을 참조하세요.
아래의 Howard를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
- Howard
- 빈스
<li>
를 더블클릭합니다. 텍스트가 강조표시되어 선택되어야 합니다오른쪽 화살표 키를 누르고 공백을 추가한 다음
style="background-color:gold"
을 입력한 다음 Enter 키를 누릅니다. 배경 색상 금색으로 바뀝니다
마우스 오른쪽 버튼으로 속성 수정 옵션을 사용할 수도 있습니다.
노드 유형 수정
노드 유형을 수정하려면 유형을 더블클릭한 다음 새 유형을 입력합니다.
아래의 Hank를 마우스 오른쪽 버튼으로 클릭하고 Inspect를 선택합니다.
- 주임 학과장
- CANNOT TRANSLATE
- Thaddeus
- Brock
<li>
를 더블클릭합니다.li
텍스트가 강조표시되어 있습니다.li
를 삭제하고button
를 입력한 후 Enter 키를 누릅니다.<li>
노드가<button>
로 변경됩니다. 노드입니다
HTML로 편집
구문 강조표시 및 자동 완성을 사용하여 노드를 HTML로 수정하려면 노드의 드롭다운 메뉴에서 HTML로 수정을 선택합니다.
아래에서 Leonard를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
- 페니
- Howard
- Rajesh
- Leonard
Elements 패널에서 현재 노드를 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 Elements을 선택합니다.
Enter를 눌러 새 줄을 시작하고
<l
를 입력합니다. DevTool은 HTML 구문을 강조표시하고 태그를 자동 완성합니다.자동 완성 메뉴에서
li
요소를 선택하고>
를 입력합니다. DevTools가 커서 뒤에 닫는</li>
태그를 자동으로 추가합니다.태그 안에
Sheldon
를 입력하고 Control / Command + Enter 키를 눌러 변경사항을 적용합니다.
노드 복제
요소 복제 마우스 오른쪽 버튼 클릭 옵션을 사용하여 요소를 복제할 수 있습니다.
아래의 Nana를 마우스 오른쪽 버튼으로 클릭하고 Inspect를 선택합니다.
- 배니티의 모닥불
- 나나
- 올란도
- 백색 소음
Elements 패널에서
<li>Nana</li>
를 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 Elements를 선택합니다.페이지로 돌아갑니다. 그러면 목록 항목이 즉시 복제되었습니다.
단축키(Shift + Alt + 아래쪽 화살표(Windows 및 Linux) 및 Shift + Option + 아래쪽 화살표(MacOS)를 사용할 수도 있습니다.
노드 스크린샷 캡처
노드 스크린샷 캡처를 사용하여 DOM 트리의 개별 노드의 스크린샷을 캡처할 수 있습니다.
이 페이지의 이미지를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
Elements 패널에서 이미지 URL을 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 Elements를 선택합니다.
스크린샷이 오프라인 저장 동영상에 저장됩니다.
Devtools로 스크린샷을 찍는 방법을 자세히 알아보려면 Devtools로 스크린샷을 캡처하는 4가지 방법을 참고하세요.
DOM 노드 재정렬
노드를 드래그하여 순서를 변경합니다.
아래의 Elvis Presley를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다. 이 항목이 선택합니다.
- 스티비 원더
- 톰 웨이츠
- Chris Thile
- 엘비스 프레슬리
DOM 트리에서
<li>Elvis Presley</li>
를 목록 상단으로 드래그합니다.
강제 상태
노드를 :active
, :hover
, :focus
,
:visited
, :focus-within
아래의 파리의 제왕 위로 마우스를 가져갑니다. 배경색이 주황색이 됩니다.
- 파리의 제왕
- 범죄 및 처벌
- 모비딕
위의 파리의 제왕을 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
<li class="demo--hover">The Lord of the Flies</li>
를 마우스 오른쪽 버튼으로 클릭하고 Force를 선택합니다. 주 > :hover: 이 옵션이 표시되지 않으면 부록: 옵션 누락을 참고하세요. 실제로 노드 위에 마우스 커서를 올려놓지 않아도 배경 색상은 주황색으로 유지됩니다.
노드 숨기기
노드를 숨기려면 H를 누르세요.
아래의 The Stars My Destination을 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
- 몬테 크리스토 백작
- 별 내 목적지
H 키를 누릅니다. 노드가 숨겨져 있습니다. 노드를 마우스 오른쪽 버튼으로 클릭하고 요소 숨기기 옵션을 사용할 수도 있습니다.
H 키를 다시 누릅니다. 노드가 다시 표시됩니다.
노드 삭제
노드를 삭제하려면 Delete를 누릅니다.
아래의 Foundation을 마우스 오른쪽 버튼으로 클릭하고 Inspect를 선택합니다.
- 일러스트레이티드 맨
- 거울을 통해서
- 기초
Delete 키를 누릅니다. 노드가 삭제되었습니다. 노드를 마우스 오른쪽 버튼으로 클릭하고 요소 삭제 옵션을 사용할 수도 있습니다.
Control+Z 또는 Command+Z (Mac)를 누릅니다. 마지막 작업이 실행취소되고 노드가 다시 표시됩니다.
콘솔에서 노드에 액세스
DevTools는 콘솔에서 DOM 노드에 액세스하거나 JavaScript 참조입니다.
$0로 현재 선택된 노드 참조
노드를 검사할 때 노드 옆에 있는 == $0
텍스트는 다음을 참조할 수 있음을 의미합니다.
$0
변수를 사용하여 콘솔에서 노드를 생성합니다.
아래의 The Left Hand of Darkness를 마우스 오른쪽 버튼으로 클릭하고 Inspect를 선택합니다.
- 어둠의 왼손
- 모래 언덕
Esc 키를 눌러 콘솔 창을 엽니다.
$0
를 입력하고 Enter 키를 누릅니다. 표현식의 결과는$0
는<li>The Left Hand of Darkness</li>
로 평가됩니다.결과 위로 마우스를 가져갑니다. 표시 영역에서 노드가 강조표시됩니다.
DOM 트리에서
<li>Dune</li>
를 클릭하고 콘솔에$0
를 다시 입력한 후 다시 Enter를 누릅니다. 이제$0
는<li>Dune</li>
로 평가됩니다.
전역 변수로 저장
노드를 여러 번 다시 참조해야 하는 경우 전역 변수로 저장하세요.
아래의 The Big Sleep을 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
- 빅 슬립
- 긴 이별
DOM 트리에서
<li>The Big Sleep</li>
를 마우스 오른쪽 버튼으로 클릭하고 Store as global을 선택합니다. 변수를 사용합니다. 이 옵션이 표시되지 않으면 부록: 옵션 누락을 참고하세요.콘솔에
temp1
를 입력한 후 Enter 키를 누릅니다. 표현식의 결과입니다. 이는 변수가 노드로 평가됨을 나타냅니다.
JS 경로 복사
자동 테스트에서 노드를 참조해야 하는 경우 노드에 자바스크립트 경로를 복사합니다.
아래의 The Brothers Karamazov를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
- 카라마조프 형제
- 범죄 및 처벌
DOM 트리에서
<li>The Brothers Karamazov</li>
를 마우스 오른쪽 버튼으로 클릭하고 복사 > JS 경로 복사. 다음으로 확인되는document.querySelector()
표현식 노드가 클립보드에 복사되었습니다.Control+V 또는 Command+V (Mac)를 눌러 다음 단계를 따르세요. 표현식을 콘솔에 붙여넣습니다.
Enter를 눌러 표현식을 평가합니다.
DOM 변경 시 중단
DevTools를 사용하면 JavaScript가 DOM을 수정할 때 페이지의 JavaScript를 일시중지할 수 있습니다. DOM 변경 중단점을 참고하세요.
다음 단계
여기에서는 DevTools의 DOM 관련 기능을 대부분 다룹니다. 나머지 주제는 DOM 트리의 노드를 마우스 오른쪽 버튼으로 클릭하고 이 튜토리얼에서 다루겠습니다. 요소 패널 단축키도 참고하세요.
Chrome DevTools 홈페이지에서 모든 것을 확인해 보세요. DevTools로 수행할 수 있습니다
DevTools팀에 문의하려면 커뮤니티를 참고하세요. DevTools 커뮤니티에서 도움을 받을 수 있습니다.
부록: HTML과 DOM 비교
이 섹션에서는 HTML과 DOM의 차이점을 간략하게 설명합니다.
웹브라우저를 사용하여 서버에 https://example.com
와 같은 페이지를 요청하는 경우
은 다음과 같이 HTML을 반환합니다.
<!doctype html>
<html>
<head>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a hypertext document on the World Wide Web.</p>
<script src="/script.js" async></script>
</body>
</html>
브라우저는 HTML을 파싱하고 다음과 같은 객체 트리를 만듭니다.
html
head
title
body
h1
p
script
페이지의 콘텐츠를 나타내는 이 객체 또는 노드 트리를 DOM이라고 합니다. 지금은 HTML과 똑같아 보이지만 는 다음 코드를 실행합니다.
const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);
이 코드는 h1
노드를 삭제하고 또 다른 p
노드를 DOM에 추가합니다. 이제 전체 DOM은
:
html
head
title
body
p
script
p
이제 페이지의 HTML이 DOM과 다릅니다. 다시 말해 HTML은 DOM은 현재 페이지 콘텐츠를 나타냅니다. JavaScript를 사용하는 경우 노드를 추가, 제거 또는 수정하는 경우 DOM이 HTML과 달라집니다.
자세한 내용은 DOM 소개를 참고하세요.
부록: 뷰로 스크롤
이 섹션은 스크롤하여 보기 섹션의 연속입니다. 아래 지침을 따라 섹션을 완료하세요.
- DOM 트리에서 계속
<li>Magritte</li>
노드를 선택해야 합니다. 그렇지 않은 경우 스크롤하여 보고 다시 시작합니다. <li>Magritte</li>
노드를 마우스 오른쪽 버튼으로 클릭하고 스크롤하여 보기를 선택합니다. 표시 영역 스크롤 Magritte 노드를 볼 수 있습니다. 스크롤하여 보기 옵션이 보이지 않으면 부록: 옵션 누락을 참고하세요.
부록: 옵션 누락
이 튜토리얼의 많은 안내에서는 DOM 트리의 노드를 마우스 오른쪽 버튼으로 클릭하도록 지시합니다. 팝업 컨텍스트 메뉴에서 옵션을 선택하세요. 지정된 옵션을 사용하려면 노드 텍스트에서 마우스 오른쪽 버튼을 클릭합니다.