개발자도구를 통해 HTML구조 및 패킷확인

HTML 문서구조

뜯어보자 웹사이트!

1. 먼저 크롬브라우저가 없다면 설치하기
2. 크롬 브라우저를 열고 크롬 개발자도구 열기
3. 윈도우 (Ctrl + Shift + I) or F12
   맥(Option + Command + i)

Elements탭에서는 소스코드를 볼수 있습니다.

콘솔탭에서는 콘솔에 입력되는 내용들을 볼수 있습니다.

네트워크탭에서는 response받은 패킷등을 볼수있습니다.

알게 된 몇 가지 특징

• HTML문서는 html이라는 태그로 시작해서 html태그로 끝납니다.
• HTML은 계층적입니다.
• HTML은 tag를 사용해서 표현합니다.

스크립트 코드는 아래쪽에 두는게 일반적입니다.

HTML 문서 안에 HTML태그뿐 아니라 CSS, JavaScript코드가 존재합니다.

JavaScript 코드는 body 태그 닫히기 전에 위치하는 것이 렌더링을 방해하지 않아도 좋고, css코드는 head 안에 위치해서 렌더링 처리 시에 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋습니다.

웹에서 html, css, javascript를 쉽게 테스트 할 수 있는 웹사이트http://www.jsbin.com