# HTML 5

## HTML 5 Boiler Plate

```html
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <title></title>
    </head>
    <body>

    </body>
</html>
```


## HTML 기본 {id="basic_structure"}

HTML 파일의 확장자는 *.html* 또는 *.htm*을 사용합니다.

### 요소 (Element)

HTML 문서는 여러 개의 HTML 요소로 이루어집니다.

```html
<p class = "attr">
    This is a text content.
</p>
```

요소는 **여는 태그**(opening tag, ```<p>```)로 시작하고, **닫는 태그**(closing tag, ```</p>```)로 끝납니다. 태그는 용도에 따라 여러 개의 키워드가 정의되어 있습니다. 여는 태그와 닫는 태그 사이에는 텍스트 내용이나 다른 요소들이 올 수 있으며, 여는 태그에는 **속성**(attribute)을 ```name = "value"``` 형식으로 지정할 수 있습니다.

HTML에서 태그의 이름과 속성의 이름은 대소문자를 구분하지 않습니다. 즉, ```<p>```와 ```<P>```는 같습니다. 하지만, 가급적 소문자를 사용하는 것이 좋습니다.

일반적으로, 여는 태그와 닫는 태그가 쌍을 이루지만, 몇몇 태그는 닫는 태그를 필요로 하지 않습니다. 이를 **빈 요소**(empty element)라고 부릅니다. 빈 요소는 여는 태그와 닫는 태그 사이에 다른 요소나 텍스트를 지정할 수 없습니다. 예를 들면, ```<br>```, ```<img>```, ```<input>```, ```<link>```, ```<meta>```, ```<hr>``` 등이 있습니다.

```html
<p>This paragraph contains <br> a line break.</p>
```

HTML에서는 ```<br>```과 같이 사용하지만, XHTML에서는 ```<br />```처럼 끝에 '/'를 추가합니다.

#### 블록 레벨 vs 인라인 레벨

**블록 레벨**(block level) 요소는 가능한 한 최대 너비를 차지하며 시작과 끝에 줄 바꿈이 적용됩니다. ```<div>```, ```<p>```, ```<h1>``` ~ ```<h6>```, ```<form>```, ```<ol>```, ```<ul>```, ```<li>``` 등이 블록 레벨 요소입니다.

반면, **인라인 레벨**(inline level) 요소는 다른 요소의 안에 사용되며 줄 바꿈이 적용되지 않습니다. ```<img>```, ```<a>```, ```<span>```, ```<strong>```, ```<b>```, ```<em>```, ```<i>```, ```<code>```, ```<input>```, ```<button>``` 등이 대표적인 인라인 레벨 요소입니다.

인라인 레벨 요소의 안에 블록 레벨 요소를 지정해서는 안됩니다.

### 속성 (Attribute)

요소에 부가적인 속성을 지정할 때 ```name="value"``` 형식으로 사용합니다. 속성의 값은 따옴표로 둘러 싸는데, 이중 따옴표(") 또는 단일 따옴표(')를 모두 사용할 수 있지만, 일반적으로 "를 많이 사용합니다.

부울(bool) 값을 갖는 속성들은 속성 값 없이 속성의 이름만 지정합니다.

```html
<input type="checkbox" checked> 
```

어떤 요소들은 반드시 지정해야 하는 속성이 있습니다. 예를 들면, ```<a>```에는 _src_와 _alt_를, ```<img>```에는 _href_를 반드시 지정해야 합니다.

#### 일반적인 속성

```html
<p id="paragraph-1" class="paragraph center" title="Sample Text" style="border: 0;">
    This is a paragraph.
</p>
```

- id

  요소에 고유한 이름을 지정합니다. 한 문서 내에서 두 개 이상의 요소가 동일한 id 값을 가질 수 없습니다.

- class

  요소가 특정 집단에 속한 것을 의미합니다. 스타일을 정의하여 동시에 여러 개의 비슷하거나 관련된 요소를 제어할 수 있습니다. 여러 요소들이 동일한 클래스 이름을 사용할 수 있으며, 한 개의 요소가 두 개 이상의 클래스에 속할 수도 있습니다. 이때, 속성값은 공백으로 구분된 클래스 이름들의 리스트로 나타냅니다.

- title

  요소에 타이틀을 부여합니다. 일부 브라우저에서는 마우스를 요소 위에 올려놓을 경우 요소의 타이틀을 "툴팁"으로 보여줍니다.

- style

  특정 경우에 사용할 수 있도록 저자가 인라인 스타일을 정의할때 사용됩니다. 이런 경우 클래 스 스타일 정의보다 우선하여 요소에 적용됩니다. 문서의 구조와 표현의 분리라는 측면에서 가급적 자제하는 것이 좋습니다.


### 주석 (Comment)

`\<!--`로 시작하고 `\-->`로 끝나는 부분은 주석입니다.

```html
<!-- 
    This is a comment.
-->
```

## HTML 페이지 구조

```html
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>Hello, World</title>
    </head>
    <body>
        Hello, World.
    </body>
</html>
```

### DOCTYPE

HTML 문서가 HTML 5 버전으로 작성되었음을 웹 브라우저에게 알려주는 역할을 합니다. 반드시 모든 HTML 문서의 맨 앞에 있어야 하지만, ```<!DOCTYPE>```은 HTML 문서의 구성 요소는 아닙니다.

HTML 5에서는 다음과 같이 간단히 지정합니다. 대소문자를 구분하지는 않습니다.

```html
<!DOCTYPE html>
```

### 문서 헤드 \<head>

헤드에는 HTML 문서에 대한 정보를 기술합니다. ```<title>```을 반드시 포함해야 합니다.

### 문서 바디 \<body>

바디에는 웹 브라우저에 표시되는 실제 내용을 기술합니다.