티스토리 뷰

Technical/VMware Windows Linux OS

구글 크롬 페이지 html 요소 검사 기능

귀하신분 2013. 7. 12. 16:48

웹페이지의 html 소스를 보는 기능은 인터넷 익스플로러나 구글 크롬에서 모두 지원해 주고 있습니다.

하지만 단순하게 html 소스 코드를 나열하는 것이 아니라 그 소스의 세부 요소에 대한 표현을 확인하고, 또한 그 각각의 요소에 대한 검사 기능을 제공해 주는 것은 구글 크롬이 유일할 듯 합니다.

물론 나모 웹에디터나 다른 프로그래밍 툴로 간단히 추출할 수 있겠지만요..^^

오늘은 구글 크롬에서 웹페이지의 각각의 구성요소에 대한 요소 검사를 하는 방법과, 각 요소가 표현하고 있는 페이지의 부분을 바로 확인할 수 있는 방법에 대해 잠시 설명해 드리고자 합니다.

우선 html 소스를 얻어야 하는데요, 페이지 소스 보기 기능을 실행하기 전에 아래 화면과 같이 요소 검사 기능을 실행해 보시기 바랍니다.

인터넷창의 빈 곳이나 상태바에서 마우스 우클릭을 통하여 팝업 메뉴를 호출하는 방식입니다.

요소 검사요소 검사 기능 호출

이렇게 html 의 요소 검사를 위해 호출된 메뉴는 아래 화면과 같이 구글 크롬 창의 하단에 나타나게 됩니다.

.


각 Element 에 대한 div 구문을 기준으로 form, script 를 포함한 html 의 head 와 body 부분을 만날 수 있을 것입니다.

요소 검사요소 검사 화면

Elements, Resources, Network, Sources, Timeline, Profiles, Audits, Console 메뉴를 이용할 수 있으며, 단지 각 구문의 역할을 확인하기 위해서는 Elements 탭에서 구문을 클릭하시게 되면 해당되는 웹페이지의 출력 부분을 확인할 수 있겠습니다.

크롬세부 html 소스에 대한 웹페이지 표현

이 기능만을 이용하더라도 홈페이지나 블로그를 새롭게 단장하시는 분들에게는 아주 큰 도움이 될 것입니다.

특히 티스토리 등의 설치형 블로그를 이용하고 있는 블로거들에게 안성맞춤의 툴로 자리매김할 수 있다고 자부합니다.

아래는 각 요소에 대한 명령을 추가하거나 삭제하며 웹페이지에 나타난 화면을 실시간으로 확인하고 어떠한 명령으로 표현되는지도 확인할 수 있었습니다.

이는 요소 검사 기능을 핵심 기능이 되겠습니다.

소스 요소 검사소스 요소 검사

글자 크기와 마진에 대한 요소를 체크 해제하면 가로선이 그어지게 되며 그 요소는 페이지를 표현하는 구문에서 제외되어 나타나게 됩니다.

갑자기 네이버 포털의 메인페이지의 헤더인 <head>...</head> 는 어떻게 꾸며져 있을까 궁금하기도 했습니다.

<head>네이버 헤더 구문

여타의 페이지와 별다른 점은 발견하지 못했고 여러 메타 테그와 타이틀 및 링크에 대한 속성, 자바 스크립트의 선언문이 존재했군요^^

크게 호감이 가는 웹 페이지를 만날 경우 그 중 마음에 드는 구문을 참조할 경우 도움이 될 것이며, 홈페이지 제작과 블로그의 운영에 있어 나모 웹에디터를 보유하지 않고도 흉내를 낼 수 있는 구글 크롬의 요소 검사 기능이었습니다.

----

방문 감사합니다 (__)

저작자표시

'Technical > VMware Windows Linux OS' 카테고리의 다른 글

윈도우 창 투명하게 만들어주는 프로그램  (30) 2013.09.17
MS 아웃룩 정크메일 옵션, 국가별 스팸메일 설정  (0) 2013.09.13
한컴오피스 뷰어 다운로드 및 설치  (2) 2013.09.02
아웃룩 및 서버 자동 로그인 - 자격 증명 관리  (8) 2013.07.30
구글 크롬 페이지 html 소스 보기 기능  (2) 2013.07.12
MS OFFICE 아웃룩 PST 파일 오류 검사 및 복구  (6) 2013.07.02
SECURE CRT 한글 깨짐 증상 해결 방법  (2) 2013.06.11
MS OFFICE OUTLOOK 글쓰기 화면 - 서식 입력 방법  (0) 2013.06.10

댓글