[크롬] 웹페이지 소스코드 보기
인터넷 서핑을 하다가 우연히 디자인이 괜찮은 사이트를 발견했다고 하자.
예를 들어서 아래와 같은 사이트이다.
참 잘만들어지 사이트이다. 그리고 운영자가 오랜 기간 동안 사이트를 운영해 왔다는 점도 칭찬해 주고 싶은 사이트이다.
남시언닷컴
작가. 콘텐츠 크리에이터. 강사. 파워블로거 me@namsieon.com, skatldjs@gmail.com
namsieon.com
콘텐츠의 내용으로 봐서는 티스토리 같은데, UI가 상당히 깨끗한 것이 평소 티스토리 블로그에서 보던 것과는 달라 보인다.
사이트의 URL에도 tistory가 들어 있지 않다.
워드프레스등과 같은 별도의 CMS (Code Management System)을 이용하여 제작된 웝페이지인가 ?
어떤 테마나 스킨을 사용한 것일까 ?
....
궁금증이 많이 들것이다.
이 같은 것을 어떻게 추적해 볼 수 있을까?
이럴 경우에 나는 그 페이지의 소스코드를 한번 들여다본다. HTML이나 CSS의 전문가가 아니기 때문에 아주 상세한 내용은 알기 어렵지만 위와 같은 질문에 대한 대답 정도는 쉽게 구할 수 있다.
이때 사용하는 것이 바로 소스 코드 보기 명령이다.
크롬에서는 대표적으로 "Ctrl+U"와 "F12"가 있다
● 최근에 "은퇴 준비"라는 주제로 유튜브를 시작했어요.
실제 체험을 바탕으로 한 이야기를 담아 보려고 하니 많은 응원 부탁드려요 ! (좋아요...구독 말이예요..ㅎ)
1. Ctrl+U
Ctrl+U는 가장 간단하게 소스 코드를 보여 주는 단축키이다.
앞의 블로그 (남시언닷컴)의 경우도 크롬에서 이 사이트로 들어 간 다음에 "Ctrl+U"를 누르면 아래와 같은 소스 코드 창이 바로 열린다.
첫 줄만 봐도 몇 가지 정보가 있다.
JBFACTORY라는 곳의 스킨을 이용했다는 정보와 함께 그 스킨의 번호가 167이라는 것을 알 수 있다.
그 사이트를 한번 가 본다.
이 사이트에서 티스토리용 스킨인 JB SKIN 167을 5만원에 판매한다는 정보가 있다.
이렇게 사이트 들러 보면서 정보를 얻고 마음에 드는 스킨가 있으면 구매해도 좋을 것이다.
이번 경우는 굳이 HTML이나 CSS 코드를 보지 않고도 원하는 정보를 찾아 낼 수 있었다.
2. F12 (개발자 도구)
F12는 Ctrl+U 보다는 다양한 기능이 포함되어 있다. 소위 크롬 개발자 도구이다.
크롬의 특정 페이지에서 F12를 누르면 화면의 우측, 혹은 아래쪽에 아래와 같이 개발자 도구 화면이 뜬다. 우선 좁은 화면에서 보기가 쉽지가 않다.
좋은 방법은 듀얼 모니터를 쓰는 경우인데, 2개의 모니터중에 한 곳은 사이트의 화면, 다른 모니터에는 개발자 도구 화면을 올려놓는 것이다.
방법은 아래와 같다.
세로로 세개의 점이 있는 설정 아이콘 (1번)을 눌러서 Dock side 메뉴(2)를 열고, 거기서 맨 왼쪽에 있는 아이콘 (Unlock into separate window, 3번)을 선택하면 된다.
이렇게 하면 새 창에 개발자 도구, 즉 소스 코드 창이 나타나게 된다. 마우스로 원하는 모니터 화면으로 끌어 오면 된다.
아래 화면이 개발자 도구 화면이다.
첫 번째 선택탭인 Element(1번)가 소스 코드 보기이다.
다른 탭 (Console ~ Audits)도 유용한 것이 많은데 다음 기회에 소개하기로 하고, Element Tab을 선택하면 기본적으로 상기 Ctrl+U를 눌렀을 때와 동일한 내용이 보인다.
이 화면을 스크롤해가면서 필요한 정보를 찾아 내면 된다.
그리고, 재미있는 것은 "3번" 버턴이다. 이것을 누르고 나면 실시간으로 사이트의 "웹 페이지 화면"과 "소스 코드 화면"이 연동된다.
이 기능은 역시 구글답다.
만일 원래 화면에서 특정 영역에 커서를 두면, 예를 들어서 위 사이트에서 "최신글"이라는 부분에 마우스 커서를 두면 그것에 상응하는 소스 코드가 소스 화면에서 다른 색깔로 보인다. 이 기능은 역방향으로도 동작한다, 즉 소스코드의 특정 영역을 선택하면 그에 상응하는 웹페이지의 영역이 표시된다.
사이트를 분석하는 매우 유용한 기능이다.
이 "3번" 버턴은 토글로 작동하므로 만일 이 기능을 끄고 싶으면 이 버턴을 다시 누르면 된다.
그리고, 참고로 "2번"아이콘을 누르면 웹페이지 화면이 "스마트폰 화면"에서 어떻게 보이는지도 시뮬레이션 해 볼 수 있다. 흥미로운 기능이다.
이 글을 공유합시다
