소스 코드 보는 방법

PDF 다운로드
공동 작성자 위키하우 직원

PDF 다운로드

이 위키하우 글을 읽고 널리 사용되는 브라우저의 웹사이트 뒤에 숨겨진 코드(예: HTML, CSS, JavaScript)인 소스 코드를 볼 수 있는 방법을 알아보자. 사파리에서 실행할 수 있는 수법을 시행하지 않으면, 모바일 브라우저에서는 웹사이트의 소스 코드를 살펴볼 수 없다.

방법 1
방법 1 의 3:

크롬, 파이어폭스, 에지, 인터넷 익스플로러 사용법

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/View-Source-Code-Step-1-Version-6.jpg\/v4-460px-View-Source-Code-Step-1-Version-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/View-Source-Code-Step-1-Version-6.jpg\/v4-728px-View-Source-Code-Step-1-Version-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    크롬, 파이어폭스, 마이크로소프트 에지, 인터넷 익스플로러에서 동일하게 사용할 수 있는 방법이다.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/11\/View-Source-Code-Step-2-Version-6.jpg\/v4-460px-View-Source-Code-Step-2-Version-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/11\/View-Source-Code-Step-2-Version-6.jpg\/v4-728px-View-Source-Code-Step-2-Version-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    소스 코드를 살펴보고자 하는 페이지로 이동한다.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6f\/View-Source-Code-Step-3-Version-6.jpg\/v4-460px-View-Source-Code-Step-3-Version-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6f\/View-Source-Code-Step-3-Version-6.jpg\/v4-728px-View-Source-Code-Step-3-Version-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    하나의 버튼만 있는 맥 컴퓨터를 사용할 경우, Control 를 누른 상태에서 클릭하면 드롭다운 메뉴가 나타난다.
    • 페이지 오른쪽 클릭을 할 때 링크나 사진에 오른쪽 클릭을 하면 잘못된 메뉴가 나타날 수 있다.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/49\/View-Source-Code-Step-4-Version-6.jpg\/v4-460px-View-Source-Code-Step-4-Version-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/49\/View-Source-Code-Step-4-Version-6.jpg\/v4-728px-View-Source-Code-Step-4-Version-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    혹은 소스 보기 클릭하기. 이렇게 하면 새로운 창으로 혹은 현재 창 하단에 소스 코드가 나타난다.
    • 크롬과 파이어폭스일 경우 페이지 소스 보기 가 나타나며, 마이크로소프트 에지나 인터넷 익스플로러의 경우 소스 보기 메뉴가 나타난다.
    • Ctrl + U (PC) 혹은 ⌥ Option + ⌘ Command + U (Mac)을 눌러서 소스 코드를 보는 방법도 있다.
    광고
방법 2
방법 2 의 3:

사파리

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3d\/View-Source-Code-Step-5-Version-5.jpg\/v4-460px-View-Source-Code-Step-5-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3d\/View-Source-Code-Step-5-Version-5.jpg\/v4-728px-View-Source-Code-Step-5-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    파란색의 나침반 모양의 앱이다.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/57\/View-Source-Code-Step-6-Version-5.jpg\/v4-460px-View-Source-Code-Step-6-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/57\/View-Source-Code-Step-6-Version-5.jpg\/v4-728px-View-Source-Code-Step-6-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    클릭하기. 맥의 메뉴 바 좌측 상단 면에 있는 사파리를 클릭하면 드롭다운 메뉴가 나타난다.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8a\/View-Source-Code-Step-7-Version-5.jpg\/v4-460px-View-Source-Code-Step-7-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8a\/View-Source-Code-Step-7-Version-5.jpg\/v4-728px-View-Source-Code-Step-7-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    클릭하기. 드롭다운 메뉴 중앙에 있는 옵션이다.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ed\/View-Source-Code-Step-8-Version-5.jpg\/v4-460px-View-Source-Code-Step-8-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ed\/View-Source-Code-Step-8-Version-5.jpg\/v4-728px-View-Source-Code-Step-8-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    탭 클릭하기. 설정 창의 우측 상단 코너에서 찾아볼 수 있다.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f3\/View-Source-Code-Step-9-Version-5.jpg\/v4-460px-View-Source-Code-Step-9-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/View-Source-Code-Step-9-Version-5.jpg\/v4-728px-View-Source-Code-Step-9-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    설정 창 하단 부근에 있는 옵션으로, 맥의 메뉴 바에 나타난 개발자용 메뉴를 확인할 수 있다.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/50\/View-Source-Code-Step-10-Version-5.jpg\/v4-460px-View-Source-Code-Step-10-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/50\/View-Source-Code-Step-10-Version-5.jpg\/v4-728px-View-Source-Code-Step-10-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    소스 코드를 보고 싶은 페이지로 이동한다.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ec\/View-Source-Code-Step-11-Version-5.jpg\/v4-460px-View-Source-Code-Step-11-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ec\/View-Source-Code-Step-11-Version-5.jpg\/v4-728px-View-Source-Code-Step-11-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    클릭하기. 맥의 메뉴 바의 창 메뉴 좌측에 있는 메뉴이다.
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0d\/View-Source-Code-Step-12-Version-5.jpg\/v4-460px-View-Source-Code-Step-12-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0d\/View-Source-Code-Step-12-Version-5.jpg\/v4-728px-View-Source-Code-Step-12-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    클릭하기. 드롭다운 메뉴 하단 부근에 있으며, 클릭하면 사파리에서 웹 페이지의 소스 코드를 확인할 수 있다.
    • 혹은 ⌥ Option + ⌘ Command + U 를 눌러서 소스 코드를 살펴보는 방법도 있다.
    광고
방법 3
방법 3 의 3:

위키 활용법

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/80\/View-Source-Code-Step-13-Version-4.jpg\/v4-460px-View-Source-Code-Step-13-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/80\/View-Source-Code-Step-13-Version-4.jpg\/v4-728px-View-Source-Code-Step-13-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/aa\/View-Source-Code-Step-14-Version-5.jpg\/v4-460px-View-Source-Code-Step-14-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/aa\/View-Source-Code-Step-14-Version-5.jpg\/v4-728px-View-Source-Code-Step-14-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e1\/View-Source-Code-Step-15-Version-5.jpg\/v4-460px-View-Source-Code-Step-15-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e1\/View-Source-Code-Step-15-Version-5.jpg\/v4-728px-View-Source-Code-Step-15-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    광고

팁

  • 모바일 브라우저에서 소스 코드를 볼 수는 없지만, 아이폰이나 아이패드에서 사파리 북마크를 저장하면 모바일 사파리 소스 코드를 볼 수 있다.
광고

경고

  • 웹사이트 소스 코드 확인 기능을 표명하는 제3자 프로그램은 주의해서 다운로드하는 것이 좋다.


광고

관련 위키하우

윈도우 10 설치하는 방법
맥북 프로 리셋하는 법
액정 보호 필름의 기포 제거하는 방법
PC에서 모니터 1과 2를 바꾸는 방법
CPU 온도 알아보는 방법
노트북 컴퓨터 포맷하는 법
컴퓨터에서 삭제된 파일을 복구하는 방법
컴퓨터 포맷하는 법
USB로 윈도우 설치하는 법
윈도우에서 블루스크린 해결하는 법
노트북 충전이 안 될 때 해결하는 방법
엔비디아(Nvidia) 드라이버 삭제하는 방법
물에 젖은 휴대폰을 살리는 방법
노트북 속도 빠르게 하는 방법
광고

이 위키하우에 대하여

다른 언어
이 문서는 55,902 번 조회 되었습니다.

이 글이 도움이 되었나요?

광고