웹사이트의 HTML 코드를 보는 방법

템플릿 페이지

프레임 기반 웹사이트는 콘텐츠가 아닌 프레임셋 레이아웃을 표시하는 경우가 많습니다.

이미지 크레디트: vetkit/iStock/게티 이미지

웹 사이트를 구축하는 데 사용되는 기본 HTML 코드는 숨겨져 있지 않지만 적절한 도구만 있으면 누구나 쉽게 액세스할 수 있습니다. 예를 들어 Firefox, Chrome, Safari, Opera 및 Internet Explorer와 같은 웹 브라우저에는 웹 사이트의 HTML, CSS 또는 JavaScript 코드를 직접 볼 수 있는 여러 가지 방법이 있습니다. 또한 일부 전용 웹 개발자 도구는 로컬 디스크에 저장된 파일처럼 인터넷에서 웹 페이지를 로드하고 열 수 있습니다.

브라우저에서 소스 보기

웹사이트의 HTML 코드를 보는 데 필요한 단계는 기본적으로 Firefox, Chrome, Safari, Opera 및 Internet Explorer에서 동일합니다. 텍스트만 포함된 웹 페이지 섹션을 마우스 오른쪽 단추로 클릭한 다음 "소스 보기" 또는 "페이지 소스 보기" 옵션을 선택하십시오. 브라우저 설정에 따라 HTML 코드가 새 브라우저 탭이나 별도의 응용 프로그램 창에서 열립니다.

오늘의 비디오

소스 코드를 디스크에 저장

나중에 웹 사이트의 코드를 검사하거나 편집해야 하는 경우 페이지를 하드 드라이브에 저장할 수 있습니다. Firefox 또는 Safari에서 웹 페이지를 마우스 오른쪽 버튼으로 클릭하면 "다른 이름으로 페이지 저장" 옵션이 제공됩니다. Chrome 및 Opera에는 "다른 이름으로 저장" 옵션이 있습니다. Internet Explorer를 사용하여 웹 페이지를 저장하려면 "도구", "파일", "다른 이름으로 저장"을 차례로 클릭하십시오. 웹페이지 외에도 자체적으로 브라우저는 웹에 로컬로 저장된 페이지에서 사용하는 모든 이미지, CSS 파일 및 JavaScript를 저장합니다. 섬기는 사람.

Firefox, Chrome, Opera 및 Internet Explorer는 각각 렌더링된 웹 페이지와 해당 HTML, CSS 및 JavaScript 코드를 동시에 볼 수 있는 개발자 모드를 제공합니다. 웹에서 요소를 클릭하면 해당 코드가 개발자 디스플레이 패널에 나타납니다. 개발자 패널은 옵션 또는 구성 도구를 통해 액세스할 수 있습니다. Safari에는 기본 개발자 도구가 없지만 확장 프로그램으로 설치할 수 있습니다.

웹 개발자 애플리케이션

Dreamweaver, Kompozer 및 Microsoft Expressions와 같은 웹 사이트 디자인 도구를 사용하면 URL을 사용하여 온라인 웹 페이지를 열 수 있습니다. 소스 코드 전용 보기 또는 분할, 미리 보기 및 소스 보기에서 HTML 코드를 봅니다. 또한 코드를 편집하고 변경 사항을 실시간으로 볼 수 있습니다. 웹사이트의 서버에 저장된 실제 코드는 절대 변경되지 않습니다.

발생할 수 있는 문제

의도적이든 아니든 일부 웹사이트는 HTML 코드를 쉽게 포기하지 않습니다. 예를 들어, 일부 사이트는 오른쪽 클릭을 차단하는 JavaScript 코드를 사용합니다. 디스크에 페이지를 다운로드하거나 브라우저에서 JavaScript를 비활성화하여 소스 코드를 계속 볼 수 있습니다. 다른 사이트는 HTML 프레임 또는 iframe을 사용하므로 소스에 직접 액세스할 수 없습니다. Firefox, Chrome, Safari 및 Opera는 프레임 기반 웹사이트를 감지하고 프레임의 소스 코드를 볼 수 있는 옵션을 자동으로 제공합니다. 웹 페이지에서 다른 도메인에 저장된 JavaScript 또는 CSS 파일을 사용하는 경우 다음을 통해 해당 파일의 코드를 직접 볼 수 있습니다. 액세스할 수 있는 HTML 코드에서 URL을 복사한 다음 새 브라우저 탭의 주소 표시줄에 붙여넣습니다.