#Browser 안에서 동작할 수 있는 HTML, CSS, JavaScript의 코드 구현 방법
HTML 문서는 html이라는 태그로 시작해 html 태그로 끝난다.
head는 무엇을 하는 것인가? 문서에 대한 정보가 포함되어있다.
body는 무엇을 하는 것인가? 화면에 표현되어야 할 정보가 포함되어 있다.
HTML은 계층적이다.
HTML은 tag를 사용해 표현한다.
<tag class="title">안녕하세요.</tag>
JavaScript와 CSS가 html 안에 여기저기 존재한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>저를소개해요</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/start.js"></script>
</head>
<body>
<h1>안녕하세요</h1>
<div>코드스쿼드 크롱이라고 합니다</div>
<script src="js/library.js"></script>
<script src="js/main.js"></script>
</body>
</html>
HTML 문서 안에는 HTML 태그뿐 아니라 CSS, JavaScript 코드가 존재한다.
JavaScript 코드는 html 태그 내에 어디에나 존재할 수 있으나 렌더링에 방해를 줄 수 있으므로 주로 body 태그가 닫히기 전, HTML 하단에 위치하는 것이 좋고, CSS 코드는 head 안에 위치해서 렌더링 처리 시에 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋다.
덧, JavaScript를 최하단에 위치시키지 않고 사용하는 다른 방법도 있는데, defer, async 속성을 사용해서 선언한 곳과 스크립트 실행 시점을 분리할 수 있다. (단, IE9까지 지원되지 않음)