준비중..
02 HTML: 기본 구조
# HTML 기본구조
## 목차
1. 들어가며..
2. HTML이란?
3. head 태그와 body 태그
4. p 태그
5. 실습
6. 요약
## 들어가며..
앞서 웹서비스의 기본 6가지 언어에 대해 알아보았다. 필자는 프론트 엔드를 시작으로 백 엔드까지 정리할 계획이다. 그 시작으로 HTML을 이야기해보자.
## HTML이란?
HTML은 웹 페이지의 내용을 구성한다. 기본적인 코드를 확인해보자.
```
<!DOCTYPE html>
<html>
<head>
<title>헬로 HTML</title>
</head>
<body>
<h1>HTML이란?</h1>
<p>HTML은 Hyper Text Markup Language 의 약자로서, 문서와 문서간의 이동이 가능한 특정 의미와 구조를 표시하는 언어를 뜻합니다.</p>
</body>
</html>
```
html은 태그로 만들어진다. 태그란 `<>`에 담긴 형태를 말한다. 위 코드를 보면 html 태그에 head와 body 태그가 담겨져 있다.
## head 태그와 body 태그
`<head>`는 웹 페이지의 메타데이타를 갖는다. 다시 말해, 웹 페이지의 정보를 가지고 있다. `<body>`는 실제 보여지는 내용을 갖는다. 위에서 제시한 코드의 실행결과는 다음과 같다.
## h1 태그
`<h1>` 태그는 머릿글을 표시한다. 중요도에 따라 1부터 6까지 지정이 가능하다.
```
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>
</html>
```
## p 태그
`<p>`태그는 단락(paragraph)을 나타낸다. 아래 예제 페이지를 보자.
위 그림에서 초록색 영역이 단락이다. 위 페이지의 코드는 아래와 같다.
```
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Bootstrap</h1>
<p>Build responsive, mobile-first projects on the web with the world's most popular front-end component library.</p>
<p>Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.</p>
</body>
</html>
```
## 실습
자 그럼, 배운 내용을 토대로 아래와 같은 페이지를 만들어 보자.
정답확인: https://jsfiddle.net/sehongpark/1ouvwza4/2/
## 요약
1. html을 여러 태그들로 구성됨.
2. head 태그: 페이지의 메타데이타 정보를 저장.
3. body 태그: 실제 눈에 보이는 정보를 저장.
4. h 태그: 머릿글을 표시
5. p 태그: 단락을 표시