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