HyperText Markup Language
HTML은 프로그래밍 언어가 아닌 '마크업 언어' 라고 불린다. 즉, 제목과 단락을 구분하고, 문서의 전체적인 틀을 표시하는 다양한 '태그'들로 이루어진 '약속된 표기 방식' 정도로 이해할 수 있다. 그러한 이유로 마크업 언어인 HTML은 시간의 흐름과 제어에 따라 한 줄씩 읽어나가며 실행시키는 JavaScript와 같은 프로그래밍 언어라고 보기 어렵다.
참고로 현재 가장 진보된 HTML인 HTML5에서는 '시맨틱 태그(Semantics)'가 추가되면서 코드를 볼 때 글의 각 구성 요소에 대해 명확한 구분이 가능하게 되었다.
이제 HTML 코드가 어떻게 생겼는지 살펴보자. 다음은 투두리스트 화면을 만드는 예시코드다.
<!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은 다음과 같은 일종의 '약속된' 모습을 보여주기 때문이다.
<html>
<head></head>
<body></body>
</html><html> 문서를 시작한다.
<head>머리를 그린다. </head>
<body>몸통을 그린다. </body>
</html> 문서를 끝낸다.
<head> 안에는 우리가 작성할 HTML 문서의 언어 양식, 검색을 위한 키워드, 저작자, 그리고 가져올 스타일시트 등 문서에서 시각적으로 나타나지 않는 부분들을 작성하게 된다.
<head> 태그 안쪽 코드만 따로 보자.
<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 코드를 가져오는 역할을 한다.
<head> 안에 위치하는 경우 특정 사이트에서 제공하는 디자인을 사용하기 위해 미리 해당 영역에 코드를 넣어줄 필요가 있기 때문이다. 여기서는 "fontawesome" 사이트에서 제공하는 디자인을 사용했는데, src="https://kit.fontawesome.com/e71d03d7ce.js" 와 같이 해당 사이트로 가는 링크가 연결된다. 이런 모습이 아니라면 대부분의 우리가 작성한 자바스크립트 코드는 <body> 태그의 안쪽, 하단에 작성하는 것이 보통이다. 짧은 코드에서는 자바스크립트를 가져오는 링크가 어디에 속하든 에러를 발생시키지 않지만 복잡한 코드에서는 웹브라우저를 동적으로 제어하는 자바스크립트가 미리 앞서서 나오는 것보다 하단에서 컨트롤하는 것이 관리 측면에서 더 좋기 때문이다.
이어서 <head>안쪽의 <meta>태그를 보자.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"><meta> 태그는 언어 양식, 검색을 위한 키워드, 저작자 등을 표시하는 태그다. 특별히 자주보게 될 부분은 'utf-8'인데, 브라우저에서 작동하는 문자 인코딩 방식으로 대부분의 언어를 지원하기 때문에 영어가 아닌 한국어 등의 사용을 위해 반드시 작성해주어야 한다.
다음은 <body>다.
<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>
<body> 태그 안에 <header> 태그가 있습니다. 앞에서 봤던 <head>와 비슷하게 생겼다. <header>는 본문의 제목 부분을 알려주는 시맨틱 태그다. 이전에는 이러한 태그들이 없었지만 도입부에 언급했듯이 조금 더 명시적으로 코드를 작성하고, 검토하기 쉽게 HTML5의 등장과 함께 생겨났다.
시맨틱 태그는 제목과 브라우저 상단을 표시하는 <header> 태그, 글 목록을 보여주는 <nav> 태그, 본문을 보여주는 <section> 태그, 광고 등 부수적인 내용을 담고 있는 <aside> 태그, 사업자 관련 내용 혹은 저작권 등을 표시하는 <footer> 태그로 이루어져 있다. 디자인에 따라 본문이나 광고란이 더 필요할 수도 있는데 이 때는 <section>이나 <aside> 태그를 추가해주면 된다.
시맨틱 태그 중 <header>부터 살펴보겠다.
<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>브라우저의 상단 부분을 보여주는 <header> 내용을 가져왔다. 사실 작성자가 만든 투두 리스트에서 <header>가 '상단'이라고 보기는 어렵다. 본문이 없기 때문이다.
여기서 <header>는 어느 부분일지 생각해보자.
.
.
.
이 부분이다.
가장 윗부분에 작은 2개의 아이콘은
<span class="js-weather">
<i class="fas fa-map-marker-alt"></i>
<i class="fas fa-temperature-low"></i>
</span>이 코드로 실행된다.
<span> 태그는 <div>와 함께 언급되는 가장 많이 쓰이는 태그 중 하나다. 지금은 그냥 아, 저부분은 본문에서 한 단락, 혹은 특정 부분을 표시해주는구나! 라고 이해하고 넘어가도 충분하다.
그 뒤에 class는 태그에 이름을 붙여주는 부분이다. 우리는 태그에 class 혹은 id를 생성해줄 수 있다. class와 id의 차이는 class는 여러 번, id는 단 한 번만 그 이름을 가질 수 있다는 것이다.
예를 들어서 '철수', '동수', '민수'는 '철수', '동수', '민수' 라는 id를 가지면서도 '진달래반' 이라는 하나의 class를 가질 수 있다. 이것을 아이들의 입장에서 보면 '철수'라는 id는 '철수'만 가지고 있는 고유한 것이고 '진달래반'이라는 class는 '철수'도 가지고 '동수'도 가지고 '민수'도 가지고 있다. 그래서 class는 총 3번 사용되고, id는 각 1번씩만 사용될 수 있는 것이다.
또한 class 태그에 띄어쓰기는 "2개의 클래스"를 구분하는 구분자다. i 태그는 'fas'라는 클래스와 'fa-map-marker-alt'라는 클래스 2개를 동시에 가진다. 이렇게 2개 이상의 클래스를 '다중 클래스'라고 한다. 그렇다면 '다중 id'도 있을까?
없다.
철수는 '진달래반'이면서도 '노란색을 좋아하는 사람들의 모임'에 가입했을 수도 있다. 그러나 철수는 '명수'라는 이름도 함께 가질 수는 없다. 그렇게 된다면 얘를 "철수이면서 명수이기도 한 친구야!" 라고 불러야할까? id는 고유하다.
참고로 <i> 태그의 i는 '이탤릭체'라는 뜻에서의 'i'였다. 하지만 디자인적 요소는 CSS에서 모두 담당하게 되면서 html은 그 역할을 할 필요가 없어졌다. 대신에 사용자들은 <i> 태그를 icon 혹은 image 를 표시하기 위해 사용하게 되었다. 결국 모든 코드는 시각적인 요소가 중요하고 읽고, 쓰기가 쉬워야 하는데 <i> 태그가 딱! 적절했기 때문이었을까? 자연스럽게 현재 그러한 부분은 모두 <i>태그가 담당하고 있다.