Chrome에서 HTML 소스를 보는 방법

Chrome의 개발자 도구 사용

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

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

1. Google 크롬을 엽니다. .

2. 검사하려는 웹페이지로 이동합니다. .

3. 점 3개로 된 메뉴 선택 브라우저 창의 오른쪽 상단 모서리에 있습니다.

4. 메뉴에서 추가 도구 위로 마우스를 가져갑니다. 그런 다음 개발자 도구를 선택합니다. 나타나는 메뉴에서.

   

5. 창의 왼쪽에는 HTML 소스 코드를 표시하고 오른쪽에는 관련 CSS를 표시하는 창이 열립니다.

6. 또는 웹페이지의 요소를 마우스 오른쪽 버튼으로 클릭하면 검사를 선택합니다. 표시되는 메뉴에서 Chrome의 개발자 도구가 팝업되고 오른쪽에 표시된 해당 CSS와 함께 HTML에서 선택한 특정 부분을 강조 표시합니다. 사이트의 특정 부분에 대해 자세히 알아보려는 경우 매우 유용합니다.

소스 코드를 보는 것이 합법입니까?

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

이 기사의 시작 부분에서 언급했듯이 사이트의 소스를 보고 배운 것이 없는 웹 전문가를 찾기 어려울 것입니다. 예, 사이트의 소스 코드를 보는 것은 합법입니다. 해당 코드를 리소스로 사용하여 유사한 것을 빌드하는 것도 안전합니다. 코드를 있는 그대로 사용하고 작업처럼 전달하면 문제가 발생하기 시작합니다.

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

단순한 HTML 그 이상

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

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