Do it! HTML+CSS+자바스크립트 웹 표준의 정석
[웹브라우저가 스크립트를 해석하는 과정]
<!DOCTYPE html>
<html lang = "ko"> //HTML분석기
<head>
<meta charset = "UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript</title>
//CSS분석기
<style>
body{
text-align: center;
}
</style>
</head>
<body>
<h1 id="heading">Javascript</h1>
<p id="text">This is tag p</p>
//자바스크립트 해석기
<script>
var heading = document.querySelector("#heading");
heading.onclick=function(){
heading.style.color="red";
}
</script>
</body>
</html>
- 웹 브라우저는
<!DOCTYPE html>를 보고 이 문서가 웹 문서라는 것을 알게 된다. 그리고 <html></html>사이에 있는 내용을 HTML표준에 맞춰 읽기 시작한다.
- 웹 문서에서 HTML 태그의 순서, 포함 관계를 파악한다.
<head>, <body>태그 사이에 각각 어떤 태그가 있는지 확인한다. 그리고 태그 간의 관계가 어떻게 되어 있는지 등을 분석한다.
- 태그 분석이 끝나면
<style>의 스타일 정보를 분석한다.
<script>태그를 만나면 웹 브라우저 안에 포함된 자바스크립트 해석기에게 스크립트 소스를 넘긴다. 자바스크립트 해석기는 <script></script>사이의 소스를 해석한다.- 2에서 분석한 HTML, 3에서 분석한 css 정보에 따라 웹 브라우저 화면에 표시한다.
- 웹브라우저에서 분석해 놓은 자바스크립트를 실행해 그 결과를 화면에 표시한다.
