콘텐츠로 건너뛰기

홈페이지 HTML 소스 보는 2가지 방법

웹 사이트를 방문하다 보면 디자인이 마음에 들거나 기술 구현에 대해 궁금할 수 있습니다. HTML로 만들어진 웹사이트의 기술적인 구현을 분석하고 싶다면 크롬에서 제공하는 훌륭한 개발자 도구가 좋은 선택이 될 수 있습니다. HTML 및 CSS, Javascript 소스 코드를 보다 쉽고 편리하게 분석할 수 있는 강력한 도구를 소개해 드립니다.

홈페이지 HTML 소스 보는 2가지 방법
홈페이지 HTML 소스 보는 2가지 방법

실행 환경

Chrome : 많은 종류의 브라우저가 있지만 점유율에서 압도적인 Google Chrome로 설명 드립니다.

전체 소스 코드 다운로드

웹페이지의 전체 소스 코드를 확인하기 위해 크롬 브라우저 메뉴에서 페이지를 다른 이름으로 저장을 선택해 줍니다. 해당 방법은 웹페이지의 전체 소스 코드를 분석할 때 좋습니다.

다운로드 받은 HTML 파일을 Text Editor나 메모장으로 열어 분석하고자 하는 소스 코드를 확인합니다. 이 방법은 전체 코드를 확인하고 스타일 가이드를 사용하는 방법과 코드의 구조를 파악하는 데 도움이 될 수 있으므로 적절한 Editor를 선택하여 전체 소스 코드를 확인해 주세요

  • 크롬 브라우저 메뉴 선택
  • 도구 더 보기 선택
  • 페이지를 다른 이름으로 저장
  • 다운로드 후 파일 열기
전체 소스 코드 다운로드
전체 소스 코드 다운로드

다운로드 소스 코드 확인하기

이미 사용하고 있는 Editor가 있다면 해당 프로그램을 통해 파일을 열어 소스 코드를 확인합니다. 제 경우에는 Notepad++를 사용하겠습니다.

다운로드 소스 코드 확인하기
다운로드 소스 코드 확인하기
  • 노트패드 사용법에 대한 설명은 아래 내용을 확인해 주세요

소스 다운로드 장점

웹페이지의 전체 소스 코드를 다운 받아 분석하는 방법의 장점은 Editor에서 제공하는 검색 및 편집 기능을 충분히 활용할 수 있고 변경 내용에 따라 파일 관리가 편리합니다.

소스 다운로드 단점

그러나 이 경우 브라우저를 사용하여 소스 코드를 분석하는 것보다 시간이 더 오래 걸립니다. 데이터의 양이 증가하면 다운 받는 시간이 오래 걸리고, 이는 사용자가 인터넷을 통해 큰 크기의 페이지나 웹사이트를 편집하는데 불리하게 작용할 수 있습니다.

위와 같은 문제점을 감안하여, 불필요한 다운로드 시간을 낭비하지 않고 효율적으로 분석하기 위한 방법으로 개발자 도구를 이용하는 것입니다.

크롬 개발자 도구로 실시간 분석

크롬 개발자 도구를 이용하면 웹페이지의 구조와 스타일을 선택적으로 분석할 수 있으며 변경 내용도 실시간으로 파악할 수 있습니다. HTML 소스 코드와 복잡하게 얽혀있는 Javascript 및 CSS를 종합적으로 표시해 주기 때문에 빠른 시간에 원하는 구조나 값을 변경하여 분석할 수 있습니다.

크롬 개발자 도구
크롬 개발자 도구 열기

크롬 개발자 도구 사용법

개발자 도구를 사용하여 웹 페이지를 디버깅하는 간단한 방법을 알아보겠습니다. 그 전에 기본 개념을 빠르게 살펴보겠습니다. HTML은 인터넷에 표시되는 페이지의 기본 콘텐츠로 키워드, 메타데이터 등의 중요한 정보가 포함되어 있습니다. CSS는 속성 텍스트, 이미지 등과 같은 요소의 스타일을 지정하는 데 사용되는 규칙입니다. 어떻게 보이는지에 대한 설명으로 볼 수 있습니다.

크롬 개발자 도구 열기

  • 단축키 : F12, CTRL + i
  • 크롬 브라우저 메뉴 선택 > 도구 더 보기 선택 >개발자 도구 확인
크롬 개발자 도구
크롬 개발자 도구

HTML 소스 코드 위치 찾기

  • 1번 위치의 아이콘을 선택해 줍니다.
  • 소스 코드 확인을 위해 웹페이지에서 원하는 위치를 클릭해 줍니다.
  • HTML과 CSS가 선택한 위치의 소스 코드로 변경됩니다.
크롬 개발자 도구 소스 코드 위치 찾기
크롬 개발자 도구 소스 코드 위치 찾기

크롬 개발자 도구 활용 하여 HTML 소스 분석

웹페이지에서 제공하는 디자인이 어떻게 구현되었는지 궁금하거나 나의 홈페이지나 블로그에 적용하고 싶을 경우 HTML과 CSS를 복사하는 방법이 있습니다. 실제 웹페이지에서 제공하는 버튼 디자인을 복사하여 구조를 파악하고 HTML Viewr를 통해 확인해 보겠습니다.

크롬 개발자 도구 활용
크롬 개발자 도구 활용

HTML 복사

  • 소스 코드 위치 찾기 과정을 수행합니다.
  • 선택된 HTML에서 마우스 오른쪽 클릭하여 서브 메뉴를 팝업 시킵니다.
  • 메뉴에서 Copy > Copy element 선택
  • 이제 소스 코드가 클립보드에 복사 되었습니다.
  • Editor 나 Html Viewr에 복사한 내용을 붙여 넣기

저는 Online HTML Viwer를 이용하겠습니다.

HTML 복사 화면 보기
HTML 복사 화면 보기

CSS 복사

먼저 CSS 복사를 위해 HTML과 동일한 방법으로 서브 메뉴를 팝업 시켜 줍니다.

CSS 복사
CSS 복사
  • Copy > Copy styles 선택
  • 클립보드에 CSS 가 복사 되었습니다.
  • Viewer에 붙여 넣기
    • CSS를 적용하기 위해 style tag로 감싸줍니다.
    • 복사한 CSS 내용을 button tag를 정의해 줍니다.
<style>
button{
    overflow: visible;
    margin: 0;
    font-weight: 400;
    font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: rgba(255, 255, 255, 1);
    fill: rgba(255, 255, 255, 1);
    background: rgba(25, 25, 25, 1);
    border-color: rgba(25, 25, 25, 1);
    border-radius: 99em;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    display: inline-block;
    text-decoration: none;
    line-height: 24px;
    padding: 7px 20px 9px;
    width: 213px;
    font-size: 20px;
}
</style>    

<button class="bv b ec eb ca ed cc cd ce cf cg bh ch ci cj ck cl ee cm cn co cp cq">Start reading</button>

HTML 소스 코드 복사 결과

웹페이지의 표시된 버튼을 HTML과 CSS 소스 코드 복사로 화면에 표시해 보았습니다. 이 방법은 다양하게 활용될 수 있으며 이 접근 방식은 직접 구현하지 않더라도 멋진 디자인을 복사하고 수정하여 자신의 것으로 사용할 수 있습니다.

HTML CSS 복사 화면 결과
HTML CSS 복사 화면 결과

홈페이지 HTML 소스 보기를 마치며

크롬Chrome 브라우저를 통해 HTML 소스 코드를 보는 방법을 알아보았습니다. 개발자 도구를 이용하시면 소스 코드를 보다 쉽고 편리하게 분석하실 수 있습니다. 오늘 소개한 내용 이외에 강력한 기능을 제공할 수 있으니 천천히 기능 확장에 대해 공부해보시는 것도 좋을 것 같습니다.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

답글 남기기

홈페이지 HTML 소스 보는 2가지 방법 21
error: