구글 크롬 웹페이지에서 html, css 등 소스는 보는 법에 대해 알아보겠습니다. 홈페이지를 제작하거나 자신이 직접 수정 보완하기 위해서는 html, css 확인할 줄 알아야 합니다. 그러면 자주 사용하는 크롬에서 소스를 볼 줄 알아야 합니다.
크롬에서 웹페이지 HTML 소스 보는 방법들
- [ 마우스 오른쪽 ] 클릭 페이지 소스 보기
- 단축키 웹페이지 통합 소스 보기 [ CTRL + U ]
- 개발자 도구를 통한 소스 분석 [ F12 ]
- 개발자 도구를 활용한 특정위치 소스보기
1. [ 마우스 오른쪽 ] 클릭 페이지 HTML 소스 보기
먼저 크롬을 열고 자신이 보고 싶은 페이지로 이동을 합니다. 해당 화면에서 페이지 아무곳에서나 [ 오른쪽 마우스 ] 클릭하면 하단 메뉴에 [ 페이지 소스 보기] 나옵니다. 해당 메뉴를 클릭하면 바로 새로운 페이지에 html 소스가 보여 집니다.
해당 방법은 소스보기 방지 설정을 하지 않은 페이지만 가능합니다. 최근에는 페이지에 소스보기를 할 수 없도록 코드 삽입을 많이해서 마우스를 사용하지 못하는 경우가 있습니다.
마우스를 이용한 페이지 소스 보기 따라하기
[해당페이지 이동] – [오른쪽 마우스]-[페이지 소스 보기] 실행
이런 경우를 빼고는 직접 마우스를 활용해서 페이지마다 소스보기를 진행하면 간편하게 처리가 가능합니다.
2. 단축키 웹페이지 HTML 통합소스 보기 [ CTRL + U ]
다음은 [ 마우스 오른쪽 ] 클릭이 안될 때 처리하는 방식입니다. 여기서 보시면 너무 단순할지 모르지만 [ CTRL + U ] 키를 활용하면 바로 HTML 소스 보기 창이 나옵니다.
너무 단순하지만 소스보기 방지 설정이 되었다면 이방법을 사용하면 간단히 처리가 됩니다.
3. 개발자 도구를 통한 HTML 소스 분석 [ F12 ]
다음은 [ 개발자 도구] 활용한 HTML 소스 보기 방법입니다. 먼저 우측 상단에 상세 설정 메뉴가 있는데 해당 메뉴중에 [ 도구더보기 ] 있습니다. 그리고 해당 메뉴를 클릭하고 들어가면 [ 개발자 도구 ] 있는데 해당 메뉴를 선택합니다.
개발자 도구 단축키 [ F12 ] / [ CTRL + SHIFT + I ]
개발자도구로 선택해서 들어가게 되면 [ ELEMENRS ] 탭이 나오는 해당 탭에서 HTML 소스 정보를 제공하고 있습니다.
4. 개발자 모드를 활용한 특정위치 HTML 소스보기
개발자 모드에서 좋은점이 있는데 특정 영역을 마우스를 이용하여 선택을 하면 코드 위치로 자동으로 가서 보여준다는 겁니다. 어디에 어떤 코드가 사용 되었는지 쉽게 찾아 볼수 있습니다. 개발자 모드에서 가장 상단 왼쪽 아이콘 클릭하고 왼쪽 웹페이지 이동하면 관련 소스 코드로 안내해 줍니다.
특정위치 소스보기 단축키 [ CTRL + SHIFT + C ]
특히 웹페이지를 수정하거나 삭제할 때 유용한 기능입니다. 잘못 삭제하면 통째로 웹사이트가 망가질 수 있습니다. 그러니 해당 기능을 활용하면 좀 더 쉽고 빠르게 HTML 수정 및 삭제가 가능해 집니다.
마무리 정리
위와 같이 4가지의 크롬 웹페이지 HTML 소스 보는 법에 대해 알아봤습니다. 간단한 내용을 풀어 쓰다보니 양이 많아지긴 했지만 그래도 해보면 쉽습니다. 간단한 단축키를 사용해도 되고 개발자 도구로 들어가서 코드를 볼 수도 있습니다.
웹페이지 제약 사항이 모두 다르기 때문에 몇가지 방법을 알아두면 좋을 거 같습니다. 보안 때문에 마우스 기능을 사용하지 못하는 경우도 있으니깐요.
| [ 한글 유용한 기능 모음 ] ▶ 한글 그림 겹치기 방법 ▶ 한글 각주 다는법 및 설정 ▶ 한글 글자 겹치기 방법 ▶ 한글 워터마크 삽입 및 지우기 ▶ 한글 쪽번호 오류 해결 및 수정 ▶ 한글 표에 자동의 숫자 채우기 ▶ 한글 수식 공식 입력 방법 |