크롬 웹 브라우저의 개발자 도구 - 검사 (특정 영역의 html 요소 확인하기)

웹 애플리케이션 개발시 크롬 웹 브라우저의 개발자 도구(F12,  혹은 Ctrl-Shift-I)를 적절히 활용하면 html 코드의 복잡한 숲속에서 좀 더 스마트하게 돌아다닐수가 있게 된다.

오늘 포스팅에서는 개발자 도구 중에서 웹 페이지의 복잡한 구조 중에서 특정 영역에 대한 html 요소를 한번에 쉽게 찾아서 확인하는 방법에 대한 글이다.

보통은 디자이너나 웹 프블리셔가 디자인이 적용된 html, css 파일을 던져 주면 그것을 가지고 개발자가 기능을 구현하게 될텐데 구성이 복잡한 웹 페이지의 경우 특정 영역에 대한 html 구성이 어떻게 되었는지를 확인할려면 html 태그 숲 속을 헤매는 경우가 있다.

이러한 작업을 한번에 해결해 주는 기능이 크롬 웹 브라우저의 개발자 도구가 제공하고 있다.

아래와 같은 웹 페이지가 있다고 할 경우(이해를 돕기 위해서 그냥 단순한 경우를 예로 살펴보기로...) 빨간색 영역에 대한 html 요소를 확인하고자하면
(저 영역이 사실은 게시글 작성자 닉네임을 적는 공간인데 input 태그로 되어 있는 영역이다. 이미지가 좀 희미...;;)

-. F12로 개발자 도구 창이 활성화 되도록 한 후에 상단의 "Elements" 탭을 클릭

-. 웹 페이지에서 해당 영역을 마우스로 클릭한 후 마우스 우측을 클릭

-. 팝업 메뉴 중에서 "검사(N)"을 클릭하면

-. 우측 개발자 창에서 해당 영역에 대한 html 요소에 대한 정보가 한번에 보여진다.