타 사이트의 HTML 소스보기

오늘 HTML 관련 이야기에서는 어찌보면 코딩을 배울 때 가장 처음에 해 봐야 하는 사이트의 HTML 소스보기 방법에 대한 이야기를 해 볼까 한다.

HTML 소스보기는 처음 코딩을 배울 때 매우 유용하다. 잘 만들어진 사이트의 소스코드는 그 자체로 좋은 교재가 되기 때문이다. 또한, 실제 코딩을 하면서 웹 브라우저에 어떻게 나타나는지 등을 보면서 체크하는 데에도 도움이 된다.

웹 브라우저에 따라..

이름이 다소 다를 수 있고, 개발자 모드의 제공 형태도 약간씩 다를 수는 있으나 모든 웹 브라우저가 기본적으로 소스보기 기능을 제공한다. 크게, 익스플로러와 구글 크롬의 HTML 소스보기 방법에 대해 알아보자.

네이버의 HTML 소스코드 보기를 해 보자.

1. 상단 메뉴의 보기

2. 소스

만일, 상단 메뉴바가 숨겨져 있다면? Alt를 누르면 일시적으로 메뉴창이 나타남으로 참고하면 되겠다. 또한, 우클릭 > 소스보기 메뉴를 사용해도 되겠다.

그럼, 개발자도구가 켜지면서 네이버 홈의 HTML 소스를 확인할 수 있다.

크롬역시 메뉴 또는 우클릭을 통해 '페이지 소스 보기' 메뉴를 제공한다.

익스플로러와는 다소 다른 방식의 보기 화면을 제공하나.. 그 코드는 당연히 동일하다.

처음, 코딩을 접할 때.. 이런 복잡한 코드들을 보면 상당히 좌절감을 느낄 수도 있겠다. 뭐.. 필자도 그러했으니 말이다.

다만..

처음부터 너무 겁먹을 필요는 없다 하겠다. 언듯 복잡해 보여도 몇가지 태그를 배워나가면서 하나씩 그 의미를 새기다 보면 그렇게 어려운 구성은 아니다.

HTML 코드는 다른 PHP나 자바등의 언어처럼 이해하기 난해한 부분은 없다는 점.. 강조해 보면서 오늘 HTML 소스보기에 관한 이야기는 이만 줄일까 한다.