Google Chrome에서 HTML 소스를 보는 방법

알아야 할 사항

웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 선택하십시오. 페이지 소스보기 .
단축키: 누르기 Ctrl 키 + 안에 (윈도우 PC) 또는 명령 + 옵션 + 안에 (맥).
Chrome의 개발자 도구를 사용하려면 다음을 선택하세요. 메뉴 (점 3개) > 더 많은 도구 > 개발자 도구 .

이 문서에서는 Google Chrome 웹 브라우저에서 웹사이트의 HTML 소스 코드에 액세스하는 방법과 Chrome의 개발자 도구에 액세스하고 사용하는 방법을 설명합니다. 사이트의 소스 코드를 보는 것은 초보자가 HTML을 배울 수 있는 훌륭한 방법입니다.

Chrome에서 소스 코드 보기

그렇다면 웹 사이트의 소스 코드를 어떻게 봅니까? Google Chrome 브라우저를 사용하여 이를 수행하는 단계별 지침은 다음과 같습니다.

열기 구글 크롬 웹 브라우저 (당신이 없다면 구글 크롬이 설치됨 , 이것은 무료 다운로드입니다).
다음으로 이동하세요. 조사하고 싶은 웹페이지 .
마우스 오른쪽 버튼으로 클릭 그 페이지 그리고 나오는 메뉴를 보세요. 해당 메뉴에서 페이지 소스보기 .
이제 해당 페이지의 소스 코드가 브라우저에 새 탭으로 표시됩니다.
또는 다음의 키보드 단축키를 사용할 수도 있습니다. Ctrl 키 + 안에 PC에서 사이트의 소스 코드가 표시된 창을 엽니다. Mac에서 이 단축키는 다음과 같습니다. 명령 + 옵션 + 안에 .

힐러리 앨리슨 / 라이프와이어

포스팅 후 인스 타 그램 사진 편집 가능

Chrome의 개발자 도구 사용

간단한 것 외에도페이지 소스보기Google 크롬이 제공하는 기능을 활용하면 뛰어난 기능을 활용할 수도 있습니다. 개발자 도구 사이트를 더 깊이 파고들 수 있습니다. 이러한 도구를 사용하면 HTML뿐만 아니라 해당 HTML 문서의 보기 요소에 적용되는 CSS도 볼 수 있습니다.

Chrome 개발자 도구를 사용하려면 다음 단계를 따르세요.

열려 있는 구글 크롬 .
로 이동 조사하고 싶은 웹페이지 .
선택 점 3개로 된 메뉴 브라우저 창의 오른쪽 상단에 있습니다.
메뉴에서 마우스를 가져가세요. 더 많은 도구 그런 다음 선택 개발자 도구 나타나는 메뉴에서
창 왼쪽에는 HTML 소스 코드가 표시되고 오른쪽에는 관련 CSS가 표시되는 창이 열립니다.
또는 마우스 오른쪽 버튼을 클릭하면 웹페이지의 요소 그리고 선택 검사 나타나는 메뉴에서 Chrome의 개발자 도구가 팝업되어 오른쪽에 표시된 해당 CSS와 함께 HTML에서 선택한 특정 부분을 강조 표시합니다. 사이트의 특정 부분에 대해 더 자세히 알고 싶을 때 매우 유용합니다.
그래픽 카드 창 10을 확인하는 방법

Mac에서 요소를 검사하는 방법

소스 코드를 보는 것이 합법적인가요?

수년에 걸쳐 우리는 많은 새로운 웹 디자이너들이 사이트의 소스 코드를 보고 이를 교육 및 궁극적으로 자신이 수행하는 작업에 사용하는 것이 허용되는지에 대해 질문을 해왔습니다. 사이트의 코드를 도매로 복사하여 웹사이트에서 자신의 것으로 전달하는 것은 확실히 용납되지 않지만, 해당 코드를 배울 수 있는 발판으로 사용하는 것은 실제로 이 업계에서 얼마나 많은 발전이 이루어졌는지입니다.

이 글의 시작 부분에서 언급했듯이, 현재 사이트 소스를 보고 뭔가를 배우지 않은 현직 웹 전문가를 찾기는 어려울 것입니다! 예, 사이트의 소스 코드를 보는 것은 합법적입니다. 해당 코드를 리소스로 사용하여 유사한 것을 구축하는 것도 안전합니다. 코드를 있는 그대로 가져와서 작업으로 전달하면 문제가 발생하기 시작합니다.

결국 웹 전문가들은 서로에게서 배우고 종종 자신들이 보고 영감을 받은 작업을 개선하므로 사이트의 소스 코드를 보고 학습 도구로 사용하는 것을 주저하지 마십시오.

Facebook 비즈니스 페이지에서 누군가를 차단하는 방법

HTML 그 이상

한 가지 기억해야 할 점은 소스 파일이 매우 복잡할 수 있다는 것입니다(그리고 보고 있는 웹 사이트가 복잡할수록 해당 사이트의 코드도 더 복잡해질 가능성이 높습니다). 페이지를 구성하는 HTML 구조 외에도 해당 사이트의 시각적 모양을 지정하는 CSS(Cascading Style Sheet)도 있습니다. 또한 오늘날 많은 웹사이트에는 HTML과 함께 포함된 스크립트 파일이 포함되어 있습니다.

여러 스크립트 파일이 포함될 수 있습니다. 실제로, 각각은 사이트의 다양한 측면을 지원합니다. 솔직히 말해서, 사이트의 소스 코드는 부담스러워 보일 수 있습니다. 특히 이 작업을 처음 수행하는 경우라면 더욱 그렇습니다. 해당 사이트에서 무슨 일이 일어나고 있는지 즉시 파악할 수 없다고 해서 좌절하지 마십시오. HTML 소스를 보는 것은 이 프로세스의 첫 번째 단계일 뿐입니다. 약간의 경험을 통해 브라우저에 표시되는 웹 사이트를 만들기 위해 이러한 모든 부분이 어떻게 결합되는지 더 잘 이해하기 시작할 것입니다. 코드에 더 익숙해지면 코드에서 더 많은 것을 배울 수 있으며 그다지 어렵게 느껴지지 않을 것입니다.

자주하는 질문

Chrome에서 HTML 코드를 어떻게 수정하나요?
다음을 눌러 Chrome에서 개발자 도구를 엽니다. Ctrl 키 (또는 명령 맥에서는) + 쉬프트 + 나 . 거기에서 Ctrl 키 ( 명령 맥에서는) + 오 편집하려는 저장된 소스 파일을 선택하여 엽니다.
소스 보기가 비활성화된 경우 Chrome에서 페이지 소스 코드를 어떻게 볼 수 있나요?
웹사이트에서 소스 보기 옵션을 비활성화한 경우에도 내부 내용을 살펴볼 수 있습니다. 브라우저 창 상단에서 다음을 선택하세요. 보다 > 개발자 > 소스보기 , 그러면 웹페이지의 소스 코드가 표시됩니다.
내 Android 기기를 사용하여 Chrome에서 사이트의 소스 코드를 보려면 어떻게 해야 하나요?
기기의 Chrome 앱을 사용하여 보려는 웹사이트로 이동한 다음 브라우저의 주소 표시줄을 선택하세요. 텍스트 커서를 맨 왼쪽(URL 앞)으로 이동하고 다음을 입력합니다. 소스보기 을 누른 다음 입력하다 또는 선택 가다 .