웹페이지 CSS 소스 - webpeiji CSS soseu

다른 사이트의 제작 기법을 보고 싶다면 HTML Javascript, CSS 소스를 볼 수 있어야 합니다. 크롬은 웹페이지 소스를 분석하는데 도움을 주는 개발자 도구를 제공하고 있습니다. 개발자 도구는 단순히 소스만 보여주는 것이 아니라 화면을 분석하는데 필요한 여러 기능들을 지원합니다. 다른 어떤 개발툴보다 뛰어나기 때문에 웹 페이지 분석할 때 항상 개발자 도구를 사용하고 있습니다.

▼ 간단하게 소스를 확인하는 방법은 다른 브라우저와 동일합니다. 웹 페이지에서 오른쪽 마우스를 누르면 나타나는 페이지 소스 보기메뉴를 이용하는 것입니다. 바로 실행하는 단축키는 Ctrl + U입니다.

웹페이지 CSS 소스 - webpeiji CSS soseu

페이지 소스보기 이후에는 HTML 소스가 있는 새로운 탭이 나타납니다. , 오른쪽 마우스를 누르면 나타나는 빠른 실행 메뉴 보기가 차단된 사이트는 나타나지 않습니다. 이런 경우에는 브라우저에서 제공하는 개발자 도구를 이용해야 합니다

▼ 두 번째는 개발자 도구를 통해서 확인하는 방법입니다. 주로 소스를 분석하기 위한 도구로 오른쪽 상단에 더보기 > 도구 더보기 > 개발자 도구 메뉴를 클릭해서 창을 띄울 수 있습니다. 단축키는 Ctrl + Shift + I혹은 F12입니다

F12 단축키를 눌러 개발자 도구를 띄우면 화면 하단이나 양 옆에 브라우저 내에 창이 나타납니다. 위치는 사용자가 정할 수 있으며, 새로운 창으로 띄울 수도 있습니다. 소스는 Elements탭에서 볼 수 있습니다

Elements 탭에서 오른쪽 영역의 창에는 디자인 소스인 CSS 코드를 보여줍니다. 특정 태그에 적용된 디자인 코드로 상단 파일 링크를 클릭하면 실제 소스 파일로 이동할 수 있습니다

CSS 소스가 들어간 실제 파일의 내용을 보고 싶다면 Sources 탭으로 이동해야 합니다

▼ 개발자 도구의 유용한 기능 중 하나는 사용자가 특정 웹 페이지 영역의 소스를 마우스 클릭 한번으로 찾아볼 수 있다는 것입니다. 개발자 도구 왼쪽 상단 끝에 화살표 아이콘을 클릭해서 파란색으로 전환합니다

▼ 다음 웹 페이지의 특정 영역에서 소스를 보고 싶은 곳이 있다면 마우스로 클릭합니다. 개발자 도구에서는 화면에서 마우스로 선택한 영역의 소스로 이동한 후 사용자가 구분하기 쉽도록 회색으로 블록 처리합니다

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

웹페이지 CSS 소스 - webpeiji CSS soseu
홈페이지 HTML 소스 보는 2가지 방법

실행 환경

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

전체 소스 코드 다운로드

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

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

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

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

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

웹페이지 CSS 소스 - webpeiji CSS soseu
다운로드 소스 코드 확인하기

  • 노트패드 사용법에 대한 설명은 아래 내용을 확인해 주세요

소스 다운로드 장점

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

소스 다운로드 단점

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

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

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

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

웹페이지 CSS 소스 - webpeiji CSS soseu
크롬 개발자 도구 열기

크롬 개발자 도구 사용법

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

크롬 개발자 도구 열기

  • 단축키 : F12, CTRL + i
  • 크롬 브라우저 메뉴 선택 > 도구 더 보기 선택 >개발자 도구 확인
웹페이지 CSS 소스 - webpeiji CSS soseu
크롬 개발자 도구

HTML 소스 코드 위치 찾기

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

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

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

웹페이지 CSS 소스 - webpeiji CSS soseu
크롬 개발자 도구 활용

HTML 복사

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

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

웹페이지 CSS 소스 - webpeiji CSS soseu
HTML 복사 화면 보기

CSS 복사

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

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

웹페이지 CSS 소스 - webpeiji CSS soseu
HTML CSS 복사 화면 결과

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

조회수: 468