크롬 브라우저 웹 페이지 소스 보기, HTML 디자인 확인하기

다른 사이트의 제작 기법을 보고 싶다면 HTML 과 Javascript, CSS 소스를 볼 수 있어야 합니다. 크롬은 웹페이지 소스를 분석하는데 도움을 주는 개발자 도구를 제공하고 있습니다. 개발자 도구는 단순히 소스만 보여주는 것이 아니라 화면을 분석하는데 필요한 여러 기능들을 지원합니다. 다른 어떤 개발툴보다 뛰어나기 때문에 웹 페이지 분석할 때 항상 개발자 도구를 사용하고 있습니다.

 

 

◎ 웹 페이지 소스 보기

 

 

▼ 간단하게 소스를 확인하는 방법은 다른 브라우저와 동일합니다. 웹 페이지에서 오른쪽 마우스를 누르면 나타나는 페이지 소스 보기 메뉴를 이용하는 것입니다. 바로 실행하는 단축키는 Ctrl + U 입니다.

 

▼ 페이지 소스보기 이후에는 HTML 소스가 있는 새로운 탭이 나타납니다. 단, 오른쪽 마우스를 누르면 나타나는 빠른 실행 메뉴 보기가 차단된 사이트는 나타나지 않습니다. 이런 경우에는 브라우저에서 제공하는 개발자 도구를 이용해야 합니다. 

 

 

◎ 개발자 도구로 소스 분석하기

 

 

▼ 두 번째는 개발자 도구를 통해서 확인하는 방법입니다. 주로 소스를 분석하기 위한 도구로 오른쪽 상단에 더보기 > 도구 더보기 > 개발자 도구 메뉴를 클릭해서 창을 띄울 수 있습니다. 단축키는 Ctrl + Shift + I 혹은 F12 입니다. 

 

▼ F12 단축키를 눌러 개발자 도구를 띄우면 화면 하단이나 양 옆에 브라우저 내에 창이 나타납니다. 위치는 사용자가 정할 수 있으며, 새로운 창으로 띄울 수도 있습니다. 소스는 Elements 탭에서 볼 수 있습니다. 

 

▼ Elements 탭에서 오른쪽 영역의 창에는 디자인 소스인 CSS 코드를 보여줍니다. 특정 태그에 적용된 디자인 코드로 상단 파일 링크를 클릭하면 실제 소스 파일로 이동할 수 있습니다. 

 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 구글 크롬 개발자 도구 사용법 및 새창으로 띄우는 방법 ▶ 크롬 Chrome 브라우저 자바스크립트 실행 안될 때 활성화 하는 방법 ▶ 자바스크립트 크롬 브라우저로 디버깅 하는 방법 ▶ 크롬 개발자 도구 컬러 피커(Color Picker)로 색상값 알아 내기 ▶ 구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법

 

 

 

▼ CSS 소스가 들어간 실제 파일의 내용을 보고 싶다면 Sources 탭으로 이동해야 합니다. 

 

 

◎ 사용자가 원하는 특정 위치의 소스 보기

 

 

▼ 개발자 도구의 유용한 기능 중 하나는 사용자가 특정 웹 페이지 영역의 소스를 마우스 클릭 한번으로 찾아볼 수 있다는 것입니다. 개발자 도구 왼쪽 상단 끝에 화살표 아이콘을 클릭해서 파란색으로 전환합니다. 

 

▼ 다음 웹 페이지의 특정 영역에서 소스를 보고 싶은 곳이 있다면 마우스로 클릭합니다. 개발자 도구에서는 화면에서 마우스로 선택한 영역의 소스로 이동한 후 사용자가 구분하기 쉽도록 회색으로 블록 처리합니다. 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 구글 크롬 개발자 도구 사용법 및 새창으로 띄우는 방법 ▶ 크롬 Chrome 브라우저 자바스크립트 실행 안될 때 활성화 하는 방법 ▶ 자바스크립트 크롬 브라우저로 디버깅 하는 방법 ▶ 크롬 개발자 도구 컬러 피커(Color Picker)로 색상값 알아 내기 ▶ 구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법