HyperText Markup Language
HTML은 프로그래밍 언어가 아닌 ’마크업 언어’ 라고 불린다. 즉, 제목과 단락을 구분하고, 문서의 전체적인 틀을 표시하는 다양한 ‘태그’들로 이루어진 ‘약속된 표기 방식’정도로 이해할 수 있다. 그러한 이유로 마크업 언어인 HTML은 시간의 흐름과 제어에 따라 한 줄씩 읽어나가며 실행시키는 JavaScript와 같은 프로그래밍 언어라고 보기 어렵다.
참고로 현재 가장 진보된 HTML인 HTML5에서는 ’시맨틱 태그(Semantics)‘가 추가되면서 코드를 볼 때 글의 각 구성 요소에 대해 명확한 구분이 가능하게 되었다.
이제 HTML 코드가 어떻게 생겼는지 살펴보자. 다음은 투두리스트 화면을 만드는 예시코드다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://kit.fontawesome.com/e71d03d7ce.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<span class="js-weather">
<i class="fas fa-map-marker-alt"></i>
<i class="fas fa-temperature-low"></i>
</span>
<div class="js-clock">
<h1 class="js-title"></h1>
</div>
<form class='js-form form'>
<input type="text" placeholder="what is your name?"/>
</form>
<form class='js-toDoForm'>
<input type="text" placeholder="Write a to do"/>
</form>
</header>
<aside>
<div class="toDoList">
<h4 class="js-greetings greetings"></h4>
<span class="toDoTitle">To Do</span>
<ul class="js-toDoList"></ul>
</div>
</aside>
<footer></footer>
<span class="js-weather"></span>
<script src="clock.js"></script>
<script src="greeting.js"></script>
<script src="todo.js"></script>
<script src="bg.js"></script>
<script src="weather.js"></script>
</body>
</html>
여기서 집중해야 할 것은 붉은색 글씨들이다.
앞에서 HTML을 ‘약속된 표기방식’이라고 표현했다. 기본적으로 HTML은 다음과 같은 일종의 ‘약속된’ 모습을 보여주기 때문이다.
1
2
3
4
<html>
<head></head>
<body></body>
</html>
문서를 끝낸다.
안에는 우리가 작성할 HTML 문서의 언어 양식, 검색을 위한 키워드, 저작자, 그리고 가져올 스타일시트 등 문서에서 시각적으로 나타나지 않는 부분들을 작성하게 된다. 태그 안쪽 코드만 따로 보자. ```html <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://kit.fontawesome.com/e71d03d7ce.js"></script> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> ``` <script src - 로 시작하는 부분이 있다. 보통 <body> 하단에 작성되며 미리 만들어 놓은 javascript 코드를 가져오는 역할을 한다. 안에 위치하는 경우 특정 사이트에서 제공하는 디자인을 사용하기 위해 미리 해당 영역에 코드를 넣어줄 필요가 있기 때문이다. 여기서는 "fontawesome" 사이트에서 제공하는 디자인을 사용했는데, src="<https://kit.fontawesome.com/e71d03d7ce.js>" 와 같이 해당 사이트로 가는 링크가 연결된다. 이런 모습이 아니라면 대부분의 우리가 작성한 자바스크립트 코드는 태그의 안쪽, 하단에 작성하는 것이 보통이다. 짧은 코드에서는 자바스크립트를 가져오는 링크가 어디에 속하든 에러를 발생시키지 않지만 복잡한 코드에서는 웹브라우저를 동적으로 제어하는 자바스크립트가 미리 앞서서 나오는 것보다 하단에서 컨트롤하는 것이 관리 측면에서 더 좋기 때문이다. 이어서안쪽의태그를 보자. ```html <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> ``` 태그는 언어 양식, 검색을 위한 키워드, 저작자 등을 표시하는 태그다. 특별히 자주보게 될 부분은 'utf-8'인데, 브라우저에서 작동하는 문자 인코딩 방식으로 대부분의 언어를 지원하기 때문에 영어가 아닌 한국어 등의 사용을 위해 반드시 작성해주어야 한다. 다음은다. ```html <body> <header> <span class="js-weather"> <i class="fas fa-map-marker-alt"></i> <i class="fas fa-temperature-low"></i> </span> <div class="js-clock"> <h1 class="js-title"></h1> </div> <form class='js-form form'> <input type="text" placeholder="what is your name?"/> </form> <form class='js-toDoForm'> <input type="text" placeholder="Write a to do"/> </form> </header> <aside> <div class="toDoList"> <h4 class="js-greetings greetings"></h4> <span class="toDoTitle">To Do</span> <ul class="js-toDoList"></ul> </div> </aside> <footer></footer> <span class="js-weather"></span> <script src="clock.js"></script> <script src="greeting.js"></script> <script src="todo.js"></script> <script src="bg.js"></script> <script src="weather.js"></script> </body> ``` 태그 안에