웹 산업에 익숙하지 않던가 노련한 베테랑이든, 다른 웹 페이지의 HTML 소스를 보는 것은 커리어 과정에서 여러 번 할 수있는 일입니다.
웹 디자인에 익숙하지 않은 사용자는 사이트의 소스 코드를 보는 것이 특정 작업이 어떻게 수행되는지를 볼 수있는 가장 쉬운 방법 중 하나이므로 해당 작업에서 배우고 자신의 작업에서 특정 코드 나 기술을 사용할 수 있습니다. 오늘날 일하는 웹 디자이너, 특히 업계 초창기부터 웹 디자이너로 활동해온 사람들이 보았을 때 그들이 본 웹 페이지의 소스를보고 흥미롭게 느꼈을 때 HTML을 배웠다고 말하는 것이 안전한 방법 일 것입니다 으로. 웹 디자인 서적을 읽거나 전문 컨퍼런스에 참석하는 것 외에도 사이트의 소스 코드를 보는 것은 초보자가 HTML을 배울 수있는 좋은 방법입니다.
HTML 이상
한 가지 기억해야 할 점은 소스 파일은 매우 복잡 할 수 있다는 것입니다 (보고있는 웹 사이트가 복잡할수록 사이트 코드가 더 복잡해질 수 있습니다). 보고있는 페이지를 구성하는 HTML 구조 외에도 해당 사이트의 시각적 모양을 지정하는 CSS (CSS 스타일 시트)도 있습니다. 또한 오늘날 많은 웹 사이트에는 HTML과 함께 포함 된 스크립트 파일이 포함됩니다.
실제로 스크립트 파일이 여러 개 포함될 가능성이 높습니다. 실제로는 각 사이트가 사이트의 다른 측면을 강화합니다. 솔직히 사이트의 소스 코드는 압도적 인 것처럼 보일 수 있습니다. 특히이 기능을 처음 사용하는 경우 더욱 그렇습니다. 해당 사이트에서 진행중인 작업을 즉시 파악할 수 없다면 좌절하지 마십시오. HTML 소스보기는이 프로세스의 첫 단계 일뿐입니다. 약간의 경험을 통해 브라우저에서 볼 수있는 웹 사이트를 만들기 위해 이러한 모든 요소가 어떻게 결합되어 있는지 더 잘 이해할 수 있습니다. 코드에 익숙해 짐에 따라 코드에서 더 많은 것을 배울 수있을 것이고, 그렇게 생각하지 않을 것입니다.
그렇다면 웹 사이트의 소스 코드는 어떻게 볼 수 있습니까? 다음은 Chrome 브라우저를 사용하여 단계별로 안내합니다.
단계별 지침
-
그 Google 크롬 웹 브라우저 (Google 크롬이 설치되어 있지 않으면 무료로 다운로드 할 수 있습니다).
-
다음으로 이동하십시오. 조사하고 싶은 웹 페이지.
-
마우스 오른쪽 버튼으로 클릭 그 페이지 나타나는 메뉴를보십시오. 해당 메뉴에서 페이지 소스보기.
-
이제 해당 페이지의 소스 코드가 브라우저의 새 탭으로 나타납니다.
-
또는 키보드 단축키를 사용할 수도 있습니다. CTRL + U PC에서 사이트의 소스 코드가 표시된 창을 엽니 다. Mac의 경우이 단축키는 Command + Option + U.
개발자 도구
간단한 것 외에도 페이지 소스보기 Google 크롬이 제공하는 기능을 사용하면 우수한 개발자 도구를 활용하여 사이트를 더 깊이 파고들 수 있습니다. 이러한 도구를 사용하면 HTML뿐만 아니라 해당 HTML 문서의보기 요소에 적용되는 CSS를 볼 수 있습니다.
Chrome의 개발자 도구를 사용하려면 다음 단계를 따르세요.
-
열다 구글 크롬.
-
로 이동 조사하고 싶은 웹 페이지.
-
클릭 세 줄의 아이콘 브라우저 창의 오른쪽 상단 모서리에 있습니다.
-
메뉴에서 마우스를 올려 놓습니다. 추가 도구 클릭 한 다음 개발자 도구 메뉴가 나타납니다.
-
이렇게하면 창 왼쪽에 HTML 소스 코드가 표시되고 오른쪽에 관련 CSS가 표시됩니다.
-
또는 마우스 오른쪽 버튼을 클릭하면 웹 페이지의 요소 선택 검사하다 나타나는 메뉴에서 Chrome의 개발자 도구가 표시되고 선택한 요소가 HTML에서 해당 CSS와 함께 오른쪽에 강조 표시됩니다. 특정 사이트의 특정 부분이 어떻게 제작되었는지 자세히 알아 보려면이 기능이 유용합니다.
소스 코드보기 법률인가?
수년에 걸쳐 우리는 사이트의 소스 코드를보고 교육용으로 사용하고 궁극적으로는 사용하는 작업에 사용할 수 있는지 여부에 대해 많은 새로운 웹 디자이너에게 질문했습니다. 사이트의 코드를 복사하여 사이트에서 자신의 코드로 전달하는 것은 받아 들일 수없는 것이지만,이 코드를 학습을위한 발판으로 사용하는 것이 실제로이 업계에서 얼마나 많은 발전이 이루어 졌는지입니다.
이 기사의 시작 부분에서 언급했듯이 오늘날 사이트의 소스를보고 무언가를 배웠던 적이없는 실무 웹 전문가를 찾기가 어려울 것입니다! 네, 사이트의 소스 코드보기는 합법적입니다. 이 코드를 리소스로 사용하여 비슷한 것을 구축하는 것도 좋습니다. 코드를 그대로 사용하고 작업을 진행하면서 문제가 발생하기 시작할 수 있습니다.
결국 웹 전문가는 서로 배우며 자신이보고 영향을받는 작업을 개선하기 때문에 사이트의 소스 코드를보고 배우는 도구로 사용하는 것을 주저하지 마십시오.
