Google 크롬에서 HTML 소스를 보는 방법

웹 산업을 처음 접하든 노련한 베테랑이든 상관없이 다양한 웹 페이지의 HTML 소스를 보는 것은 경력 전반에 걸쳐 여러 번 할 수있는 일입니다. 대부분의 브라우저에서는 소스를 쉽게 볼 수 있습니다. Chrome도 다르지 않습니다.

사이트의 소스 코드를 보는 것은 해당 작업에서 배우고 작업에서 특정 코드 또는 기술을 사용하는 가장 쉬운 방법 중 하나입니다. 웹 디자인 책을 읽거나 전문 컨퍼런스에 참석하는 것 외에도 사이트의 소스 코드를 보는 것은 초보자가 HTML을 배우는 훌륭한 방법입니다.

Chrome에서 소스 코드보기

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

열기 Google 크롬 웹 브라우저 (Google 크롬을 설치하지 않은 경우 무료 다운로드).
로 이동 검토하고 싶은 웹 페이지.
마우스 오른쪽 단추로 클릭 그 페이지 나타나는 메뉴를보십시오. 해당 메뉴에서 페이지 소스보기.
이제 해당 페이지의 소스 코드가 브라우저에서 새 탭으로 나타납니다.
또는 키보드 단축키를 사용할 수도 있습니다. CTRL + U PC에서 사이트의 소스 코드가 표시된 창을 엽니 다. Mac에서이 단축키는 Command + Option + U.

Chrome의 개발자 도구 사용

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

Chrome의 개발자 도구를 사용하려면 :

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

소스 코드보기가 합법적입니까?

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

이 기사의 시작 부분에서 언급했듯이, 사이트의 소스를보고 무언가를 배운 적이없는 현재 작동하는 웹 전문가를 찾기가 어려울 것입니다! 예, 사이트의 소스 코드를 보는 것은 합법적입니다. 이 코드를 리소스로 사용하여 비슷한 것을 빌드하는 것도 안전합니다. 코드를있는 그대로 가져 와서 작업 할 때 전달하면 문제가 발생하기 시작합니다.

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

HTML 그 이상

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

여러 스크립트 파일이 포함될 수 있습니다. 사실, 각각은 사이트의 다른 측면을 강화합니다. 솔직히, 사이트의 소스 코드는 압도적으로 보일 수 있습니다. 특히이 작업을 처음 사용하는 경우 더욱 그렇습니다. 해당 사이트에서 무슨 일이 일어나고 있는지 즉시 파악할 수 없더라도 실망하지 마십시오. HTML 소스보기는이 프로세스의 첫 번째 단계에 불과합니다. 약간의 경험을 통해 이러한 모든 요소가 어떻게 결합되어 브라우저에서 볼 수있는 웹 사이트를 만드는지 더 잘 이해할 수 있습니다. 코드에 익숙해지면 코드에서 더 많은 것을 배울 수 있으며 그렇게 부담스럽지 않게 보일 것입니다.