개발자 도구로 웹 사이트 HTML 구조 보는 방법

개발자 도구를 잘 활용하면 웹의 구조를 쉽게 알아볼 수 있다. 오늘은 웹 프론트에 보이는 요소들에 대한 구조를 검사하는 방법을 간단하게 알아보자.

그렇다면 웹 엘리먼트가 뭘까? 웹 페이지는 버튼, 링크, 텍스트 입력필드, 폼 등 다양한 HTML 엘리먼트로 구성되어 있다. 이것을 웹 엘리먼트라고 부른다.

 

html-element

 

개발자 도구 여는 방법

크롬 개발자도구를 사용해서 웹 사이트의 요소를 검사하는 방법을 알아보자. 크롬 말고도 다른 브라우저들도 각자 개발자 도구를 가지고 있다. 나는 가장 많이 사용하는 브라우저인 크롬을 사용해보려고 한다.

 

단축키 F12를 클릭하면 크롬 개발자도구를 열 수 있다.

또한, 원하는 엘리먼트 위에서 마우스 오른쪽을 클릭하고 '검사' 옵션을 누르면 해당 엘리먼트 정보를 보여준다.

 

네이버웨일에서 눌러보았다

 

검사 옵션을 통해 개발자 도구를 열면, 내가 원하는 엘리먼트 요소가 어떤 html,css 코드로 이루어져 있는지 볼 수 있다.

 

개발자도구 열린 모습

 

 

또한, 개발자 도구 좌측 상단의 화살표 버튼을 클릭하면, 웹 사이트 안에서 내가 원하는 부분을 직접 눌러서 탐색할 수도 있다.

 

직접 웹사이트 요소를 선택

 

 

 

엘리먼트 요소를 복사하는 방법

 

개발자 도구 안에서 엘리먼트의 요소를 복사할 수 있다. 원하는 코드 위에서 마우스 오른쪽 버튼을 누르고, copy에 들어가면 원하는 속성을 복사할 수 있다.

 

엘리먼트 복사하는 방법

 

보통 UI 자동화 스크립트를 작성할 때, 이 방법을 활용해서 요소의 위치값을 가져온다.

요즘은 비전공자분들도 업무 자동화를 위한 파이썬을 많이들 학습 하시는 것 같다. 그때에도 개발자도구의 사용법을 알고 있으면 여러 부분에서 도움이 될 것 같다.

 

 

 

 

 

 

---

함께 보면 좋은 글

 

개발자도구 Block request URL 사용하기

 

개발자도구 스로틀링 설정 방법, 느린 인터넷 환경 테스트