132 lines
5.2 KiB
Markdown
132 lines
5.2 KiB
Markdown
# 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>
|
|
|
|
바디에는 웹 브라우저에 표시되는 실제 내용을 기술합니다. |