5 browser에서의 웹 개발 - accidentlywoo/legacyVue GitHub Wiki
- 들어가기 전에 웹 클라이언트 코드는 브라우저 안에서 동작합니다. HTML, CSS, JavaScript의 실제 소스코드를 보면서 웹페이지 소스의 구성을 살펴봅니다.
- HTML 요청 이후 브라우저에서 해석되는 웹페이지(HTML) 안의 내용구성과 소스코드를 어떻게 위치시키면 될지 이해한다.
Browser 안에서 동작할 수 있는 HTML, CSS, Javascript의 코드구현 방법
뜯어보자 웹사이트!
- 먼저 크롬브라우저가 없다면 설치하기
- 크롬 브라우저를 열고 크롬 개발자도구 열기
- 윈도우(Ctrl + Shift + i), 맥(Option + Command + i)
- 접속 : http://www.amazon.com
- HTML 문서는 html이라는 태그로 시작해서 html태그로 끝납니다.
- head는 무엇을 하는 걸까요?
- body는 무엇을 하는 걸까요?
- HTML은 계층적입니다.
- HTML은 tag를 사용해서 표현합니다.
<tag class="title">Hello</tag> - JavaScript와 CSS가 html안에 여기저기 존재합니다.
` !doctype html>
<title>저를소개해요</title> <script src="js/start.js"></script>코드스쿼드 크롱이라고 합니다
<script src="js/library.js"></script>
<script src="js/main.js"></script>
`
HTML 문서 안에 HTML태그뿐 아니라 CSS,JavaScript코드가 존재합니다.
JavaScript 코드는 body 태그 닫히기 전에 위치하는 것이 렌더링을 방해하지 않아도 좋고,css코드는 head안에 위치해서 렌더링 처리 시에 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋습니다.