철저해설 HTML5

1장 HTML5 개요
1.1 HTML5 탄생 과정
HTML의 한계
HTML5의 탄생
HTML5 책정 계획

1.2 HTML5 설계 원칙
HTML5 책정에서 중요한 네 가지 포인트
포인트 1: 호환성
포인트 2: 실용성
포인트 3: 상호 운용성
포인트 4: 보편적 접근성
어디까지나 원칙이라는 점에 주의

1.3 HTML5의 전체적인 모습
HTML5 관련 사양
사양 1: Web Applications 1.0
사양 2: WHATWG HTML
사양 3: HTML5
사양 4: HTML Device
사양 5: HTML5 Microdata
사양 6: HTML5 2D Context
사양 7: HTML5 Communications
사양 8: Web Workers
사양 9: Web Storage
사양 10: Indexed Database API
사양 11: Web SQL Database
사양 12: Server-Sent Events
사양 13: WebSockets API
사양 14: WebSockets Protocol
사양 15: Geolocation API
사양 16: File API

2장 HTML4와 HTML5의 차이
2.1 개요
기존 마크업과의 세 가지 차이

2.2 새롭게 도입된 요소
새 요소의 개요

2.3 변경된 요소
의미가 변경되거나 새로운 의미가 부여된 요소의 개요

2.4 없어진 요소
없어진 이유
겉모습만 나타내므로 CSS로 처리할 수 있는 요소
프레임 관련 요소
거의 사용되지 않는 요소

2.5 DOCTYPE
간단해진 DOCTYPE 선언

2.6 MathML과 SVG
HTML 안에 직접 마크업 가능

3장 HTML 작성 준비
3.1 HTML5의 용어
마크업 이해에 필요에 필요한 용어

3.2 Content-Type
MIME 타입의 중요성
서버 쪽의 적절한 설정이 필요

3.3 HTML과 XHTML
XML 시리얼라이제이션에서 일어나는 문제

3.4 문서형 선언
문서형 선언 방법
문서형 선언의 목적

3.5 문자 인코딩
문자 인코딩 지정 방법
XHTML 시리얼라이제이션에서의 주의점
한국어 이외의 언어

3.6 마크업 작성 방법
지금까지와 같은 마크업 방법
규칙 1: 종료 태그 생략
규칙 2: 빈 요소
규칙 3: 요소의 마크업 규칙
규칙 4: 콘텐츠 속성의 마크업

3.7 구문 검증
HTML5 검증기
The W3C Markup Validation Service
Validator.nu

3.8 Internet Explorer 대응
Internet Explorer의 문제점
문제 해결 방법

3.9 Firefox 2 대응
Firefox 2의 문제점
문제 해결 방법

3.10 스타일시트
새로운 요소를 블록으로 렌더링하는 방법

4장 콘텐츠 모델
4.1 카테고리
카테고리(Category)의 의미
카테고리 1: 메타데이터 콘텐츠
카테고리 2: 플로 콘텐츠
카테고리 3: 섹셔닝 콘텐츠
카테고리 4: 헤딩 콘텐츠
카테고리 5: 프레이징 콘텐츠
카테고리 6: 임베디드 콘텐츠
카테고리 7: 인터랙티브 콘텐츠
카테고리 8: 섹셔닝 루트

4.2 콘텐츠 모델
콘텐츠 모델의 의미
패턴 1: 카테고리를 제한
패턴 2: 특정 요소를 제한
패턴 3: 자식 요소를 제한
패턴 4: 빈 콘텐츠
패턴 5: 트랜스패어런트

5장 섹션과 아웃라인
5.1 섹션
섹션의 의미
HTML4와 XHTML1의 단점
HTML5에서 명시적으로 계층을 표시하는 방법

5.2 아웃라인 알고리즘
아웃라인 알고리즘의 의미
아웃라인의 의미
제목 요소만으로 아웃라인을 판별하는 방법
섹션 요소를 사용한 아웃라인 판별 방법
섹셔닝 루트 다루기
아웃라인을 확인하는 방법

5.3 사이트 제목과 페이지 제목
HTML4와 XHTML1의 문제점
HTML5에서의 해결법
제목 요소의 숫자도 인식해야 하는 이유

6장 루트 요소
6.1 html 요소(루트 요소)
html 요소의 사용법

7장 메타데이터 관련 요소
7.1 head 요소(문서의 메타데이터)
head 요소의 사용법

7.2 title 요소(문서의 제목)
title 요소의 사용법

7.3 base 요소(기준 URL)
base 요소의 사용법
href 콘텐츠 속성
target 콘텐츠 속성

7.4 link 요소(문서의 관련성)
link 요소의 사용법
rel 콘텐츠 속성
hreflang 콘텐츠 속성
media 콘텐츠 속성
sizes 콘텐츠 속성

7.5 meta 요소(문서의 메타데이터)
meta 요소의 사용법
name 콘텐츠 속성
http-equiv 콘텐츠 속성 1: 개요
http-equiv 콘텐츠 속성 2: default-style 사용법
http-equiv 콘텐츠 속성 3: refresh 사용법
charset 콘텐츠 속성

7.6 style 요소(스타일 정보)
style 요소의 사용법
type 콘텐츠 속성
media 콘텐츠 속성
scoped 콘텐츠 속성

8장 스크립팅 관련 요소
8.1 script 요소(스크립트 삽입)
script 요소의 사용법
type 콘텐츠 속성
src 콘텐츠 속성
charset 콘텐츠 속성
async 콘텐츠 속성
defer 콘텐츠 속성
스크립트 설명문

8.2 noscript 요소(스크립트의 폴백)
noscript 요소의 사용법

9장 섹션 관련 요소
9.1 body 요소(문서의 본문)
body 요소의 사용법

9.2 section 요소(섹션)【새 요소】
section 요소의 사용법
잘못된 사용법

9.3 nav 요소(내비게이션)【새 요소】
nav 요소의 사용법
내비게이션 링크의 마크업
nav 요소의 수
내비게이션의 그룹화
검색창
사이트 맵

9.4 article 요소(포스트)【새 요소】
article 요소의 사용법
포스트 작성일시를 마크업
article 요소 안에 article 요소를 넣음
블로그 이외에도 사용되는 article 요소
페이지의 메인 콘텐츠는 모두 article?

9.5 aside 요소(관련이 적은 콘텐츠)【새 요소】
aside 요소의 사용법
이용 장면 1: 메인 콘텐츠와 관련 없는 콘텐츠
이용 장면 2: 메인 콘텐츠와 관련 있는 콘텐츠
이용 장면 3: 웹 제작자의 의도

9.6 h1~h6 요소(제목)
h1~h6 요소의 사용법

9.7 hgroup 요소(제목 그룹)【새 요소】
hgroup 요소의 사용법

9.8 header 요소(헤더)【새 요소】
header 요소의 사용법
페이지 헤더(머리글)
섹션 헤더

9.9 footer 요소(풋터)【새 요소】
footer 요소의 사용법
페이지 풋터(바닥글)
섹션 풋터
footer 요소의 배치 장소

9.10 address 요소(연락처 정보)【변경 요소】
address 요소의 사용법
잘못된 사용법

10장 그룹화 요소
10.1 p 요소(단락)
p 요소의 사용법

10.2 hr 요소(주제 변경)【변경 요소】
hr 요소의 사용법

10.3 br 요소(줄 바꿈)
br 요소의 사용법

10.4 pre 요소(포맷 완료 텍스트)
pre 요소의 사용법

10.5 blockquote 요소(블록 인용)
blockquote 요소의 사용법
출처 표시

10.6 ol 요소(순서 있는 목록)
ol 요소의 사용법
start 콘텐츠 속성
reversed 콘텐츠 속성【새 속성】

10.7 ul 요소(순서 없는 목록)
ul 요소의 사용법

10.8 li 요소(목록 항목)
li 요소의 사용법
value 콘텐츠 속성

10.9 dl 요소(기술 목록)
dl 요소의 사용법
용어를 정의할 때 사용

10.10 dt 요소(용어)
dt 요소의 사용법

10.11 dd 요소(용어 설명)
dd 요소의 사용법

10.12 figure 요소(캡션 있는 이미지)【새 요소】
figure 요소의 사용법

10.13 figcaption 요소(이미지의 캡션)【새 요소】
figcaption 요소의 사용법

10.14 div 요소(일반적인 컨테이너)
div 요소의 사용법

11장 텍스트 의미 부여 요소
11.1 a 요소(하이퍼링크)
a 요소의 사용법
target 콘텐츠 속성
ping 콘텐츠 속성【새 속성】
rel 콘텐츠 속성
hreflang 콘텐츠 속성
type 콘텐츠 속성
플레이스홀더(Placeholder)

11.2 em 요소(강조)
em 요소의 사용법

11.3 strong 요소(중요성)【변경 요소】
strong 요소의 사용법

11.4 small 요소(세목)【변경 요소】
small 요소의 사용법

11.5 cite 요소(출처)
cite 요소의 사용법
찬반양론의 cite 요소

11.6 q 요소(인용문)
q 요소의 사용법
cite 콘텐츠 속성

11.7 dfn 요소(정의어)
dfn 요소의 사용법
dfn 요소로 표시한 정의어의 해석

11.8 abbr 요소(약어)
abbr 요소의 사용법
폐지된 acronym 요소

11.9 time 요소(날짜와 시간)【새 요소】
time 요소의 사용법
datetime 콘텐츠 속성
pubdate 콘텐츠 속성

11.10 code 요소(코드)
code 요소의 사용법

11.11 var 요소(변수)
var 요소의 사용법

11.12 samp 요소(출력)
samp 요소의 사용법

11.13 kbd 요소(입력)
kbd 요소의 사용법
samp 요소 안에 kbd 요소를 사용한 경우
kbd 요소 안에 samp 요소를 사용한 경우
kbd 요소를 kbd 요소 안에 사용한 경우

11.14 sub 요소(아래 첨자)
sub 요소의 사용법

11.15 sup 요소(위 첨자)
sup 요소의 사용법

11.16 i 요소(보통 이탤릭체로 쓰는 텍스트)【변경 요소】
i 요소의 사용법

11.17 b 요소(보통 굵은 글씨로 표시하는 텍스트)【변경 요소】
b 요소의 사용법

11.18 mark 요소(하이라이트)【새 요소】
mark 요소의 사용법
설명을 위해 특정 키워드를 강조
인용하는 사람이 인용문의 일부를 강조
검색 결과의 검색 키워드를 강조

11.19 ruby 요소(루비)【새 요소】
ruby 요소의 사용법
복잡한 루비

11.20 rt 요소(루비의 텍스트)【새 요소】
rt 요소의 사용법

11.21 rp 요소(루비의 괄호)【새 요소】
rp 요소의 사용법

11.22 bdo 요소(방향성 서식 제어)
bdo 요소의 사용법

11.23 span 요소(일반적인 텍스트 범위)
span 요소의 사용법

12장 수정을 나타내는 요소
12.1 ins 요소(삽입 텍스트)
ins 요소의 사용법
cite 콘텐츠 속성
datetime 콘텐츠 속성
교정
목록 수정

12.2 del 요소(삭제 텍스트)
del 요소의 사용법

13장 삽입 콘텐츠 요소
13.1 img 요소(이미지)
img 요소의 사용법
src 콘텐츠 속성
usemap 콘텐츠 속성
ismap 콘텐츠 속성
width 콘텐츠 속성과 height 콘텐츠 속성
폐지된 longdesc 콘텐츠 속성
src 콘텐츠 속성과 alt 콘텐츠 속성
alt 콘텐츠 속성의 규정

13.2 iframe 요소(인라인 프레임)
iframe 요소의 사용법
src 콘텐츠 속성
srcdoc 콘텐츠 속성【새 속성】
name 콘텐츠 속성
sandbox 콘텐츠 속성【새 속성】
seamless 콘텐츠 속성【새 속성】
width 콘텐츠 속성과 height 콘텐츠 속성

13.3 embed 요소(플러그인)
embed 요소의 사용법

13.4 object 요소
object 요소의 사용법
data 콘텐츠 속성과 type 콘텐츠 속성
name 콘텐츠 속성
usemap 콘텐츠 속성
form 콘텐츠 속성
width 콘텐츠 속성과 height 콘텐츠 속성

13.5 param 요소(플러그인의 초기 파라미터)
param 요소의 사용법

13.6 video 요소(동영상)【새 요소】
video 요소의 사용법
video 요소의 간단한 사용 방법
자동 재생
오토 버퍼(Auto Buffer)
포스터 프레임
반복 재생
동영상 크기
동영상의 종류
브라우저가 지원하는 동영상 형식
source 요소로 둘 이상의 동영상 형식을 지원
스크립트로 동영상 조작

13.7 audio 요소(오디오)【새 요소】
audio 요소의 사용법
audio 요소의 간단한 사용 방법
브라우저가 지원하는 오디오 형식

13.8 source 요소(미디어 소스)【새 요소】
source 요소의 사용법
type 콘텐츠 속성
media 콘텐츠 속성

13.9 canvas 요소(동적 그래픽)【새 요소】
canvas 요소의 사용법
canvas의 크기
폴백(Fallback)
스크립트로 canvas에 그리기

13.10 map 요소(이미지 맵)
map 요소의 사용법

13.11 area 요소(이미지 맵의 하이퍼링크)
area 요소의 사용법
href 콘텐츠 속성
alt 콘텐츠 속성
모양 정의

14장 테이블 관련 요소
14.1 table 요소(테이블)
table 요소의 사용법
레이아웃을 목적으로 테이블을 사용하는 것은 비표준
테이블의 설명 정보
테이블의 개념
tbody 요소는 원래 필수

14.2 caption 요소(테이블 제목이나 설명)
caption 요소의 사용법

14.3 colgroup 요소(테이블의 열 그룹)
colgroup 요소의 사용법

14.4 col 요소(테이블의 열)
col 요소의 사용법

14.5 tbody 요소(테이블의 행 그룹)
tbody 요소의 사용법

14.6 thead 요소(테이블의 헤더 행 그룹)
thead 요소의 사용법

14.7 tfoot 요소(테이블의 풋터 행 그룹)
tfoot 요소의 사용법

14.8 tr 요소(테이블의 행)
tr 요소의 사용법

14.9 td 요소(테이블의 셀)
td 요소의 사용법
colspan 콘텐츠 속성과 rowspan 콘텐츠 속성
headers 콘텐츠 속성

14.10 th 요소(테이블의 헤더 셀)
th 요소의 사용법
scope 콘텐츠 속성
row 키워드와 col 키워드
rowgroup 키워드
colgroup 키워드

15장 폼 관련 요소
15.1 form 요소(서미트 폼)
form 요소의 사용법
accept-charset 콘텐츠 속성
action 콘텐츠 속성
autocomplete 콘텐츠 속성
enctype 콘텐츠 속성
method 콘텐츠 속성
name 콘텐츠 속성
novalidate 콘텐츠 속성
target 콘텐츠 속성

15.2 fieldset 요소(폼 컨트롤 그룹)
fieldset 요소의 사용법
disabled 콘텐츠 속성
form 콘텐츠 속성【새 속성】
name 콘텐츠 속성

15.3 legend 요소(제목과 설명)
legend 요소의 사용법

15.4 label 요소(폼 컨트롤의 캡션)
label 요소의 사용법
for 콘텐츠 속성
form 콘텐츠 속성【새 속성】

15.5 input 요소(폼 컨트롤)
input 요소의 사용법
type 콘텐츠 속성
hidden
text
search【새 타입】
tel【새 타입】
url【새 타입】
email【새 타입】
password
datetime【새 타입】
date【새 타입】
month【새 타입】
week【새 타입】
time【새 타입】
datetime-local【새 타입】
number【새 타입】
range【새 타입】
color【새 타입】
checkbox
radio
file
submit
image
reset
button
공통 콘텐츠 속성
autocomplete 콘텐츠 속성【새 속성】
list 콘텐츠 속성【새 속성】
readonly 콘텐츠 속성
size 콘텐츠 속성
required 콘텐츠 속성【새 속성】
multiple 콘텐츠 속성
maxlength 콘텐츠 속성
pattern 콘텐츠 속성【새 속성】
min 콘텐츠 속성과 max 콘텐츠 속성
step 콘텐츠 속성【새 속성】
placeholder 콘텐츠 속성【새 속성】
autofocus 콘텐츠 속성【새 속성】
disabled 콘텐츠 속성
form 콘텐츠 속성【새 속성】
name 콘텐츠 속성
value 콘텐츠 속성

15.6 button 요소(버튼)
button 요소의 사용법

15.7 select 요소(선택 폼 컨트롤)
select 요소의 사용법
size 콘텐츠 속성
multiple 콘텐츠 속성

15.8 datalist 요소(입력 후보 선택지)【새 요소】
datalist 요소의 사용법

15.9 optgroup 요소(선택 그룹)
optgroup 요소의 사용법

15.10 option 요소(선택)
option 요소의 사용법
value 콘텐츠 속성
label 콘텐츠 속성
selected 콘텐츠 속성
disabled 콘텐츠 속성

15.11 textarea 요소(텍스트 입력 영역)
textarea 요소의 사용법
cols 콘텐츠 속성과 rows 콘텐츠 속성
maxlength 콘텐츠 속성
placeholder 콘텐츠 속성【새 속성】
readonly 콘텐츠 속성
required 콘텐츠 속성【새 속성】
wrap 콘텐츠 속성

15.12 keygen 요소(키쌍 생성)【새 요소】
keygen 요소의 사용법

15.13 output 요소(폼 계산 결과)【새 요소】
output 요소의 사용법

15.14 progress 요소(진행 상황)【새 요소】
progress 요소의 사용법

15.15 meter 요소(게이지)【새 요소】
meter 요소의 사용법

16장 상호작용 요소
16.1 details 요소(요청 상세 정보)【새 요소】
details 요소의 사용법

16.2 summary 요소(요청 상세 정보 요약)【새 요소】
summary 요소의 사용법

16.3 command 요소(명령)【새 요소】
command 요소의 사용법
type 콘텐츠 속성
label 콘텐츠 속성
icon 콘텐츠 속성
disabled 콘텐츠 속성
checked 콘텐츠 속성
radiogroup 콘텐츠 속성

16.4 menu 요소(명령 목록)【변경 요소】
menu 요소의 사용법
도구 모음
콘텍스트 메뉴
명령 목록 메뉴

17장 전역 속성
17.1 전역 속성이란?
HTML5의 전역 속성
기타 전역 속성

17.2 accesskey 콘텐츠 속성(단축키)
accesskey 콘텐츠 속성의 사용법
여러 개의 키를 할당

17.3 class 콘텐츠 속성(클래스)
class 콘텐츠 속성의 사용법

17.4 contenteditable 콘텐츠 속성(편집 가능)【새 속성】
contenteditable 콘텐츠 속성의 사용법
Internet Explorer의 리버스 엔지니어링을 통해 규정한 contenteditable

17.5 contextmenu 콘텐츠 속성(콘텍스트 메뉴)【새 속성】
contextmenu 콘텐츠 속성의 사용법

17.6 dir 콘텐츠 속성(텍스트 방향)
dir 콘텐츠 속성의 사용법

17.7 draggable 콘텐츠 속성(드래그 가능)【새 속성】
draggable 콘텐츠 속성의 사용법

17.8 hidden 콘텐츠 속성(관계 없음, 의미 없음을 나타냄)【새 속성】
hidden 콘텐츠 속성의 사용법

17.9 id 콘텐츠 속성(요소 식별자)
id 콘텐츠 속성의 사용법

17.10 lang 콘텐츠 속성(언어)
lang 콘텐츠 속성의 사용법
lang 콘텐츠 속성이 지정되지 않은 요소는 무슨 언어인가?

17.11 spellcheck 콘텐츠 속성(문법 검사)【새 속성】
spellcheck 콘텐츠 속성의 사용법

17.12 style 콘텐츠 속성(스타일시트)
style 콘텐츠 속성의 사용법

17.13 tabindex 콘텐츠 속성(탭 인덱스)
tabindex 콘텐츠 속성의 사용법
음의 정수를 지정했을 때
0을 지정했을 때

17.14 title 콘텐츠 속성(제목)
title 콘텐츠 속성의 사용법

17.15 data-* 콘텐츠 속성(사용자 정의 데이터)【새 속성】
data-* 콘텐츠 속성의 사용법

17.16 role 콘텐츠 속성/aria-* 콘텐츠 속성(지원 기술을 위한 주석)【새 속성】
role 콘텐츠 속성과 aria-* 콘텐츠 속성의 역할

17.17 마이크로데이터【새 속성】
마이크로데이터의 개요
마이크로데이터의 사용법
itemref 속성
어휘

18장 링크 릴레이션
18.1 링크 릴레이션이란?
링크 릴레이션의 의미
링크 릴레이션의 책정 이유
링크 릴레이션의 키워드와 의미
링크의 종류

18.2 alternate
alternate 사용법

18.3 archives【새 키워드】
archives 사용법

18.4 author【새 키워드】
author 사용법

18.5 bookmark
bookmark 사용법

18.6 external【새 키워드】
external 사용법

18.7 first
first 사용법

18.8 help
help 사용법

18.9 icon【새 키워드】
icon 사용법

18.10 index
index 사용법

18.11 last
last 사용법

18.12 license【새 키워드】
license 사용법

18.13 next
next 사용법

18.14 nofollow【새 키워드】
nofollow 사용법

18.15 noreferrer【새 키워드】
noreferrer 사용법

18.16 pingback【새 키워드】
pingback 사용법

18.17 prefetch【새 키워드】
prefetch 사용법

18.18 prev
prev 사용법

18.19 search【새 키워드】
search 사용법

18.20 stylesheet
stylesheet 사용법
대체 스타일시트

18.21 sidebar【새 키워드】
sidebar 사용법

18.22 tag【새 키워드】
tag 사용법

18.23 up【새 키워드】
up 사용법