Suche senden
Hochladen
Html5 Guide
โข
4 gefรคllt mir
โข
3,352 views
Y
Yongnam Jeon
Folgen
555
Weniger lesen
Mehr lesen
Melden
Teilen
Melden
Teilen
1 von 170
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Html5 guide
Html5 guide
์ ๋ ๋ฐ
ย
Html5 แแ กแผแแ ชแแ กแแ ตแฏ_v_3.0
Html5 แแ กแผแแ ชแแ กแแ ตแฏ_v_3.0
Youngjo Jang
ย
๋ฐํ์๋ฃ
๋ฐํ์๋ฃ
์์ฌ ๊ฐ
ย
HTML5 Tutorial(Korean)
HTML5 Tutorial(Korean)
๋ฏธ๋์น๊ธฐ์ ์ฐ๊ตฌ์ (MIRAE WEB)
ย
๋ชจ๋ฐ์ผ ์นํ๋ซํผ ๊ธฐ์ ๋ํฅ
๋ชจ๋ฐ์ผ ์นํ๋ซํผ ๊ธฐ์ ๋ํฅ
Jong Jin Hong
ย
Html5 ์๊ฐ ๊ฐ์ด๋
Html5 ์๊ฐ ๊ฐ์ด๋
Jong-hyun Park
ย
Html5
Html5
Jong Jin Hong
ย
Mozilla ์คํ ์น ๋ชจ๋ฐ์ผ ํ๋ซํผ (2012)
Mozilla ์คํ ์น ๋ชจ๋ฐ์ผ ํ๋ซํผ (2012)
Channy Yun
ย
Empfohlen
Html5 guide
Html5 guide
์ ๋ ๋ฐ
ย
Html5 แแ กแผแแ ชแแ กแแ ตแฏ_v_3.0
Html5 แแ กแผแแ ชแแ กแแ ตแฏ_v_3.0
Youngjo Jang
ย
๋ฐํ์๋ฃ
๋ฐํ์๋ฃ
์์ฌ ๊ฐ
ย
HTML5 Tutorial(Korean)
HTML5 Tutorial(Korean)
๋ฏธ๋์น๊ธฐ์ ์ฐ๊ตฌ์ (MIRAE WEB)
ย
๋ชจ๋ฐ์ผ ์นํ๋ซํผ ๊ธฐ์ ๋ํฅ
๋ชจ๋ฐ์ผ ์นํ๋ซํผ ๊ธฐ์ ๋ํฅ
Jong Jin Hong
ย
Html5 ์๊ฐ ๊ฐ์ด๋
Html5 ์๊ฐ ๊ฐ์ด๋
Jong-hyun Park
ย
Html5
Html5
Jong Jin Hong
ย
Mozilla ์คํ ์น ๋ชจ๋ฐ์ผ ํ๋ซํผ (2012)
Mozilla ์คํ ์น ๋ชจ๋ฐ์ผ ํ๋ซํผ (2012)
Channy Yun
ย
1. html5 ๊ฐ์
1. html5 ๊ฐ์
์์ฌ ๊ฐ
ย
์ฐจ์ธ๋ ์น ํ๋ซํผ๊ณผ HTML5 ๊ธฐ์ ๋ํฅ
์ฐจ์ธ๋ ์น ํ๋ซํผ๊ณผ HTML5 ๊ธฐ์ ๋ํฅ
Jonathan Jeon
ย
HTML5 แแ ชแซแแ ฅแทแแ ฆแแ ฅ 2015๋ แแ ฐแธ แแ ขแธ แแ ขแแ กแฏ แแ ฉแผแแ ฃแผแแ ช แแ กแ แ จ แแ ตแพ 2016๋ แแ กแฏแแ ฅแซ แแ กแผแแ ฃแผ แแ ฅ...
HTML5 แแ ชแซแแ ฅแทแแ ฆแแ ฅ 2015๋ แแ ฐแธ แแ ขแธ แแ ขแแ กแฏ แแ ฉแผแแ ฃแผแแ ช แแ กแ แ จ แแ ตแพ 2016๋ แแ กแฏแแ ฅแซ แแ กแผแแ ฃแผ แแ ฅ...
Sang Seok Lim
ย
Html์ด๊ธ 1๊ฐ ์นํ์ค์ ์ดํด
Html์ด๊ธ 1๊ฐ ์นํ์ค์ ์ดํด
tailofmoon
ย
๋ํ ๊ต์ก์ ํตํ ์คํ ์์ค ์ปค๋ฎค๋ํฐ ์ก์ฑ
๋ํ ๊ต์ก์ ํตํ ์คํ ์์ค ์ปค๋ฎค๋ํฐ ์ก์ฑ
Channy Yun
ย
์นํ์ค์ ํ์ฌ์ ๋ฏธ๋
์นํ์ค์ ํ์ฌ์ ๋ฏธ๋
InkyoungChoi
ย
HTML5 & Hybrid App Trends
HTML5 & Hybrid App Trends
์ฑ๋ ๊น
ย
์๋ํ๋ ์ค ์ฒดํ๊ธฐ
์๋ํ๋ ์ค ์ฒดํ๊ธฐ
์ฉํ ์ง
ย
๋ฆฌ๋ ์ค์ ์นํ์ค(2004)
๋ฆฌ๋ ์ค์ ์นํ์ค(2004)
Channy Yun
ย
์ค์ Html5 guide
์ค์ Html5 guide
sam Cyberspace
ย
1. html5 ๊ฐ์
1. html5 ๊ฐ์
์์ฌ ๊ฐ
ย
HTML5 แแ ช แแ ตแ แ ขแแ ฐแธแแ ตแแ ฎแฏ part 1
HTML5 แแ ช แแ ตแ แ ขแแ ฐแธแแ ตแแ ฎแฏ part 1
๋ฏธ๋์น๊ธฐ์ ์ฐ๊ตฌ์ (MIRAE WEB)
ย
Html5์ ํ์ฌ์ ๋ฏธ๋
Html5์ ํ์ฌ์ ๋ฏธ๋
mosaicnet
ย
Trends on Standardizations of HTML5 based Web Platform Technology
Trends on Standardizations of HTML5 based Web Platform Technology
Jonathan Jeon
ย
Webframeworks.kr์ ์๊ฐ
Webframeworks.kr์ ์๊ฐ
WebFrameworks
ย
01.๋ชจ๋ฐ์ผ ํ๋ ์์ํฌ ์ด๋ก
01.๋ชจ๋ฐ์ผ ํ๋ ์์ํฌ ์ด๋ก
Hankyo
ย
์ ๋ํ์ ๋ฐ๋ก ๋ฐ๋ ICT Insight Vol3
์ ๋ํ์ ๋ฐ๋ก ๋ฐ๋ ICT Insight Vol3
Donghyung Shin
ย
Basic of web ref.์น์์งํฑํ๋๊ธฐ์ _01
Basic of web ref.์น์์งํฑํ๋๊ธฐ์ _01
SangHun Lee
ย
์นํ์ค์ ๊ธฐ๋ฐํ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ํ์คํ (2005)
์นํ์ค์ ๊ธฐ๋ฐํ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ํ์คํ (2005)
Channy Yun
ย
W3C์ ๊ตญ์ ์ ์น ๊ธฐ์ ํ๋ ฅ์ ์ํ ์ ์ธ (2005)
W3C์ ๊ตญ์ ์ ์น ๊ธฐ์ ํ๋ ฅ์ ์ํ ์ ์ธ (2005)
Channy Yun
ย
W3C ๊ตญ์ ํ์คํ ๋์ ์ ๋ต
W3C ๊ตญ์ ํ์คํ ๋์ ์ ๋ต
Jonathan Jeon
ย
๋ชจ๋ฐ์ผํ๊ฒฝ๊ณผ ๊ฐ๋ฐ๋ฐฉํฅ
๋ชจ๋ฐ์ผํ๊ฒฝ๊ณผ ๊ฐ๋ฐ๋ฐฉํฅ
Wendyst Communication
ย
Weitere รคhnliche Inhalte
Was ist angesagt?
1. html5 ๊ฐ์
1. html5 ๊ฐ์
์์ฌ ๊ฐ
ย
์ฐจ์ธ๋ ์น ํ๋ซํผ๊ณผ HTML5 ๊ธฐ์ ๋ํฅ
์ฐจ์ธ๋ ์น ํ๋ซํผ๊ณผ HTML5 ๊ธฐ์ ๋ํฅ
Jonathan Jeon
ย
HTML5 แแ ชแซแแ ฅแทแแ ฆแแ ฅ 2015๋ แแ ฐแธ แแ ขแธ แแ ขแแ กแฏ แแ ฉแผแแ ฃแผแแ ช แแ กแ แ จ แแ ตแพ 2016๋ แแ กแฏแแ ฅแซ แแ กแผแแ ฃแผ แแ ฅ...
HTML5 แแ ชแซแแ ฅแทแแ ฆแแ ฅ 2015๋ แแ ฐแธ แแ ขแธ แแ ขแแ กแฏ แแ ฉแผแแ ฃแผแแ ช แแ กแ แ จ แแ ตแพ 2016๋ แแ กแฏแแ ฅแซ แแ กแผแแ ฃแผ แแ ฅ...
Sang Seok Lim
ย
Html์ด๊ธ 1๊ฐ ์นํ์ค์ ์ดํด
Html์ด๊ธ 1๊ฐ ์นํ์ค์ ์ดํด
tailofmoon
ย
๋ํ ๊ต์ก์ ํตํ ์คํ ์์ค ์ปค๋ฎค๋ํฐ ์ก์ฑ
๋ํ ๊ต์ก์ ํตํ ์คํ ์์ค ์ปค๋ฎค๋ํฐ ์ก์ฑ
Channy Yun
ย
์นํ์ค์ ํ์ฌ์ ๋ฏธ๋
์นํ์ค์ ํ์ฌ์ ๋ฏธ๋
InkyoungChoi
ย
HTML5 & Hybrid App Trends
HTML5 & Hybrid App Trends
์ฑ๋ ๊น
ย
์๋ํ๋ ์ค ์ฒดํ๊ธฐ
์๋ํ๋ ์ค ์ฒดํ๊ธฐ
์ฉํ ์ง
ย
๋ฆฌ๋ ์ค์ ์นํ์ค(2004)
๋ฆฌ๋ ์ค์ ์นํ์ค(2004)
Channy Yun
ย
Was ist angesagt?
(9)
1. html5 ๊ฐ์
1. html5 ๊ฐ์
ย
์ฐจ์ธ๋ ์น ํ๋ซํผ๊ณผ HTML5 ๊ธฐ์ ๋ํฅ
์ฐจ์ธ๋ ์น ํ๋ซํผ๊ณผ HTML5 ๊ธฐ์ ๋ํฅ
ย
HTML5 แแ ชแซแแ ฅแทแแ ฆแแ ฅ 2015๋ แแ ฐแธ แแ ขแธ แแ ขแแ กแฏ แแ ฉแผแแ ฃแผแแ ช แแ กแ แ จ แแ ตแพ 2016๋ แแ กแฏแแ ฅแซ แแ กแผแแ ฃแผ แแ ฅ...
HTML5 แแ ชแซแแ ฅแทแแ ฆแแ ฅ 2015๋ แแ ฐแธ แแ ขแธ แแ ขแแ กแฏ แแ ฉแผแแ ฃแผแแ ช แแ กแ แ จ แแ ตแพ 2016๋ แแ กแฏแแ ฅแซ แแ กแผแแ ฃแผ แแ ฅ...
ย
Html์ด๊ธ 1๊ฐ ์นํ์ค์ ์ดํด
Html์ด๊ธ 1๊ฐ ์นํ์ค์ ์ดํด
ย
๋ํ ๊ต์ก์ ํตํ ์คํ ์์ค ์ปค๋ฎค๋ํฐ ์ก์ฑ
๋ํ ๊ต์ก์ ํตํ ์คํ ์์ค ์ปค๋ฎค๋ํฐ ์ก์ฑ
ย
์นํ์ค์ ํ์ฌ์ ๋ฏธ๋
์นํ์ค์ ํ์ฌ์ ๋ฏธ๋
ย
HTML5 & Hybrid App Trends
HTML5 & Hybrid App Trends
ย
์๋ํ๋ ์ค ์ฒดํ๊ธฐ
์๋ํ๋ ์ค ์ฒดํ๊ธฐ
ย
๋ฆฌ๋ ์ค์ ์นํ์ค(2004)
๋ฆฌ๋ ์ค์ ์นํ์ค(2004)
ย
รhnlich wie Html5 Guide
์ค์ Html5 guide
์ค์ Html5 guide
sam Cyberspace
ย
1. html5 ๊ฐ์
1. html5 ๊ฐ์
์์ฌ ๊ฐ
ย
HTML5 แแ ช แแ ตแ แ ขแแ ฐแธแแ ตแแ ฎแฏ part 1
HTML5 แแ ช แแ ตแ แ ขแแ ฐแธแแ ตแแ ฎแฏ part 1
๋ฏธ๋์น๊ธฐ์ ์ฐ๊ตฌ์ (MIRAE WEB)
ย
Html5์ ํ์ฌ์ ๋ฏธ๋
Html5์ ํ์ฌ์ ๋ฏธ๋
mosaicnet
ย
Trends on Standardizations of HTML5 based Web Platform Technology
Trends on Standardizations of HTML5 based Web Platform Technology
Jonathan Jeon
ย
Webframeworks.kr์ ์๊ฐ
Webframeworks.kr์ ์๊ฐ
WebFrameworks
ย
01.๋ชจ๋ฐ์ผ ํ๋ ์์ํฌ ์ด๋ก
01.๋ชจ๋ฐ์ผ ํ๋ ์์ํฌ ์ด๋ก
Hankyo
ย
์ ๋ํ์ ๋ฐ๋ก ๋ฐ๋ ICT Insight Vol3
์ ๋ํ์ ๋ฐ๋ก ๋ฐ๋ ICT Insight Vol3
Donghyung Shin
ย
Basic of web ref.์น์์งํฑํ๋๊ธฐ์ _01
Basic of web ref.์น์์งํฑํ๋๊ธฐ์ _01
SangHun Lee
ย
์นํ์ค์ ๊ธฐ๋ฐํ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ํ์คํ (2005)
์นํ์ค์ ๊ธฐ๋ฐํ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ํ์คํ (2005)
Channy Yun
ย
W3C์ ๊ตญ์ ์ ์น ๊ธฐ์ ํ๋ ฅ์ ์ํ ์ ์ธ (2005)
W3C์ ๊ตญ์ ์ ์น ๊ธฐ์ ํ๋ ฅ์ ์ํ ์ ์ธ (2005)
Channy Yun
ย
W3C ๊ตญ์ ํ์คํ ๋์ ์ ๋ต
W3C ๊ตญ์ ํ์คํ ๋์ ์ ๋ต
Jonathan Jeon
ย
๋ชจ๋ฐ์ผํ๊ฒฝ๊ณผ ๊ฐ๋ฐ๋ฐฉํฅ
๋ชจ๋ฐ์ผํ๊ฒฝ๊ณผ ๊ฐ๋ฐ๋ฐฉํฅ
Wendyst Communication
ย
Web 2.0๊ณผ ๋์๊ด ํ์ฉ์ฌ๋ก
Web 2.0๊ณผ ๋์๊ด ํ์ฉ์ฌ๋ก
๊ตฌ์ค์ต (ํ๊ตญ๊ธฐ์ด๊ณผํ์ง์์ฐ๊ตฌ์)
ย
HTML5 ์คํ ์๊ฐ
HTML5 ์คํ ์๊ฐ
Toby Yun
ย
๋๋๊ทธํ2010ํํ์ด์ง์ ์์
๋๋๊ทธํ2010ํํ์ด์ง์ ์์
draghome
ย
HTML5 ์ตํฉ ๊ธฐ์ ํ์คํ ๋ํฅ
HTML5 ์ตํฉ ๊ธฐ์ ํ์คํ ๋ํฅ
Jonathan Jeon
ย
HTML5 แแ ช แแ ตแ แ ขแแ ฐแธแแ ตแแ ฎแฏ part 2
HTML5 แแ ช แแ ตแ แ ขแแ ฐแธแแ ตแแ ฎแฏ part 2
๋ฏธ๋์น๊ธฐ์ ์ฐ๊ตฌ์ (MIRAE WEB)
ย
2012, ๋ํ๋ฏผ๊ตญ ์น ํ์ค, ๊ทธ ๊ธฐ๋ก์ ์๋ค
2012, ๋ํ๋ฏผ๊ตญ ์น ํ์ค, ๊ทธ ๊ธฐ๋ก์ ์๋ค
Jonathan Jeon
ย
Adobe Dreamweaver CS5.5 ๋ฅผ ์ด์ฉํ HTML5 ๊ฐ๋ฐ
Adobe Dreamweaver CS5.5 ๋ฅผ ์ด์ฉํ HTML5 ๊ฐ๋ฐ
JongKwang Kim
ย
รhnlich wie Html5 Guide
(20)
์ค์ Html5 guide
์ค์ Html5 guide
ย
1. html5 ๊ฐ์
1. html5 ๊ฐ์
ย
HTML5 แแ ช แแ ตแ แ ขแแ ฐแธแแ ตแแ ฎแฏ part 1
HTML5 แแ ช แแ ตแ แ ขแแ ฐแธแแ ตแแ ฎแฏ part 1
ย
Html5์ ํ์ฌ์ ๋ฏธ๋
Html5์ ํ์ฌ์ ๋ฏธ๋
ย
Trends on Standardizations of HTML5 based Web Platform Technology
Trends on Standardizations of HTML5 based Web Platform Technology
ย
Webframeworks.kr์ ์๊ฐ
Webframeworks.kr์ ์๊ฐ
ย
01.๋ชจ๋ฐ์ผ ํ๋ ์์ํฌ ์ด๋ก
01.๋ชจ๋ฐ์ผ ํ๋ ์์ํฌ ์ด๋ก
ย
์ ๋ํ์ ๋ฐ๋ก ๋ฐ๋ ICT Insight Vol3
์ ๋ํ์ ๋ฐ๋ก ๋ฐ๋ ICT Insight Vol3
ย
Basic of web ref.์น์์งํฑํ๋๊ธฐ์ _01
Basic of web ref.์น์์งํฑํ๋๊ธฐ์ _01
ย
์นํ์ค์ ๊ธฐ๋ฐํ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ํ์คํ (2005)
์นํ์ค์ ๊ธฐ๋ฐํ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ํ์คํ (2005)
ย
W3C์ ๊ตญ์ ์ ์น ๊ธฐ์ ํ๋ ฅ์ ์ํ ์ ์ธ (2005)
W3C์ ๊ตญ์ ์ ์น ๊ธฐ์ ํ๋ ฅ์ ์ํ ์ ์ธ (2005)
ย
W3C ๊ตญ์ ํ์คํ ๋์ ์ ๋ต
W3C ๊ตญ์ ํ์คํ ๋์ ์ ๋ต
ย
๋ชจ๋ฐ์ผํ๊ฒฝ๊ณผ ๊ฐ๋ฐ๋ฐฉํฅ
๋ชจ๋ฐ์ผํ๊ฒฝ๊ณผ ๊ฐ๋ฐ๋ฐฉํฅ
ย
Web 2.0๊ณผ ๋์๊ด ํ์ฉ์ฌ๋ก
Web 2.0๊ณผ ๋์๊ด ํ์ฉ์ฌ๋ก
ย
HTML5 ์คํ ์๊ฐ
HTML5 ์คํ ์๊ฐ
ย
๋๋๊ทธํ2010ํํ์ด์ง์ ์์
๋๋๊ทธํ2010ํํ์ด์ง์ ์์
ย
HTML5 ์ตํฉ ๊ธฐ์ ํ์คํ ๋ํฅ
HTML5 ์ตํฉ ๊ธฐ์ ํ์คํ ๋ํฅ
ย
HTML5 แแ ช แแ ตแ แ ขแแ ฐแธแแ ตแแ ฎแฏ part 2
HTML5 แแ ช แแ ตแ แ ขแแ ฐแธแแ ตแแ ฎแฏ part 2
ย
2012, ๋ํ๋ฏผ๊ตญ ์น ํ์ค, ๊ทธ ๊ธฐ๋ก์ ์๋ค
2012, ๋ํ๋ฏผ๊ตญ ์น ํ์ค, ๊ทธ ๊ธฐ๋ก์ ์๋ค
ย
Adobe Dreamweaver CS5.5 ๋ฅผ ์ด์ฉํ HTML5 ๊ฐ๋ฐ
Adobe Dreamweaver CS5.5 ๋ฅผ ์ด์ฉํ HTML5 ๊ฐ๋ฐ
ย
Html5 Guide
1.
์ค์ HTML5 ๊ฐ์ด๋
์ค์์ฐฌ, ์ ํ์, ์ ์ฐฌ๋ช , ๊ฒฝ์คํธ, ๊ถ์ ํ ํ๊ตญ ์น ํ์ค ์ปค๋ฎค๋ํฐ ์ผ๋ Web Standards Korea 1
2.
์ค์ HTML5 ๊ฐ์ด๋
์๋ฌธ HTML5๋ ์น ๊ฐ๋ฐ ์์ฐ์ฑ ํฅ์ ๋ฐ ์ฐจ์ธ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ํ๋ซํผ์ผ๋ก ์ ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ํด ํจ๊ป ๋ง๋ค์ด ๋๊ฐ๋ ๊ฐ๋ฐฉํ ์น ํ์ค์ ๋๋ค. 2004๋ ๋ถํฐ ์ ์ธ๊ณ ์น ๊ฐ๋ฐ์๋ค์ด ์ง์ ์ฐธ์ฌํ์ฌ ๋ง๋ค์ด์จ ํ์ค์ด๊ธฐ๋ ํฉ ๋๋ค. 2005๋ ๋ถํฐ ๊ตญ๋ด์ ์น ํ์ค์ ์ ์ฐฉ ์์ผ์จ ์น ํ์ค ์ปค๋ฎค๋ํฐ์์๋ ๊ณผ๊ฑฐ ๊ตญ๋ด ์น ํ์ค ๊ธฐ์ ๋์ ์ ์ ๋ณด ๋ถ์กฑ ๊ฒฝํ์ ํ ๋๋ก ๊ตญ๋ด ์น ์ข ์ฌ์๋ค์ ๊ฒ ์๋ก์ด ์น ํ์ค์ธ HTML5์ ์๊ฐํ๊ธฐ ์ํด ์ด ๊ฐ์ด๋๋ฅผ ์ค๋นํ์์ต๋ ๋ค. ๋ณธ ๊ฐ์ด๋์๋ HTML5์ ๋ฐฐ๊ฒฝ๊ณผ ์๊ฐ ์น ๊ฐ๋ฐ ๋ฐฉ์์ ๋ณํ, ์๋ก์ด ๋ง ํฌ์ ๊ณผ ์น ํผ ๊ธฐ๋ฅ, ๋ค์ํ ์น ์ ํ๋ฆฌ์ผ์ด์ ๋ถ๊ฐ API ๊ทธ๋ฆฌ๊ณ CSS3์ ๋ชจ ๋ฐ์ผ ๊ธฐ๋ฐ ์น์ฑ ๊ฐ๋ฐ์ ๋ํ ๋ด์ฉ์ ๋๋ฃจ ๋ฃ์์ต๋๋ค. HTML5 ์คํ ์ฝํผ ๋ฐ์ค์ ๊ฐ์ฌ๋ค์ด ์ง์ ์งํํ์์ผ๋ฉฐ ๋๊ตฌ๋ ์ฝ์ ์ ์๋๋ก ํฌ๋ฆฌ์์ดํฐ๋ธ ์ปค๋จผ์ฆ ๋ผ์ด์ผ์ค ํ์ ๋ฌด๋ฃ๋ก ์ ๊ณต ํฉ๋๋ค. ๋ณธ ๊ฐ์ด๋๋ 2005๋ ๋ฌด๋ฃ ๋ฐฐํฌ๋ '์ค์ ์น ํ์ค ๊ฐ์ด๋'๋ฅผ ์๋ ๊ณต๊ฐ ์ ๋ฃ๋ก์ ๋ง์ ๊ด๋ จ ์ฑ ๋ค์ด ์ถํ๋๊ฒ ์ง๋ง ์ฒ์ ๊ณต๋ถ๋ฅผ ์์ํ์๋ ๋ถ๋ค๊ฒ ๋ถ ๋ด์์ด ๋์์ด ๋๊ธฐ ์ํด ๋ง๋ค์์ต๋๋ค. ๊ธฐ๊บผ์ด ์งํ์ ๋งก์์ค ์ปค๋ฎค๋ํฐ ๋ฉค ๋ฒ๋ค์๊ฒ ๊ฐ์ฌ๋๋ฆฌ๊ณ ๋ค๋ฅธ ์ฐธ์ฌ์์ ์ํด ๋์ฑ ๊ฐ์ ๋ ์๋ฃ๋ก ๊ฑฐ๋ญ๋ ์ ์๊ธฐ๋ฅผ ๋ฐ๋๋๋ค. ๋ํ ์ ์ ์ค ์ ์ฐฌ 2
3.
์ค์ HTML5 ๊ฐ์ด๋
์ ์ ์๊ฐ ์ค ์ ์ฐฌ 2002๋ ๋ถํฐ ํ๊ตญ Mozilla ์ปค๋ฎค๋ํฐ ๋ฆฌ๋ ๋ฐ Firefox ํ๊ตญ์ด ๋ฒ์ ๊ฐ๋ฐ ์ ๊ด์ฌํ๊ณ ์๋ค. ๋ค์์ปค๋ฎค๋์ผ์ด์ ์์ ์ฌ๋ด ๊ธฐ์ ์ ๋ต ๋ฐ ์คํ API ์๋น์ค๋ฅผ ๋ด๋นํ ์ผ๋ฉฐ, ํ์ฌ ์์ธ๋ ๋ฐ์ฌ๊ณผ์ ์ ์ฌํ ์ค์ด๋ค. http://channy.creation.net Twitter: @channyun Me2day: channy ์ ํ ์ 2005๋ ๊ฒฝ๋ถํฐ ์นํ์ค์ ์ ์ฉํ ์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๋ฉด์ ์ด๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ํด์ ๊ณ ๋ฏผํด ์๋ค. ํ์ฌ๋ Opera Software์์ ์น ์๋ฐ์ ค๋ฆฌ์คํธ๋ก ํ ๋ํ๋ฉด์ ์นํ์ค๊ณผ ์น์ ๊ทผ์ฑ์ ์ค์์ฑ์ ์๋ฆฌ๋ ๋ ธ๋ ฅ์ ํ๊ณ ์๋ค. http://hyeonseok.com Twitter: @hyeonseok, Me2day: hyeonseok ์ ์ฐฌ ๋ช ์น ํ์ค, ์น ์ ๊ทผ์ฑ, ์ ๋๋ฒ์ค ๋์์ธ์ ๊ด์ฌ์ด ๋ง๊ณ ํ์ฌ NHN์์ ์ค ํ์์ค XE์ UI ๊ฐ๋ฐ์ ๋ฌด๋ฅผ ๋ด๋นํ๊ณ ์๋ค. http://naradesign.net Twitter: @naradesign, Me2day: naradesign ๊ฒฝ ์ค ํธ firejune.com์ ์ด์์ค์ธ ๋ธ๋ก๊ฑฐ, ํ๋ก ๋-์๋ ์์ง๋์ด, ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ค์ฌ์ผ๋กํ ๋ฆฌ์น ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ๊ด์ฌ๊ณผ ํฅ๋ฏธ๋ฅผ ๊ฐ์ง๊ณ ์๋ค. http://firejune.com Twitter: @firejune ๊ถ ์ ํ xguru.net ์ ์ด์์ค์ธ ๋ธ๋ก๊ฑฐ. ์์ดํฐ/์๋๋ก์ด๋์ ๊ฐ์ ๋ชจ๋ฐ์ผ ํ๊ฒฝ ์์์ ๋ค๊ฐ์ ์ธ ์น ํ์ฉ์ ๋ํด ์ฐ๊ตฌ์ค์ด๋ค. http://xguru.net Twitter: @xguru 3
4.
์ค์ HTML5 ๊ฐ์ด๋ ๋ชฉ์ฐจ 1.
HTML5 ์๊ฐ .............................................................................................6 1.1 HTML 5 ์ ๋ฐฐ๊ฒฝ .............................................................................7 1.2 HTML5 ๊ฐ์...................................................................................12 1.3 HTML5 ํ์ค ๋ฌธ์๋ค ......................................................................22 1.4 HTML5์ ์น๊ฐ๋ฐ ๋ฐฉ๋ฒ๋ก ์ ๋ณํ ...................................................26 1.5 FAQ.................................................................................................29 2. HTML5 ๋งํฌ์ ..........................................................................................32 2.1. ๊ตฌ์กฐ์ ๋ฌธ๋ฒ ...................................................................................33 2.2. ์์์ ์์ฑ ...................................................................................36 2.3 HTML5 ์์ ...................................................................................54 2.4 HTML 4.01๊ณผ์ ๋น๊ต......................................................................58 3. CSS3 ์๊ฐ ..................................................................................................63 3.1 CSS2์ ์ฐจ์ด์ ................................................................................64 3.2 CSS3 ๋ธ๋ผ์ฐ์ ์ง์ํํฉ ................................................................64 3.3 CSS3 ์ค์ ์ ์ฉ ..............................................................................69 3.4 CSS3 ๋ช ์ธ ์ฝ๋ ๋ฒ .........................................................................80 3.5 FAQ.................................................................................................80 4. HTML5 API...............................................................................................85 4.1 HTML5 ๋ฏธ๋์ด ์์ ......................................................................86 4.2 HTML5 API ....................................................................................92 4.3 ๋ฆฌ์น ์น API....................................................................................108 4.4 FAQ.................................................................................................122 5. HTML5์ ๋ชจ๋ฐ์ผ ......................................................................................125 5.1 ๋ชจ๋ฐ์ผ์์์ HTML5....................................................................126 5.2 ์์ดํฐ ๊ธฐ๋ฐ HTML5 ์ฑ ๊ฐ๋ฐ ........................................................131 5.3 ์ค์ ์์ ..........................................................................................147 ๋ถ๋ก. ................................................................................................................157 4
5.
์ค์ HTML5 ๊ฐ์ด๋
[๋ธ๋กํฐํฌ๋ผ] HTML5๊ฐ ๊ฐ๋ฐ์์๊ฒ โ๊ธฐํ์ ๋ โ์ธ ์ด์ ................158 [์ฝ์๊บผ๋ฆฌ] HTML5 ๋์์์ ๋ํ ์ ๋ง ..............................................165 ๊ตญ๋ด ์น ํ์ค ์ปค๋ฎค๋ํฐ ๋ชฉ๋ก .................................................................168 5
6.
์ค์ HTML5 ๊ฐ์ด๋
1. HTML5 ์๊ฐ HTML5๋ ์น ํ์ค ๊ธฐ๊ตฌ์ธ W3C์์ ๋ง๋ค๊ณ ์๋ ์ฐจ์ธ๋ ์น ํ์ค์์ผ ๋ก์ ๋ง์ดํฌ๋ก์ํํธ, ๋ชจ์ง๋ผ, ์ ํ, ๊ตฌ๊ธ, ์คํ๋ผ ๋ฑ ๋ชจ๋ ์น ๋ธ๋ผ์ฐ์ ๋ฒค ๋๊ฐ ์ฐธ์ฌํ๊ณ ์๋ ์ฐ์ ํ์ค์ด๋ค. 2004๋ ์น ๋ธ๋ผ์ฐ์ ๋ฒค๋์ ๊ฐ๋ฐ์ ์ปค๋ฎค๋ํฐ๊ฐ ์ฃผ์ถ์ด ๋ ์น ํ์ดํผํ ์ค ํธ ์ ํ๋ฆฌ์ผ์ด์ ์ํน๊ทธ๋ฃน(WHATWG)์ ์ด์์ผ๋ก๋ถํฐ ์์๋ ์ด ํ์ค์ ์ ์น ๋ธ๋ผ์ฐ์ ํธํ์ฑ, ๊ตฌ์กฐ์ ์ด๊ณ ์๋ฏธ์ ๋งํฌ์ ๋ฐ ํธ๋ฆฌํ ์นํผ ๊ธฐ๋ฅ์ ์ ๊ณตํ์ฌ ์น ๊ฐ๋ฐ์๋ค์ ์์ฐ์ฑ์ ๋์๊ณผ ๋์์ ๋ฆฌ์น ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐ ํ ์ ์๋ ๋ค์ํ ์๋ฐ์คํฌ๋ฆฝํธ API๋ฅผ ํฌํจํ๊ณ ์๋ค. 2007๋ ๋ถํฐ W3C์ HTML W/G์์ HTML5 ํ์ค์์ผ๋ก ๊ฐ๋ฐ๋๊ณ ์๋ ๋์์ ์ต ์ ๋ฒ์ ์ ์น ๋ธ๋ผ์ฐ์ ์์ ๋น ๋ฅด๊ฒ ํ์ฌ๋๊ณ ์์ด ์ฐจ์ธ๋ ์น ์๋น์ค ๊ฐ๋ฐ ์ ์ฃผ์ ๊ธฐ์ ๋ก์ ๊ฐ๊ด ๋ฐ์ ์ ๋ง์ด๋ค. ์ด ์ฅ์์๋ HTML5๊ฐ ๋ง๋ค์ด์ง ์ ๋ฐ์ ์์๋ ๋ฐฐ๊ฒฝ๊ณผ ๊ฐ๋จํ ์คํ ์๊ฐ ๊ทธ๋ฆฌ๊ณ ์น ๊ฐ๋ฐ์๋ก์ ํฅํ ์ ๊ทผ ๋ฐฉ๋ฒ ๋ฐ ์น ๊ฐ๋ฐ์ ๋ฐฉํฅ์ ๋ํด ๊ณต ์ ํ๊ณ ์ ํ๋ค. 6
7.
์ค์ HTML5 ๊ฐ์ด๋ 1.1
HTML 5 ์ ๋ฐฐ๊ฒฝ HTML5 ํ์ค์์ ๊ฐ์ฅ ํฐ ๋ชฉ์ ์ ๊ณผ๊ฑฐ HTML์ ํธํ์ฑ์ ์ ์งํ๋ฉด์ ์น ๊ฐ๋ฐ์๋ค์ด ์ค์ง์ ์ผ๋ก ๋ถ๋ชํ๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐ ํ๋ ๊ฒ์ด๋ค. ์น์ ํตํ ์ ๋ณด ๊ณต์ ๊ฐ ํญ๋ฐ์ ์ผ๋ก ์ฑ์ฅํ ์ ์์๋ ๊ฒ์ HTML์ ํต ํด ์ ๋ณด(์ปจํ ์ธ )์ ์๋ฏธ(๋งํฌ์ )์ ํจ๊ป ์ ์ฌ์ด ํ ์คํธ๋ก ํธ์งํ๋๋ก ํจ์ผ ๋ก์ ์ฝ๊ฒ ๋ฐฐ์ฐ๊ณ ์ธ ์ ์์๊ธฐ ๋๋ฌธ์ด๋ค. HTML์ ์ด๋ฐ ๋จ์ํจ์ ์น ์ ์ ์ฌ๋์ด ์ฐธ์ฌํ๋ ํ ๋๋ฅผ ๋ณ๊ฒ ํ๊ธฐ์ ์ถฉ๋ถํ๋ค. ํ์ง๋ง ์ด๋ฌํ ์ฅ์ ์๋ ๋ถ๊ตฌํ๊ณ 90๋ ๋ ํ๋ฐ ์น ๋ธ๋ผ์ฐ์ ์ ์ฒด์ ์ ์ ์จ ์ ์ ์ค์ ์์ฉ ๋ธ๋ผ์ฐ์ ๋ฒค๋๋ค์ ๋นํ์ค ํ๊ทธ๋ค์ด ๋จ๋ฐ๋๋ฉด์ HTML์ ๊ธฐ๋ณธ ์ ์ ์ ํผ์๋์๋ค. ์ค์ง์ ์ผ๋ก IE vs. Netscape์ ์ฌ์ด์ ์ ํผํด๋ฅผ ๋ณธ ๊ฒ์ โ์น ๊ฐ๋ฐ์โ๋ค์ด์๋ค. ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง(Cross Browsing)๋ผ๋ ๊ธฐ๋ฒ ๋๋ฌธ์ ๊ณ ์์ ํ๋๊ฐ ํ๋ฉด IE์ ๋ ์ฃผ ์ํ ๋๋ฌธ์ ์น ์๋น์ค์ ํ์ ์ด ๋ฆ์ด์ก๊ณ ์ฌ์ค์ ํ๋ก ํธ ์๋์ ๊ธฐ์ ํ์ ์ ํ๋์ ๊ฐ์ ์๋ํํฐ ํ๋ซํผ์ผ๋ก ๋์ด๊ฐ ๋ฒ๋ ธ๋ค. ๊ฒ๋ค๊ฐ ์น ํ์ค ๊ธฐ๊ตฌ์ธ W3C๋ ๊ฒฌ๊ณ ํ ์น ๋ฌธ์๋ฅผ ์ ๊ณตํ๋ค๋ ๊ฟ์ ๊ฐ์ง ๊ณ XML์ ๊ธฐ๋ฐ์ผ๋ก ํ๋ XHTML๋ก์ ์ ํ์ ๊พํ์๋ค. ๋ฐ๋ผ์ HTML ์ 4.01 ๋ฒ์ ์ ๋์ผ๋ก ๋ ์ด์ ์ ๊ทธ๋ ์ด๋ ๋์ง ์๋ ๋ก์ ํ์ค์ผ๋ก ๋จ์ ๋ค. 1.1.1. ์น ํ์ค๊ณผ ์น 2.0 2000๋ ๋ ์ค๋ฐ๋ถํฐ ํ์ ์ ๋จ์ด๋ฅผ ์ ๊ณตํ๊ฒ ๋ ๊ฒ์ ๋ฐ๋ก ์น ํ์ค๊ณผ ์น 2.0์ด๋ค. ์ฐ์ ๊ตฌ๊ธ ๊ฐ์ ๊ฒ์ ์์ง๊ณผ ๊ฒ์ ๊ด๊ณ ์ ์ฑ์ฅ๊ณผ ํนํ, ๋ธ๋ก๊ทธ์ ๊ฐ์ ์ฌ ์ฉ์ ์์ฐ ์ฝํ ์ธ ๋ฅผ ์ ๊ฒ์ํ๊ธฐ ์ํ์ฌ HTML๊ณผ CSS ๋ ์ด์์์ ํตํ ์น ํ์ค ๊ธฐ๋ฒ์ด ๊ฐ๊ด ๋ฐ๊ธฐ ์์ํ๋ค. ์ด๋ฅธ๋ฐ ๊ตฌ์กฐ(Structure)์ ํํ (Presentation) ๊ทธ๋ฆฌ๊ณ ๋์(Behavior)๋ฅผ ๋ถ๋ฆฌํ์ฌ ๊ฒ์ ํฌ๋กค๋ฌ(๊ธฐ๊ณ)๊ฐ ์ฝ ํ ์ธ ๋ฅผ ์ฝ๊ณ ์ธ ์ ์๋๋ก ํ๋ ๊ฒ์ ๋งค์ฐ ์ค์ํ ์์์ ์ด ๋์๋ค. ํนํ ์ด๋ฌํ ๋ฐฉ์์ ์น ๊ฐ๋ฐ์ ์์ด์ ๊ฐ๋ฐ์์ ๋์์ด๋ ๊ฐ์ ์ญํ ๋ถ ๋ด์ ๋ช ํํ ํ๊ณ ์ฝ๋ ์ ์ง ๋ณด์ ๋ฐ ์์ฐ์ฑ์ ํฐ ์ํฅ์ ๋ฏธ์ณค๋ค. ๊ฒ๋ค๊ฐ ์ฅ์ ์ธ์ ์ํ ์น ์ ๊ทผ์ฑ์๋ ๋งค์ฐ ๋ฐ์ด๋ ๊ฐ๋ฐ ๋ฐฉ๋ฒ๋ก ์ด ๋์๋ค. 2004๋ ๋ถ 7
8.
์ค์ HTML5 ๊ฐ์ด๋ ํฐ
์ค๋ฆฌ์ฝ๋ฐธ๋ฆฌ์ ๋ง์ ์น2.0 ์คํํธ์ ๋ค์ด ์น ํ์ค ๊ธฐ๋ฒ์ ๊ธฐ๋ฐ์ผ๋ก ๋ค์ ํ ์น ์๋น์ค๋ฅผ ์ ๋ณด์ด๊ธฐ ์์ํ์๊ณ ๊ตญ๋ด์์๋ ๋ง์ ์ํฅ์ ๋ฏธ์ณค๋ค. ์น 2.0์ ์ฃผ ๊ฐ๋ ์ธ โํ๋ซํผ์ผ๋ก์ ์นโ์ ์น ๊ทธ ์์ฒด๋ฅผ ์ํํธ์จ์ด๋ก ๋ณด ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์๋๋ฅผ ์ด์๋ค. ๋ํ์ ์ธ ๊ธฐ์ ์ด ๋ฐ๋ก Ajax(Asynchronous JavaScript and XML)๋ก์ ์ง๋ฉ์ผ๊ณผ ๊ตฌ๊ธ๋งต์ด ๊ทธ ์ ์ด๋ฅผ ์ด๋ฃจ์๋ค. ๊ธฐ์กด์ ๋ฌธ์ ํ์์ ์ ๋ณด์ ์ ๊ณต์ด๋ผ๋ ํ์์ ๋ฒ์ด๋ ๋ฐ ์คํฌํฑ ์ํํธ์จ์ด์ ๊ฐ์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ฒ์ด๋ค. ๋ํ, ์คํAPI๋ผ๋ ๋ฐ์ดํฐ ๊ธฐ๋ฐ ์๋น์ค๋ ์ ๋ฌธ ๊ฐ๋ฐ์๋ฟ๋ง ์๋๋ผ ์ ๋ฌธ ์ฌ์ฉ์๊น์ง ์น ํ๋ซํผ์ ๋์ด๋ค์๋ค. ์คํ API๋ฅผ ์ด์ฉํ๋ฉด ์์ ์ ๋ธ๋ก๊ทธ ๋ ํํ์ด์ง์ ๋ค์ด๋ฒ๋ ๋ค์์ ๊ฒ์ ๊ฒฐ๊ณผ๋ ๊ตฌ๊ธ ๋งต์ ์์ฑ ์ง๋, ์ด๋ฒ ์ด ์ ์ค๊ณ ์ํ ๋ชฉ๋ก ๊ฐ์ ๊ฒ์ ์ฝ๊ฒ ์ถ๊ฐํ ์ ์๋ค. ์ด๋ฏธ ๋ฐ์คํฌํฑ ์ํํธ์จ์ด ํ๋ซํผ ๋ฒค๋๋ค์ ๊ณต๊ฐ ์น ๊ธฐ์ ์ ์น ์ ํ๋ฆฌ์ผ ์ด์ ์ ์ ๋ชฉํ๋ ์๋๋ฅผ ๊ณ์ ํ๊ณ ์๋ค. XML๊ณผ (X)HTML, CSS, ์๋ฐ ์ค ํฌ๋ฆฝํธ ๊ฐ์ ์น ํ์ค ๊ธฐ์ ๋ค์ ๋ฆฌ์น ์ธํฐ๋ท ์ ํ๋ฆฌ์ผ์ด์ (Rich Internet Application)์ ๋ง๋๋ ๋ฐ ์ฌ์ฉํ๊ธฐ ์์ํ ๊ฒ์ด๋ค. ๋ํ์ ์ผ๋ก ๋ชจ์ง๋ผ์ ํ์ด์ดํญ์ค ํ์ฅ ๊ธฐ๋ฅ, ์ผํ! ์์ ฏ, ๋ง์ดํฌ๋ก์ํํธ์ ์ค๋ฒ๋ผ์ดํธ (Silverlight), ์ด๋๋น์ ํ๋ ์ค(Flex) ๋ฐ AIR ๋ฑ์ด ์ฌ๊ธฐ์ ์ํ๋ค. ์ ํ์ ๊ฒฝ์ฐ, Mac OS์ ๋์๋ณด๋ ์์ ฏ๊ณผ ์ฌํ๋ฆฌ์์ ๊ตฌ๋ ๊ฐ๋ฅํ ์น ์ ํ๋ฆฌ์ผ์ด ์ ์ ์์ดํฐ(iPhone)์์๋ ์คํ ํ ์ ์๋๋ก ํ๊ณ ์๋ค. ์ด๋ค ์์ฉ ์ํํธ์จ์ด์ ๋ํ์ ์ธ ํน์ง์ XML ํน์ (X)HTML๋ก ์ฌ์ฉ 8
9.
์ค์ HTML5 ๊ฐ์ด๋
์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค๋ฉฐ CSS๋ก ๋์์ธ ๋ฐ ์คํ์ผ์ ์ ์ํ๊ณ ์๋ฐ ์คํฌ๋ฆฝ ํธ๋ก ๊ธฐ๋ฅ์ ์ ์ด ํ๋ ์ ํ์ ์ธ ์น ๊ธฐ์ ์ ์ฑ๊ณต์ ๋ฒค์น๋งํน ํ๋ค๋ ๋ฐ ์ ๋ค. 1.1.2 HTML5์ ์์ ์ด๋ฌํ ์น์ ๊ธฐ์ ์ ํ์ ์ ์น ๋ธ๋ผ์ฐ์ ์ ๊ณ์๋ ์ญ์ ์์ ๋์๋ค. ์ค ํ ์์ค ํ๋ก์ ํธ์ธ ๋ชจ์ง๋ผ(Mozilla) ์ปค๋ฎค๋ํฐ์์ ๊ฐ๋ฐํ ํ์ด์ดํญ์ค์ ์ ํ์ ์ฌํ๋ฆฌ, ์คํ๋ผ ๊ทธ๋ฆฌ๊ณ ๊ตฌ๊ธ ํฌ๋กฌ์ ์ด๋ฅด๊ธฐ ๊น์ง 2004๋ ๋ถํฐ ๋ค์ ํ ์น ๋ธ๋ผ์ฐ์ ๋ค์ด ์์ฅ์ ์์์ ธ ๋์ค๊ธฐ ์์ํ๋ค. 2004๋ ๋นIE ๋ธ๋ผ์ฐ์ ์ธ๊ณ ์ ์ ์จ์ด 5% ์ํ์ด๋ ๊ฒ์ด 2010๋ ํ์ฌ ๊ฑฐ์ 40%์ ์ก๋ฐํ๊ณ ์์ผ๋ฉฐ ์ ๋ฝ์ ๊ฒฝ์ฐ๋ ์ด๋ฏธ 50%๋ฅผ ๋์๋ค. ์น ๊ธฐ์ ์ ๋ณํ์๋ ์ด๋ฌํ ๋ง์ด๋ ์น ๋ธ๋ผ์ฐ์ ์ ์ฒด์ ํ์ ๊ณผ ์ฌ์ฉ์๋ค์ ์ ํ์ ํ์ ์ ๋ฐ ์ปธ์ผ๋ฉฐ ๋ง์ดํฌ๋ก์ํํธ๊ฐ 2007๋ IE ๊ฐ๋ฐํ์ ๋ค์ ๋ง๋ค ์ ๋์ ๋ค. ๊ทธ๋ฌ๋, ์น ํ์คํ ๊ธฐ๊ตฌ์ธ W3C๋ ์ด๋ฌํ ๋ณํ๋ฅผ ์์ฉํ ์ค๋น๋ฅผ ํ๊ณ ์ ์ง ๋ชปํ๋ค. 2004๋ W3C์ ํ ์ํฌ์ต์์ ์๊ธด ์๊ฒฌ ์ฐจ์ด ๋๋ฌธ์ ๋ชจ์ง๋ผ, 9
10.
์ค์ HTML5 ๊ฐ์ด๋
์ ํ, ์คํ๋ผ ๋ฑ์ W3C ๋ฐ์์ ์๋ก์ด ๋ฒ์ ์ HTML ํ์ค์ ์ค๋นํ๊ธฐ ์์ํ๋ค. W3C์ ๋ค๋ฅธ ํ์คํ ๊ธฐ๊ตฌ ๋ณด๋ค๋ ์๋์ ์ผ๋ก ๊ฐ๋ฐฉ๋์ด ์์์ง๋ง, ๋ค์ํ ์น ๋ธ๋ผ์ฐ์ ํ๊ฒฝ์์์ ์น ๊ฐ๋ฐ์์ ๊ณ ์ถฉ๊ณผ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ด๋ผ ๋ ํ์ค์ ์ธ ๋ณํ๋ฅผ ๋ฐ์๋ค์ด์ง ๋ชปํ๋ค. ์ด๋ค์ 2006๋ 6์ ์น ํ์ดํผํ ์คํธ ์ํน๊ทธ๋ฃน(WHATWG)์ด๋ผ๋ ๊ณต๊ฐ ๊ทธ๋ฃน์ ํ์ฑํ์ฌ ์์ ๋ค์ด ๋ง๋๋ ์๋ก์ด ํ์ค์์ ๋๊ตฌ๋ ์ฐธ์ฌํ ์ ์๋ ๋ก ๊ฐ๋ฐฉ ํ์๋ค. W3C์ ํ์์ฌ ์ค์ฌ ํ์ค์์ด ์๋ ์น ๊ฐ๋ฐ์๊ฐ ์ง์ ์ ํ๋ ํ์ค์ ๋ง๋ค๊ธฐ ์ํด์์๋ค. ๋๊ตฌ๋ ํ์ค์ ๋ ผ์์ ์ฐธ์ฌํ ์ ์์์ผ๋ฉฐ ์ด๋ค์ ์ค๋ ๊ณต๊ฐ ํ ๋ก ์ ๊ฑฐ์ณ Web Form 2.0๊ณผ Web Applications 1.0์ด ๋ผ๋ ํ์ค์์ ๋ง๋ค์ด ๋๋ค. ์ด๋ค ํ์ค์์ ์ฒ ํ์ ๋น์ ์ ์ธ๊ณ ์น ์ฌ์ดํธ์ 90%๊ฐ ๋๋ ์ธ์ด์ธ HTML์ ํ์ ํ์๋ ๊ฒ์ด๋ค. ์น ๋ธ๋ผ์ฐ์ ์ ์ฒด ์ ์ฅ์์ W3C๊ฐ ๋ง๋ค๊ณ ์๋ XML๊ธฐ๋ฐ ์น ํ์ค(XHTML2.0, XPath, XML Events๋ฑ)์ ๊ธฐ์กด ์น ๋ธ๋ผ์ฐ์ ๋ฅผ ์๋ก ์์ฑํด์ผ ํ ์ ๋๋ก ์ด๋ ค์ด ์์ ์ด๋ผ๋ ์ธก๋ฉด๋ ์์๋ค. ๋ฌด ์ ๋ณด๋ค ์ค์ํ ๊ฒ์ ๊ธฐ์กด HTML์ด ๊ฐ์ง ๊ฐ์น๋ฅผ ์ธ์ ํ๊ณ ์ฅ์ ์ ๊ทธ๋๋ก ์ด๋ฆฌ๋ฉด์ ์น ๋ธ๋ผ์ฐ์ ์ ์ฒด๊ฐ ๋ถ๋ช ํํ๋ ์ฒ๋ฆฌ ๋ฐฉ์์ ์ฌ์ ์ํ๊ณ ์๋ก์ด ๋งํฌ์ ๊ณผ API๋ฅผ ํตํด ์น ๊ฐ๋ฐ์๋ค์ด ์ฝํ ์ธ ์ค์ฌ์ ์น ์ดํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ ์ ์์ฝ๊ฒ ํ๋ ค๋ ๊ฒ์ด๋ค. 1.1.3 Of the Web Developer, by the Web Developer and for the Web Developer WHATWG ํ๋์ ์ฑ๊ณต์ ์ฆ๊ฐ W3C์ ์ํฅ์ ์ฃผ๊ธฐ ์์ํ๋ค. ์๋ 10์ ์น์ ์ฐฝ์์์ด์ W3C๋ฅผ ์ด๋๊ณ ์๋ ํ ๋ฒ๋์ค ๋ฆฌ(Tim Berners- Lee)๋ โReinventing HTMLโ์ด๋ผ๋ ๊ธ์์ XHTML์ ์ ํ ์คํจ์ ๋ ๋ถ์ด ์ HTML ์์ ์ ์์ํ ๊ฒ์ ์ฒ๋ช ํ์๋ค. ์ด์ ์ 3์ง๋์์ ํ๋ ํ๊ณ ์๋ WHATWG์ ์น ๊ฐ๋ฐ์๋ค๊ณผ ๋ฒค๋๋ค์ W3C์ ๊ฒฐ์ ์ ํ์ ํ ๋ฉด์ 2007๋ 3์ ์๋ก์ด HTML ์ํน ๊ทธ๋ฃน์ ํ์๋ค. ์ด ์ํน ๊ทธ๋ฃน ํ๋์๋ ๋ช ๊ฐ์ง ๊ณ ๋ฌด์ค๋ฌ์ด ์ ์ด ์๋ค. ๋จผ์ ์ ์ง IE ๊ฐ ๋ฐ์ ์ด๋ฉฐ ์ต๊ทผ ๋ง์ดํฌ๋ก์ํํธ์ IE7 ์ดํ์ ๊ฐ๋ฐ์ ์ด์ฑ ์์ ๋งก์ ํฌ๋ฆฌ ์ค ์์จ(Chris Wilson)์ด ์ํน ๊ทธ๋ฃน ์์ฅ์ด ๋์๋ค๋ ์ ์ด๋ค. ๋ํ, WHATWG์ ํ์ค ์์ ์ ์ฌ์ค์ ์ฃผ๋ํ ์ด์ ํ์จ(Ian Hickson)์ด ์ฒซ ํ์ค ์ด์์ ํธ์ง์๊ฐ ๋ ๊ฒ์ด๋ค. ์ด์์ ๋ท์ค์ผ์ดํ์ ์คํ๋ผ๋ฅผ ๊ฑฐ์ณ ์ง๊ธ ์ ๊ตฌ๊ธ์์ ํํ์ ํ์ค ์์ฑ๊ฐ๋ก ํ๋ ์ค์ธ ์ ์ ์ธ์ฌ์ด๋ค. ๋ฟ๋ง ์๋๋ผ 10
11.
์ค์ HTML5 ๊ฐ์ด๋ WHATWG์์
ํ๋ํ๋ 500์ฌ๋ช ์ ์น ๊ฐ๋ฐ์๋ค์ด W3C์ ์ด๋น ์ ๋ฌธ๊ฐ (Invited Expert)๋ผ๋ ์ ๋๋ฅผ ํ์ฉํด์ ์ฐธ์ฌํ ์ ์๊ฒ ๋์๊ณ ๋ฉ์ผ๋ง๋ฆฌ์ค ํธ๋ ์์ ๊ณต๊ฐ๋ก ๋ฐ๋์๋ค. ์ด๋ฌํ ๊ณผ๊ฐํ ๋ณํ๋ฅผ ํตํด W3C์ ์ HTML ์ํน ๊ทธ๋ฃน์ ์ ํ์ค์ ์ด๋ฆ์ โ HTML5โฒ๋ผ๊ณ ๋ช ๋ช ํ๊ณ WHATWG๊ฐ ์์ ํ๋ ๋๋ถ๋ถ์ ํ ์ค์์ ๊ทธ๋๋ก ์์ฉํ๊ธฐ์ ์ด๋ฅธ๋ค. ์ฌ์ค์ ์น ๊ฐ๋ฐ์์ ์น ๊ฐ๋ฐ์์ ์ํ ์น ๊ฐ๋ฐ์๋ฅผ ์ํ ํ์ค์ผ๋ก ๊ฑฐ๋ญ๋๊ฒ ๋ ์๊ฐ์ด๋ค. ๋ง์ ์ฌ๋๋ค์ด HTML5์ ๋ํด์ ํ์์ ์ธ ์๊ฐ์ ๊ฐ์ง๊ณ ์๋ ๊ฒ์ ์ ์ฃผ ๋ณธ๋ค. ๊ทธ ๋ํ์ ์ธ ์ด์ ๊ฐ W3C ํ์ค์์ด ๋๋ ๊ณผ์ ์ด ๋งค์ฐ ๊ธธ ๋ฟ๋ง ์ ๋๋ผ ์ค์ ๋ก ์น ๋ธ๋ผ์ฐ์ ์ ์ ์ฉ๋๋ ์๊ธฐ๋ ๋งค์ฐ ์ค๋ ๊ธฐ๊ฐ์ด ๊ฑธ๋ฆด ๊ฒ์ด ๋ผ๋ ์ด์ ์์๋ค. ํ์ค์ ๊ทธ๋ ์ง ์๋ค. ์ด๋ฏธ HTML5์ ๋ง์ ๊ธฐ๋ฅ๋ค์ด ํ์ด์ดํญ์ค, ์คํ๋ผ, ์ฌํ๋ฆฌ์ ํฌ๋กฌ์ ์ด๋ฏธ ํ์ฌ๋๊ณ ์์ผ๋ฉฐ IE8๊ณผ IE9์์๋ ๋๊ฑฐ ํฌํจ๋ ๊ฒ์ด ๊ธฐ์ ์ฌ์คํ ๋๊ณ ์๊ธฐ ๋๋ฌธ์ด๋ค. ๋ณธ ๊ฐ์ด๋์์ ์์ผ๋ก ์๊ฐํ HTML5 ๊ด๋ จ ๊ธฐ์ ๋ค์ด ์ค์ ๋ก ๋ค์ํ ์น ๋ธ๋ผ์ฐ์ ์์ ๋ณผ ์ ์๊ฒ ๋๋ค๋ ๊ฒ์ด๋ค. ์ด๋ฌํ ๋ณํ์๋ ๋ถ๊ตฌํ๊ณ ํ์ฌ ๊ตญ๋ด์๋ ํ๋์๋ ์ค๋ฒ๋ผ์ดํธ ๋ฑ ๊ฐ์ข ๋ฆฌ์น ์ธํฐ๋ท ๊ธฐ์ ์ด ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฏธ๋์ธ ๋ฏ ํฌ์ฅ๋๊ณ ์๋ ๊ฐ์ด ์ ์ง ์๋ค. ํนํ ์์ดํฐ์ด๋ ์๋๋ก์ด๋ ๊ฐ์ ์ค๋งํธํฐ ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ชจ๋ฐ ์ผ์ ๋์ธ๊ฐ ๋ ๊ฒ์ฒ๋ผ ์ฌ๊ฒจ์ง๋ ๋ถ๋ถ๋ ์กด์ฌํ๋ค. ํ์ง๋ง ์น์ด ๊ฐ์ง๊ณ ์๋ ๊ฐ์ฅ ํฐ ์์ฐ์ ์ฝํ ์ธ ๋ฅผ ๊ธฐ๋ฐํ ์ ๋ณด ๊ณต์ ์ ์๋จ์ผ๋ก ๊ธฐ๋ณธ์ ์ถฉ์คํ๋ฉด์ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ธฐ๋ฅ์ ์ ๊ณตํ ์ ์๋ 11
12.
์ค์ HTML5 ๊ฐ์ด๋
HTML5์ ๋ฑ์ฅ์ผ๋ก ์๋ก์ด ๋ณํ๋ฅผ ๋ง๊ณ ์๋ค๋ ์ ์ด๋ค. RIA์ ๋นํด ๋ ํ๋ถํ ์ฌ์ฉ์ ๊ฒฝํ์ด๋ ๋ฎ์ ๊ฐ๋ฐ ์์ฐ์ฑ์ผ๋ก ์ธํด ์น์ ๋ก์ ์ ํ๋ฆฌ์ผ์ด ์ ๊ธฐ์ ๋ก ์น๋ถ๋์ด์๋ ์๋๋ค. ๋๊ตฌ๋ ์ ๋ณด ๊ณต์ ์ ์ ํ๋ฆฌ์ผ์ด์ ๊ธฐ๋ฅ์ ์ฝ๊ฒ ๋ง๋ค๊ณ ์ ๊ณตํ ์ ์๋๋ก ์น ์ปจํ ์ธ ๋ฅผ ๋ง๋ค๊ณ ์์ฐํ๋ ๊ณ ๊ธ ์ฌ์ฉ์์ ์น ๊ฐ๋ฐ์๋ค์ด ์น์ ์ ๊ฐ๊พธ ์ด ๋๊ฐ์ผ ํ ์ฑ ์์ ๋๊ปด์ผ ํ ์์ ์ด๋ค. HTML5๊ฐ ์ค์ํ ๊ฒ์ ์ด๋ฌํ ํ์ค ์น์ ๊ทผ๋ณธ์ ์ธ ๋ณํ๊ฐ ์๋๋๊ณ ์๊ธฐ ๋๋ฌธ์ด๊ณ ์ง๊ธ์ด์ผ ๋ง๋ก ์ฐ๋ฆฌ๊ฐ ํจ๊ป ๋ง๋ค์ด ์๋ ์น์ ๋ฏธ๋๋ฅผ ์ง๋ฉดํ๊ฒ ๋๋ ์๊ฐ์ด๋ค. 1.2 HTML5 ๊ฐ์ HTML5๊ฐ ์ธํฐ๋ท ์ ๊ณ์์ ์๋ ค์ง๊ฒ ๋ ๊ณ๊ธฐ๋ ๋ฐ๋ก 2009๋ ๊ตฌ๊ธ์ ์น ๊ฐ๋ฐ์ ์ฝํผ๋ฐ์ค์ธ โ๊ตฌ๊ธ I/Oโ์์ ์์ฌ์ ์๋น์ค๊ฐ ์๋ HTML5๋ฅผ ๋ฐ๋ชจ ๋ก ์์ฐํ๋ฉด์ ์ฐจ์ธ๋ ์น ๊ธฐ์ ๋ก ์ง์ํ๊ฒ ๋ค๋ ์ฒ๋ช ์ ํ๋ฉด์๋ถํฐ์ด๋ค. ํน ํ, ์คํฐ๋ธ ์ก์ค๊ฐ ์ ํ ์์ดํฐ์ ํ๋์ ํ์ฌ๋ฅผ ๊ฑฐ๋ถํ๋ฉด์ ๋์ ๊ธฐ์ ๋ก HTML5๋ฅผ ํ๋ณดํ๊ธฐ ์์ํ์๋ค. ๋ํ, ์ ๋ง์ HTML5 ๋ฐ๋ชจ๋ค์์ ๊ธฐ์กด์ RIA ๊ธฐ์ ์ ๋ฅ๊ฐํ ๋งํ ๊ฒ ์ ๋ณด์ฌ์ค์ผ๋ก์จ ๋ง์น ๊ตฌ๊ธ๊ณผ ์ ํ์ด ์์ฌ์ ์ด์ต์ ์ํด ํ๋ฌ๊ทธ์ธ ๊ธฐ๋ฐ RIA ๊ธฐ์ ์ ๋์ฒด ์๋จ์ผ๋ก ํ๋ณดํ๊ณ ์๋ค๋ ์๊ฐ์ด ๋๋ฆฌ ํผ์ ธ์๋ค. ์ฐ๋ฆฌ๊ฐ ์์ ์ดํด ๋ณด์๋ฏ์ด HTML5๋ 2004๋ ๋น์ ์์ฅ ์ ์ ์จ 5% ๋ฏธ ๋ง์ด์๋ ๋ง์ด๋ ์น ๋ธ๋ผ์ฐ์ ๋ค์ด ์น ๊ฐ๋ฐ์๋ค๊ณผ์ ํ ๋ก ์ ํตํด ๋ง๋ค์ด ์จ ๊ฐ๋ฐฉํ ์น ํ์ค์ผ๋ก์ ์น ๊ฐ๋ฐ์์ ์์ฐ์ฑ๊ณผ ๊ฐ์น๋ฅผ ๋์ด๊ธฐ ์ํ ๋ค์ํ ๊ธฐ์ ๋ค์ ๋ด์๋ค. ์ด๋ฌํ ์ ์ ๊ฐ๋ตํ๊ฒ ์ดํด ๋ณด๊ณ ์ ํ๋ค. 1.2.1 ๋์์ธ ์์น W3C HTML5 W/G์์๋ ๊ธฐ์กด ํ์ค ๋ฌธ์ ์ธ์๋ ์น ๊ฐ๋ฐ์์ ์ดํด๋ฅผ ๋๊ธฐ ์ํ ๋ค์ํ ๋ฌธ์๋ฅผ ํจ๊ป ๋ง๋ค๊ณ ์๋ค. ๊ทธ ์ค HTML5 ๋์์ธ ์์น์ด ๋ผ๋ ๋ฌธ์์๋ ์น ํ์ค์ ๋ง๋๋ ๋ฐ ์์ด, ์์ฌ ๊ฒฐ์ ์ ๊ธฐ๋ณธ ์์น์ด ๋๋์ฌ ํญ์ ์ ์ํ๊ณ ์๋ค. ์ฒซ์งธ, ๊ธฐ์กด์ HTML ๋ฌธ๋ฒ์ด๋ ์ฌ์ฉ๋ฒ์ ์ต๋ํ ์ง์ํ๊ณ ๋จ๊ณ์ ๊ธฐ๋ฅ ์ถ์(Graceful degradation)์ด ๊ฐ๋ฅํ๋๋ก ํ๋ค. <b>, <i> ๊ฐ์ ๊ธฐ์กด์ ๋น 12
13.
์ค์ HTML5 ๊ฐ์ด๋ ํ์ค
ํ๊ทธ์ ์ฌ์ฉ๋ ์ฉ๋ฒ์ ์ ํด ๊ฐ๋ฅํ๊ฒ ํ์ผ๋ฉฐ <embed> ๊ฐ์ ์ด๋ฏธ ์ฌ ์ฉํ๋ ํ์ค๋ ์ฌ์ฌ์ฉํ๋๋ก ํ์ฌ ์น ๊ฐ๋ฐ์๋ค์ด ๋๋ฌด ๋ฌธ๋ฒ์ ์ต๋งค์ด์ง ์ ๋๋ก ํ๋ โํธํ์ฑ(Compatibility)โ์ ์ ๊ณตํ๋ค. ์น ๋ธ๋ผ์ฐ์ ๋ณ๋ก <p><strong>a<em>b</strong>c</em> ๋ํ ์์ดํ ์ฒ๋ฆฌ๋ฐฉ๋ฒ ๋์งธ, ์ค์ ์น ๊ฐ๋ฐ์๋ค์ด ๊ฒช๊ณ ์๋ ๊ฐ์ฅ ์ค์ํ ๋ฌธ์ ๋ฅผ ์์์ ๋ฐ๋ผ ๋ ๋๋ ๋ฌธ์ ์ ์ ๋ถ๋ฆฌํด์ ๋ ๋ฆฝ์ ์ผ๋ก ํด๊ฒฐ ํ๋ ์ ์ฉ์ฑ(Utility)์ ์์น์ด๋ค. ์๋ฅผ ๋ค์ด, ์นํผ(Web Form)์ email, number, date ๊ฐ์ ์๋ก์ด ์์ฑ์ ์ถ๊ฐํจ์ผ๋ก์จ ์ฌ์ฉ์ ์ ๋ ฅ ๊ฐ์ ์ ํจ์ฑ ํ์ธ์ ๋๋ (ํญ์ ํ๋) ์ฝ์ง์ ์ค ์ผ ์ ์๋๋ก ํ์๋ค. <input> ํ๊ทธ์ datetime ์์ฑ์ ๋ฃ์ด์ฃผ๋ฉด ์น ๋ธ๋ผ ์ฐ์ ๊ฐ ์๋์ผ๋ก ๋ฌ๋ ฅ์ ํ์ํด ์ค๋ค. ๋ํ IE์์๋ง ์ฌ์ฉ ๊ฐ๋ฅ ํ๋ contenteditable ์์ฑ์ด ํ์คํ ๋์ด ๋ชจ๋ HTML ์์๋ฅผ ์ฌ์ฉ์๊ฐ ์ง์ ํธ์งํ ์ ์๊ฒ ํจ์ผ๋ก์ ์์ง์ ์๋ํฐ์ ํธํ์ฑ ๋ฌธ์ ๋ ์ฌ๋ผ์ง ๊ฒ์ด๋ค. ํนํ, ์ด๋ฏธ ์น ์ฝํ ์ธ ์ ์ผ๋ถ๊ฐ ๋์ด ๋ฒ๋ฆฐ ๋น๋์ค์ ์ค๋์ค ์ฝํ ์ธ ์ฌ์์ ์น ๋ธ๋ผ์ฐ์ ์์ ๋ด๋ถ์ ์ผ๋ก ๊ตฌํํ์ฌ ๋ณดํธ์ ์ ๊ทผ์ด ๊ฐ๋ฅํ๊ณ ์บ๋ฒ์ค (Canvas)์ ๋ฒกํฐ ๊ทธ๋ํฝ(SVG)๋ฅผ ํตํด 2์ฐจ์ ๋ํ์ ๊ฐ์ ์ฝํ ์ธ ๋ ๋งํฌ ์ ์ผ๋ก ํํ ํ ์ ์๋๋ก ๋ฉํฐ๋ฏธ๋์ด์ ๋ณดํธ์ ์ ๊ทผ์ฑ์ ๋ํ๋ค. ์ ์งธ, ์ํธ ํธํ์ฑ(Interoperability)์ผ๋ก ์น ๋ธ๋ผ์ฐ์ ๊ฐ ์ํธ ํธํ์ ์ ํด ์ต๋ํ ์์ธํ๊ฒ ๊ธฐ์ ํ๋ ์ค๋ฅ ์ฒ๋ฆฌ ๋ฐฉ๋ฒ์ ๋ช ์ํ๋๋ก ํ์๋ค. HTML5์ ๊ธฐ๋ณธ ํ์ค ๋ฌธ์ ์ฒซ ๋ถ๋ถ์ ์น ๋ธ๋ผ์ฐ์ ๊ฐ HTML ๋ฌธ๋ฒ ์ค๋ฅ์ ๋ํ ์์ธํ ์ฌ๋ก์ ์ด์ ๋ํ ๋ธ๋ผ์ฐ์ ์ ์ฒ๋ฆฌ ๋ฐฉ๋ฒ์ ๋ช ์ํด ๋์๋ค. ๋ฐ ๋ผ์ ์น ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฌํ ๋ฌธ๋ฒ์ ์ค๋ฅ๋ก ์ธํด ์น ๊ฐ๋ฐ์๋ค์ด ์ค์ง์ ์ธ ์ด๋ ค์์ ๊ฒช๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์๋ค. 13
14.
์ค์ HTML5 ๊ฐ์ด๋ 1.2.2
์ฃผ์ ๊ธฐ๋ฅ HTML5๋ฅผ ํ๋ณํ๋ ๊ธฐ์ค์ ๋ฐ๋ก ์๋ก์ด ๋ฌธ์ ํ์(Doctype)์ ์๋ค. <!doctype html>์ ์ ์ธํจ์ผ๋ก์ HTML5 ๋ฌธ์๋ก ์ธ์ํ ์ ์์ผ๋ฉฐ, ์น ๋ธ๋ผ์ฐ์ ์์๋ ๊ฐ์ฅ ์ต์ ์ ๋ ๋๋ง ์์ง์ ์ด์ฉํ๊ฒ ๋๋ค. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5 ๋งํฌ์ </title> </head> <body> <p>์ฐจ์ธ๋ ์นํ์ค์ผ๋ก์ HTML5 </body> </html> ์๋ก์ด ๋งํฌ์ HTML5์์๋ ๊ธฐ์กด์ HTML4 ๋ณด๋ค ํ์ฅ๋ ํ๊ทธ๋ค์ ์ง์ํ๋ค. ํนํ, ๋ฌธ์ ๊ตฌ์กฐ์ ์ ํฉํ๊ฒ header, footer, nav, section ๊ฐ์ ๊ตฌ์กฐํ ๋งํฌ์ ์ ์ฌ์ฉํ ์ ์๋ค. (์์ธํ ๋ด์ฉ์ 2์ฅ์์ ๋ค๋ฃฌ๋ค.) HTML5์ ์ ๊ตฌ์กฐ์ ๋งํฌ์ (์ถ์ฒ: http://html5doctor.com/designing-a-blog-with-html5/) ํนํ, progress, time, mark, meter ๋ฑ๊ณผ ๊ฐ์ ์๋ฏธ ๊ธฐ๋ฐ ํ๊ทธ๋ค์ด ์ถ๊ฐ ๋ก ์ง์๋๋ค. ์ฝํ ์ธ ์ ์๋งจํฑ ํํ(Annotation)์ด ๊ฐ๋ฅํ๋๋ก ๋ง์ดํฌ๋ก๋ฐ ์ดํฐ(Microdata)์ RDFa๋ผ๋ ์๋งจํฑ ์น ๊ธฐ๋ฒ๋ ํฌํจํ์๋ค. ์์ ๋งํ๋๋ก ๋นํ์ค ๋ฌธ๋ฒ์ด์์ผ๋ ์ฌ์ ํ ์ด์ฉํ๊ณ ์๋<b>๋ ํค์ ๋,<i>๋ ํ๋ช ์ ์ฌ์ฉํ๋๋ก ํ๋ ๋ฑ ์ต๋ํ ๊ธฐ์กด์ ํ๊ทธ๋ค์ ๊ทธ๋๋ก ์ด์ฉ ํ ์ ์๋ค. ๋์ CSS๋ก ์์ ๋์ฒด ๊ฐ๋ฅํ big, center, font, s, strike ๊ฐ์ 14
15.
์ค์ HTML5 ๊ฐ์ด๋ ์คํ์ผ
๊ธฐ๋ฐ ์์๋ ์์ ํ ์์ด์ง๋ค๋ค. ๋ํ, frame๊ณผ applet, acronym ๊ฐ์ ๋ถ์ ์ ์ธ ์์๋ค๋ ์ฌ์ฉํ์ง ์๋๋ค. ํธ๋ฆฌํ ํผ(Form) ์์ฑ HTML5๋ ๊ฐ๋ฐ์์ ์๊ณ ๋ฅผ ๋์ด ์ค Form ๊ธฐ๋ฅ ๊ฐ์ ์ ๋ด๊ณ ์๋ค. input ํ๊ทธ์ ๊ฐ์ข type ์์ฑ์ด ์ถ๊ฐ๋์ด ๋ค์ํ ๊ธฐ๋ฅ์ ์ ๊ณตํด ์ค๋ค. datetime ์์ฑ๊ฐ์ ์ฌ์ฉํ๋ฉด ๋ฌ๋ ฅ์ ์น ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํด ์ฃผ๋ฉฐ, range ์์ฑ์ ์คํฌ๋กค๋ฐ๋ฅผ, url์ ์น ์ฌ์ดํธ ๋ชฉ๋ก, email์ ๋ฉ์ผ ์ฃผ์ ์ ํจ ์ฑ ํ์ธ์ ํด ์ค๋ค. color ์์ฑ์ ์์ํ๋ฅผ ๋ณ๋ ๊ฐ๋ฐ ์์ด ์ฌ์ฉํ ์ ์๋ค. Form ์์์ ๋ชจ๋ ์ ํจ์ฑ ํ์ธ ๊ธฐ๋ฅ์ ์ผ๊ฑฐ๋ ๋ ์ ์๊ณ , ์ ๊ท์ ํํ ์ ์ฌ์ฉํ ์ ์๋๋ก ํ์ฌ ์ ํจ์ฑ ๊ฒ์ฆ์ ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ๊ฐ๋ฐ ์ ๊ฐ์ ํ์ ํ ์ค์ฌ ์ค ๊ฒ์ผ๋ก ๊ธฐ๋ํ๋ค. ๋ฆฌ์น ์น ์ ํ๋ฆฌ์ผ์ด์ HTML 5๋ ์น ์ดํ๋ฆฌ์ผ์ด์ ์์ฑ์ ๋์์ ์ค ๋ค์ํ API๋ฅผ ์ ๊ณต ํ๋ค. ์ด๋ ์๋ก ๊ท์ ๋ ๋งํฌ์ ์์์ ํผ ์์ฑ๋ค๊ณผ ํจ๊ป ๋ ์ข์ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ์ฌ์ฉํ ์ ์๋ค. 2์ฐจ์ ๊ทธ๋ํฝ API์ ์ฌ์ฉํ ์ ์๋ canvas ์์์ ๋ด์ฅ ๋น๋์ค ๋ฐ ์ค ๋์ค ์ฌ์์ ์ํ video, audio ์์๋ฅผ ํตํด ๋ฉํฐ๋ฏธ๋์ด ๊ธฐ๋ฅ์ ๊ฐํํ ์ ์๋ค. ์คํ๋ผ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ง์์ ์ํ ์น ํ์ด์ง ๋ด๋ถ ์ ์ฅ์ 15
16.
์ค์ HTML5 ๊ฐ์ด๋
(AppCache). ํค(Key)/๊ฐ(Value) ๊ธฐ๋ฐ ๋ฐ์ดํฐ ์ ์ฅ์(DOM Storage ๋ฐ IndexedDB)๋ SQL ๊ธฐ๋ฐ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ง์ ๊ธฐ๋ฅ(Web Databases API) ๋ฅผ ์ด์ฉํ๋ฉด ์น ๊ธฐ๋ฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์๋ค. ๋ํ, ์น ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ ๋ฆฝ์ ์ผ๋ก ํน์ ํ๋กํ ์ฝ ๋ฐ ๋ฏธ๋์ด ํ์์ ๋ฑ ๋กํ ์ ์๋ ํต์ (Web Socket) API์ ๋ฌธ์๊ฐ ์๋ฆผ ๊ธฐ๋ฅ(Sever-sent Event) ๋ฑ์ผ๋ก ๋ค์ํ ์๋ฒ ํต์ ์ ์ฒ๋ฆฌ ํ ์ ์๋ค. ์ฌ์ฉ์ ๊ฒฝํ์ ์ฆ๋์ํค๊ธฐ ์ํ contenteditable ์์ฑ๊ณผ ํจ๊ป ์ง์ ๋๋ ํธ์ง API ๋ฐ draggable ์์ฑ๊ณผ ํจ๊ป ์ง์ ๋๋ ๋๋๊ทธ์ค ๋๋กญ API ๊ธฐ๋ฅ, ํ์ด์ง ์/๋ค ๋ค๋น๊ฒ์ด์ ์ ์ง์ํ ๋ฐฉ๋ฌธ ๊ธฐ๋ก ํ์์ฉ API ๋ฐ ์ง์ญ ์ ๋ณด ํ์ฉ์ ์ํ ์ง์ค๋ก์ผ์ด์ (Geolocation) API๋ฑ์ HTML5 ์ง์ API๋ก์ ์๋ ค์ ธ ์๋ค. 1.2.3 HTML vs. XHTML 2009๋ 7์ W3C์์๋ XHTML2.0 W/G์ ํ๋์ ์์ ํ ์ ์๋ค. XHTML2๋ XHTML1.0์ ๋ ๋ฐ์ ์ํค๊ธฐ ์ํด ์์ ํด์จ ํ์ค์์ผ๋ก HTML๊ณผ DOM, Form, Frames, Event ๋ฑ ๋ค์ํ ์น ์์๋ค์ XML๋ก ๋์ฒดํ๊ธฐ ์ํ ๊ฐ์ฅ ํฐ ์๋์๋ค. ์ด์ ๋ฐ๋ผ XForm, XFrames, XEvents ๋ฑ์ ํ์ค๋ ํจ๊ป ๋ง๋ค์ด์ก๋ค. ๊ฐ์ฅ ํฐ ๋ฌธ์ ์ ์ HTML4์ XHTML1.0๊ณผ ์ ํ ๋ค๋ฅธ ์๋ก์ด ํ์ค์ด์ด ์ ํ์ ํธํ์ฑ์ ๋ํ ๋ณด์ฅ์ด ๊ฑฐ์ ์๋ ๋ฃจ๋น์ฝ ๊ฐ์ ๊ฑด๋๋ ์์ ์ด์๋ค 16
17.
์ค์ HTML5 ๊ฐ์ด๋ ๋
๊ฒ์ด๋ค. XHTML2.0์ ์ฌ๋ผ์ก์ง๋ง XHTML์ด ์ฌ๋ผ์ง ๊ฒ์ ๊ฒฐ์ฝ ์๋๋ค. XHTML์ด ๊ฐ์ง๊ณ ์๋ ๊ฒฌ๊ณ ํ(well-formed) ๋ฌธ์ ๊ท๊ฒฉ์ ๋ํ ์น ์๋น ์ค์์ ์ด์ฉ๋๋ ๋งํฌ์ ์ ๊ฐ๋ฐ์ ์์ฐ์ฑ ๋ฐ ์ ์ง ๋ณด์์ ๋์์ด ๋๊ณ ์ ๋ ์ ์ด ์ ์ฆ๋์๊ธฐ ๋๋ฌธ์ด๋ค. HTML5์์๋ ์ฌ์ ํ XHTML์ ์ง์ํ๋ฉฐ application/xhtml+xml์ ํ์์ ์ ์ธํ๋ค๋ฉด XHTML5๋ก ๋ ๋๋งํ๋ค. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>โฆ </title> </head> <body> <h1>โฆ</h1> <p>โฆ</p> </body> </html> ์๋ ์ฝ๋ฏน์ DOM Scripting์ ์ ์์ธ Jeremy Keith๊ฐ ์์ฑํ๊ณ Brad Colbow๊ฐ ๊ทธ๋ฆฐ "๋งํฌ์ ์ ์คํด"(Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip)๋ผ๋ ๋งํ๋ก์ XHTML5์ ๋ํด ์๊ฐํ๊ณ ์์ด ๋ ์๋ค์ ์ดํด๋ฅผ ๋๊ธฐ ์ํด ๊ฒ์ฌํ์๋ค. 17
18.
์ค์ HTML5 ๊ฐ์ด๋
18
19.
์ค์ HTML5 ๊ฐ์ด๋
19
20.
์ค์ HTML5 ๊ฐ์ด๋
20
21.
์ค์ HTML5 ๊ฐ์ด๋
ํ์์ ์ํด ๋ฒ์ญ ๋์์ผ๋ฉฐ Creative Commons Licenseํ์์ ์ฌ์ฉํ๋๋ก ํ๊ฐ ๋ฐ์๋ค. ์ถ์ฒ :http://www.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic- strip/ 21
22.
์ค์ HTML5 ๊ฐ์ด๋ 1.3
HTML5 ํ์ค ๋ฌธ์๋ค 1.3.1 HTML5์ธ ๊ฒ๊ณผ ์๋ ๊ฒ ์ต๊ทผ ์ ๊ณ์์ HTML5๋ฅผ ์ผ์ข ์ ๋ง์ผํ ์ฉ์ด์ฒ๋ผ ์ฐ๊ณ ์์ง๋ง, ์ด์ ๋ ํ ๋ช ํํ ๊ตฌ๋ถ์ ํด์ผ ํ ํ์๊ฐ ์๋ค. ํ์ฌ HTML5์ ์ฐ๊ณ ํ์ค์ W3C์ HTML W/G๊ณผ WebApps W/G ๊ทธ๋ฆฌ๊ณ WHATWG์์ ๊ฐ๊ฐ ์งํํ๊ณ ์๋ค. HTML5๋ ์ด๊ธฐ์ WHATWG์์ ์์ ํ ๊ฒ์ ๋ฐ์๋ค์ด๋ฉด์ ๋ค์ํ ๊ธฐ๋ฅ๋ค์ ๋ชจ๋ ํฌํจํ๊ณ ์์๋ค. W3C์์๋ถํฐ ํ์ค์ ์ ์ ๊ณผ์ ์์ ๊ธฐ๋ฅ ๋ณ๋ก ๋ชจ๋ํ ๋์ด ์ฌ๋ฌ ํ์ค์์ผ๋ก ๋๋์ด์ง๊ฒ ๋์๊ณ , ์ผ๋ถ ์๋ฐ์คํฌ๋ฆฝํธ APIํ์ค์๋ค์ WebApps W/G์ผ๋ก ๋๊ฒจ์ ธ ์์ ํ๊ณ ์๋ค. ๊ทธ๋ฌ๋,W3C์ ์ฐธ์ฌํ์ง ๋ชปํ๋ ์ผ๋ฐ ์น ๊ฐ๋ฐ์๋ค์ ๋์์ผ๋ก WHATWG์ ์คํ์ W3C์ ๋ถ๋ฆฌ๋ ์คํ์ ํฉ์ณ์ ๊ทธ๋๋ก ์ ๊ณต ํ๊ณ ์ ์ ๋ฟ๋ง ์๋๋ผ ์ ์น์ ์ด์ ๋ก ์ ๊ณต๋๊ธฐ ์ด๋ ค์ด ์ํ์ฝ๋๋ ๊ตฌํ ๊ถ๊ณ ๋ฑ ์ ํฌํจํ๊ณ ์์ผ๋ฉฐ ๋ฉ์ผ๋ง๋ฆฌ์คํธ๋ฅผ ํตํด ์๊ฒฌ์ ๋ฐ๊ณ ์๊ธฐ๋ ํ๋ค. ์ด ์ฅ์์๋ W3C๊ฐ ๋ง๋ค๊ณ ์๋ ์น ํ์ค ๋ฌธ์๋ค์ ๊ฐ๋ตํ ์๊ฐํ๊ณ ์ ํ๋ค. W3C์ ํ์ค ๋ฌธ์๋ ๋์ฒด๋ก ์ฝ๊ธฐ ์ด๋ ค์ด ๊ฒ์ผ๋ก ์๋ ค์ ธ ์๋ค. ๋ฐ๋ผ์ ์น ๊ฐ๋ฐ์๊ฐ ํ์ค์ ์ฝ๊ฒ ์ดํดํ ์ ์๋๋ก ๋ค์ํ ๊ด์ ์์ ๊ฐ๊ธฐ ๋ค๋ฅธ ํ ์ค ๋ฌธ์๋ฅผ ์ ๊ณตํ๊ณ ์๋ค. 2009๋ 4์ ์ด์ ์๋ ์๋ ์๊ฐ๋ ๋ฌธ์๊ฐ HTML 5 ํ์ค์์ ํจ๊ป ๋ด๊ฒจ ์์์ผ๋ ๋ถ๋์ด ๋ง๊ณ ๊ธฐ์กด ๋งํฌ์ ๊ธฐ๋ฐ ๋ด ์ฉ๊ณผ ํผ๋์ ์ค๋ค๋ ์ธก๋ฉด์์ ๋ถ๋ฆฌํด์ ๊ด๋ฆฌํ๊ณ ์๋ค. 1.3.2 HTML5 ์ธ ๊ฒ HTML W/G์์๋ HTML5 ๊ทธ ์์ฒด๋ฅผ ๋ค๋ฃจ๋ ํ์ค์์ ๋ง๋ค๊ณ ์์ผ๋ฉฐ ๋ ๋๋ง ํธํ์ฑ ์ ๊ณต ๋ฐฉ๋ฒ, HTML5 ๋งํฌ์ ๊ณผ ๊ทธ ์์ฑ์ ๋ํ ์ฉ๋ฒ ์ ๋ฆฌ ๊ทธ ๋ฆฌ๊ณ ์ฝํ ์ธ ์ ์๋ฏธ์ ํํ ๋ฐ ๋ฌธ์๊ฐ ๋ฐ์ดํฐ ์๋ฆผ ๋ฑ์ ์คํ์ ๋ค๋ฃฌ๋ค. HTML 5 : A vocabulary and associated APIs for HTML and XHTML HTML 5์ ์๋ ํ์ค์์ผ๋ก 800์ฌ ํ์ด์ง ๋ถ๋์ผ๋ก ์ฃผ๋ก ๋ด์ฉ์ด ์น ๋ธ ๋ผ์ฐ์ ๊ฐ๋ฐ์๋ฅผ ์ํด์ ๋ง๋ค์ด์ ธ ์๋ค. ๋ฐ๋ผ์, ๊ฐ๊ธ์ ์น ๊ฐ๋ฐ์์ฉ ๋ฌธ์๋ฅผ ๋ฐ๋ก ๋ณด๋ ๊ฒ์ด ์ข๋ค. 22
23.
์ค์ HTML5 ๊ฐ์ด๋
HTML5 ํ์ค์์ ์ค๋ช ํ๋ ๋ฌธ๊ตฌ์์ Vocabulary๋ ์ฌ์ ๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ๋งํฌ์ ๋ฐ ์์ฑ์ ๋ํ ์ ์, ์ฉ๋ฒ์ ๋ํด ์์ธํ ์ค๋ช ์ ํฌํจํ๊ณ ์์ผ๋ฉฐ ์ด๋ฅผ ์ง์ํ๋ Associated API๋ก ๊ตฌ์ฑ๋์ด ์๋ค๋ ๊ฒ์ ๊ธฐ์ตํ๋ฉด ์ข๊ฒ ๋ค. HTML5 differences from HTML4 ์ด ๋ฌธ์๋ ๊ธฐ์กด HTML์ ์ต์ํ๋ ์ฌ๋๋ค์ด HTML5์์ ๋ฌด์์ด ๋ฐ๋ ์๋์ง ์ ์ ์๋๋ก ๋ง๋ ์๊ฐ ๋ฌธ์์ด๋ค. ์ด ๋ฌธ์๋ HTML 5 ์ ๋ฌธ์๋ค์ด ์ฝ๊ธฐ์ ์ ๋นํ๋ฉฐ ์ฐ๋๋ณ ์ฃผ์ ๋ณ๊ฒฝ ๋ด์ฉ๋ ๋ด๊ณ ์์ผ๋ฉฐ ๋ณธ ๊ฐ์ด๋์ ๋ถ๋ก ์ ํฌํจ๋์ด ์๋ค. HTML: The Markup Language ๊ธฐ์กด HTML 5 ์คํ์ ์น ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ ํ์ฌ๋ฅผ ์ํด ๊ธฐ์ ๋ ํ์ค์์ด๋ค. ๊ฐ๋ฐ์ ๊ด์ ์์ ๋ฌด์์ด ์ด๋ป๊ฒ ๋ฐ๋์๊ณ ์ด๋ป๊ฒ ์ฌ์ฉํ ์ ์๋์ง ๋ณด์ฌ ์ค ์ ์๋ ๋ฌธ์๊ฐ ํ์ํ๋ค. ๊ณผ๊ฑฐ W3C ํ์ค์๋ค์ ๋ฌธ์ ์ ์ด ๋ฐ๋ก ์ด์ฉ์ ๊ฐ ์๋ ๊ฐ๋ฐ์ ์์ฃผ๋ก ๋ง๋ค์ด์ ธ ์์ด ์ฝ๊ธฐ ์ด๋ ค์ ๋ค๋ ๊ฒ์ด๋ค. ์ด ๋ฌธ์๋ ๋ฐ๋ก ์ด์ฉ์ ์ฆ, ์น ๊ฐ๋ฐ์๋ฅผ ์ํ ์คํ์ด๋ค. ์ด ๋ฌธ์๋ HTML5 ํ์ค์(์น ๊ฐ๋ฐ์ ๊ด์ )์ ํ๋ถ ๋ฌธ์๋ก์ HTML ๋ฌธ์๋ฅผ ์ฃผ๋ก ์ ์ํ๋ ์น ํผ๋ธ๋ฆฌ์ ํน์ HTML ์ฝ๋๋ฅผ ์ํด ๋ง๋ค์ด์ง ๋ฌธ์์ด๋ค. 23
24.
์ค์ HTML5 ๊ฐ์ด๋ HTML+RDFa
1.1 XHTML2 ์ํน ๊ทธ๋ฃน์ด ํด์ฐ๋๊ณ ๋์ ๊ฐ์ฅ ์ ๋งคํด์ง ๊ฒ์ด RDFa๋ผ๋ ํ์ค์ด๋ค. ์๋งจํฑ ์น์์ ์ฝํ ์ธ ์ ์๋ฏธ์ ํํ์ ์ํด ์ฌ์ฉํ๋ RDF๋ฅผ HTML์์๋ ์ฌ์ฉํ ์ ์๋๋ก ๋ง๋ ๊ฒ์ด RDFa์ธ๋ฐ HTML5์ ํฌํจ์ ์ผ์ผ ํ๋ค๋ ์ฃผ์ฅ์ด ๋์จ ์ดํ ๋ ผ์์ด ๋จ๊ฑฐ์ ๋ค. ์ ๋ฐ์ ์ผ๋ก HTML5์ RDFa๋ฅผ ์ถ๊ฐํ๋ ๊ฒ์ ๋ฐ๋ํ๋ ๊ธฐ๋ฅ๊ฐ ๊ฐํ๋ ๋ฐ ๊ทธ ์ด์ ๋ก 1) RDFa๋ ์ฌ์ ํ ์ด๋ ต๋ค 2) XML namespace๊ฐ ํ์ํ๋ฐ HTML5์๋ ์๋ค 3) ๊ทธ๋ฌํ ์ด์ ๋ก ๋ณต์ฌํด์ ๋ถ์ฌ ๋ฃ๊ธฐ๋ฅผ ํด๋ RDFa ์ฌ ์ฉ ์ ์ธ์ด ์์ผ๋ฉด ์ธ ์ ์๋ค. ํ์ง๋ง, ์๋งจํฑ ์น๊ณผ์ ์ฐ๊ฒฐ ๊ณ ๋ฆฌ๋ฅผ ์ํด ์ ์ฉ๋์๊ณ ๋ฐฑ์ ๊ด ์น์ฌ์ดํธ๋ ํฌ๋ฆฌ์์ดํฐ๋ธ์ปค๋จผ์ฆ ๋ฑ์์ ์ฑ์ฉํ๋ ๋ฑ ๋ฐ์ด ํฐ ์น์ ์ํ ๋ฐฉ๋ฒ์ผ๋ก ์ด์ฉ ๊ฐ๋ฅํ๋ค. HTML Microdata RDFa๊ฐ ์ฌ์ ํ ์ด๋ ต๊ณ ์ด์ ๋ฐํด ํ๊ทธ์ id๋ class๋ฅผ ์ด์ฉํด ์๋ฏธ์ ํ ํ์ ํ๋ ๋ง์ดํฌ๋กํฌ๋งท(Microformat)์ ์ ํ์ ์ด๋ฏ๋ก ์ด๋ฅผ ๋์ฒดํด ์ค ์ ์๋ Microdata๊ฐ ์ ์๋์๋ค. ์ฐ์์๋ ๋ง์ดํฌ๋ฅดํฌ๋งท๊ณผ ๊ฑฐ์ ์ ์ฌํ๊ณ item๊ณผ itemprop๋ผ๋ ๋ณ๋ ์์ฑ์ ํตํด ์๋ฏธ๋ฅผ ํํํ ์ ์๋ค. HTML Canvas 2D Context Canvas ํ๊ทธ ๋ด ๊ฐ์ข ๊ฐ์ฒด๋ฅผ ํ์ ๋ฐ ๋ณํํ๊ณ ๊ทธ๋ ๋์ธํธ, ์ด๋ฏธ์ง ์ ์ฑ ๋ฑ ๊ฐ์ข ํจ๊ณผ๋ฅผ ์ฃผ๋ ๊ธฐ๋ฅ ๋ถ๋ถ์ ๊ธฐ์ ํ๊ณ ์๋ค. ํ๊ทธ ๋ด ๊ฐ์ข ๊ฐ์ฒด๋ฅผ ๊ทธ๋ฆฌ๊ณ ์์ฑํ๋ ๋ฐ ํ์ํ API๋ ํฌํจํ๋ค. HTML5: Techniques for providing useful text alternatives ๋ฒ์ฉ์ ์ผ๋ก ์ฌ์ฉํ๋ alt๋ฅผ ํตํด ์ฝํ ์ธ ํน์ฑ์ ์์ฑํ๋ ๋ฐฉ๋ฒ์ ๊ท์ ํ ๊ท๊ฒฉ์ด๋ค. ์๋ 4์ฅ์ ๊ธฐ์ ๋์ด ์๋ alt ์ปจํ ํธ ์์ฑ์ ๋ํด ์ข ๋ ์์ธํ ๊ฒ ์์ ๋ฅผ ํฌํจํ์ฌ ์ดํดํ๊ธฐ ์ฝ๋๋ก ์์ฑ๋์๋ค. Polyglot Markup: HTML-Compatible XHTML Documents HTML5๋ฌธ์๋ฅผ XML๋ก ๊ตฌ๋ฌธ ์ค๋ฅ ์์ด ํจ๊ป ๊ฐ์ด ์ฐ๋ ๋ฐฉ๋ฒ์ ์๋ ค์ค ๋ค. HTML๊ณผ XML ๋ชจ๋ ์ ํจํ(valid) ๋ณตํฉ(Polyglot) ๋ฌธ์๋ฅผ ๋ง๋ค์ ์ ๋ค.๋ฌธ์ ํ์ ์ ์ธ์ <! DOCTYPE html> ์ด๋ฉฐ ๋์๋ฌธ์๋ฅผ ๊ตฌ๋ณํ๋ค. 24
25.
์ค์ HTML5 ๊ฐ์ด๋
table ์์๋tbody ์์๋ฅผ ๋งํฌ์ ํ๊ณ , ์์์ ์์ฑ์ ์ผ๋ถ ์์ธ๋ฅผ ์ ์ธํ ๊ณ ๋ ์๋ฌธ์๋ก ํ๊ธฐํ๋ฉฐ, ๋น ์์์๋ ์ข ๋ฃ ์ฌ๋์๋ฅผ ๋ฃ๋๋ค. (์: <br/>) ๋ํ, ์ฝํ ํธ ์์ฑ ๊ฐ์ ๋ฐ์ดํ๋ก ๊ผญ ํ๊ณ ์ํฐํฐ ์ฐธ์กฐ๋ก์ &, <, >, &apos, " ์ ์ฉ๋ฅผ ๋ฃ๋ ๋ฑ XHTML์ ๊ตฌ๋ฌธ์ ๊ทธ๋๋ก ์ด์ฉํ๋ฉด ๋๋ค 1.3.3 HTML5๊ฐ ์๋ ๊ฒ HTML5 ์ฃผ์ ์คํ์ ํฌํจ๋์ด ์์๊ฑฐ๋ ์ฐจํ์ ๋ถ๋ฆฌ๋ ํ์ค์์ผ๋ก์ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ์ง์ํ๊ธฐ ์ํด ๋ง๋ค์ด์ง ๊ฒ์ผ๋ก HTML5์ ๋ฒ์ฃผ ์์ ํฌํจ๋๋ค๊ณ ๊ฐ์ฃผ๋๋ ๊ฒ๋ค์ด๋ค. Server-Sent Events ์ด ๋ฌธ์๋ ์น ์๋ฒ๋ก ๋ถํฐ ์ ๋ฌ(Push)๋๋ ๋ฐ์ดํฐ ์๋ฅผ ๋ค์ด SMS ๊ฐ์ ๊ฒ์ ๋ฐ์ ์ ์๋๋ก EventSource๋ฅผ ์ ์ํ๊ณ ์ด๋ฒคํธ๋ฅผ ๊ธฐ๋ค๋ฆด ์ ์๋๋ก ํ๋ API๋ฅผ ๊ธฐ์ ํ๊ณ ์๊ณ HTML5 ํ์ค์์์ ๋ถ๋ฆฌ ์ค์ด๋ค. Communications ์ด ๋ฌธ์์ ๊ธฐ์กด Ajax์ ๋จ์ ์ผ๋ก ์๋ ค์ง ํฌ๋ก์ค ๋๋ฉ์ธ ๋ฌธ์ ์ ๊ทผ์ ๊ฐ ๋ฅํ๊ฒ ํด ์ฃผ๋ ์คํ์ด๋ค. ๋ง์ดํฌ๋ก์ํํธ์ XHR ๋๋ฌธ์ ์ฝ๊ฐ ๋ ผ์๊ฐ ์ง ์ง๋ถ์งํ ๋ฉด์ด ์์ง๋ง ํ ์คํธ๋ฅผ ์ํ ์๋ฒ ํต์ ์ ์ง์ํด ์ค๋ค. ๋ฌผ๋ก ๋ณด์ ์ฌํญ์ ๋ํ ๋ถ๋ถ๋ ์ค์ํ๊ฒ ๋ค๋ฃจ์ด์ง๊ณ ์๋ค. Web SQL Database ์๋ฐ ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํด ์น ๋ธ๋ผ์ฐ์ ๋ด์ฅ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ SQL์ ํตํด ์ง์ํ๋ API์ด๋ค. ์คํ๋ผ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ด๋ ๋ชจ๋ฐ์ผ์์ ๋ก์ปฌ ๋ฐ์ดํฐ ์บ์ฑ์ด ํ์ํ ๋ ์ ์ฉํ๊ฒ ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, ์ผ๋ฐ์ ์ธ DB ๋ผ์ด ๋ธ๋ฌ๋ฆฌ ์์ค์ ๋ฉ์๋๋ฅผ ์ง์ํด ์ค๋ค. Web Sockets API ํ ์น ํ์ด์ง์์ ์๋ก ๋ค๋ฅธ ์๋ฒ์ ์๋ ์น ํ์ด์ง์ ์๋ฐฉํฅ ํต์ ์ ํ ์ ์๋ ๋ณ๋ ํ๋กํ ์ฝ์ ์ ์ํ ์ ์๋ API์ด๋ค. 25
26.
์ค์ HTML5 ๊ฐ์ด๋
Web Workers ์น ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ฃผ ๋ฌธ์์ ๋ณ๋ ฌ์ ์ผ๋ก ์คํฌ๋ฆฝํธ๋ฅผ ๋ฐฑ๊ทธ๋ผ์ด๋๋ก ์ํ ํ ์ ์๊ฒ ํด ์ฃผ๋ API. ์ฐ๋ ๋ ๊ธฐ๋ฐ ๋ฉ์์ง ์ฒ๋ฆฌ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํด ์ค๋ค. CPU ๋ถํ๋ฅผ ๋ง์ด ์ก๋ ์์ ์ ์ฌ๋ฌ ์์ปค(worker)๋ก ๋๋์ด ์์ ํ๊ฑฐ๋ ํด๋ผ์ด์ธํธ DB๋ฅผ ์ ๋ฐ์ดํธ ํ๊ฑฐ๋ ๋๋์ด์ ์์ ์ด ๊ฐ๋ฅํ ์๋ฐ ์คํฌ๋ฆฝํธ API๋ฅผ ์ ๊ณตํด ์ค๋ค. ๊ทธ ๋ฐ์ ํ์ค๋ค HTML5์ ๊ด๋ จ๋ ํ์ค์์๋ Content-Type Processing Model, The Web Concept, Geolocation API, SVG, MathML, XMLHttpRequest ๋ฑ์ด ์์ผ๋ฉฐ, W3C์ ๋ณ๊ฐ๋ก WHATWG์์๋ ์๋ง์ ์ํ WebSRT ๊ธฐ์ ๋ฐ <device>์์๋ฅผ ํตํ ์นด๋ฉ๋ผ๋ USB์ ์ด ๊ฐ์ ๊ธฐ๋ฅ๋ ์ค๋นํ๊ณ ์๋ค. 1.4 HTML5์ ์น๊ฐ๋ฐ ๋ฐฉ๋ฒ๋ก ์ ๋ณํ ์ด ์ฅ์์๋ HTML5๊ฐ ๊ฐ์ ธ์ฌ ์น ๊ฐ๋ฐ ๊ธฐ์ ๋ฐ ๋ฐฉ๋ฒ๋ก ์ ๋ณํ์ ๋ํด ์์๋ณด๊ณ ์ ํ๋ค. ์ง๊ธ๊น์ง์ ์น ๊ฐ๋ฐ ํ๋ซํผ ๋ณ์ฒ ๊ณผ์ ์ ํตํด ํ์ฌ์ ๋ณ ํ๋ฅผ ํ์ธํด ๋ณด๊ณ ์ ํ๋ค. ์น ๋ฌธ์ ์๋(1990๋ ๋) ์น ์๋ฒ์ ์น ๋ธ๋ผ์ฐ์ ๊ฐ ์ ์ HTML๋ฌธ์๋ฅผ ์ฃผ๋ก ๋ณด๋ด๊ฑฐ๋ CGI(Common Gateway Interface)๋ฅผ ์ด์ฉํ์ฌ ๊ฐ๋ฐํ๋ ๊ฒฝ์ฐ, ๋งํฌ์ ๊ณผ ํ๋ก๊ทธ๋จ ์ฝ๋๊ฐ ์์ฌ์๋ ๊ฐ๋ฐ ๋ฐฉ์์ ์ฌ์ฉํ๋ค. ์ด ๋๋ ๊ฐ๋ฐ ์ง๊ตฐ๊ฐ์ ์ ๋ฌด ๋ถ๋ด์ด ์ ํ ์ด๋ฃจ์ด์ง์ง ์๋ ์ํ์๋ค. 26
27.
์ค์ HTML5 ๊ฐ์ด๋ ์น
ํ์ค ์๋(2000๋ ๋ ์ด๋ฐ) 2000๋ ๋ ์ด๋ฐ์ผ๋ก ์ค๋ฉด์ ๋ฐฑ์๋ ๊ฐ๋ฐ์์๋ ์ด๋ฅธ๋ฐ MVC ๋ชจ๋ธ์ด๋ผ๋ ๊ธฐ๋ฒ์ ํตํด ๋ฐ์ดํฐ ๋ชจ๋ธ๊ณผ ํ ํ๋ฆฟ ๊ทธ๋ฆฌ๊ณ ๋น์ฆ๋์ค ๋ก์ง์ด ๋ถ๋ฆฌ๋ ์ฝ๋๋ฅผ ํตํด ๊ฐ๋ฐ ์์ฐ์ฑ์ ๋์ด๊ฒ ๋๋ค. ํ๋ก ํธ์๋์์๋ ์น ํ์ค ๊ฐ๋ฐ ๋ฐฉ๋ฒ๋ก ์ ํตํด ๊ตฌ์กฐ(HTML), ํํ(CSS), ๋์(DOM Script)๋ฅผ ๋ถ๋ฆฌํ๊ณ CSS ๋ ์ด์์๊ณผ W3C ๊ธฐ๋ฐ DOM์ ํตํ ์น ๊ฐ๋ฐ ๋ฐฉ์์ ๋ง์ด ์ด์ฉํ๊ฒ ๋๋ค. ๊ตญ๋ด์์๋ ๋๋ต 2004๋ ๋ถํฐ ์น ํ์ค ๊ธฐ๋ฐ ํ๋ก ํธ์๋ ๊ฐ๋ฐ ๋ฐฉ์์ด ๋์ ๋๊ธฐ ์์ํ์ผ๋ฉฐ ์ฃผ์ ํฌํธ์ ๋น๋กฏํ์ฌ ๋ฏผ๊ฐ ๊ธฐ์ ๋ฐ ๊ณต๊ณต ์น ์ฌ์ดํธ์ ์น ์ ๊ทผ์ฑ๊ณผ ๋๋ถ์ด ํ์ฐ๋๊ฒ ๋๋ค. ์ด๋ฅผ ํตํด ๊ตญ๋ด์์๋ ์น ํผ๋ธ๋ฆฌ์ ๋ฅผ ์ค์ฌ ์ผ๋ก ํ ์ง๊ตฐ์ด ํ์ฑ๋์๋ค. Ajax ์๋ (2000๋ ๋ ํ๋ฐ) 2004๋ ์ง๋ฉ์ผ๊ณผ ๊ตฌ๊ธ๋งต์ค๊ฐ ์๊ฐ๋๋ฉด์ ํ๋ก ํธ ์๋ ๋ถ๋ถ์ ์น ๊ธฐ์ ์ ํ์ ์ด ์ผ์ด๋๊ฒ ๋๋ค. ์ฆ, ํ๋ก ํธ์๋ ์น ์ฝํ ์ธ ๊ฐ ๊ณ ๊ฐ์ PC์ ์ผ๋จ ๋ก ๋ฉ์ด ๋ ํ, ์น ์๋ฒ์ Ajax ํธ์ถ์ ํตํด ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ์จ ํ ๊ธฐ์กด DOM์ ๊ฐฑ์ ํ๋ ๊ฐ๋ฐ ๋ฐฉ๋ฒ์ด๋ค. ์ด ๋ฐฉ๋ฒ์ ํตํ๋ฉด ๋ฐฑ์๋ ๊ฐ๋ฐ์๊ฐ json๊ณผ ๊ฐ์ ๋ฐ์ดํฐ ๊ธฐ๋ฐ ์๋ต๋ง ํ ๊ฒ ๋๋ฏ๋ก ๋ ๊ฐ๋จํ ์น ๊ฐ๋ฐ์ด ์ด๋ฃจ์ด์ง๋ค. ์ด์ ๋ฐํด ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ 27
28.
์ค์ HTML5 ๊ฐ์ด๋ ๋
๋ค์ํ๊ณ ํ๋ถํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ด ๊ฐ๋ฅ ํด์ก๋ค. ํ์ง๋ง, ์ด ๋ฐฉ์์ ๊ฒฝ์ฐ๋ ์ฌ์ ํ ์น ์๋ฒ์ ์ข ์์ ์ผ๋ฉฐ ๋ ๋ฆฝ์ ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ๊ฐ๋ฅํ์ง ์๋ค. HTML5์๋ (2010๋ ๋ ์ด๋ฐ) HTML5๊ฐ ๊ฐ์ ธ์ฌ ๊ฐ์ฅ ํฐ ๋ณํ๋ ์๋ฒ์ ๋ ๋ฆฝ์ ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐ์ด ๊ฐ๋ฅํ๋ค๋ ๋๋ชฉ์ด๋ค. ํนํ, ๋ชจ๋ฐ์ผ ํ๊ฒฝ์์ ์คํ๋ผ์ธ ๊ธฐ๋ฅ๊ณผ ๋ก์ปฌ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ง์์ ์น ์๋ฒ์ ๋ ๋ฆฝํ ์ ์๋ ์ฌ๊ฑด์ ๋ง๋ค์ด ์ค๋ค. ํนํ, HTML5์ Canvas, ๋๋๊ทธ์ค๋๋กญ, ์ง์ค๋ก์ผ์ด์ , ํ์ผAPI ๋ฑ์ ํตํ ์ฌ์ฉ์ ๊ฒฝํ์ ํ๋ํด ์ค ์ ์๋ค. ๊ตฌ๊ธ์ ๊ฒฝ์ฐ, ์น์คํ ์ด๋ผ๋ ์๋ก์ด ์น ์ ํ๋ฆฌ์ผ์ด์ ๋ง์ผํ๋ ์ด์ค๋ฅผ ์ค๋นํ๊ณ ์๊ธฐ๋ ํ๋ค. ๊ฒ๋ค๊ฐ ๋ฐฑ์๋ ๋ถ๋ถ์ ๊ธฐ์ ์ ๋ณํ๋ ๋์ ๋๋ค. ๊ธฐ์กด์ RDBMS์ 28
29.
์ค์ HTML5 ๊ฐ์ด๋
MVC ๊ธฐ๋ฐ ํ๋ซํผ์์ ๋์ด๋๋ ๋ฐ์ดํฐ๋ฅผ ์ ์ฒ๋ฆฌํ๊ธฐ ์ํด RESTfulํ ๋ฐ์ดํฐ ํต์ ์ ์ ๊ณตํ๊ณ , ๋ฐ์ดํฐ๋ ์ข ๋ ๋น ๋ฅธ ๋ถ์ฐ ํ์ผ ์คํ ๋ฆฌ์ง์ ์ ์ฅ ํ๋ ๋ฐฉ๋ฒ์ด๋ค. ๊ตฌ๊ธ, ์๋ง์กด, ํ์ด์ค๋ถ, ํธ์ํฐ๊ฐ ์ด๋ฏธ ์ด๋ฌํ ๋ฐฉ์์ผ๋ก ์น ์๋น์ค๋ฅผ ์ ๊ณตํ๊ณ ์๊ธฐ๋ ํ๋ค. ํฅํ 5๋ ๊ฐ ๋ค์ํ ์น ๊ธฐ์ ์์๋ค์ด ์น ๊ฐ๋ฐ ๋ฐฉ๋ฒ๋ก ๋ฐ ํ๋ซํผ์ ๋ณํ ์ํฌ ๊ฒ์ผ๋ก ์์๋๋ค. ๊ฐ๋จํ ํ๋กํ ํ์ ์ ์์ฌ์ ์๋น์ค์ ์กฐ๊ธ์ฉ ๋์ ํจ์ผ๋ก์ ์๋ก์ด ๋ณํ๊ฐ ์ฐ์ฐฉ๋ฅํ ์ ์๋๋ก ํ๋ ๋ ธ๋ ฅ์ด ํ์ํ๋ค. 1.5 FAQ HTML5๋ฅผ ํ์ฌ ๋น์ฅ ์ฌ์ฉํ ์ ์๋๊ฐ? ๊ตฌ๊ธ ๋ฐ ์ ํ๋ท์ปด ์ฌ์ดํธ์ ์ฒซ ์์ค์ฝ๋๋ HTML5 Doctype์ ์ด์ฉํ๊ณ ์๋ค. ์ฆ, ์ง๊ธ ๋น์ฅ ์ฌ๋ฌ๋ถ์ ์น ์ฌ์ดํธ์ HTML5 ๋งํฌ์ ์ ์ด์ฉํ ์ ์๋ค๋ ์ด์ผ๊ธฐ๋ค. ๋ฌผ๋ก IE์ ๊ฐ์ด ์ค๋๋ ๋ธ๋ผ์ฐ์ ์ ๊ฒฝ์ฐ ํธํ ์คํฌ๋ฆฝํธ ๋ก ๊ธฐ๋ฅ ์ถ๊ฐ(Fallback)์ ํ๋ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋ฉด ๋๋ค. HTML5 Shive, Modnizer, IE-CSS3 ๊ฐ์ ์คํฌ๋ฆฝํธ๋ฅผ ํตํด ํ์ ํธํ์ฑ์ ๋ณด์ฅํด ์ค ์ ์๋ค. ๋จ, HTML5๋ฅผ ํตํ ์น ์ฌ์ดํธ ์ ์์ด ์ฌ๋ฌ๋ถ์ ํ์ฌ์ ๊ฐ๋ฐ ์์ฐ์ฑ ์ ๋ํ๊ณ ๊ณ ๊ฐ์ ์๊ตฌ์ ๋น์ง๋์ค์ ๋ถํฉํ๋ค๋ ์ ์ ํ์์ ๋ง์ด๋ค. ๋ฏธ๋ ์น ๊ธฐ์ ์ ๋ฏธ๋ฆฌ ์ ๋์ ์ผ๋ก ๋์ ํจ์ผ๋ก์ ๋ถ๊ฐ ์ด์ต๋ ๋๋ฆด ์ ์๋ค. 2004~2005๋ ๋์ ์น ํ์ค ๊ธฐ๋ฐ CSS ๋ ์ด์์ ๋์ ์ ๋ง์ ํ ๋ก ์ด ์์์ง ๋ง ํ์ฌ ๊ฒฐ๊ตญ ๋ง์ด ๋์ ๋์ด ์๋ค. HTML5๋ฅผ ์งํฅํ ๋ ๊ตญ๋ด IE ์ฌ์ฉ์๊ฐ ํ์ ํ ์ค์ด๋ค ๊ฒ์ธ๊ฐ? IE ์ฌ์ฉ์๋ ๊ณ ๊ฐ์ด๋ค. IE6 ๊ณ ๊ฐ๋ ์ถฉ๋ถํ ์ง์ํด์ผ ํ๋ค. ๋คํํ ์๋7 ์ ํ๋งค ์ฆ๊ฐ ๋ฐ ๋ง์ผํ ์ผ๋ก ์ธํด IE8 ํน์ ์์ผ๋ก ๋์ฌ IE9์ผ๋ก์ ์ ํ์ ์ ์ด๋ฃจ์ด์ง ๊ฒ ๊ฐ๋ค. ๋ํ, ๊ตญ๋ด ๋ชจ๋ฐ์ผ ๋จ๋ง๊ธฐ ์์ฅ์์ ์์ดํฐ ๋ฐ ์๋ ๋ก์ด๋ ๊ณ ๊ฐ์ ์ฆ๊ฐ๋ก ์ธํด ๋น IE ๋ธ๋ผ์ฐ์ ์ ์ ์จ๋ ๋์์ง ๊ฒ์ด๋ค. ํ์ ์ ๋นจ๋ฆฌ ์จ๋ค. ๋ฏธ๋ฆฌ ์ค๋นํ๋ ์ฌ๋์๊ฒ ๊ธฐํ๊ฐ ์ฌ ๊ฒ์ด๋ค. HTML5๊ฐ ํ ์๋์ ๋นํด ๋๋ฌด ๊ณผํฌ์ฅ๋์ด ์๋? ๊ณผํฌ์ฅ์ ์คํฐ๋ธ์ก์ค์ ์ด๋๋น์ ๋ ผ์์ด์ ์ผ์ ๋ถ๋ถ ๊ทธ๋ ๊ฒ ๋๋ฐ๊ฐ ์ ๋ค. ํ์ง๋ง ์น ํ์ค์ 100% ์ค์ํ๋ ์น ๋ธ๋ผ์ฐ์ ๋ ์์ ๊ฒ์ด๊ณ ๊ทธ๋ฐ ์ ๋๊ฐ ์ค์ง๋ ์๋๋ค. ๋ค๋ง ์์ ํธํ์ฑ(Forward Compatiblity)๋ฅผ ์ผ๋ํด 29
30.
์ค์ HTML5 ๊ฐ์ด๋
๋๊ณ ํน์ ์น ๋ธ๋ผ์ฐ์ ๊ณ ๊ฐ์๊ฒ ์ข ๋ ๋์ ์๋น์ค๋ฅผ ์ ๊ณตํ ์ ์๋ค๋ฉด, ๊ณ ๊ฐ์ ๋ฐ๋ณด๊ฐ ์๋๊ธฐ ๋๋ฌธ์ ๋ ๋ง์ ์ฌ๋๋ค์ด ํฅ์๋ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ๊ฒ ์ด๋ค. HTML5์ ๋จ์ ์๋ ์ด๋ค ๊ฒ๋ค์ด ์๋? ๋จ์ ์ ์ญ์ ์๋ก์ด ์น ๊ธฐ์ ์ด๊ธฐ ๋๋ฌธ์ ํ์ต ๋น์ฉ(Learning Cost)๊ฐ ๋ ๋ค๋ ๊ฒ์ด๋ค. ํฌ์์ ๊ด์ ์์ ์ ๊ทผํด์ผ ํ๋ค. ๋ํ, ํ๋ก ํธ ์น ๊ฐ๋ฐ ๋ฐฉ์ ์ ๋ง์ ์๋ฐ์คํฌ๋ฆฝํธ API๊ฐ ์ ๊ณต๋๊ธฐ ๋๋ฌธ์ ๋งํฌ์ ๊ฐ๋ฐ์๋ค์ ๊ฒฝ์ฐ๋ ์ด๋ ์ ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ธ์ด๋ฅผ ๋ค๋ฃฐ ์ค ์์์ผ ํ๋ค๋ ์ ์ด๋ค. ๋ฌด๋ก ๋ฐฑ ์๋ ๊ฐ๋ฐ์๋ค์ด ์ด์ ํด ์ฌ ์๋ ์์ง๋ง ํ๋ก ํธ ์๋ ๊ฐ๋ฐ์๋ค์ด ์ด๋ ์ ๋ ์์ ์ ์ญํ ์ ๋ํ์ผ ํ๋ค๊ณ ๋ณธ๋ค. ์น ๋ธ๋ผ์ฐ์ ๋ฒค๋๋ค ํฌ๋ง ์ฌํญ ์ธ์ ์ค์ ์ฌ์ฉ์ ์๊ตฌ๊ฐ ์ด๋ป๊ฒ ๋ฐ์๋๋๊ฐ? W3C์์์ ํ์ค์์ด ๋ง๋ค์ด์ง๊ณ ์๊ธฐ ๋๋ฌธ์ ์ผ๋ฐ ์น ๊ฐ๋ฐ์๋ค์ด ์์ฌ ๊ฒฐ์ ์ ์ง์ ์ฐธ์ฌํ๊ธฐ๋ ์ด๋ ต๋ค. ํ์ง๋ง ๊ฐ ์ํน ๊ทธ๋ฃน์ด ์ด์ํ๋ ๊ณต๊ฐ ๋ฉ ์ผ๋ง๋ฆฌ์คํธ์ธ public-html@w3.org๋ public-whatwg@whatwg.org ๋ฑ ์ ๊ฐ์ ํ์ฌ ์ถฉ๋ถํ ์๊ฒฌ ๊ตํ์ ํ ์ ์๋ค. HTML5๊ฐ ์ด์์ด๋ค ๋ณด๋ ๊ณ ๊ฐ๋ค์ด ์ ์ ์์ฒญ์ ํ๊ณ ์๋ค. ์ด๋ป๊ฒ ์ ๊ทผํด ์ผ ํ ๊น? HTML5๋ฅผ ํตํ ์ฝํ ์ธ ์น ์๋น์ค์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์๋น์ค๋ฅผ ๋ถ๋ฆฌํ ์ฌ ์ ๊ทผํ ํ์๊ฐ ์๋ค. ๊ฐ ๋ถ๋ถ์ ๋ง๋ HTML5 ๊ธฐ์ ์ ์ ์ ํ์ฌ ๊ณ ๊ฐ์ด ๋ ๊ธฐํ์์๊ฒ ์ ์ํ๊ณ ์ด๋ฅผ ์ค๋ํ๋ ๊ฒ์ด ์ข๊ฒ ๋ค. ์๋ฅผ ๋ค์ด, ๋ชจ๋ฐ์ผ ๊ด ๊ณ ์์ HTML5๋ฅผ ์ ์ฉํ๋ ๊ฒฝ์ฐ ๋์์(video) ์์ ๋ฐ ์บ๋ฒ์ค(Canvas) ๋ฅผ ์ด์ฉํ๋ ๋ฐฉ๋ฒ์ด ์๋ค. ๋ํ, ์์ดํฐ ์ฑ ๋์ฉ์ผ๋ก ์ ๊ณตํ๋ ์น์ฑ์ ๊ฒฝ์ฐ ์คํ๋ผ์ธ ์บ์ฑ๊ณผ ์น ์คํ ๋ฆฌ์ง๋ฅผ ์ด์ฉํ๋ ๋ฐฉ๋ฒ ๋ฑ์ด๋ค. ๋ง์ฝ ์ฝํ ์ธ ์น ์ ๋น์ค๋ฅผ HTML5๋ก ์ ๊ณตํ๋ ค๋ฉด CSS3์ ํจ๊ป ์ ๊ทผํ๋ ๊ฒ๋ ์ข์ ์ ๊ทผ์ด๋ค. HTML5์์ ์ ๋๋ฉ์ด์ ์ด ๋๋ค๋ฉด ํ๋์ ๊ฐ๋ฐ์์ ์ ๋ฌด ๋ถ๋ด์? HTML5์ ๋ฉํฐ๋ฏธ๋์ด ๊ธฐ๋ฅ์ ์ด๊ธฐ์ ํ๋์ ํ๋กํ ํ์ ๊ณผ ์ ์ฌํ๋ค. ๋ฐ ๋ผ์ ์ด ๊ธฐ๋ฅ์ ์ด์ฉํ ์ ์๋ ๋ถ์ผ๋ ํ๋์๊ฐ ์ค์ฉ๋๋ ๋ถ๋ถ ์ฆ, ๋ฉ๋ด ๋ค๋น๊ฒ์ด์ , ๊ด๊ณ , ๋ฉ์ธ ํ์ด์ง ์ ๋๋ฉ์ด์ , ์ด๋ฒคํธ ํ์ด์ง ์ ๋๋ฉ์ด์ ๊ฐ ์ ๊ฒ๋ค์ด๋ค. ์ด๋ค์ ํ๋์ ๊ฐ๋ฐ์๋ค์ด ๊ฐ์ง ์์ญ์ด๊ธฐ๋ ํ๋ ์ค์ง์ ์ผ๋ก 30
31.
์ค์ HTML5 ๊ฐ์ด๋ ์ฐฝ์กฐ์ ์
์ฝํ ์ธ ๋ก ๋ถ๋ฅ๋๊ธฐ๋ ์ด๋ ต๋ค. HTML5 ๋ฉํฐ๋ฏธ๋์ด ๊ธฐ๋ฅ์ ํ๋์ ๊ฐ๋ฐ์์ UI ๊ฐ๋ฐ์์ ์ ๋ฌด ๋ถ๋ด์ ๋์ฑ ํ์คํ ํ์ฌ ๊ฐ์ ๊ณ ์ ์์ญ์ ๋ ์ฑ ๋งค์งํ ์ ์๊ฒ ํด ์ค ์ ์์ ๊ฒ์ด๋ค. ์ฐธ๊ณ ์ฌ์ดํธ W3C HTML Working Group http://www.w3.org/html/wg/ HTML5 specification http://www.w3.org/TR/2010/WD-html5-20100624/ HTML5 differences from HTML4 http://www.w3.org/TR/2010/WD-html5-diff-20100624/ HTML: The Markup Language http://www.w3.org/TR/2010/WD-html-markup- 20100624/ HTML+RDFa 1.1 http://www.w3.org/TR/2010/WD-rdfa-in-html-20100624/ HTML Microdata http://www.w3.org/TR/2010/WD-microdata-20100624/ HTML Canvas 2D Context http://www.w3.org/TR/2010/WD-2dcontext-20100624/ HTML5: Techniques for providing useful text alternatives http://www.w3.org/TR/2010/WD-html-alt-techniques-20100624/ Polyglot Markup: HTML-Compatible XHTML Documents http://www.w3.org/TR/2010/WD-html-polyglot-20100624/ HTML5Rocks http://html5rocks.com ๊ตฌ๊ธ์ด ๋ง๋ ์ฌ์ดํธ HTML5Test http://html5test.com ๋ธ๋ผ์ฐ์ ๋ณ ์ง์ ํํฉ ํ์ ๊ฐ๋ฅ HTML5Doctor http://html5doctor.com HTML5 ๋งํฌ์ ๊ด๋ จ ๋ธ๋ก๊ทธ ๋ฐ Q&A HTML5gallery http://html5gallery.com HTML5 ๊ธฐ๋ฐ ์น ์ฌ์ดํธ ๋ชจ์ Mozilla Hacks http://hacks.mozilla.or.kr Mozilla ๊ธฐ๋ฐ ์น ๊ธฐ์ ๋ธ๋ก๊ทธ 31
32.
์ค์ HTML5 ๊ฐ์ด๋
2. HTML5 ๋งํฌ์ ํ์ฌ HTML ๋ ์์ง ์ด์ ์ํ์ด๋ค. ๊ธฐ์กด์ ํํ์ ์ฉ๋๋ก ์ฌ์ฉ๋์๋ ์์๋ค์ ์๋ฏธ๋ฅผ ๋ถ์ฌํ๋ ์์ ์ด๋, alt๋ summary์ ๊ฐ์ ์ ๊ทผ์ฑ ๊ธฐ๋ฅ ๋ค์ ์์ง ๋ ผ์ ์ค์ ์๋ค. HTML5๋ ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ฌ๋ฅผ ์ํ ๋ฌธ์์ ์น ์ ์์๋ฅผ ์ํ ๋ฌธ์๊ฐ ๋ ๋ ์ ธ ์๋ค. ๋ํ ๊ธฐ์กด ํ์ค์์ ๋ช ํํ์ง ์์๋ ๋ถ๋ถ๋ค์ ์๋กญ๊ฒ ์ ์ํ๋ฉด ํ์ฌ ๋ธ๋ผ์ฐ์ ๋ค์ ๋์ ๋ฐฉ์์ ํ์คํํ๋๋ฐ ๋ ธ๋ ฅํ๋ค. ๊ฒฐ๊ณผ์ ์ผ๋ก ์๋กญ๊ฒ ๋ณ๊ฒฝ๋๊ฑฐ๋ ์ถ๊ฐ๋ ๋ถ๋ถ๋ค๋ ํ์ ํธํ์ฑ์ ๊ฐ์ง๊ณ ์๊ธฐ ๋๋ฌธ์ ์กฐ๊ธ๋ง ์ ๊ฒฝ์ ์ฐ๋ฉด ๊ณผ๊ฑฐ์ ๋ธ๋ผ์ฐ์ ์์๋ HTML5๋ฅผ ์ฌ์ฉํ ์ ์๋ค. HTML5๋ ์น ๋์์ด๋์ ์น ๊ฐ๋ฐ์๋ก ํ์ฌ๊ธ ๋งํฌ์ ์ธ์ด๋ฅผ ์ฐ๊ธฐ ์ฝ๊ฒ ๋ง๋๋ ๋ชฉ์ ์ ๊ฐ์ง๊ณ ์๋ค. 32
33.
์ค์ HTML5 ๊ฐ์ด๋ 2.1.
๊ตฌ์กฐ์ ๋ฌธ๋ฒ HTML5๋ HTML4์ XHTML1๊ณผ ๊ฑฐ์ ์๋ฒฝํ๊ฒ ํธํํ ์ ์๋ค. HTML ๊ตฌ๋ฌธ์ ๋ฐ๋ฅด๋ ๋ฌธ์๋ ์ธ์ ๋ text/html ํ์์ผ๋ก ๋ฐฐํฌํ ์ ์๋ค. ๋ํ ์ค๋ฅ ๋ณต์ ๊ธฐ๋ฅ๋ ํ์ฌ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๊ณ ์๋ ๋ฐฉ์์ ์ฐธ๊ณ ๋ก ์์ธ ํ๊ฒ ํฌํจํ ๊ฒ์ด๋ค. HTML ํ์์ ๋ฌธ์ <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html> iframe๊ณผ ๊ฐ์ ์์๊ฐ ์ธ๋ถ ์ฝํ ์ธ ๋ฅผ ํฌํจํ ๋ text/html-sanboxed ํ์์ ์ ์ธํ ์ ์๊ฒ ํ ๊ฒ์ด๋ค. XML ํ์์ผ๋ก์ ๊ตฌ์ฑ๋ ๊ฐ๋ฅํ๋ค. XML๋ก ๊ตฌ์ฑ๋ ๋ฌธ์๋ ๋ฐ๋์ application/xhtml+xml๋ application/xml๋ก ๋ฐฐํฌ๋์ด์ผ ํ๋ค. XML ํ์์ ๋ฌธ์ <?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html> 2.1.1 ๋ฌธ์ ์ธ์ฝ๋ฉ ๋ฌธ์์ ์ฌ์ฉ๋ ๋ฌธ์ ์ธ์ฝ๋ฉ์ ์ธ์์ ๋ค์์ ์ฐ์ ์์์ ๋ฐ๋ผ์ ๊ฒฐ์ ๋ ๋ค. 1) HTTP ํค๋์์ ์ ์ธ 2) ์ ๋์ฝ๋ BOM์์ ์ ์ธ 3) meta ํ๊ทธ ์ฌ ์ฉ HTML5์์๋ ์๋ก ์ถ๊ฐ๋ ๊ฐ์ํ๋ ๊ตฌ๋ฌธ์ ํฌํจํ ์๋ ๋๊ฐ์ง์ 33
34.
์ค์ HTML5 ๊ฐ์ด๋
meta ํ๊ทธ๋ฅผ ๋ชจ๋ ์ฌ์ฉํ ์ ์๋ค. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> 2.1.2 DOCTYPE ๊ธฐ์กด์ HTML DOCTYPE์ SGML ๊ธฐ๋ฐ์ด์๊ธฐ ๋๋ฌธ์ DTD๋ฅผ ๋ช ์ํ ํ์๊ฐ ์์๋ค. ํ์ง๋ง HTML5์์ DOCTYPE์ ๋ธ๋ผ์ฐ์ ๊ฐ ํ์ค ๋ชจ๋ ๋ก ์๋๋๊ฒ ํ๋ ์ญํ ๋ง ํ๋ฉด ๋๊ธฐ ๋๋ฌธ์ ์์ฃผ ๊ฐ์ํด ์ก๋ค. ์ด๋ฏธ ๋ธ๋ผ์ฐ ์ ๋ค์ HTML5 DOCTYPE์ ํ์ค ๋ชจ๋๋ก ์๋๋๊ฒ ํ๊ณ ์๋ค. HTML 4.01 Transitional DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 Strict DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML5 DTD <!DOCTYPE html> 2.1.3 ์ฝํ ์ธ ๋ชจ๋ธ HTML5์ ๊ฐ ์์๋ค์ ํน์ฑ์ ๋ฐ๋ผ ๋ถ๋ฅ๋๋ค. ํ์์๊ฐ ์ด๋ค ๋ถ๋ฅ์๋ ์ํ์ง ์์ ์๋ ์๊ณ ์ฌ๋ฌ ๋ถ๋ฅ์ ์ํด์์ ์๋ ์๋ค. ๋ถ๋ฅ๋ ์๋ ์ด๋ฏธ ์ง์ ๊ฐ์ด ๋ถํฌํ๊ณ ์๋ค. 34
35.
์ค์ HTML5 ๊ฐ์ด๋
๋ถ๋ฅ ํน์ฑ ์ ๋ฉํ๋ฐ์ดํ ์ฝํ ์ธ ์ฝํ ์ธ ์ ๋ชจ์, ๋์์ ์ค์ base, command, link, meta, noscript, (metadata content) ํ๊ฑฐ๋ ๋ค๋ฅธ ๋ฌธ์์์ ๊ด๊ณ script, style, title ๋ฅผ ๋ํ๋ธ๋ค. ํ๋ก์ฐ ์ฝํ ์ธ ๋๋ถ๋ถ์ body ์์ ์์ ์ a, abbr, address, map>area, article, aside, (flow content) ์๋ค์ด ํฌํจ๋๋ค. ํ๋ก์ฐ ์ฝ audio, b, bdo, blockquote, br, button, ํ ์ธ ๋ ํ์์ ํ ์คํธ๋ ์ canvas, cite, code, command, datalist, ๋ฒ ๋๋ ์ฝํ ์ธ ๋ฅผ ํฌํจํ๋ค. del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1 ~ h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong, style[scoped], sub, sup, svg, table, textarea, time, ul, var, video, wbr ์น์ ๋ ์ฝํ ์ธ ํค๋ฉ๊ณผ ํธํฐ์ ๋ฒ์๋ฅผ ๊ฒฐ์ article, aside, nav, section (sectioning content) ํ๋ ์์์ด๋ค. ๋ชจ๋ ์น์ ๋ ์ฝํ ์ธ ๋ ํค๋ฉ๊ณผ ์์๋ผ์ธ์ ๊ฐ์ง๊ณ ์๋ค. ํค๋ฉ ์ฝํ ์ธ ์น์ ์ ํค๋๋ฅผ ์๋ฏธํ๋ค. h1, h2, h3, h4, h5, h6, hgroup (heading content) ํ๋ ์ด์ง ์ฝํ ์ธ ๋ฌธ์์ ํ ์คํธ๋ฅผ ์๋ฏธํ๋ค. a, abbr, map>area, audio, b, bdo, br, (phrasing content) ํ๋ ์ด์ง ์ฝํ ์ธ ๋ ํ์์ button, canvas, cite, code, command, ํ ์คํธ๋ ์๋ฒ ๋๋ ์ฝํ ์ธ ๋ฅผ datalist, del, dfn, em, embed, i, iframe, ํฌํจํ๋ค. img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr ์๋ฒ ๋๋ ์ฝํ ์ธ ์ด๋ฏธ์ง, ๋น๋์ค, ํ๋์ ๋ฑ audio, canvas, embed, iframe, img, math, (embedded content) ์ธ๋ถ ์ฝํ ์ธ ๋ฅผ ๋ฌธ์๋ด์ ํ object, svg, video ํํ๋ค. ์ธํฐ์กํฐ๋ธ ์ฝํ ์ธ ์ฌ์ฉ์์ ์ํธ์์ฉํ๋ ์์ a, audio[controls], button, details, embed, (interactive content) ๋ค์ด๋ค. iframe, img[usemap], input, keygen, label, menu, object[usemap], select, textarea, video[controls] ํธ๋์คํจ๋ฐํธ ์ฝํ ์ธ ๋ถ๋ชจ ์์์ ์ฝํ ์ธ ์ ๋ฐ๋ผ (transparent content) ํฌํจํ๋ ์ฝํ ์ธ ์ ๋ถ๋ฅ๊ฐ ๋ฐ๋๋ ์์๋ฅผ ๋งํ๋ค. 2.1.4 MathML์ SVG HTML5์์๋ MathML์ด๋ SVG๋ฅผ ๋ฌธ์ ์์์ ์ฌ์ฉํ ์ ์๋ค. <!doctype html> 35
36.
์ค์ HTML5 ๊ฐ์ด๋
<title>SVG in text/html</title> <p> A green circle: <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg> </p> 2.1.5 ๋ฌธ๋ฒ ๊ฒ์ฌ W3C์์๋ ์ด๋ฏธ HTML5 ๋ฌธ๋ฒ์ ๋ํ ๊ฒ์ฌ ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ณ ์๋ค. HTML4๋ XHTML1์ ๋ฌธ๋ฒ ๊ฒ์ฌ๋ฅผ ์ํด์ ์ฌ์ฉํ๋ W3C Markup Validation Service(http://validator.w3.org/)๋ฅผ ์ฌ์ฉํ๋ฉด HTML5์ ๋ฌธ ๋ฒ ๊ฒ์ฌ๋ ์ํํ ์ ์๋ค. 2.2. ์์์ ์์ฑ 2.2.1 ๊ตฌ์กฐ๋ฅผ ๋ํ๋ด๋ ์์ HTML4์์๋ ๋ฌธ์์ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค๋ div, span ์์๋ฅผ id, class์ ํจ๊ป ์ฌ์ฉํ์๋ค. ๋ฌธ์์ ๊ตฌ์กฐ๋ฅผ ๋ํ๋ด๋ ์์๊ฐ ํ๋ถํ์ง ์์์ ๋ณต์กํ ํ์ด ์ง์ ๊ฒฝ์ฐ ๋ง์ ์ค์ฒฉ๋ div์์๋ฅผ ์ฌ์ฉํ์๋ค. HTML5์์๋ ๋ฌธ์์ ๊ตฌ์กฐ ๋ฅผ ๋ง๋๋ ์๋ก์ด ๊ฐ๋ ๊ณผ ์์๋ค์ด ์ถ๊ฐ๋์ด์ ๋ณด๋ค ๊ตฌ์กฐ์ ์ธ ๋ฌธ์๋ฅผ ๋ง๋ ๋ ๊ฒ์ด ๊ฐ๋ฅํด์ก๋ค. ์๋ก ์ถ๊ฐ๋ ์์๋ค์ ํ์ฌ ํ์ด์ดํญ์ค3, ์ฌํ๋ฆฌ3.1, ํฌ๋กฌ2, ์คํ๋ผ 9.6 ๋ฑ ์ต์ ์ ๋ธ๋ผ์ฐ์ ์์ ๋ฌธ์ ์์ด ์ฌ์ฉํ ์ ์๋ค. ๋จ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ๋ ์ด๋ฌํ ์์๋ฅผ ์ ๋๋ก ํํํด ์ฃผ์ง ๋ชปํ๊ธฐ ๋๋ฌธ์ createElement ๋ฉ์๋ ๋ฅผ ์ด์ฉํด์ ํ์ฑํ ํด์ฃผ๋ ๊ณผ์ ์ด ํ์ํ๋ค. ์๋ฅผ ๋ค์ด์ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ์์ header ์์๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์๋ ์๋์ ๊ฐ์ ์คํฌ๋ฆฝํธ๋ฅผ head ์์์์ ๋จผ์ ์คํํด ์ฃผ์ด์ผ ํ๋ค. document.createElement('header'); ์ด๋ ๊ฒ HTML5์์ ์๋ก ์ถ๊ฐ๋ ์์๋ค์ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ์์ ์ฌ์ฉ ํ ์ ์๋๋ก ๋ฏธ๋ฆฌ ์ ์๋์ด์ง ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๋ ๊ฐ๋ฅํ๋ค. HTML5 Enabling Script: http://code.google.com/p/html5shim/ IE Print Protector: http://code.google.com/p/ie-print-protector/ section ๋ฌธ์๋ ์ดํ๋ฆฌ์ผ์ด์ ์ ์น์ ์ ๋ํ๋ด๋ section ์์๊ฐ ์ถ๊ฐ๋์๋ค. ์ด 36
37.
์ค์ HTML5 ๊ฐ์ด๋ ์์๋
๋ฌธ์์ ๊ตฌ์กฐ๋ฅผ ๋ํ๋ด๊ธฐ ์ํด h1, h2, h3, h4, h5, h6 ์์๋ค๊ณผ ๊ฐ์ด ์ฌ์ฉ๋ ์ ์๋ค. ์ฑ ์ 1์ฅ, 2์ฅ์ด๋ ํญํ์์ผ๋ก ๋์ด ์๋ ์ฝํ ์ธ ์ ๊ฐ ํญ์ section ์์ ๋ฅผ ์ธ ์ ์๋ค. ๋ง์ฝ ์คํ์ผ๋ง์ด๋ ์คํฌ๋ฆฝํธ๋ฅผ ์ํด์ ๊ฐ์ธ๋ ์์๊ฐ ํ์ ํ๋ค๋ฉด ์ด๋ก ์ฉ๋๋ก๋ section์ ์ฌ์ฉํด์๋ ์๋๋ค. ์ด๋ฌํ ์ฉ๋๋ก๋ ๋ฌธ์ ๊ตฌ์กฐ์์ผ๋ก ํน๋ณํ ์๋ฏธ๊ฐ ์๋ div ์์๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค. <article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p> </section> </article> ํ๋์ ์น์ ์์์๋ ๊ทธ ์น์ ์ด ์ ์ฒด ๋ฌธ์ ๊ตฌ์กฐ์์ ๊ฐ๋ ๋จ๊ณ์ ์๊ด ์์ด h1 ์์๋ฅผ ์ฌ์ฉํ ์ ์๋ค. nav ๋ค๋น๊ฒ์ด์ ์ ์ํด ๊ตฌ์ฑ๋ ์น์ ์ ๋ํ๋ธ๋ค. ํ์ด์ง ์์ ์๋ ๋ชจ๋ ๋งํฌ์ ๊ทธ๋ฃน์ด nav ์์๋ก ๊ธฐ์ ๋ ํ์๋ ์๋ค. nav ์์๋ก๋ ๊ทธ ํ์ด์ง์ ์ฃผ์ ๋ค๋น๊ฒ์ด์ ๋งํฌ๋ค๋ง ๋ฌถ์ด์ฃผ๋ ๊ฒ์ด ์ข๋ค. ์ผ๋ฐ์ ์ผ๋ก ํธํฐ์์ ๊ทธ ์ฌ์ดํธ์ ์ฃผ์ ํ์ด์ง๋ก ์ด๋ํ๋ ๋งํฌ๋ฅผ ์ ๊ณตํ ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์๋ฐ ์ด๋ฌํ ๋งํฌ๋ ํธํฐ ์์ ํ์ํ๋ ๊ฒ ๋ง์ผ๋ก๋ ๊ทธ ๋ชฉ์ ์ ๊ฐ๋ ํ ์ ์๊ธฐ ๋๋ฌธ์ nav ์์๋ฅผ ์ฌ์ฉํ ํ์๋ ์๋ค. ๊ทธ๋ ๋ค๊ณ ํ ํ์ด์ง ์์์ nav ์์๋ฅผ ํ๋๋ง ์ฌ์ฉํด์ผ ํ๋ ๊ฒ์ ์ ๋๋ค. ์ฌ์ดํธ ์ ๋ฐ์ ์ธ ์ด๋์ ์ํ ๋ค๋น๊ฒ์ด์ ๊ณผ ํ์ด์ง ์ ์ฒด๋ฅผ ์ด๋ํ๋ ๋ค๋ฒ ๊ฒ์ด์ ์ด ์๋ ๊ฒฝ์ฐ ๊ฐ๊ฐ์ nav ์์๋ก ๊ธฐ์ ํ ์ ์๋ค. 37
38.
์ค์ HTML5 ๊ฐ์ด๋ article
๋ฌธ์๋ด์ ๋ ๋ฆฝ์ ์ธ ๊ธ์ article๋ก ํ์ํ ์ ์๋ค. ๋ธ๋ก๊ทธ ๊ธ์ด๋ ๋ด์ค ๋ณธ๋ฌธ ๋ฑ์ด ์ด์ ํด๋นํ๋ค. article ์์ ์์ article ์์๊ฐ ๋ค์ด๊ฐ ๊ฒฝ์ฐ ์์ชฝ์ article ์์๋ ๋ฐ ์ article ์์์ ๋ด์ฉ๊ณผ ๊ด๋ จ์ด ์๋ ๋ด์ฉ์ด๋ผ๋ ๊ฒ์ ์๋ฏธํ๋ค. ์๋ฅผ ๋ค ์ด์ ๋ธ๋ก๊ทธ์ ๊ธ๊ณผ ์ฌ์ฉ์๊ฐ ์์ฑํ ๋๊ธ์ด ์๋ ๊ฒฝ์ฐ ํ๋์ ๋๊ธ์ ์ ์ชฝ article๋ก ๊ธฐ์ ํ๊ณ ์ ์ฒด ๋ธ๋ก๊ทธ ๊ธ์ ๋ฐ๊นฅ์ชฝ article๋ก ๊ธฐ์ ํ ์ ์๋ค. aside ๋ฌธ์์ ์ฃผ ๋ด์ฉ์ด ์๋ ๊ด๋ จ์ฑ์ด ๋ฎ์ ๋ด์ฉ๋ค์ aside๋ก ํ์ํ ์ ์๋ค. ๋ณธ๋ฌธ๊ณผ ์ง์ ์ ์ผ๋ก ์๊ด์ด ์๋ ๊ด๋ จ ์ฌ์ดํธ ๋งํฌ๋ ๊ด๊ณ , nav ์์์ ๊ทธ ๋ฃน ๋ฑ์ด aside ์์๋ก ๊ธฐ์ ๋ ์ ์๋ค. hgroup ์น์ ์ ์ ๋ชฉ์ ๋ํ๋ธ๋ค. ์น์ ์ ์ ๋ชฉ์ด ์ฌ๋ฌ ๋จ๊ณ๋ฅผ ๊ฐ์ง๊ณ ์์ ๋ ์ด๋ฅผ hgroup ์์๋ก ๊ธฐ์ ํ ์ ์๋ค. ๋ฌธ์์ ๊ตฌ์กฐ๋ฅผ ๋ํ๋ผ ๋์๋ hgroup ์์ ์๋ ๊ฐ์ฅ ๋์ ๋ ๋ฒจ์ ํค๋ฉ์ ์ฌ์ฉํ๊ณ ๋๋จธ์ง ์์๋ค์ ๋ฌธ์์ ๊ตฌ์กฐ์์๋ ํ๋๋์ง ์ ๋๋ค. header ์๊ฐ๋ ๋ค๋น๊ฒ์ด์ ๊ธฐ๋ฅ๋ค์ ๋ฌถ์์ ๋ํ๋ธ๋ค. header ์์๋ ๋ณดํต ์น์ ์ ์ ๋ชฉ(h1, h2, h3, h4, h5, h6)์ ํฌํจํ์ง๋ง ๋ฐ๋์ ํฌํจํ ํ์๋ ์๋ค. ๋ํ header ์์๋ ๋ชฉ์ฐจ๋ ๊ฒ์์ฐฝ, ๋ก๊ณ ๋ฑ ์ ํฌํจํ ์๋ ์๋ค. header ์์๋ ์น์ ์ผ๋ก ๊ฐ์ฃผ๋์ง ์๋๋ค. header ์์๋ฅผ ์ผ๋ค๊ณ ๋ฌธ์ ๊ตฌ์กฐ์ ์๋ก์ด ์น์ ์ด ์๊ธฐ์ง ์๋๋ค. footer ์น์ ์ ํธํฐ๋ฅผ ๋ํ๋ด๊ณ ์ ์๋ ์ ์๊ถ ๋ฑ์ ํฌํจํ ์ ์๋ค. 38
39.
์ค์ HTML5 ๊ฐ์ด๋
footer ์์๋ ๊ฐ์ฅ ๊ฐ๊น์ด ์ ํํ๋ ์น์ ์ ํธํฐ๋ฅผ ์๋ฏธํ๋ค. ์น์ ์ ์ ์๋ ๊ด๋ จ ๋ฌธ์๋ก์ ๋งํฌ, ์ ์๊ถ ์ ๋ณด ๋ฑ์ ๋ํ๋ผ ์ ์๋ค. ์ ์๋ ํธ์ง์์ ์ฐ๋ฝ์ฒ๋ ๋ณดํต footer ์์ ์์ address ์์๋ก ํํ ์ด ๋๋ค. ๋๋ถ๋ถ์ ํธํฐ ์ ๋ณด๋ ์น์ ์ ๋ง์ง๋ง์ ์์นํ์ง๋ง ๋ฐ๋์ ๋ง์ง๋ง ์ ์์นํ ํ์๋ ์๋ค. footer ์์๋ header ์์์ ๋ง์ฐฌ๊ฐ์ง๋ก ์น์ ์ผ๋ก ๊ฐ์ฃผ๋์ง ์๋๋ค. footer ์์๋ฅผ ์ผ๋ค๊ณ ๋ฌธ์ ๊ตฌ์กฐ์ ์๋ก์ด ์น์ ์ด ์๊ธฐ์ง ์๋๋ค. figure ๊ทธ๋ํฝ์ด๋ ๋น๋์ค๋ฅผ ์ํ ์บก์ ์ ํ์ํ ์ ์๊ฒ ํ๋ค. figcaption ์์ ๋ก ์บก์ ์ ํ์ํ๋ค. ๋ณธ๋ฌธ์์ ์ฐธ์กฐ๊ฐ ๋์ง๋ง ๋ด์ฉ์ ํ๋ฆ์ ํฌ๊ฒ ์ํฅ์ ๋ฏธ์น์ง ์๋ ์ผ๋ฌ์ค ํธ, ๋ค์ด์ด๊ทธ๋จ, ์ฌ์ง, ์ฝ๋ ๋ฑ์ ํ์ํ ์ ์๋ค. <figure> <video src="ogg"></video> <figcaption>Example</figcaption> </figure> 2.2.2 ํค๋ฉ๊ณผ ์น์ h1, h2, h3, h4, h5, h6, hgroup ์์๋ค์ ํค๋ฉ์ ์๋ฏธํ๋ค. ์น์ ๋ ์ฝํ ์ธ ์ ์ฒซ๋ฒ์งธ ํค๋ฉ ์ฝํ ์ธ ๋ ๊ทธ ์น์ ์ ํค๋ฉ์ ์๋ฏธํ๋ค. ๊ทธ ์ดํ์ ๊ฐ๊ฑฐ๋ ๋ ๋์ ๋ ๋ฒจ์ ํค๋ฉ์ ์๋ก์ด ์น์ ์ ์๋ฏธํ๋ค. ๋ฎ์ ๋ ๋ฒจ ์ ์น์ ์ ์๋ก์ด ํ์ ์น์ ์ ์๋ฏธํ๋ค. blockquote, body, details, fieldset, figure, td๋ ์น์ ๋ ๋ฃจํธ (sectioning root) ์์๋ค๋ก, ์ด ์์๋ค์ ์๊ธฐ ์์ ๋ง์ ์์๋ผ์ธ์ ๊ฐ์ง ๊ณ ์์ ์์ ๋ฌธ์์ ์์๋ผ์ธ์ ์ํฅ์ ๋ฏธ์น์ง ์๋๋ค. <body> <h1>Foo</h1> <h2>Bar</h2> <blockquote> <h3>Bla</h3> </blockquote> <p>Baz</p> <h2>Quux</h2> <section> 39
40.
์ค์ HTML5 ๊ฐ์ด๋
<h3>Thud</h3> </section> <p>Grunt</p> </body> ์์ ๊ฐ์ ๋ฌธ์์ ๊ตฌ์กฐ๋ ๋ค์๊ณผ ๊ฐ๋ค. 1. Foo (Grunt ๋ฌธ๋จ์ ๊ฐ์ง๊ณ ์๋ body ์น์ ์ ํค๋ฉ) 1. Bar (Baz ๋ฌธ๋จ๊ณผ blockquote ์์ ํฌํจํ ์น์ ์ ํค๋ฉ) 2. Quux (๋ด์ฉ์ด ์๊ณ ํค๋ฉ๋ง ์๋ ์น์ ์ ํค๋ฉ) 3. Thud (section ์์๋ก ํ์๋ ์น์ ์ ํค๋ฉ) ์น์ ํค๋ฉ์ ๋จ๊ณ๋ ํฌ๊ฒ ์๊ด์์ง๋ง ๋๋๋ก h1 ์์๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ์น์ ๊ตฌ์กฐ์ ๋ง๋ ๋จ๊ณ์ ํค๋ฉ์ ์ฌ์ฉํ ๊ฒ์ ๊ถ์ฅํ๋ค. <body> <h4>Apples</h4> <p>Apples are fruit.</p> <section> <h2>Taste</h2> <p>They taste lovely.</p> <h6>Sweet</h6> <p>Red apples are sweeter than green ones.</p> <h1>Color</h1> <p>Apples come in various colors.</p> </section> </body> ์ฆ, ์ด๋ ๊ฒ ํค๋ฉ์ ๋จ๊ณ๊ฐ ์์ฐจ์ ์ด์ง ์์๋ ์ ํจํ ๊ตฌ์กฐ์ ์ธ ๋ฌธ์๋ก ํ ๋จํ ์ ์๋ค. ํ์ง๋ง ์๋์๊ฐ์ด ์น์ ์ ๋ช ์์ ์ผ๋ก ์ง์ ํด ์ฃผ๋ ๊ฒ์ด ๋ ์ข๋ค. <body> <h1>Apples</h1> <p>Apples are fruit.</p> <section> <h2>Taste</h2> <p>They taste lovely.</p> <section> <h3>Sweet</h3> <p>Red apples are sweeter than green ones.</p> </section> </section> <section> <h2>Color</h2> <p>Apples come in various colors.</p> </section> </body> ์น์ ์ ๊ตฌ์ฑํ๋ ์์์ ์์๋ผ์ธ์ ํฌํจ๋ ์น์ ์ ๋ชฉ๋ก์ผ๋ก ์ด๋ฃจ์ด์ง๋ค. ๊ฐ๊ฐ์ ์น์ ์ ํ๋์ ํค๋ฉ์ ํฌํจํ ์ ์๊ณ ๋ค์์ ๋ค๋ฅธ ์น์ ์ ํฌํจํ 40
41.
์ค์ HTML5 ๊ฐ์ด๋
์ ์๋ค. <body> <h1>A</h1> <p>B</p> <h2>C</h2> <p>D</p> <h2>E</h2> <p>F</p> </body> ์ด๋ ๊ฒ ๊ตฌ์ฑ๋ ๋งํฌ์ ์ ๋ค์๊ณผ ๊ฐ์ ์์๋ผ์ธ์ ์์ฑํ๋ค. body ์์๋ก๋ถํฐ ํ๋์ ์น์ ์ด ๋ง๋ค์ด์ง๊ณ ์ด ์น์ ์ ํค๋ฉ A์ ๋ฌธ๋จ B๋ฅผ ๊ฐ๋๋ค. ์ด ์น์ ์ ๋ค์ ๋๊ฐ์ ์น์ ์ ํฌํจํ๋ค. h2 ์์๋ก๋ถํฐ ํ๋ ์ ์น์ ์ด ๋ง๋ค์ด์ง๊ณ ํค๋ฉ C์ ๋ฌธ๋จ D๋ฅผ ๊ฐ๋๋ค. ๊ทธ ๋ค์ h2 ์์๋ก๋ถํ ํ๋์ ์น์ ์ด ๋ ๋ง๋ค์ด์ง๊ณ ํค๋ฉ E์ ๋ฌธ๋จ F๋ฅผ ๊ฐ๋๋ค. 2.2.3 ๊ทธ ๋ฐ์ ์์ video, audio ๋น๋์ค๋ ์ค๋์ค ์ฝํ ์ธ ๋ฅผ ๋ฃ๊ธฐ์ํด ์ฌ์ฉ๋๋ค. ์คํฌ๋ฆฝํธ๋ก ์ ์ดํ ์ ์ ๊ฒ๋ ์คํฌ๋ฆฝํธ API๊ฐ ์ ๊ณต๋๋ค. source ์์๋ก ์ฌ๋ฌ๊ฐ์ ๋ฏธ๋์ด๋ฅผ ์ถ๊ฐํ ์์๋ค. embed ํ๋ฌ๊ทธ์ธ ์ฝํ ์ธ ๋ฅผ ๋ฃ์ ๋ ์ฌ์ฉ๋๋ค. mark ์ค์ ํ ์คํธ๋ฅผ ํ๊ธฐํ ๋ ์ฌ์ฉ๋๋ค. ์๋ฅผ ๋ค์ด ์ ์ ์๋ ์ค์ํ๋ค๊ณ ํ ํํ์ง ์์์ง๋ง ์ด ๊ธ์ ๋ฐ์์ ๋ ์ค์ํ ๋ถ๋ถ์ด ๋ณ๊ฒฝ๋๊ฑฐ๋ ์ถ๊ฐ๋๋ค๋ฉด ์ด ํ ์คํธ๋ฅผ mark ์์๋ก ํํํ ์ ์๋ค. progress ๋ค์ด๋ก๋ ์ํ๋ฐ ์ฒ๋ผ ์์ ์ ์งํ์ํฉ์ ๋ํ๋ผ ๋ ์ฌ์ฉ๋๋ค. meter ๋ถ๋์ด๋ ์๋์ ๋ํ๋ผ ๋ ์ฌ์ฉ๋๋ค. 41
42.
์ค์ HTML5 ๊ฐ์ด๋ time
๋ ์ง๋ ์๊ฐ์ ๋ํ๋ผ ๋ ์ฌ์ฉ๋๋ค. ruby, rt, rp ์ผ๋ณธ์ด์์ ํ๋ฌธ์ ์์ ๋ค๋ ๊ฒ๊ณผ ๊ฐ์ ๋ฃจ๋น ์ฃผ์(ruby annotation)์ ๋ฌ ๋ ์ฌ์ฉ๋๋ค. canvas ๊ทธ๋ํฝ์ด๋ ๊ฒ์๊ณผ ๊ฐ์ด ๋์ ์ธ ๋นํธ๋งต ์ด๋ฏธ์ง๋ฅผ ๊ตฌํํ ๋ ์ฌ์ฉ๋๋ค. command ์ฌ์ฉ์๊ฐ ํํ ์ ์๋ ๋ช ๋ น ๊ธฐ๋ฅ์ ๋ํ๋ผ ๋ ์ฌ์ฉ๋๋ค. details ์ฌ์ฉ์์ ํ์์ ์ํด์ ์ฌ์ฉํ ์ ์๊ฒ ์ ๊ณต๋๋ ์ถ๊ฐ์ ์ธ ์ ๋ณด๋ ๊ธฐ๋ฅ ์ ๋ํ๋ผ ๋ ์ฌ์ฉ๋๋ค. summary ์์๋ฅผ ์ด์ฉํด์ ์์ฝ, ์ ๋ชฉ, ์บก์ ์ ๋ ํ๋ผ ์ ์๋ค. <section class="progress window"> <h1>"Really Achieving Your Childhood Dreams" ๋ณต์ฌ์ค...</h1> <details> <summary>๋ณต์ฌ์ค... <progress max="375505392" value="97543282"></progress> 25% </summary> <dl> <dt>์ด๋น ์ ์ก๋:</dt> <dd>452KB/s</dd> <dt>๋ณต์ฌํ ํ์ผ๋ช :</dt> <dd>/home/rpausch/raycd.m4v</dd> <dt>๋์ ํ์ผ๋ช :</dt> <dd>/var/www/lectures/raycd.m4v</dd> <dt>๊ฑธ๋ฆฐ์๊ฐ:</dt> <dd>01:16:27</dd> <dt>์ปฌ๋ฌ ํ๋กํ์ผ:</dt> <dd>SD (6-1-6)</dd> <dt>์์ ํฌ๊ธฐ:</dt> <dd>320ร240</dd> </dl> </details> </section> datail ์์๋ฅผ ์ด์ฉํด์ ์์ธํ ๋ด์ฉ์ ์ฌ์ฉ์์ ์ ํ์ ์ํด์ ๋ณด์ด๊ฑฐ๋ ๊ฐ์ถ ์ ์๋ค. datalist ๋ฏธ๋ฆฌ ์ ์๋์ด ์๋ option์ ๋ฌถ์์ ๋ํ๋ธ๋ค. input์ list, datalist์ 42
43.
์ค์ HTML5 ๊ฐ์ด๋ id๋ก
์๋ก ์ฐ๊ฒฐ๋๋ค. keygen ์๋ฒ์ ๊ณต๊ฐํค๋ฅผ ๋ณด๋ด๊ณ ๋ก์ปฌ์ ํค ์ ์ฅ์์ ๊ฐ์ธํค๋ฅผ ์ ์ฅํ๋๋ฐ ์ฌ์ฉ ๋๋ค. output ์์์ด๋ ์คํฌ๋ฆฝํธ๋ฅผ ํตํด ์์ฑ๋ ๊ฒฐ๊ณผ๋ฌผ์ ๋ํ๋ผ ๋ ์ฌ์ฉ๋๋ค. input input ์์์ type ์์ฑ์ผ๋ก ๋ค์๊ณผ ๊ฐ์ ๋ค์ํ ํ์์ ์ฌ์ฉํ ์ ์ ๊ฒ ๋์๋ค. tel, search, url, email, datatime, date, month, week, time, datetime-local, number, range, color. ์ด๋ฌํ ์์ฑ์ ์ฌ์ฉํด์ ๋ฌ๋ ฅ์ด๋ ์ปฌ๋ฌ ํฝ์ปค์ ๊ฐ์ ๊ธฐ๋ฅ์ ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ ์ ์๋ค. type ์์ฑ ๊ฐ์ ๋ฐ๋ฅธ ๋ค์ํ ์ฝํธ๋กค ํ์ ๊ฐ ์ํ ํ ์ดํฐ ํ์ ์ฝํธ๋กค ํ์ hidden ๊ฐ์ถฐ์ง ์์์ ๋ฌธ์์ด n/a text ํ ์คํธ ์ค๋ฐ๊ฟ ์๋ ํ ์คํธ ํ ์คํธ ํ๋ search ๊ฒ์ ์ค๋ฐ๊ฟ ์๋ ํ ์คํธ ๊ฒ์ ํ๋ tel ์ ํ๋ฒํธ ์ค๋ฐ๊ฟ ์๋ ํ ์คํธ ํ ์คํธ ํ๋ url URL ์ ๋ IRI ํ ์คํธ ํ๋ email ์ด๋ฉ์ผ ์ด๋ฉ์ผ ์ฃผ์๋ ์ด๋ฉ์ผ ํ ์คํธ ํ๋ ์ฃผ์ ๋ฆฌ์คํธ password ๋น๋ฐ๋ฒํธ ์ค๋ฐ๊ฟ ์๋ ํ ์คํธ ๋ฐ์ดํฐ ์ ๋ ฅ์ด ๋ํ๋์ง ์๋ ํ ์คํธ ํ๋ datetime ๋ ์ง์ ์๊ฐ UTC ๋ ์ง์ ์๊ฐ ๋ ์ง์ ์๊ฐ ์ฝํธ๋กค date ๋ ์ง ์๊ฐ๋ ์๋ ๋ ์ง ๋ ์ง ์ฝํธ๋กค month ๋ฌ ์๊ฐ๋ ์๋ ๋ ๊ณผ ๋ฌ ๋ฌ ์ฝํธ๋กค week ์ฃผ ์๊ฐ๋ ์๋ ์ฃผ ๋ฒํธ ์ฃผ ์ฝํธ๋กค time ์๊ฐ ์๊ฐ๋ ์๋ ์๊ฐ ์๊ฐ ์ฝํธ๋กค 43
44.
์ค์ HTML5 ๊ฐ์ด๋
๊ฐ ์ํ ํ ์ดํฐ ํ์ ์ฝํธ๋กค ํ์ datetime- ๋ก์ปฌ ๋ ์ง์ ์๊ฐ๋ ์๋ ๋ ์ง์ ์ ๋ ์ง์ ์๊ฐ ์ฝํธ๋กค local ์๊ฐ ๊ฐ number ์ซ์ ์ซ์ ๊ฐ ํ ์คํธ๋ ์คํผ๋ ์ฝํธ๋กค range ๋ฒ์ ์ซ์ ๊ฐ์ด๋ ์ ํํ ์ซ ์ฌ๋ผ์ด๋ ์ฝํธ๋กค ์๊ฐ ํ์์๋ ์๋ฏธ์ ์ ๊ฐ color ์ 8-bit ์ ๋ น์ฒญ sRGB ์นผ ์ปฌ๋ฌ ์ฐ ๋ผ checkbox ์ฒดํฌ๋ฐ์ค ์ด๋ฏธ ์ค์ ๋ ๋ฆฌ์คํธ ๊ฐ ์ฒดํฌ๋ฐ์ค ์ 0๋๋ ๋ค๋ฅธ ๊ฐ radio ๋ผ๋์ค ๋ฒํผ ์ง์ ๋ ๊ฐ ๋ผ๋์ค ๋ฒํผ file ํ์ผ ์ ๋ ฅ์ฐฝ MIME type๊ณผ ํ์ผ๋ช ์ด ๋ ์ด๋ธ๊ณผ ๋ฒํผ ์๋ ํ์ผ ๋ชฉ๋ก submit ์ ์ก ๋ฒํผ ํผ ์์์ ์ ์กํ๋ ์ง ๋ฒํผ ์ ๋ ๊ฐ image ์ด๋ฏธ์ง ๋ฒํผ ํผ ์์์ ์ ์กํ๋ ์ด ํด๋ฆญ ๊ฐ๋ฅํ ์ด๋ฏธ์ง๋ ๋ฒํผ ๋ฏธ์ง ์ขํ ๊ฐ reset ๋ฆฌ์ ๋ฒํผ ํด๋น์ฌํญ ์์ ๋ฒํผ button ๋ฒํผ ํด๋น์ฌํญ ์์ ๋ฒํผ style, script style ์์์ script ์์์ type ์์ฑ์ด ์๋ต ๊ฐ๋ฅํด์ก๋ค. style ์์์ ๊ธฐ๋ณธ type ๊ฐ์ "text/css", script ์์์ ๊ธฐ๋ณธ type ๊ฐ์ "text/javascript"์ด๊ธฐ ๋๋ฌธ์ ๋ ๋ค type ์์๋ฅผ ์๋ตํ ์ ์๊ฒ ๋์๋ค. <style> #myelement { width: 100px; } </style> <script> function myfunction() { return 'Hello world'; } </script> 44
45.
์ค์ HTML5 ๊ฐ์ด๋ 2.2.4
์๋ก์ด ์์ฑ HTML4์์ ์ฌ์ฉ๋๋ ์์ฑ์ ๋ณด๋ค ๋๊ฒ ์ฌ์ฉํ ์ ์๋๋ก ํ์ฅํ์๋ค. media a์ area ์์์๋ link ์์์ ๋ง์ฐฌ๊ฐ์ง๋ก media ์์ฑ์ ์ง์ ํ ์ ์ ๋ค. ping a์ area ์์์๋ ๋งํฌ๋ฅผ ๋ฐ๋ผ ๊ฐ์ ๋ ์ฐธ์กฐ๋ ping ์์ฑ์ ์ง์ ํ ์ ์๋ค. ping ์์ฑ์ ์ง์ ํ๋ฉด ์ฌ์ฉ์ ํด๋ฆญ ์ ๋ณด ์์ง๊ณผ ๊ฐ์ ๊ณณ์ ์ฌ์ฉํ ์ ์ ๊ณ ์ฌ์ฉ์๋ ์ด๋ฅผ ์ต์ ์์ ์ ์ดํ ์ ์๊ฒ ๋๋ค. hreflang, rel area ์์์๋ link์ a ์์์ ๋ง์ฐฌ๊ฐ์ง๋ก hreflang๊ณผ rel ์์ฑ์ ์ง์ ํ ์ ์๋ค. target base ์์์๋ a ์์์ ๋ง์ฐฌ๊ฐ์ง๋ก target ์์ฑ์ ์ง์ ํ ์ ์๋ค. HTML4์์ strict DTD๋ฅผ ์ฌ์ฉํ ๋์๋ target์ ์ธ ์ ์์์ง๋ง iframe๊ณผ ๊ฐ์ด ์น์์ ์ด๋ฏธ ์ ์ฉํ๊ฒ ์ฌ์ฉํ๊ณ ๋ธ๋ผ์ฐ์ ์์ ์ง์๋ ๋ง์ด ๋๊ณ ์๊ธฐ ๋๋ฌธ์ HTML5์์๋ ์ฌ์ฉํ ์ ์๋ค. value, start: li์์์ value ์์ฑ๊ณผ ol ์์์ start ์์ฑ์ ๊ตฌ์กฐ์ ๊ด๋ จ ๋ ์์ฑ์ด๊ธฐ ๋๋ฌธ์ ๋์ด์ ํ์ง๋ ์์ฑ์ด ์๋๋ค. charset meta ์์์ charset ์์ฑ์ด ์ถ๊ฐ๋์๋ค. ์ด๋ฏธ ๋ง์ด ์ฌ์ฉ๋๊ณ ์ ์ง์๋ ๊ณ ์๋ ์์ฑ์ด๋ค. autofocus input ์์์ type ์์ฑ์ด hidden์ผ ๋๋ฅผ ์ ์ธํ๊ณ input, select 45
46.
์ค์ HTML5 ๊ฐ์ด๋ textarea,
button ์์์ autofocus ์์ฑ์ด ์ถ๊ฐ๋์๋ค. ์ด ์์ฑ์ ๋ฌธ์๊ฐ ๋ก๋๋์์ ๋ ํผ์ ํฌ์ปค์ค๊ฐ ๋๊ฒ ํ๋ค. ์ฌ์ฉ์๋ ์ด ๋ฌํ ๋์์ ์ต์ ์์ ๋ ์ ์์ด์ผ ํ๋ค. placeholder input ์์์ textarea ์์์ placeholder ์์ฑ์ด ์ถ๊ฐ๋์๋ค. placehoder ์์ฑ์ ๊ฐ์ input์ด๋ textarea ์์์ ๊ฐ์ด ์ ๋ ฅ๋๊ธฐ ์ ์ ํํธ ์ ๋ณด๋ก ํ์๋๋ค. ํฌ์ปค์ค๋ฅผ ๋ฐ๊ธฐ ์ ๊น์ง placeholder ๊ฐ์ด ํ์๋ ๊ณ ํฌ์ปค์ค๋ฅผ ๋ฐ๊ฑฐ๋ ๊ฐ์ด ์ ๋ ฅ๋๋ฉด ํ์๋ ๊ฐ์ด ์ฌ๋ผ์ง๋ค. ๊ธด ํํธ๋ฅผ ์ํด์๋ placeholder ๋์ ์ title ์์ฑ์ ์ฌ์ฉํด์ผ ํ๋ฉฐ, placeholder๋ label์ ๋์ํ ์๋ ์๊ธฐ ๋๋ฌธ์ label์ ๋ณ๋๋ก ์ง์ ์ด ๋์ด์์ด์ผ ํ๋ค. <input type="email" name="address" placeholder="abc@def.com"> form input, output, select, textarea, button, fieldset ์์์ form ์์ฑ์ ์ง ์ ํ์ฌ form ์์์ ๋ฐ์ ์ฝํธ๋กค์ ์์นํ ์ ์๊ฒ ๋์๋ค. required input ์์์ type ์์ฑ์ด hidden, image ์ด๊ฑฐ๋ button ์์์ ์์ฑ ์ด submit์ธ ๊ฒฝ์ฐ๋ฅผ ์ ์ธํ๊ณ input๊ณผ textarea ์์์ required ์์ฑ์ด ์ถ๊ฐ๋์๋ค. ์ด ์์ฑ์ ์ฌ์ฉ์๊ฐ ๋ฐ๋์ ๊ฐ์ ์ ๋ ฅํด์ผ ํ๋ค๋ ๊ฒ์ ์๋ฏธํ๋ค. HTML5๋ ํผ ๊ฐ ์ ํจ์ฑ ๊ฒ์ฌ(validation)์ ๊ฐ์ด ์์ฃผ ์ฌ์ฉ๋๋ ํผ ๊ด๋ จ ๊ธฐ๋ฅ์ ํ์คํ ํ์ฌ ๋์ฑ ๊ฐ๋ ฅํ๊ณ ํ๋ถํ ์น ํผ์ ๋ง๋ค ์ ์๊ฒ ํ๊ณ ์ ๋ค. <h1>ํ์ ๋ฑ๋ก</h1> <form action="/newaccount" method=post> <p> <label for="username">์ด๋ฉ์ผ ์ฃผ์:</label> <input id="username" type=email required name=un> <p> <label for="password1">๋น๋ฐ๋ฒํธ:</label> <input id="password1" type=password required name=up> 46
47.
์ค์ HTML5 ๊ฐ์ด๋
<p> <label for="password2">๋น๋ฐ๋ฒํธ ํ์ธ:</label> <input id="password2" type=password onforminput="setCustomValidity(value != password1.value ? '๋น๋ฐ์ ํธ๊ฐ ์ผ์นํ์ง ์์ต๋๋ค.' : '')"> <p> <input type=submit value="๊ณ์ ์์ฑ"> </form> ์ด๋ฉ์ผ ์ฃผ์์ ๋น๋ฐ๋ฒํธ๋ฅผ ํ์์์๋ก ์ง์ ํ์๊ณ , ๋น๋ฐ๋ฒํ ํ์ธ ํ๋์ ์๋ ์ ๋ ฅ๋ ๊ฐ์ด ๋น๋ฐ๋ฒํธ์ ์ผ์นํ๋์ง๋ฅผ ์ถ๊ฐ์ ์ผ๋ก ํ์ธํ๋ค. disable fieldset ์์์ disable ์์ฑ์ ์ง์ ํ์ฌ ์ ์ฒด ํ๋์ ์ ๋นํ์ฑํ ํ ์ ์๋ค. autocomplete ๋ฑ input ์์์ autocomplete, min, max, multiple, pattern, step ์์ฑ์ด ์ถ๊ฐ๋์๋ค. ๋ํ datalist์ ํจ๊ป ์ฌ์ฉ๋ ๋ list ์์ฑ์ ์ง์ ํ ์ ์๋ค. formaction ๋ฑ input๊ณผ button ์์์ formaction, formenctype, formmethod, formnovalidate, formtarget ์์ฑ์ ์ง์ ํ ์ ์๋ค. ์ด๋ฌํ ์์ฑ๋ค์ form ์์์ action, enctype, method, novalidate, target ์์ฑ์ ์ฌ์ ์ ํ๊ฒ ๋๋ค. type, label menu ์์์ type๊ณผ label ์์ฑ์ ์ง์ ํ ์ ์๋ค. ์ด ์์ฑ๋ค์ ์ด์ฉํด ์ ๋ธ๋ผ์ฐ์ ์์ ์ง์ํ๋ ์ปจํ ์คํธ ๋ฉ๋ด์ ๊ฐ์ ๊ธฐ๋ฅ์ ์ ์ํ ์ ์๋ค. scoped style ์์์ scoped ์์ฑ์ ์ง์ ํ์ฌ ๋ฌธ์์ ํน์ ๋ถ๋ถ์๋ง ์คํ์ผ์ด ์ ์ฉ๋๋๋ก ํ ์ ์๋ค. async style ์์์ async ์์ฑ์ ์ง์ ํ์ฌ ์คํฌ๋ฆฝํธ์ ๋ก๋ฉ๊ณผ ์คํ ํ์ด๋ฐ์ 47
48.
์ค์ HTML5 ๊ฐ์ด๋
์กฐ์ ํ ์ ์๋ค. manifest html ์์์ manifest ์์ฑ์ ์ง์ ํ์ฌ ์คํ๋ผ์ธ ์ ํ๋ฆฌ์ผ์ด์ API์ ์ ์บ์ ์ ๋ณด๋ฅผ ์ฌ์ฉํ ์ ์๋ค. sizes link ์์์ sizes ์์ฑ์ ์ง์ ํ์ฌ ์์ด์ฝ์ ๊ธฐ๋ณธ ํฌ๊ธฐ ์ ๋ณด๋ฅผ ํ์ํ ์ ์๋ค. reversed ol ์์์ reversed ์์ฑ์ ์ง์ ํ์ฌ ๋ฒํธ ์์๋ฅผ ๋ฐ๊ฟ ์ ์๋ค. sandbox ๋ฑ iframe ์์์ sandbox, seamless, srcdoc ์์ฑ์ ์ง์ ํ์ฌ ์๋๋ฐ์ค๋ก ์ง์ ํ ์ ์๋ค. 2.2.4 ๊ธ๋ก๋ฒ ์์ฑ HTML4์ ๊ธ๋ก๋ฒ ์์ฑ(class, dir, id, lang, style, tabindex, title)์ ๋ชจ ๋ ์์์ ์ง์ ํ ์ ์๊ฒ ๋์๋ค. contenteditable ์ฌ์ฉ์๊ฐ ๋ด์ฉ์ ์์ ํ ์ ์๋ ์์๋ฅผ ํ์ํ ์ ์๋ค. contextmenu ์ปจํ ์คํธ ๋ฉ๋ด๋ฅผ ์ง์ ํ ์ ์๋ค. data-* ์ ์์๊ฐ ์๋ก์ด ์์ฑ์ ์ง์ ํ ์ ์๋ค. draggable ์๋ก์ด ๋๋๊ทธ ์ค ๋๋กญ API๋ฅผ ์ฌ์ฉํ ์ ์๋ค. 48
49.
์ค์ HTML5 ๊ฐ์ด๋
hidden ํน์ ์์๊ฐ ์กด์ฌํ์ง ์๋ ๊ฒ์์ ํ์ํ ์ ์๋ค. ๋งํฌ์ ์ผ๋ก ์์ฑ์ ์ฃผ๋ ๊ฒ๊ณผ CSS์ display๋ก ํ๋ฉด์ ๋ณด์ด์ง ์๊ฒ ํ๋ ๊ฒ์ ์์ฐํ ๋ค๋ฅด๋ค. hidden ์์ฑ์ด ์ง์ ๋๋ฉด ๊ทธ ์์๋ ๋ฌธ์์์์ ์๋ ๊ฒ๊ณผ ๊ฐ์ ํจ๊ณผ๋ฅผ ๊ฐ ์ง๋ค. role, aria-* ๋ณด์กฐ๊ธฐ๊ธฐ์์ ์ ๊ทผ์ฑ์ ํฅ์์ํค๋๋ฐ ์ฌ์ฉํ ์ ์๊ฒ ํ๋ค. spellcheck ๋ง์ถค๋ฒ ๊ธฐ๋ฅ์ ์ ์ฉ๋๊ฑฐ๋ ์ ์ฉ๋์ง ์๊ฒ ํ ์ ์๋ค. ์ด ์์ฑ์ด ์ง์ ๋ ์ด ์์ผ๋ฉด ์ฌ์ฉ์๊ฐ ๋ง์ถค๋ฒ ๊ธฐ๋ฅ์ ์ ์ดํ ์ ์๊ฒ ๋๋ค. onclick, onfocus ๋ฑ์ event HTML4์ on{์ด๋ฒคํธ์ด๋ฆ} ์์ฑ์ ์ฌ์ฉํ ์ ์๊ณ video๋ audio ์์ ์ play์ ๊ฐ์ ์ถ๊ฐ์ ์ธ ์ด๋ฒคํธ ์์ฑ์ ์ฌ์ฉํ ์ ์๋ค. 2.2.5 ๋ณ๊ฒฝ๋ ์์ a href ์์ฑ์ด ์๋ a ์์๋ฅผ ์ฌ์ฉํ์ฌ ๋งํฌ ์๋ฆฌ(placeholder link)๋ฅผ ํ ์ํ ์ ์๋ค. a ์์๋ ์์ ๋ฒํผ๊ณผ ๊ฐ์ ์ํธ์์ฉํ๋ ์์๊ฐ ์๋ค๋ฉด ์ ์ฒด ๋ฌธ๋จ, ๋ฆฌ ์คํธ, ํ, ์น์ ๋ฑ์ ๋ชจ๋ ํฌํจํ ์ ์๋ค. <aside class="advertising"> <h1>๊ด๊ณ </h1> <a href="http://ad.example.com/?adid=1929&pubid=1422"> <section> <h1>HTML5 ์คํ ์ปจํผ๋ฐ์ค!</h1> <p>์ฐจ์ธ๋ ์น ์๋น์ค๋ฅผ ์ํ ์๋ก์ด ์น ํ์ค!</p> <p>์ต์ด HTML5 ์คํ ์ปจํผ๋ฐ์ค๊ฐ ์ด๋ฆฝ๋๋ค.</p> </section> </a> <a href="http://ad.example.com/?adid=375&pubid=1422"> <section> <h1>HTML5 ๊ฐ์ด๋ ๋ถ!</h1> <p>๊ฐ์ด๋ ๋ถ์ ํจ๊ป ๋๋ ๋๋ฆฝ๋๋ค.</p> 49
50.
์ค์ HTML5 ๊ฐ์ด๋
<p>ํต์ฌ๋ง ์ ๋ฝ์ ํธ๋๋ถ!</p> </section> </a> </aside> ์ ์ฒด ์น์ ์ ํ๋์ a ์์๋ก ๊ฐ์ธ๊ณ ๋ฐฐ๋๋ก ํ์ฉํ ์ ์๋ค. address address ์์๊ฐ ๋ฌธ์ ๊ตฌ์กฐ(sectioning) ์์์ ํน์ ๋ฒ์์ ์ ์ฉ๋๋ค. b b ์์๋ ๋ฌธ์์์์ ์ค์ํ ์๋ฏธ๋ ์์ง๋ง ๋ฌธ์ฒด์ ์ผ๋ก ๋ค๋ฅด๊ฒ ๋ํ๋ด์ด ์ ธ์ผ ํ๋ ํ ์คํธ๋ฅผ ์ํด์ ์ฌ์ฉ๋๋ค. ์๋ฅผ ๋ค์ด์ ์ํ ์ค๋ช ์์์์ ์ ํ์ ์ด๋ฆ์ด๋ ๋ฌธ์์ ํน์ ํค์๋๋ฅผ ๋ํ๋ผ ๋ ์ฌ์ฉํ ์ ์๋ค. hr hr ์์๋ ๋ฌธ๋จ ์์ค์ ๋๋์ ์๋ฏธํ๊ฒ ๋์๋ค. i i ์์๋ ์ด์กฐ๋ ๋ถ์๊ธฐ ๋๋ ๋ค๋ฅธ ์ผ๋ฐ ํ ์คํธ์ ๊ตฌ๋ถ์ ํด์ผ ํ๋ ํ ์คํธ๋ฅผ ํ์ํ๋๋ฐ ์ฌ์ฉ๋๋ค. ์๋ฅผ ๋ค์ด์ ํน์ ๊ตฌ๋ถ์ด๋ ๊ธฐ์ ์ ์ธ ์ฉ์ด, ๋ค๋ฅธ ์ธ์ด ํํ, ์๊ฐ, ๋ฐฐ์ ์ด๋ฆ ๋ฑ๊ณผ ๊ฐ์ ๊ฒ์ ํํํ ๋ ์ฌ์ฉ๋๋ค. ์ฌ ์ฉ ์ธ์ด์ ๋ฐ๋ผ์ ๋ง์ ์ฐจ์ด๊ฐ ์์ ์ ์๋ค. label label ์์๋ฅผ ํด๋ฆญ ํ์ ๋ ํฌ์ปค์ค๋ฅผ ์ด๋ํ๋ ๊ธฐ๋ฅ์ด ํ๋ซํผ ์์ค์์ ์ ํ์ค์ด ์๋ ์ด์ ๋์ด์ ํฌ์ปค์ค๋ฅผ ์ฝํธ๋กค๋ก ์ด๋์์ผ์๋ ์๋๋ค. menu menu ์์๊ฐ ํด๋ฐ๋ ์ปจํ ์คํธ ๋ฉ๋ด๋ฅผ ์ํด์ ๊ฐ์ ๋์๋ค. small small ์์๋ ์ถ๊ฐ์ ์ธ ์ฝ๋ฉํธ๋ ๋ฒ์ ์ธ ํํ ๋ฑ๊ณผ ๊ฐ์ด ์๊ฒ ์ถ๋ ฅ๋์ด 50
51.
์ค์ HTML5 ๊ฐ์ด๋
์ผ ํ๋ ๋ด์ฉ์ ๋ํ๋ธ๋ค. strong strong ์์๋ ๊ฐํ๊ฐ์กฐ๊ฐ ์๋๋ผ ์ค์ํจ์ ๋ํ๋ธ๋ค. 2.2.6 ๋ณ๊ฒฝ๋ ์์ฑ ๊ธฐ์กด์ ์์ฑ๋ค ์ค์ ๋ณ๊ฒฝ๋ ๊ฒ๋ค์ด ์๋ค. ๋๋๋ก์ด๋ฉด ์ด๋ฌํ ์์ฑ๋ค์ ๋ค ๋ฅธ ๋์์ ํ์ฉํด ๊ธฐ์ ํ๋ ๊ฒ์ด ๋ ๋ฐ๋์ง ํ๋ค. border img ์์์ border ์์ฑ์ "0" ๊ฐ์ ์ง์ ํด์ผ ํ๋ค. CSS๋ฅผ ์ฌ์ฉํ๋ ๊ฒ ์ด ๋ ๊ถ์ฅ๋๋ค. language script ์์์ language ์์ฑ์ "Javascript" ๊ฐ(๋์๋ฌธ์ ๊ตฌ๋ถ ์์)์ ์ง์ ํด์ผ ํด๊ณ type ์์์ ๊ฐ๊ณผ ์ผ๊ด๋์ด์ผ ํ๋ค. ํน๋ณํ ๋ชฉ์ ์ด ์์ง ์ ์ ํ language ์์ฑ์ ์๋ตํ ์ ์๋ค. name a ์์์ name ์์ฑ ๋ณด๋ค๋ id ์์ฑ์ ์ฌ์ฉํ๋ ๊ฒ์ด ๊ถ์ฅ๋๋ค. summary table ์์์ summary ์์ฑ์ HTML5์ ๋ค๋ฅธ ๋์์ ์ด์ฉํด์ ํ์ ํ๋ ๊ฒ์ด ๋ ๊ถ์ฅ๋๋ค. 2.2.7 ๋น ์ง ์์ basefont, big, center, font, s, strike, tt, u ์ด ์์๋ค์ ํํ์ ๊ด๋ จ๋ ์์์ด๊ธฐ ๋๋ฌธ์ HTML5์ ์ ์๋์ง ์์ ๋ค. frame, frameset, noframes ์ด ์์๋ค์ ์ฝํ ์ธ ๋ฅผ ๋ค๋น๊ฒ์ด์ ํ ๋ ์ฌ์ฉ์ฑ๊ณผ ์ ๊ทผ์ฑ์ ์ํฅ์ ๋ฏธ์น 51
52.
์ค์ HTML5 ๊ฐ์ด๋
๊ธฐ ๋๋ฌธ์ HTML5์ ์ ์๋์ง ์์๋ค. acronym ์ด ์์๋ ๋ง์ด ์ฌ์ฉ๋์ง ์๊ณ ์๊ณ ํผ๋๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง๊ธฐ ๋๋ฌธ์ ์ ์ ๋์ง ์์๋ค. ๋์ abbr ์์๋ฅผ ์ฌ์ฉํ ์ ์๋ค. applet ์ด ์์๋ object ์์๋ก ๋์ฒด๋์๋ค. isindex ์ด ์ค๋๋ ์์๋ ๋ค๋ฅธ ํผ ์ฝํธ๋กค ์์๋ก ๋์ฒด๋์๋ค. dir ์ด ์์๋ ul ์์๋ก ๋์ฒด๋์๋ค. 2.2.8 ๋น ์ง ์์ฑ HTML5์์ ์์ด์ง ์์ฑ ์์ฑ ์ ์ฉ ์์ rev, charset link, a shape, coords a longdesc img, iframe target link nohref area profile head version html name(id ์ฌ์ฉ ๊ถ์ฅ) img scheme meta archive, classid, codebase, codetype, declare, object standby valuetype, type param axis, abbr td, th 52
53.
์ค์ HTML5 ๊ฐ์ด๋
์์ฑ ์ ์ฉ ์์ scope td ํํ์ ๊ด๋ จ๋ ์์ด์ง ์์ฑ ์์ฑ ์ ์ฉ ์์ align caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr alink, link, text, vlink body background body bgcolor table, tr, td, th, body border table, object cellpadding, cellspacing table char, charoff col, colgroup, tbody, td, tfoot, th, thead, tr clear br compact dl, menu, ol, ul frame table frameborder iframe height td, th hspace, vspace img, object marginheight, marginwidth iframe noshade hr nowrap td, th rules table scrolling iframe size hr type li, ol, ul valign col, colgroup, tbody, td, tfoot, th, thead, tr width hr, table, td, th, col, colgroup, pre ํํ์ ๊ด๋ จ๋ ์์ฑ๋ค์ CSS๋ฅผ ํ์ฉํ์ฌ ๋์ฒด ํ๋ ๊ฒ์ด ๊ถ์ฅ๋๋ค. 53
54.
์ค์ HTML5 ๊ฐ์ด๋ 2.3
HTML5 ์์ 2.4.1 ๋ธ๋ก๊ทธ ์ํ ๋ธ๋ก๊ทธ ์ฌ์ดํธ์ ์ฒซํ์ด์ง ์์ ์ฝ๋์ด๋ค. ๊ฐ์ฅ ์ต์ ์ ์์ฑ๋ ๊ธ์ ๋ชฉ๋ก ๊ณผ ์ฌ์ดํธ ํค์ด, ํธํฐ๊ฐ ์๋ ๊ฐ๋จํ ํ์ด์ง์ด๋ค. <body> <header> <h1>HTML5 ์ ์ธ๊ณ๋ก!</h1> <nav> <ul> <li><a href="news.html">์์์</a></li> <li><a href="blog.html">๋ธ๋ก๊ทธ</a></li> <li><a href="example.html">์์ </a></li> </ul> </nav> </header> <div> <article> <header> <h1>HTML5 ์คํ ์ปจํผ๋ฐ์ค๊ฐ ์ด๋ฆฝ๋๋ค.</h1> </header> <p>2010 ๋ 7 ์ 2 ์ผ ...</p> <!-- ๋ธ๋ก๊ทธ ๊ธ ๋ด์ฉ --> <footer> <p> <time pubdate datetime="2010-06-20T14:36- 08:00">์ด์ </time> ์์ฑ ๋์์ </p> </footer> </article> <article> <!-- ์๋ต --> </article> <article> <!-- ์๋ต --> </article> </div> <footer> <p> <a href="about.html">์ด ๋ธ๋ก๊ทธ์ ๊ดํ์ฌ</a> | <a href="policy.html">๊ฐ์ธ์ ๋ณด ๋ณดํธ์ ์ฑ </a> | <a href="contact.html">์ฐ๋ฝ์ฒ</a> </p> </footer> </body> ๋ธ๋ก๊ทธ ๊ธ์ ๋ชจ์์ div ์์๋ก ๋ฌถ์ด์ฃผ์๋ค. ์ด๋ฌํ ๊ฒฝ์ฐ์ ์๋ก ์ถ๊ฐ๋ section ์์๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์๋ฐ, section ์์๋ ํ๋์ ์ฃผ์ ์ ๋ ํ ์น์ ์ ํ์ํ๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ ์ด ๊ฒฝ์ฐ์ ๊ฐ์ด ํ๋์ ์ฃผ์ ๊ฐ ์๋ ์ฌ ๋ฌ ์ฃผ์ ์ ๊ธ์ ๋จ์ํ ๋ฌถ์ ๊ฒฝ์ฐ์๋ ์ ์ ํ์ง ์๋ค. ์ด๋ ๊ฒ ๋จ์ํ ๊ทธ๋ฃจ ํ ๋ง์ ํ๊ธฐ ์ํ ๋ชฉ์ ์ผ๋ก๋ div ์์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ๋์ฑ ์ ์ ํ๋ค. 54
55.
์ค์ HTML5 ๊ฐ์ด๋
ํธํฐ์ ๋งํฌ ๋ชจ์์ nav ์์๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ๊ทธ๋ฅ p ์์๋ง์ ์ฌ์ฉํ ์๋ค. footer ์์๋ก ํ์ด์ง์ ๋ง๋ฌด๋ฆฌ ๋ถ๋ถ์ด๋ผ๋ ๊ฒ์ ๋ช ์ ํ๊ธฐ ๋๋ฌธ์ ๊ตณ์ด nav ์์๋ฅผ ์ฌ์ฉํ์ง ์์๋ ์๋ฏธ ์ ๋ฌ์ด ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ์ด๋ ๊ฒ ํํํ๋ ๊ฒ์ด ๊ฐ๋ฅํ๋ค. 2.3.2 ๋ธ๋ก๊ทธ ๊ธ ๋ณธ๋ฌธ ๋ธ๋ก๊ทธ ์ฌ์ดํธ์ ๋ณธ๋ฌธํ์ด์ง์ ๋ถ๋ฌธ ์์ญ ์์ ์ฝ๋์ด๋ค. ๋ ์ด์์์ด ๋ ์ผํ๋ค๋ฉด ์ด์ ์น์ ์ ๋ฉ์ธ ํ์ด์ง ์ฝ๋์ ์๋ ์ค์ div ์์ ๋์ ์ ์ ๋์ article ์์๊ฐ ๋ค์ด๊ฐ๊ฒ ๋ ๊ฒ์ด๋ค. <article> <header> <h1>HTML5 ์คํ ์ปจํผ๋ฐ์ค๊ฐ ์ด๋ฆฝ๋๋ค.</h1> </header> <p>2010 ๋ 7 ์ 2 ์ผ ...</p> <!-- ๋ธ๋ก๊ทธ ๊ธ ๋ด์ฉ --> <section> <h1>๋๊ธ</h1> <article> <footer><!-- footer ์์๊ฐ ์น์ ์ ์ฒ์์ ์์นํ ์๋ ์๋ค. --> <p>๊น๋ฏผ์๋์ ๋๊ธ</p> <p><time pubdate datetime="2010-06-20T19:10- 08:00"></time></p> </footer> <p>...๋๊ธ ๋ด์ฉ...</p> </article> <article> <footer> <p>์ด๋ช ํธ๋์ ๋๊ธ</p> <p><time pubdate datetime="2009-06-20T19:15- 08:00"></time></p> </footer> <p>...๋๊ธ ๋ด์ฉ...</p> </article> <!-- ์๋ต --> </section> <footer> <p> <time pubdate datetime="2010-06-20T14:36-08:00">์ด์ </time> ์์ฑ ๋์์ </p> </footer> </article> ๋ธ๋ก๊ทธ์ ๊ธ ๋ณธ๋ฌธ์ ๋ ๋ฆฝ์ ์ธ ๊ธ ์น์ ์ด๊ธฐ ๋๋ฌธ์ article ์์๋ฅผ ์ฌ์ฉํ ์๋ค. ์ ์ฒด ์น์ ์ ์ ๋ชฉ์ธ h1 ์์๋ฅผ header ์์๋ก ํ์ํ์๊ณ ๊ธ ๋ณธ๋ฌธ ๊ณผ ๋๊ธ ์น์ ๊ณผ ๊ธ์ ์์ฑ ์ผ์๋ฅผ ํ์ํ footer ์์๋ฅผ ์ฌ์ฉํ์๋ค. ํ๋์ ๋๊ธ ๋ํ ๋ ๋ฆฝ์ ์ธ ๊ธ ์น์ ์ด๊ธฐ ๋๋ฌธ์ article ์์๋ฅผ ์ฌ์ฉํ์ 55
56.
์ค์ HTML5 ๊ฐ์ด๋
๋ค. ์ด์๊ฐ์ด article ์์ ๋ ๋ค๋ฅธ article ์์๋ section ์์๋ฅผ ํฌํจํ๋ ๊ฒ์ด ๊ฐ๋ฅํ๊ณ ๋ฐ๋๋ก section ์์๋ ๋ ๋ค๋ฅธ section ์์๋ article ์ ์๋ฅผ ํฌํจํ ์ ์๋ค. ๋๊ธ์ article ์์๋ฅผ ๋ณด๋ฉด ํค๋ฉ๋ ์๊ณ footer ์์๊ฐ ๊ฐ์ฅ ์ฒ์์ ๋ ์จ ๊ฒ์ ๋ณผ ์ ์๋๋ฐ, ์ด์๊ฐ์ด ์ ์ ํ๋ค๊ณ ํ๋จ๋ ๊ฒฝ์ฐ footer ์์๋ฅผ ๊ฐ ์ฅ ๋จผ์ ํ์ํ ์๋ ์๋ค. ๋ฌผ๋ก header ์์๋ฅผ ์ฌ์ฉํ ์๋ ์์ง๋ง ์ด๋ ์ ์ ์ผ๋ก ์ ์์์ ํํ ์๋์ ๋ฌ๋ ค์๋ค. 2.3.3 ๋ธ๋ก๊ทธ ์ฌ์ด๋ ๋ฐ ๋ธ๋ก๊ทธ ์ฌ์ดํธ์ ๋ณธ๋ฌธ ์ ๋ถ๋ถ์ ๋ณธ๋ฌธ๊ณผ ์ง์ ์ ์ธ ๊ด๋ จ์ ์์ง๋ง ๋งํฌ๋ ๊ด๋ จ ์ ๋ณด๋ฅผ ํํํ๋ ๊ฒฝ์ฐ์ ๋ํ ์์ ์ฝ๋์ด๋ค. <aside> <nav> <h1>์ต๊ทผ๊ธ</h1> <ol reversed> <li><a href="conference.html">HTML5 ์คํ ์ปจํผ๋ฐ์ค๊ฐ ์ด๋ฆฝ๋๋ค.</a></li> <li><a href="accessibility.html">HTML5 ์ ์ ๊ทผ์ฑ</a></li> <li><a href="browser.html">HTML5 ๋ธ๋ผ์ฐ์ ์ง์ํํฉ์ ๋๋ค..</a></li> </ol> </nav> <nav> <h1>์ต๊ทผ ๋๊ธ</h1> <ol reversed> <li><a href="article/accessibility/cmt3384">ํ์ summary ์์ฑ๋ ๋ฐ๋ ๊ฒ ๊ฐ๋๋ผ๊ณ ์.</a></li> <li><a href="article/accessibility/cmt2452">longdesc ์์ฑ์ด ์์ด์ง ์ด์ ๊ฐ ๋ญ๊น์?</a></li> <li><a href="article/browser/cmt1562">๋ธ๋ผ์ฐ์ ์ง์ ํํฉ์ ๋ณด๋ ์ ๋ ์กฐ๊ธ์ฉ ์๋๋ฅผ ํด๋ด์ผ ๊ฒ ๋ค์.</a></li> </ol> </nav> <nav> <h1>์ด์ ๋ธ๋ก๊ทธ</h1> <ul> <li><a href="http://channy.creation.net/">Channy's Blog</a></li> <li><a href="http://hyeonseok.com/">Hyeonseok.com</a></li> <li><a href="http://naradesign.net/">NARADESIGN</a></li> <li><a href="http://firejune.com/">Firejune Blog</a></li> <li><a href="http://xguru.net/">Guru's Blog</a></li> <li><a href="http://jhyun.wordpress.com/">์๋์ด์ ์น ์ ๊ทผ์ฑ</a></li> </ul> </nav> 56
57.
์ค์ HTML5 ๊ฐ์ด๋
</aside> <aside> <section> <h1>๋ฏธํฌ๋ฐ์ด</h1> <blockquote cite="http://me2day.net/op****/2010/06/20#04:00:22"> ์ ์ ๋ง ์ค๋ ๊ธฐ๋ค๋ ธ์ด์! </blockquote> <blockquote cite=" http://me2day.net/html****/2010/06/20#03:58:22"> ๊ธฐ๋๋ฉ๋๋ค! </blockquote> <blockquote cite=" http://me2day.net/fx****/2010/06/20#03:57:22"> ๋นจ๋ฆฌ ์ ์ฒญํด์ผ ๊ฒ ๋ค์. </blockquote> </section> <section> <h1>ํธ์ํฐ</h1> <blockquote cite="http://twitter.com/sf****/status/17037990****"> RT @ie**** ๊ท๋ชจ๊ฐ ๊ฝค ํฐ HTML5 ํ์ฌ๊ฐ ์ด๋ฆฌ๋ค์. </blockquote> <blockquote cite="http://twitter.com/ie****/status/17037990****"> ๊ท๋ชจ๊ฐ ๊ฝค ํฐ HTML5 ํ์ฌ๊ฐ ์ด๋ฆฌ๋ค์. </blockquote> <blockquote cite="http://twitter.com/op****/status/1703799****"> ์ด๋ฐ ์ผ์ ์ด ๊ฒน์น๋ค์. </blockquote> </section> </aside> ๋ธ๋ก๊ทธ ๊ธ ๋ณธ๋ฌธ๊ณผ ์ง์ ์ ์ธ ๊ด๋ จ์ด ์๊ธฐ ๋๋ฌธ์ aside ์์๋ฅผ ์ด์ฉํ์ฌ ์ฝํ ์ธ ๋ฅผ ํํํ์๋ค. ๊ธ์ด๋ ๋๊ธ ๋งํฌ์ ๋ชจ์์ nav ์์๋ก ํํํ์๊ณ , SNS ์๋น์ค ์ฌ์ดํธ์ ๊ธ๋ค์ blockquote๋ฅผ ์ฌ์ฉํ์ฌ ๋ค๋ฅธ ๊ณณ์์ ๊ฐ์ ธ์จ ๊ธ์ด๋ผ๋ ๊ฒ์ ํํํ์๋ค. aside ์์๋ ์น์ ์ ๊ตฌ์ฑํ๋ ์์์ด๊ธฐ ๋๋ฌธ์ ํ์์ ๋จ์ผํ ์ฃผ์ ๋ฅผ ํํํ ํ์๊ฐ ์๋ค. ๋ค์ ๋งํด์ aside๋ฅผ ์ฌ์ฉํ ๋์๋ ๋จ์ํ ๋ ์ด์์ ์์์ ์ฌ์ด๋๋ฐ ์์ญ์ aside๋ก ํํํ๋ ๊ฒ์ด ์๋๋ผ ์ฃผ ์ฝํ ์ธ ์ ์ง์ ์ ์ผ๋ก ์ฐ๊ด์ด ์๋ ๋ด์ฉ์ aside๋ก ํํํ๋ ๊ฒ์ด๋ค. ๋ฐ๋ผ์ HTML5 ์ ์๋ฅผ ์ฌ์ฉํ ๋์๋ ์ฝํ ์ธ ์ ๋ด์ฉ์ ๋จผ์ ํ์ ํด์ผ ํ๋ค. ์ฌ์ด๋๋ฐ ์์ญ์ ์ฝํ ์ธ ๋ค์ด ์๋ก๋ค๋ฅธ ์ฃผ์ ๋ฅผ ๊ฐ์ง๊ณ ์๋ ๋ด์ฉ์ด์ด์ ์น์ ์ด ๋๋ ์ ธ์ผ ํ ํ์๊ฐ ์์ ๋๋ ์์ ๊ฐ์ด ๋๊ฐ์ aside ์์๋ฅผ ์ฌ์ฉํ ์๋ ์๋ค. ์ด aside ์์๋ค์ div ์์๋ก ๋ฌถ์ด์ ์ฌ์ด๋๋ฐ ์์ญ์ผ๋ก ๊ทธ๋ฃจํ์ ํด์ฃผ๊ฒ ๋ ๋ฉด ๋ ์ด์์์ผ ์ ์ํ ๋์ ํ์ฉํ ์ ์๋ค. 57
58.
์ค์ HTML5 ๊ฐ์ด๋
๊ตฌ์กฐ๋ฅผ ๊ตฌ์ฑํ๋ HTML5 ์์๋ค์ ์์น๋ ์์ญ์ ๊ธฐ์ค์ผ๋ก ์ฌ์ฉํ๋ ๊ฒ์ด ์๋๋ผ ํํํ๊ณ ์ ํ๋ ์ฝํ ์ธ ์ ๋ด์ฉ์ ๊ณ ๋ คํ์ฌ ์ ์ ํ ์์๋ฅผ ์ ํํ๊ณ ์ฌ์ฉํด์ผ ํ๋ค. 2.4 HTML 4.01๊ณผ์ ๋น๊ต ์์ HTML HTML 5 ์ค๋ช 4.01/XHTML 1.0 a strict yes ํ์ดํผ๋งํฌ abbr strict yes ์ฝ์ด acronym strict - ๋๋ฌธ์์ด address strict yes ์ฐ๋ฝ ์ ๋ณด applet transitional - ์๋ฐ ์ ํ๋ฆฟ area strict yes ์ด๋ฏธ์ง ๋งต์ ์์ญ article - yes ๋ ๋ฆฝ์ ์ธ ์น์ aside - yes ๋ณด์กฐ ์น์ audio - yes ์ค๋์ค b strict yes ๊ตต์ ํ ์คํธ base strict yes ๋ฌธ์์ ๊ธฐ๋ณธ URI basefont transitional - ๊ธฐ๋ณธ ํฐํธ ์คํ์ผ bdo strict yes ํ ์คํธ ๋ฐฉํฅ ์ค์ big strict - ํฐ ๊ธ์ blockquote strict yes ๊ธด ์ธ์ฉ body strict yes ๋ฌธ์ ๋ณธ๋ฌธ br strict yes ์ค๋ฐ๊ฟ button strict yes ๋ฒํผ ์ฝํธ๋กค canvas - yes ๋นํธ๋งต ์บ๋ฐ์ค caption strict yes ํ ์บก์ center transitional - ๊ฐ์ด๋ฐ ์ ๋ ฌ cite strict yes ์ธ์ฉ 58
Jetzt herunterladen