[Chrome]크롬 개발자 도구 HTML 요소 찾는 방법

크롬 개발자 도구 HTML 요소 찾는 방법

지난 포스팅에서는 크롬 개발자 도구를 실행하는 방법에 대해 소개하였습니다. 이번 포스팅은 크롬 개발자 도구에서 HTML 요소를 찾는 방법을 소개합니다.

 

주로 다음과 같은 상황에서 크롬 개발자 도구에서 HTML 요소를 찾습니다.

1. 다른 웹 페이지에 적용된 DOM 구조 및 css를 분석

2. 현재 개발하고 있는 소스 코드(html, css, js)가 DOM에 정상적으로 적용되었는지 검증

---

방법 1. 우클릭 후 검사

첫 번째 방법으로 마우스 우클릭 후 검사를 선택하여 HTML 요소를 확인할 수 있습니다.

 

예를 들어, Naver 메인 화면에서 "Naver 로그인"은 어떤 태그로 표기하는지 혹은 어떤 폰트가 적용되었는지 확인하려고 합니다.

 

사진 1. Naver 로그인에 마우스 포인터를 위치 후 우클릭 버튼 클릭하고 검사를 선택합니다.

 

사진 2. 크롬 개발자 도구의 요소 탭이 실행되면서 해당 HTML 요소에 포커싱 됩니다.

좌측 영역에서 DOM 요소를 볼 수 있으며, 우측 영역은 포커싱 된 HTML 요소에 적용된 스타일 또는 이벤트 리스너를 볼 수 있습니다.

 

NAVER 로그인이라는 문자열이 <a> 태그로 감싸져 있는 것을 확인할 수 있습니다.

---

방법 2. 크롬 개발자 도구에서 문자열, 선택기, XPath로 찾기

두 번째 방법으로 크롬 개발자 도구 요소 탭에서 특정 문자열, 선택기, XPath로 특정 요소를 찾을 수 있습니다.

 

예를 들어, Naver 메인 화면에서 "네이버를 더 안전하고 편리하게 이용하세요."라는 문자열이 어떤 HTML 태그가 적용되었으며, 어떤 폰트가 적용되었는지 확인하려고 합니다.

 

사진 1. 크롬 개발자 도구 실행 후 요소 탭을 클릭합니다.

 

사진 2. 맥(Mac)인 경우 command + F, 윈도우(Windows)인 경우 ctrl + F 단축키를 입력하면, 다음 사진처럼 검색 창이 활성화됩니다.

 

사진 3. 특정 문자열을 검색하면, 해당 문자열이 포함된 HTML 요소로 포커싱 됩니다.

---

방법 3. 마우스 포인터로 특정 위치의 HTML 요소 찾기

마지막 방법으로 마우스 포인터로 특정 위치의 HTML 요소를 찾을 수 있습니다.

 

사진 1. 크롬 개발자 도구 실행 후 요소 탭을 클릭합니다. 그다음 좌측 상단의 아이콘을 클릭합니다.

 

사진 2. 웹 페이지에서 원하는 영역에 마우스 포인터를 위치 후 클릭합니다.

 

사진 3. 원하는 영역을 클릭하면, 크롬 개발자 도구 요소 탭에서 해당 HTML 요소에 포커싱 됩니다.