Chrome에서 HTML 코드를 보는 방법

장치 링크

• 기계적 인조 인간
• 아이폰
• 크롬북
• 맥
• 윈도우
• 장치가 없습니까?

웹 페이지를 구성하는 요소가 궁금하십니까? 웹 사이트에서 글꼴 크기 또는 색상을 변경하는 방법을 알고 싶으십니까? 웹 페이지의 HTML 코드를 보면 이러한 모든 작업과 그 이상을 수행할 수 있습니다.

이 자습서에서는 Chrome에서 웹페이지의 HTML 코드를 보는 방법을 보여줍니다.

Chrome에서 HTML 코드 보기

HTML로 작성할 때 소스 코드는 웹 페이지의 구조와 내용을 정의하는 데 사용되는 일련의 태그 및 속성입니다.

소스 코드는 웹 브라우저에서 읽고 화면에 표시되는 그래픽 웹 페이지로 변환됩니다. 웹 페이지의 모양과 느낌을 정의하는 것 외에도 소스 코드를 사용하여 팝업 창, 양식 및 드롭다운 메뉴와 같은 상호 작용을 추가할 수도 있습니다.

일반 인터넷 사용자는 웹 페이지의 HTML 소스 코드를 볼 필요가 없을 수도 있지만 일부 사용자가 보고 싶어하는 몇 가지 이유가 있습니다.

개발자의 경우 소스 코드를 보는 것은 페이지가 어떻게 구성되어 있는지 이해하고 어떤 스타일 및 스크립팅 요소가 사용되는지 확인하는 데 유용한 방법이 될 수 있습니다. 디자이너의 경우 다른 디자이너가 HTML을 사용하여 효과적인 레이아웃을 만든 방법을 확인하는 것이 도움이 될 수 있습니다.

경우에 따라 사용자는 오류를 해결하거나 특정 웹 사이트 또는 웹 응용 프로그램의 작동 방식에 대해 자세히 알아보기 위해 소스 코드를 보기를 원할 수도 있습니다. 이유가 무엇이든 HTML 소스 코드를 보는 것은 Chrome에서 비교적 간단한 프로세스입니다.

Windows PC의 Chrome에서 웹페이지의 HTML 코드를 보는 방법

Windows 운영 체제는 Chrome과 가장 호환되는 시스템 중 하나입니다. Chrome은 Microsoft가 주요 기여자인 오픈 소스 Chromium 프로젝트 위에 구축되었습니다. 이 호환성은 널리 사용되는 브라우저를 통해 사용자가 모든 웹 사이트의 HTML 코드를 볼 수 있는 HTML 영역으로 확장됩니다.

두 가지 방법으로 HTML 코드를 볼 수 있습니다.

페이지 소스 보기 사용

이 방법은 간단합니다.

1. Chrome을 열고 HTML 소스 코드를 보려는 페이지로 이동합니다.
   
2. 페이지를 마우스 오른쪽 버튼으로 클릭하고 페이지 소스 보기를 선택하거나 키보드에서 Ctrl + U를 눌러 새 탭에서 소스 코드를 엽니다.
   

소스 코드가 새 탭에 표시되며 스크롤하여 해당 페이지의 HTML 마크업을 볼 수 있습니다.

개발자 도구 사용

Google Chrome에서 개발자 도구를 사용하여 웹 페이지의 소스 코드를 검사하려면 다음 단계를 따르십시오.

1. Chrome을 열고 검사하려는 웹 페이지로 이동합니다.
   
2. 키보드에서 Ctrl + Shift + I를 누릅니다. 개발자 도구 창이 보고 있는 웹 페이지 옆의 도크에서 열립니다.
   
3. 창 상단의 "요소" 탭을 클릭합니다. 그러면 웹 페이지의 HTML 소스 코드가 표시됩니다.
   
4. 이제 페이지의 소스 코드를 검토할 수 있습니다. 요소를 축소하려면 태그 이름 옆에 있는 삼각형을 클릭합니다. 구성 요소에 대한 자세한 정보를 보려면 구성 요소를 마우스 오른쪽 버튼으로 클릭하고 "검사"를 선택하십시오.
   

이 방법은 HTML 페이지에 가장 적합합니다. 다른 유형의 웹 페이지의 소스 코드를 볼 수 있지만 형식을 읽기가 더 어려울 수 있습니다.

Mac의 Chrome에서 웹 페이지의 HTML 코드를 보는 방법

웹 개발자라면 웹 페이지의 HTML 코드를 볼 수 있어야 합니다. 이렇게 하면 페이지가 어떻게 구성되어 있는지 확인하고 발생할 수 있는 문제를 해결할 수 있습니다. 다행스럽게도 Mac의 Chrome에서는 쉽게 할 수 있습니다. 다음 단계를 따르십시오.

1. Chrome을 열고 HTML 코드를 보려는 웹페이지로 이동합니다.
   
2. 페이지를 마우스 오른쪽 버튼으로 클릭하고 "검사"를 선택합니다.
   
3. HTML 코드를 표시하는 화면 하단에 새 창이 열립니다.
   
4. HTML 코드의 특정 요소를 클릭하여 페이지에서 스타일이 어떻게 지정되는지 확인할 수도 있습니다. 예를 들어 요소를 선택한 다음 열리는 창에서 "스타일" 탭을 클릭하여 요소에 적용되는 CSS 스타일을 확인할 수 있습니다.
   
5. 창을 닫으려면 오른쪽 상단 모서리에 있는 "X"를 클릭합니다.
   

또는 Chrome 개발자 도구를 사용하여 소스 코드를 볼 수 있습니다.

1. Chrome을 열고 검사하려는 웹페이지로 이동합니다.
   
2. 브라우저의 오른쪽 상단 모서리에 있는 메뉴 아이콘(점 3개)을 클릭하고 드롭다운 메뉴에서 추가 도구 및 개발자 도구를 선택합니다.
   
3. 개발자 도구 패널이 화면 하단에 열립니다. 창 상단에서 "요소"를 선택합니다.
   
4. 이제 요소 패널에 표시된 현재 페이지의 HTML 코드를 볼 수 있습니다. 필요에 따라 패널의 다양한 옵션을 사용하여 코드를 검사하고 디버그할 수 있습니다.
   

몇 번의 클릭만으로 Mac의 Chrome에서 모든 웹페이지의 HTML 코드를 쉽게 볼 수 있습니다. 이것은 웹 개발 문제를 해결하려고 하거나 특정 웹 사이트가 어떻게 구성되어 있는지 자세히 살펴보고 싶을 때 유용할 수 있습니다.

iPhone 앱의 Chrome에서 웹페이지의 HTML 코드를 보는 방법

iPhone을 사용하는 경우 다음 두 가지 방법으로 Chrome에서 모든 페이지의 HTML 코드를 볼 수 있습니다.

URL 조정

URL을 약간 조정하여 모든 페이지의 HTML 코드를 쉽게 볼 수 있습니다.

1. Chrome을 열고 보려는 HTML 코드가 있는 웹페이지로 이동합니다.
   
2. 편집 모드를 시작하려면 주소 표시줄을 한 번 누릅니다.
   
3. 커서를 URL의 맨 앞으로 이동하십시오.
   
4. "View-source"를 입력한 다음 "이동" 버튼을 누르십시오. 웹 페이지의 HTML 코드가 Chrome에 표시됩니다.
   

개발자 도구 사용

Chrome 개발자 도구는 iOS에서도 사용할 수 있지만 실행하려면 PC와 다른 단계가 필요합니다.

1. 화면 오른쪽 상단의 점 세 개를 탭하고 '설정'을 선택합니다.
2. 아래로 스크롤하여 '고급'을 탭한 다음 '개발자 도구' 옆의 토글을 활성화합니다.
3. 페이지의 빈 영역을 길게 누른 다음 "요소 검사"를 선택합니다. 그러면 해당 페이지의 HTML 코드가 있는 측면 패널이 열립니다.

Android 앱의 Chrome에서 웹페이지의 HTML 코드를 보는 방법

Android 휴대전화에서 Chrome 앱을 사용할 때 웹페이지의 HTML 코드를 보고 싶을 수 있습니다. 이는 페이지의 문제를 해결하려고 하거나 페이지가 어떻게 구성되어 있는지 확인하려는 경우에 유용할 수 있습니다. Android 휴대전화의 Chrome에서 웹페이지의 HTML 코드를 보려면 다음 단계를 따르세요.

1. Android에서 Chrome을 엽니다.
   
2. "view-source:" 뒤에 소스 코드를 보려는 페이지의 URL을 입력합니다. 예를 들어 www.google.com의 소스 코드를 보려면 Chrome의 주소 표시줄에 "view-source:www.google.com"을 입력합니다.
   

이렇게 하면 Chrome에 내장된 개발자 도구 인터페이스에서 해당 페이지의 HTML 코드가 열립니다. 여기에서 원하는 대로 코드를 보고 편집할 수 있습니다. 이 방법은 보려고 하는 웹 사이트에서 소스 코드에 대한 액세스를 허용하는 경우에만 작동한다는 점을 명심하십시오. 그렇지 않으면 오류 메시지 외에는 아무것도 볼 수 없습니다.

iPad의 Chrome에서 웹 페이지의 HTML 코드를 보는 방법

iPad 앱의 Chrome을 사용하면 모든 웹페이지의 HTML 코드를 쉽게 볼 수 있습니다. 다음 단계를 따르십시오.

1. Chrome을 열고 "view-source:" 다음에 보려는 페이지의 URL을 입력합니다. 예를 들어 www.alphr.com의 소스 코드를 보려면 Chrome의 주소 표시줄에 "view-source:www.alphr.com"을 입력해야 합니다.
   
2. "이동" 버튼을 누르십시오.
   

이렇게 하면 Chrome 내의 새 탭에 페이지의 소스 코드가 로드됩니다. 여기에서 필요에 따라 코드를 저장하거나 공유할 수 있습니다.

소스 코드는 페이지를 하나로 묶는 접착제입니다.

HTML은 모든 웹사이트의 기초입니다. 방문자가 브라우저에서 페이지를 로드할 때 표시되는 구조와 콘텐츠를 제공합니다.

페이지의 최종 모양은 CSS 또는 기타 스타일 언어에 의해 결정될 수 있지만 HTML 코드는 페이지의 기본 구조와 콘텐츠를 결정합니다. 일부 변경 사항은 잠재적으로 페이지를 손상시킬 수 있습니다. 이러한 이유로 소스 코드를 보거나 변경할 때 HTML을 잘 이해하는 것이 중요합니다.

또한 HTML 코드를 보는 것이 경우에 따라 도움이 될 수 있지만 코드에 대한 변경 사항이 라이브 웹 페이지에 반영되지 않는다는 점을 염두에 두십시오. 사이트 관리자가 게시한 변경 사항만 방문자에게 표시됩니다.

이 자습서에서 설명하는 방법 중 하나를 사용하여 웹 페이지의 HTML 코드를 보려고 시도한 적이 있습니까? 어떻게 됐어?

의견 섹션에서 알려주십시오.