{"id":748,"date":"2017-01-31T11:17:41","date_gmt":"2017-01-31T20:17:41","guid":{"rendered":"\/blog\/?p=748"},"modified":"2023-09-21T09:37:48","modified_gmt":"2023-09-21T00:37:48","slug":"html5-%eb%82%98%eb%ac%b4%ec%9c%84%ed%82%a4","status":"publish","type":"post","link":"https:\/\/hasu0707.duckdns.org\/blog\/?p=748","title":{"rendered":"HTML5-\ub098\ubb34\uc704\ud0a4"},"content":{"rendered":"\n

\uc6d0\ubb38 : <\/span>https:\/\/namu.wiki\/w\/HTML5<\/span><\/a><\/p>\r\n


<\/p>\r\n


<\/p>\r\n

1.<\/span><\/a> <\/span>\uac1c\uc694<\/span>[\ud3b8\uc9d1]<\/span><\/a><\/span><\/h2>

2008\ub144<\/span><\/a> <\/span>1\uc6d4<\/span><\/a>\ubd80\ud130 \ub17c\uc758\uac00 \uc2dc\uc791\ub41c \ubc84\uc804\uc73c\ub85c 2014\ub144 10\uc6d4 28\uc77c \ud655\uc815\ub41c<\/span> <\/span>HTML<\/span><\/a>\uc758 \ucd5c\uc2e0 \ud45c\uc900\uc774\ub2e4. XHTML\uc5d0\uc11c \ub2e4\uc2dc HTML\ub85c \ud68c\uadc0\ud558\uac8c \ub418\uc5c8\ub2e4. \ub530\ub77c\uc11c HTML5\ub294 XHTML\uc758 \uc0c1\uc704 \ubc84\uc804\uc774 \uc544\ub2c8\ub77c, HTML4.01\uc758 \uc0c1\uc704 \ubc84\uc804\uc774\ub2e4.<\/span> <\/span>\ud50c\ub798\uc2dc<\/span><\/a>\ub098<\/span> <\/span>\uc2e4\ubc84\ub77c\uc774\ud2b8<\/span><\/a> <\/span>\ub4f1\uc758<\/span> <\/span>\ud50c\ub7ec\uadf8\uc778<\/span><\/a>\uc744 \uae30\ubc18\uc73c\ub85c \ud558\ub294<\/span> <\/span>\uc751\uc6a9 \ud504\ub85c\uadf8\ub7a8<\/span><\/a>\uc5d0 \ub300\ud55c \ud544\uc694\uc131\uc744 \uc904\uc774\ub294 \uac83\uc5d0 \ucd08\uc810\uc744 \ub9de\ucd94\uace0 \uc788\ub2e4. \uc774\ub7ec\ud55c \ubc29\ud5a5\uc131 \ub355\ubd84\uc5d0<\/span> <\/span>\ud55c\uad6d<\/span><\/a>\uc5d0\uc11c\ub294<\/span> <\/span>\uc6f9\ud45c\uc900<\/span><\/a>\uc5d0 \ub300\ud55c \ubb38\uc81c\uac00 \uc774\uc288\ub85c \ub5a0\uc624\ub974\uba74\uc11c \ud568\uaed8 \uc8fc\ubaa9\uc744 \ubc1b\uae30\ub3c4 \ud558\uc600\ub2e4.<\/span>

2014\ub144<\/span><\/a> <\/span>10\uc6d4 28\uc77c, HTML5\uc758 \ucd5c\uc885 \uad8c\uace0\uc548\uc774 \ud655\uc815\ub418\uc5b4 \ucd5c\uc2e0 \ud45c\uc900\uc73c\ub85c \uc9c0\uc815\ub418\uc5c8\ub2e4.<\/span>
<\/p>\r\n

2.<\/span><\/a> <\/span>\uc124\uba85<\/span>[\ud3b8\uc9d1]<\/span><\/a><\/span><\/h2>

HTML5\ub77c\uace0 \ubd88\ub9ac\uc6b0\ub294 \uac1c\ub150\uc740 \ub2e8\uc21c\ud788 \uc6f9 \ubb38\uc11c\ub97c \uc791\uc131\ud560 \ub54c \uc0ac\uc6a9\ub418\ub294 \ub9c8\ud06c\uc5c5 \ub7ad\uadc0\uc9c0(HTML)\uc758 \ubb38\ubc95\uc801 (syntactic) \ubc84\uc804 \ubfd0\ub9cc \uc544\ub2c8\ub77c \uc0c8\ub85c\uc6b4 DOM API \uc2a4\ud399\uc744 \ud3ec\ud568\ud558\ub294 \uac83\uc774\ub2e4.<\/span>

\ubb38\ubc95\uba74\uc5d0\uc11c\ub294 \uc774\uc804\uc5d0 \ube44\ud574 \uc0c1\ub2f9\ud788 \uac04\uacb0\ud558\uace0 \uba85\ud655\ud574 \uc84c\ub294\ub370, \ub610\ud55c \uc774\uc804\uc5d0\ub294<\/span> <\/span>JavaScript<\/span><\/a>\ub97c \uc0ac\uc6a9\ud574\uc11c \uc5c4\uccad\ub098\uac8c \uae34 \ucf54\ub4dc\ub97c \uc368\uc11c \uac04\uc811\uc801\uc73c\ub85c \uad6c\ud604\ud574\uc57c \ud588\ub358 \uae30\ub2a5\ub4e4\uc774 \uc815\uc2dd \uc5d8\ub9ac\uba3c\ud2b8\ub85c \ud3b8\uc785\ub428\uc73c\ub85c\uc11c (\uc608\ub97c \ub4e4\uc5b4<\/span> <\/span><video><\/span><\/code> <\/span>) \uac04\ub2e8\ud558\uac8c \uad6c\ud604\ud574\ub0bc \uc218 \uc788\uac8c \ub418\uc5c8\uace0, \ubd88\ud544\uc694\ud558\uac8c \uae38\uac8c \uc801\uc5b4\uc57c\ud588\ub358 \uc774\uc804 \ubc84\uc804\uc5d0\uc11c \uaf2d \ud544\uc694\ud55c \ubd80\ubd84\ub9cc \ub0a8\uae30\ub3c4\ub85d \ubc14\ub00c\ub294 \ub4f1 \uc5ec\ub7ec\uac00\uc9c0 \uac1c\uc120\uc810\uc774 \uc0dd\uacbc\ub2e4.<\/span>

API\uba74\uc5d0\uc11c, HTML5\uc5d0\uc11c\ub294 \ube44\ub514\uc624 \ubc0f \uc624\ub514\uc624\uc640 \uac19\uc740 \ubbf8\ub514\uc5b4 \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 \ub300\ud55c API\ubfd0\ub97c \ud3ec\ud568\ud574 \uc624\ud504\ub77c\uc778 \uc6f9 \uc571 \uad6c\ud604, \ubb38\uc11c \ud3b8\uc9d1 \ub4f1\uacfc \uac19\uc740 \ub2e4\uc591\ud55c \uae30\ub2a5\uc5d0 \ub300\ud55c API\uac00 \ucd94\uac00\ub418\uc5c8\uc73c\uba70, WHATWG\uc5d0 \uc758\ud574 Geolocation, Web SQL, File API, Audio API\ub4f1\uc774 \"Living standard\"\ub85c \uad8c\uace0\ub418\uace0 \uc788\ub2e4.<\/span> <\/span> <\/span>HTML5\uc5d0\uc11c\uc758 \ubcc0\ud654 (W3C)<\/span><\/a> <\/span> <\/span>WHATWG \uc2a4\ud399<\/span><\/a> <\/span>\uc774\ub97c \ud1b5\ud574 \uc774\uc804\uc5d0\ub294<\/span> <\/span>\ud50c\ub798\uc2dc<\/span><\/a>,<\/span> <\/span>\uc2e4\ubc84\ub77c\uc774\ud2b8<\/span><\/a> <\/span>\ub4f1\uc758 \uc678\ubd80 \ud50c\ub7ec\uadf8\uc778\uc744 \ud1b5\ud574\uc11c\ub9cc \uc9c0\uc6d0\ud560 \uc218 \uc788\ub358 \ud074\ub77c\uc774\uc5b8\ud2b8 \uc0ac\uc774\ub4dc\uc5d0\uc11c\uc758 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uc704\ud55c \uae30\ub2a5\ub4e4\uc758 \uc0c1\ub2f9\uc218\ub97c \ube0c\ub77c\uc6b0\uc800 \uc790\uccb4\uc758 \uae30\ub2a5\uc744 \uc774\uc6a9\ud574 \uad6c\ud604\ud560 \uc218 \uc788\uac8c \ub418\uc5c8\ub2e4.<\/span>

\uc774\ub7f0 API\ub4e4\uc740 \uc0ac\uc2e4\uc0c1\uc758 \ube0c\ub77c\uc6b0\uc800 \ud45c\uc900 \uc2a4\ud06c\ub9bd\ud2b8 \uc5b8\uc5b4\uc778<\/span> <\/span>JavaScript<\/span><\/a> <\/span>(\uc774\ub860\uc801\uc73c\ub85c\ub294 \ub2e4\ub978 \uc2a4\ud06c\ub9bd\ud2b8 \uc5b8\uc5b4\ub77c\ub3c4 \uad00\uacc4\uc5c6\ub2e4. \ube0c\ub77c\uc6b0\uc800\uac00 \uc9c0\uc6d0\ud55c\ub2e4\uba74 \ub9d0\uc774\uc9c0\ub9cc..) \ub97c \ud1b5\ud574 \uc774\uc6a9\ud560 \uc218 \uc788\ub2e4. \uc774 \ub54c\ubb38\uc5d0 HTML5\ub294 \ub9c8\ud06c\uc5c5 \uc5b8\uc5b4\ub77c\uace0\ub9cc \ubcf4\uae30\ub294 \ub354 \uc774\uc0c1 \ud798\ub4e4\uc5b4\uc84c\ub2e4. \ub2e8, HTML5 \uadf8 \uc790\uccb4\ub9cc\uc73c\ub85c \ubaa8\ub4e0 \uac83\uc774 \ub41c\ub2e4\ub294 \uc624\ud574\ub294 \uc0bc\uac00\uc790. HTML5 \uadf8 \uc790\uccb4\uac00 \uc81c\uacf5\ud558\ub294 \uac83\uc740 \ubb38\uc11c \uad6c\uc870\uc640 API\uc774\uace0, \uc774\uac78 API\uc640 \uc5f0\uacb0\uc2dc\ucf1c \uc2e4\uc81c \ub3d9\uc791\uc744 \uad6c\ud604\ud558\ub294 \uac83\uc740 JavaScript\ub77c\ub294 \uc5b8\uc5b4\ub85c, \uc774 \ub458\uc740 \uc5c4\uc5f0\ud788 \ubcc4\uac1c\uc758 \uac83\uc774\ub2e4. HTML5\uc640 JavaScript\uac00 \uc11c\ub85c \uc5f0\uacb0\ub418\uc5b4 \ub3cc\uc544\uac00\ub294 \uac1c\ub150\uc774\uc9c0, HTML5 \uc548\uc5d0 JavaScript\uac00 \ud3ec\ud568\ub418\ub294 \uac83\uc774 \uc808\ub300\ub85c \uc544\ub2c8\ub2e4. \ub2e8\uc801\uc73c\ub85c, JavaScript\ub294 ECMAScript\ub77c\ub294 \ud45c\uc900\uc548\uc774 \ub530\ub85c \ub098\uc624\ub294 \ubcc4\ub3c4\uc758<\/span> <\/span>\ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4<\/span><\/a>\uc774\ub2e4.<\/span>

\uc778\ud130\ub137 \uc775\uc2a4\ud50c\ub85c\ub7ec<\/span><\/a>\ub294 9\ubd80\ud130 \uc77c\ubd80 \ud0dc\uadf8\ub97c \uc9c0\uc6d0\ud558\uae30 \uc2dc\uc791\ud588\uace0, 10\uc5d0\uc11c \uac70\uc758 \ub300\ubd80\ubd84 \uc9c0\uc6d0\ud55c\ub2e4. 8 \uc774\ud558\ub97c \uc9c0\uc6d0\ud558\ub824\uba74 html5shiv.js \ub77c\ub294 JavaScript\ub97c \uc774\uc6a9\ud558\uba74 \ub41c\ub2e4. \ub2e8 \uc774 \uacbd\uc6b0 JavaScript\ub97c \uc0ac\uc6a9\ud558\uae30\uc5d0 \ud398\uc774\uc9c0 \ub80c\ub354\ub9c1 \uc18d\ub3c4\uac00 \ub290\ub824\uc9c4\ub2e4\ub294 \ub2e8\uc810\uc774 \uc788\ub2e4. \uadf8\ub9ac\uace0 \uc704\uc758 \ube0c\ub77c\uc6b0\uc800 API\ub97c \uc774\uc6a9\ud558\ub294 \uae30\ub2a5\ub4e4\uc740 \uc0ac\uc6a9\uc774 \ubd88\uac00\ub2a5\ud558\ub2e4. \uc774 JavaScript\uac00 \ub300\uccb4\ud558\ub294 \uac83\uc740 HTML5\uc758 \ub9c8\ud06c\uc5c5 \ubfd0\uc774\uae30 \ub54c\ubb38\uc774\ub2e4.<\/span> <\/span>
<\/p>\r\n

3.<\/span><\/a> <\/span>\ubcc0\uacbd\uc0ac\ud56d<\/span>[\ud3b8\uc9d1]<\/span><\/a><\/span><\/h2>

HTML5\ub85c \uc811\uc5b4\ub4e4\uc5b4 HTML\uc774 \ub2e4\uc591\ud55c \uae30\ub2a5\uc744 \ud3ec\ud568\ud558\uba74\uc11c \uc0c8\ub86d\uac8c \ucd94\uac00\ub41c \ud0dc\uadf8\ub4e4\uacfc \uc758\ubbf8\uac00 \ubcc0\uacbd\ub41c \ud0dc\uadf8\ub4e4\uc774 \uc5ec\ub7ff \uc788\ub2e4.<\/span>
<\/p>\r\n

3.1.<\/span><\/a> <\/span>\uc120\uc5b8\ubb38<\/span><\/a>[\ud3b8\uc9d1]<\/span><\/a><\/span><\/h3>

\uc774\uc804 \ubc84\uc804\uc758 HTML\uacfc XHTML\uc774 \uc720\ud6a8\uc131 \uac80\uc0ac\ub97c \uc704\ud55c \uc120\uc5b8\ubb38\uc774 \uc4f8\ub370\uc5c6\uc774 \uae38\uc5c8\ub358 \ubc18\uba74, HTML5\uc5d0\uc11c\ub294 \uac04\ub2e8\ud558\uac8c \uba87 \uc790\ub9cc \uc801\uc73c\uba74 \ub41c\ub2e4.<\/span>

<\/p>\r\n

<!DOCTYPE html><\/span><\/code><\/pre>


\ub300\uc18c\ubb38\uc790\ub97c \uad6c\ubd84\ud558\uc9c0\ub294 \uc54a\ub294\ub2e4.<\/span><\/p>\r\n
<\/p>\r\n
3.2.<\/span><\/a> <\/span>\uc2dc\ub9e8\ud2f1 \ud0dc\uadf8<\/span>[\ud3b8\uc9d1]<\/span><\/a><\/span><\/h3>
HTML5\uc5d0\uc11c\ub294<\/span> <\/span>\uc2dc\ub9e8\ud2f1 \uc6f9<\/span><\/a>\uc744 \uc911\uc694\uc2dc\ud558\uc5ec \uc5ec\ub7ec\uac00\uc9c0 \ud0dc\uadf8\ub97c \uc0c8\ub86d\uac8c \ub9cc\ub4e4\uc5c8\ub2e4. \uc774\ub7ec\ud55c \ud0dc\uadf8\ub4e4\uc744<\/span> <\/span>\uc2dc\ub9e8\ud2f1 \ud0dc\uadf8<\/span><\/span>\ub77c\uace0 \ud55c\ub2e4.<\/span>

\uc0ac\uc2e4 \uae30\uc874 HTML \ud45c\uc900\uc5d0\uc11c\ub3c4 \uac01 \ud0dc\uadf8\ub294 \ub300\ubd80\ubd84 \uc758\ubbf8\ub97c \uac00\uc9c0\uace0 \uc788\uc5c8\ub2e4. \uadf8\ub7ec\ub098 \uc758\ubbf8\ub97c \uac00\uc9c4 \ud0dc\uadf8\uac00 \ubd80\uc871\ud55c \ud3b8\uc774\uc5c8\uace0, \uc758\ubbf8\uac00 \ubd88\uba85\ud655\ud55c \ud0dc\uadf8\ub098 \uc2dc\ub300\uc758 \ud750\ub984\uc5d0 \ub4a4\uccd0\uc9c4 \ud0dc\uadf8\ub3c4 \uc788\uc5c8\ub2e4. 2000\ub144\ub300 \ucd08\ubc18\uae4c\uc9c0\ub9cc \ud574\ub3c4 \ud14c\uc774\ube14 \uad00\ub828 \ud0dc\uadf8\ub85c \uc6f9 \ud398\uc774\uc9c0\ub97c \uc5ec\ub7ec \uad6c\ud68d\uc73c\ub85c \ub098\ub220\uc11c \ub808\uc774\uc544\uc6c3\uc744 \ub9cc\ub4dc\ub294 \ubc29\uc2dd\uc778<\/span> <\/span>\ud14c\uc774\ube14 \ub808\uc774\uc544\uc6c3(Table Layout)<\/span>\uc774 \uc77c\ubc18\ud654 \ub418\uc5b4 \uc788\uc5c8\ub2e4. \ub2f9\uc2dc CSS\uac00 \ub098\uc628\uc9c0 \uc5bc\ub9c8 \ub418\uc9c0 \uc54a\uc740\ub370\ub2e4 HTML\uc758 \uae30\ub2a5\uc774 \ubd80\uc871\ud560 \ub54c \ub808\uc774\uc544\uc6c3\uc744 \uc9dc\ub358 \ubc29\uc2dd\uc774 \uadf8\ub300\ub85c \uc774\uc5b4\uc9c4 \uac83\uc774 \uc6d0\uc778\uc774\uc5c8\ub2e4. \uc774\uc5d0 2000\ub144\ub300 \ucd08\ubc18\ubd80\ud130 \uc2dc\ub9e8\ud2f1 \uc6f9\uc774 \uc911\uc2dc\ub418\uba74\uc11c HTML\uc740 \ubb38\uc11c \uad6c\uc870\uc640 \uc758\ubbf8, CSS\ub294 \ub514\uc790\uc778\uc73c\ub85c \ud655\uc5f0\ud788 \ubd84\ub9ac\ub418\uace0, \ud14c\uc774\ube14 \ub808\uc774\uc544\uc6c3\uc740 \ubc15\uc2a4 \ubaa8\ub378 \ub808\uc774\uc544\uc6c3\uc73c\ub85c \ubcc0\ud654\ub418\uc5c8\ub2e4. \uadf8\ub7ec\ub098 \ub2f9\uc2dc \ud45c\uc900\uc774\uc5c8\ub358 HTML 4.01\uacfc XHTML 1.0\uc73c\ub85c\ub294 \uc2dc\ub9e8\ud2f1 \uc6f9\uc744 \uad6c\ud604\ud558\uae30\uac00 \ub09c\uc810\uc774 \uc788\uc5c8\ub2e4. \ubb38\uc11c \ub0b4\uc5d0 \ub4e4\uc5b4\uac00\ub294 \ubaa9\ub85d\uc774\ub098 \uac15\uc870 \ub4f1\uc758 \ubbf8\uc2dc\uc801\uc778 \ubd80\ubd84\uc5d0\ub294 \uc758\ubbf8\uac00 \uc788\uc5c8\uc9c0\ub9cc, \ub808\uc774\uc544\uc6c3\uc5d0\uc11c \uc774\uac8c \uba54\ub274\uc778\uc9c0 \uba54\uc778 \ucee8\ud150\uce20\uc778\uc9c0 \uc11c\ube0c \ucee8\ud150\uce20\uc778\uc9c0 \ubd84\ub958\ud560 \uc218 \uc788\ub294 \ud0dc\uadf8\ub294 \uc5c6\uc5c8\ub2e4. \uc774 \ub54c\ubb38\uc5d0 \ub808\uc774\uc544\uc6c3\uc5d0\uc11c \uac01 \uc601\uc5ed\uc744 \uc9c0\uc815\ud558\ub294 \ud0dc\uadf8\ub294<\/span> <\/span><div><\/span><\/code>\uac00 \ub300\ub2e8\ud788 \ub9ce\uc774 \uc4f0\uc600\uace0, \uc774 \ub2f9\uc2dc \ubc15\uc2a4 \ubaa8\ub378\uc744 \uc801\uc6a9\ud55c HTML \ubb38\uc11c\ub294 \uc218\uc2ed \uac1c\ub85c \uc911\ucca9\ub41c \ubcf5\uc7a1\ud55c<\/span> <\/span><div><\/span><\/code> <\/span>\uc9c0\uc625(...)\uc778 \uacbd\uc6b0\uac00 \ub9ce\uc558\ub2e4<\/span><\/span>[1]<\/span><\/a>. \uc774 \ub54c\ubb38\uc5d0 HTML5\uc5d0\uc11c \uad00\ub828 \ud0dc\uadf8\ub97c \ucd94\uac00\ud55c \uac83\uc774\ub2e4.<\/span>

\uc2dc\ub9e8\ud2f1 \ud0dc\uadf8\ub97c \uc0ac\uc6a9\ud55c \ub808\uc774\uc544\uc6c3\uc740 \ucef4\ud4e8\ud130\uac00 \uc77d\uc5b4\ub0bc \uc218 \uc788\ub2e4. \uc774\uac8c \ubb34\uc2a8 \ub9d0\uc774\ub0d0\uba74, \uac80\uc0c9 \uc0ac\uc774\ud2b8\uc5d0\uc11c \uc5b4\ub514\uac00 \ub0b4\uc6a9\uc778\uc9c0\ub97c \uc54c \uc218 \uc788\uc5b4\uc11c \uac80\uc0c9 \ub178\ucd9c\uc744 \uc6a9\uc774\ud558\uac8c\ud558\uace0,<\/span> <\/span>\uad81\uadf9\uc801\uc73c\ub85c<\/span> <\/span>\ub208\uc73c\ub85c \ud398\uc774\uc9c0\ub97c \ubcfc \uc218 \uc5c6\ub294 \uc0ac\ub78c\ub4e4<\/span><\/a>\uc5d0\uac8c \uc0ac\uc774\ud2b8\uc758 \uc5b4\ub514\uac00 \ubcf8\ubb38\uc778\uc9c0 \uc544\ub2cc\uc9c0 \uc54c\ub824\uc904 \uc218 \uc788\ub2e4\ub294 \uc7a5\uc810\uc774 \uc788\ub2e4.<\/span><\/span>

\uae30\uc874 \ud0dc\uadf8\ub294 \uc77c\ubd80\ubd84\uc744 \uc81c\uc678\ud558\uace0\ub294 HTML 4.01\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub358 \ud0dc\uadf8\uac00 \uac70\uc758 \uadf8\ub300\ub85c \uc0ac\uc6a9\ub41c\ub2e4. \uc6d0\ub798 HTML\uc744 \ud45c\uc900\uc5d0 \ub9de\uac8c \uc0ac\uc6a9\ud588\ub2e4\uba74 \ud070 \uc5b4\ub824\uc6c0 \uc5c6\uc774 HTML5\uc5d0\ub3c4 \uc801\uc751\ud560 \uc218 \uc788\ub2e4.<\/span>
<\/p>\r\n
3.2.1.<\/span><\/a> <\/span>\ub808\uc774\uc544\uc6c3 \ud0dc\uadf8<\/span>[\ud3b8\uc9d1]<\/span><\/a><\/span><\/h4>