html 홈페이지 소스 보기
▣ html 홈페이지 소스 보기
■ 홈페이지를 만들 때 디자인 때문에 고민하신다면 예쁘게 만들어진 웹 사이트들을 둘러보다가 괜찮은 곳의 소스를 확인하고 응용해서 사용할 수 있는데요. 이번 글에서는 잘 만들어진 웹 사이트의 html 소스를 확인하는 방법을 알아보고 참고로 내 컴퓨터에 저장된 html 파일을 메모장에서 열어서 확인해보겠습니다. 우리나라는 아직 인터넷 익스플로러와 크롬 브라우저를 많이 사용하고 계시기 때문에 두 브라우저에서 확인하는 방법을 정리해보겠습니다.
먼저 익스플로러부터 알아보겠습니다.
■ 홈페이지 소스를 보고 싶은 웹 페이지를 열고 [도구] 버튼을 클릭해서 나타나는 메뉴 중에서 "개발자 도구" 메뉴를 선택합니다. 단축키는 [F12] 입니다.
■ 이렇게 HTML, CSS, 스크립트 등의 소스를 모두 확인할 수 있구요.
다음은 크롬 브라우저에서 확인해보겠습니다.
■ 크롬은 "설정" 버튼을 클릭해서 [도구 더보기 ▶ 개발자 도구메뉴]를 선택하면 소스를 확인할 수 있는데요. 단축키는 [Ctrl +Shift + I] 입니다.
■ 이렇게 해당 페이지의 HTML 소스를 확인할 수 있습니다. 저는 html 공부를 시작한지 얼마 되지 않았는데요. 이렇게 이런저런 웹 사이트 둘러보면서 어떻게 만들어졌나 보면 공부하는데 도움이 많이 되더라구요. 그리고 홈페이지를 만들다가 디자인 때문에 막막하신 분들도 이런저런 웹 사이트 둘러보다가 괜찮은 곳 있으면 이렇게 소스를 확인해서 내 홈페이지를 만들 때 응용해서 사용하시면 좋을 거에요.
마지막으로 내 컴퓨터에 저장되어 있는 html 파일을 메모장에서 열어보는 과정만 잠깐 살펴보고 마무리하겠습니다.
■ 내 컴퓨터에 저장된 html 파일은 기본 연결 프로그램이 크롬이나 익스플로러 등의 웹 브라우저 일 겁니다. 이 녀석을 그대로 클릭해서 열면 웹 브라우저가 열리게 되겠죠? 소스를 보기 위해서는 연결프로그램을 메모장으로 변경해줘야 합니다. 파일을 오른쪽 마우스로 클릭하셔서 [연결 프로그램]을 메모장으로 변경해서 실행하면......
■ 저장된 html 파일의 소스를 확인할 수 있습니다.