크롬에서 웹페이지 HTML, CSS 소스 보기: 초보자 가이드

 

웹사이트 제작이나 수정 작업을 할 때, 웹페이지의 HTML과 CSS소스를 확인하는 것은 매우 중요합니다. 특히 구글 크롬을 사용하면 다양한 방법으로 웹페이지 소스를 쉽게 확인할 수 있습니다. 이번 포스팅에서는 크롬에서 HTML, CSS 소스를 확인하는 4가지 방법을 소개하며, 이를 통해 웹사이트 최적화 및 디버깅 작업을 효율적으로 할 수 있도록 도와드리겠습니다.

 

 

 

 

1. 마우스 오른쪽 클릭을 통한 HTML 소스 보기

 

크롬에서 가장 간단한 방법은 오른쪽 마우스 클릭을 이용한는 것입니다. 페이지의 빈 공간에서 마우스 오른쪽을 클릭 후 , 페이지 소스보기를 선택하면 새 탭에 HTML 소스가 표시됩니다.

 

 

일부 웹 사이트는 보안 설정으로 인해 이 기능이 제한될 수 있습니다.

 

 

 

2. 단축키 [CTRL + U]를 이용한 빠른 소스 보기

 

마우스 클릭이 제한된 페이지에서는  "단축키 [CTRL + U]"를 사용할 수 있습니다. 이 단축키를 누르면 즉시 해당 페이지의  HTML 코드를 새 탭에서 확인할 수 있습니다.

단축키 Ctrl + U

 

 

3. 개발자 도구 [F12]를 통한 소스 분석

 

개발자 도구는 웹 개발자들이 많이 사용하는 기능으로, 크롬에서 F12 또는 "[CTRL + SHIFT + I]"를 누르면 실행됩니다. 개발자 도구는 HTML 뿐만 아니라 CSS, 자바스크립트, 네트워크 요청 등을 상세히 확인할 수 있습니다.

 

Elements 탭에서 HTML 소스 정보를 제공

 

주요 기능

    ● HTML 구조 실시간 확인

    ● CSS 스타일 분석 및 수정

    ● JavaScript 디버깅

 

4. 특정 위치 소스 보기 [CTRL + SHIFT + C]

 

특정 웹페이지의 특정 부분의 소스 코드를 보고 싶다면, "[CTRL + SHIFT + C]"를 이용해 개발자 도구의 선택 모드를 활성화할 수 있습니다. 마우스로 원하는 위치를 클릭하면 해당 위치의 HTML 및  CSS 코드가 자동으로 표시됩니다.

 

마우스 커서를 위치한 곳에 정보를 보여 줌.

 

 

페이지에서 특정 요소를 빠르게 찾아 디버깅 가능

웹사이트의 버튼, 텍스트 상자 등의 CSS 수정 작업 

 

결론

크롭에서 웹페이지 HTML과 CSS 소스를 확인하는 4가지 방법을 소개했습니다. 이 방법들을 활용하면 웹사이트의 구조를 이해하고, 디버깅 및 최적화 작업을 훨씬 쉽게 할 수 있습니다. 웹페이지 소스를 볼 수 있는 다양한 방법을 알고 있다면, 다양한 상황에서 적절하게 대응할 수 있을 것입니다.

 

- 오른쪽 마우스 클릭 : 기본적인 HTML 소스 보기

- CTRL + U : 빠른 통합 소스 보기

- 개발자 도구 [F12] : 심층 분석 및 실시간 수정

- CTRL + SHIFT + C : 특정 위치 소스 확인