SNS HTML HTML HTML 4 01 HTML HTML5 HTML5 X(Active-X) (Flash)(Silverlight) FX(JAVA FX) P R E F A C E HTML5 2017 HTML53 HTML5 HTML5 HTML5 HTML5 HTML5? 3

P R E F A C E HTML5 HTML5 (User Agent) UA HTML5 ( ) ( ) 38 0 2074 0 canary(64-bit) /36 0 1985 18 beta-m Nightly 33 0a1 / 30 23 0 1522 10 11 0 9600 17126 (Notepad++) http //notepad-plus-plus org 4 - developer mozilla org - msdn microsoft com HTML5 ROCKS - html5rocks com

W3schools com Korea HTML5 - www koreahtml5 kr W3C HTML5 KIG( ) HTML5 HTML5 W3C HTML5 KIG ( ) 2014 7 P R E F A C E 5

C O N T E N T S CHAPTER CHAPTER HTML5 API 16 HTML5 18 HTML5 (Preview) 22 HTML5 25 HTML5 27 HTML5 33 HTML5 36 HTML5 (Element) 41 HTML5 45 50 51 2.1 DIV 52 2.2 56 73 76 (Interactive) 85 93 CHAPTER 6 (Form) 96

CHAPTER 1.1 96 1.2 HTML5 99 1.3 HTML5 106 1.4 HTML4 107 1.5 HTM5 108 1.6 HTML5Input 118 (Drag and Drop) 129 2.1 129 2.2 131 2.3 (Drag Data Store) 132 2.4(DataTransfer) 133 2.5 135 140 3.1 141 3.2 API 144 CSS3 150 161 2.1 161 2.2 (Simple Selector) 164 176 3.1 (Pseudo-classes) 179 3.2(Pseudo-elements) 196 C O N T E N T S 201 211 CHAPTER 214 1.1 215 1.2 222 233 2.1 233 7

2.2 248 2.3 262 C O N T E N T S CHAPTER CHAPTER CSS Writing Mode Level 3 274 1.1 274 1.2 276 1.3 281 1.4 - (Inline-level) 284 1.5 (Abstract Box Terminology) 286 293 2.1 294 2.2 298 2.3 302 2.4 307 2.5 311 CSS Text Decoration Module Level 3 314 3.1 ( ) 314 3.2 320 3.3 324 CSS328 1.1 CSS 329 1.2 (display ) 332 1.3 333 1.4 335 1.5 ( ) 338 1.6 339 1.7 (floating boxes) 340 1.8 (Overflow) 346 1.9 348 1.10 349 350 8 2.1 351

CHAPTER 2.2 352 2.3 354 2.4 355 356 3.1 (Background) 356 3.2 (Borders) 368 3.3 (Corners) 372 3.4 374 3.5 381 (Flexible Box Layout) 384 1.1 384 1.2 386 1.3 387 1.4 391 1.5 394 1.6 397 (Grid Layout) 399 2.1 400 2.2 403 2.3 406 2.4 407 2.5 417 2.6 423 2.7 425 C O N T E N T S (User Interface) 426 3.1 (Element Icons) 426 3.2 428 3.3 429 3.4 (Resizing) (Overflow) 433 3.5 436 CHAPTER (Multi-column Layout) 444 9

C O N T E N T S 1.1 444 1.2 446 1.3 449 1.4 450 1.5 451 (Transform) 452 2.1 453 2.2 453 2.3 459 (Transition) 466 3.1 467 3.2 468 3.3 471 - (Marquee) 473 4.1 473 4.2 474 4.3 476 (Animation) 478 5.1 478 5.2 480 (Media Query) 486 6.1 486 6.2 487 6.3 488 6.4 (Media Features) 489 CHAPTER (Canvas)500 1.1 501 1.2 504 1.3 505 1.4 507 1.5 508 510 10 513

CHAPTER CHAPTER 3.1 513 3.2 516 3.3 518 3.4 519 3.5 523 3.6 527 534 1.1 /- arc() 534 1.2 - arcto() 538 (Bezier Curve) 543 2.1 2 544 2.2 3 ( ) 546 550 3.1 (Fill Style) 550 3.2 (Winding Rule) 553 3.3(Gradient) 558 3.4 (Pattern) 565 3.5 568 572 1.1 572 1.2 576 C O N T E N T S 588 2.1 589 2.2 591 596 3.1 596 3.2 603 3.3 610 613 4.1 613 11

4.2 615 4.3 617 C O N T E N T S CHAPTER CHAPTER (Hit Regions) 620 626 1.1 627 1.2 (MediaController) 630 1.3 (TextTrack) 633 1.4 638 1.5 641 643 2.1 - audio 643 2.3 - source 646 2.3 650 655 3.1 - video 655 3.2 658 3.2 (track) 662 670 1.1 670 1.2 673 1.3 676 API 679 2.1 (Blob) 680 2.2 (File) 682 2.3(File Reader) 684 2.4 URL 687 689 12 3.1 690 3.2 691

3.3 692 3.4 695 CHAPTER 702 1.1 703 1.2(Dedicated Worker) 704 1.3(Shared Worker) 708 1.4 711 1.5API 713 715 2.1 715 2.2 717 2.3API 718 Geolocation 724 3.1 725 3.2 Geolocation API 727 3.3 Google Maps API v3 732 737 C O N T E N T S 13

01 HTML5 Key Point

HTML5 01 HTML5 W3C(World Wide Web Consortium) HTML WHATWG(Web Hypertext Application Technology Working Group) 1 0 HTML5 X(Active-X) (Flash)(Silverlight) FX(JAVA FX) HTML5 HTML 4 01 XHTML 1 0 DOM(Document Object Model) Level 2 CSS3(Cascading Style Sheets 3) JavaScript API(Application Programming Interface) ((APP) (Native) ) 2014 (12 ) (Apple) (MS) (Google) (Facebook) IT HTML5 HTML5 HTML5 16

01 HTML5 API 2 Canvas API API (Offline)API - - (Drag-and-drop) API (Web Storage) API API (Geo-Location) API API (WebSocket) API 17

HTML HTML5 HTML5 2 http //www w3 org/html/wg/drafts/html/cr/ HTML5- (Plug-in) HTML5 API (Range) Email ( (Web Form) ) <video> <audio> - HTML5 - (Video) ( ) (Audio) (MPEG4 VP8 WebM H 264 ) (Streaming) (Immediate mode) 2 API (Canvas) HTML5 XML 2 ( ) SVG XML (Scalable Vector Graphic) APIGeolocation API APIIP (Geolocation) Address Wifi Bluetooth MAC Address GSM CDMA - (Cell-tower) 18

19 01 (Offline Web Application) HTML JavaScript CSS (Cache) (Refresh) 5M ( ) (Web Database) SQL (W3C ) SQL SQL HTML (deprecated) W3C Note Track (Local Storage) (Cookie) ( 4KB Request ) (Web Socket) API (Connectless) HTML TCP HTTP (Web Worker) (Thread) API - - XmlHttpRequest I O sub-workers (Global) (Function) - (Timeout) (Interval) importscripts() (Message) HTML " (Semantic Web)"HTML W3C XHTML HTML5

( ) - (Semanteme) ( 1998 ) - http ko wikipedia org wiki _??? (TV ) (Global Standard) HTML5 20

01 ( ) HTML ( ) HTML DHTML Ajax Rich Internet Application Semantic Web 21

HTML5 HTML5 HTML5 WHATWG HTML5 HTML5 HTML5 2014 5 HTML5 HTML5 37 0 1995 1 507/555 HTML5 555 507 HTML5 22

01 HTML5 HTML5 Test - http html5test com HTML5 W3C 23

HTML5 Doctor - http html5doctor com HTML5 - http //webstandards or kr/html5 HTML5 - http //www sqler com/phtml5 HTML5 Demos and Examples - http //html5demos com HTML5 Rocks - http http //www html5rocks com HTML5 Gallery - http //html5gallery com/ Apple HTML5 Showcase - http //www apple com/html5/showcase/gallery/ 24

01 W3C HTML 4 01 (1999 ) XHTML 1 0 (2000 ) XHTML 2 0 (2009 ) 2004 6 (Opera)(lan Hickson) (Mozilla) (David Baron) (David Hyatt) W3C WHATWG HTML W3C HTML5W3C HTML5 Plan 2014(http //dev w3 org/html5/decision-policy/html5-2014-plan html) 2014 HTML 5 0 2016 HTML 5 1 2004 06 WHATWG 2007 05 HTML5 Web Forms 2 0-2007 11 HTML5 2010 01 HTML5 Last Call Working Draft 2010 08 HTML5 Working Draft - HTML 5 0-2012 4 - CR(Candidate Recommendation) - 2014 3 - LC(Last Call Working Draft) - 2014 4 - PR(Proposed Recommendation) - 2014 4 (12 ) - Rec(Recommendation) HTML 5 1-2012 4 - FPWD(First publication Working Draft) - 2014 3 - LC(Last Call Working Draft) - 2015 1 - CR(Candidate Recommendation) - 2016 4 - Rec(Recommendation) WHATWG Community - http //www whatwg org/ W3C Web Site - http //www w3 org/ W3C Process Document - http //www w3 org/consortium/process-20010719/tr html W3C - http //www w3c or kr/ 25

HTML 5 0 HTML 5 1W3C HTML5 HTML 5 1 HTML 5 0 ( W3C ) HTML5 (Ian Hickson) 2012 4 2004 2006 W3C HTML5 W3C WHATWG W3C HTML W G W3C WHATWG HTML(Living HTML Trunk ) W3C ( Branch ) 2012 2013 2014 2015 2016 Living HTML HTML 5 0 CR start CR LC Rec HTML 5 1 FPWD LC+CR CR Rec HTML 5 2 FPWD LC+CR CR HTML 6 0 FPWD LC+CR HTML 6 1 FPWD HTML 6 2 FPWD HTML 5 1 2014 5 0( ) (Last Call) HTML 5 1 HTML6 7 Microdata 2D Canvas HTML5HTML next 5 1 http blog creation net 533 W3C Living HTML WHATWG HTML 5 xhtml6 HTML7 26

01 HTML5 MS ( CPU ) " " (http www apple com hotnews thoughts-on-flash ) 2009 Google I O HTML5 Gears HTML5 - http www engadget com 2009 12 01 google-halts-development-of-gears-makes-room-for-html-5 HTML5 (www service com m service com t service com ) ( ) HTML5 8 x HTML5 ( HTML5 ) ios 27

- http www visionmobile com product developer-economics-q1-2014-statedeveloper-nation - http www zdnet co kr news news_view asp artice_id=20140208093727 HTML5 ios 2014 1 6 HTML5 OS 28

01 OS HTML5 HTML5 37 15 HTML5 HTML5 ios 19 HTML5 2014 1 2020 (IoT Internet of Things) 260 2009 930 IoT 3 1 9 "2020 260 " IOT "IoT " "2020 PC 73 IoT 260 " IoTIoT ' (ghost)' IoT IoT ' ' IoT ZDNet Korea(http www zdnet co kr news news_view asp artice_id=20131216153337) 29

CES2014 2014 CES < > 10 2 PC < > BMW ( ) < > LG CES2014 LG< > 3 LG(Home Chat) 30

01 (Line) ( ) < > OS (Smart Home) 31

[ ]2014 3 ( ) LG SKT KT LG U+ SDS 13 TTA ETRI KCA KETI HTML5 2014 ICT NIPASK C&C 2013 2014 ICT (NIPA) 2014 ICT 10 2014 10 SK C&C 2014 8 1 2 HTML5 3 3 3D (Smart Channel) 4 IT Indoor LBS 5 LTE-A 3D 6 7 (Software Defined) (Software Defined) 8 TV IT (DevOps) 9 3D OLED 10 2 0 3D 32

01 (IoT) ' (IoT)' 1999 (MIT) (Auto-ID Center) (Kevin Ashton) RFID( ) M2M(Machine to Machine ) M2M ( ) HTML HTML5 HTML5 HTML5 1 HTML5 (2014-05-26) - http www w3 org html wg drafts html CR W3C Editor's Draft (Candidate Recommendation) 3 2 4 content models (http www w3 org html wg drafts html CR dom html#content-models) DTD(Document Type Definition) (Entity) HTML4 " " HTML5 Metadata Content Flow Content ing Content Heading Content Phrasing Content Embedded Content Interactive Content Palpable Content Script- Supporting Elements Transparent Content Models WHATWG7 33

HTML5 HTML5 HTML Metadata Content base link meta noscript script style template title body Flow Content ing Content Heading Content a abbr address area article aside audio b bdi bdo blockquote br button canvas cite code data datalist del details dfn dialog div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd keygen label link main map mark math menu meta meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style sub sup svg table template textarea time u ul var video wbr Text header footer article aside nav section section( ) h1 h2 h3 h4 h5 h6 34

01 Phrasing Content Embedded Content Interactive Content Palpable Content Scriptsupporting Element p div section a abbr area audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label link map mark math meta meter noscript object output progress q ruby s samp script select small span strong sub sup svg template textarea time u var video wbr Text audio canvas embed iframe img math object svg video a audio button details embed iframe img input keygen label object select textarea video a abbr address article aside audio b bdi bdo blockquote button canvas cite code data details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header i iframe img input ins kbd keygen label main map mark math menu meter nav object ol output p pre progress q ruby s samp section select small span strong sub sup svg table textarea time u ul var video script template Flow Content - area - map - link meta - itemprop - style - scoped Phrasing Content - area - map - link meta - itemprop Interactive Content - audio video - controls 35

- img object - usemap - input - type "hidden" - tabindex Interactive Content Palpable Content - audio - controls - dl - - input - type "hidden" - menu - toolbar - ol - li - ul - li HTML5 HTML/XHTML HTML HTML5 HTML5 HTML(Hyper Text Markup Language) (Markup) (Tag) HTML(Element) (< >) HTML 36

01 HTML HTML (Tag) (Attribute) (Value) (Elements) W3C HTML4 XHTML - ex) <title> </title> ( " ") - =+ ( ) + (Tag) '<' '>' - <title> </title> - <a><b><c><c><b><a> (Attributes) HTML '=' " " ' ' (Arguments) 37

- ex) <p align="center">html5 </p> - <p> align "center" - - <div name=' " "'> (Comment)HTML - "< --" "-->" - < > -- - CSS JavaScript C"/* */" meta br - (Self-Closing Tag) (Empty Tag)XHTML <br > HTML 4 xp - area base br col command embed hr img input keygen link meta param source (Charet) UTF-8 UTF-8 UTF-8 EUC-KR UTF-8 HTML UTF-8 HTML5 DOCTYPE < DOCTYPE html PUBLIC "- W3C DTD XHTML 1 0 Strict EN" "http www w3 org TR xhtml1 DTD xhtml1-strict dtd"> <HTML lang="ko"> <html> <head> <title> HTML5< title> HTML 38

01 <meta http-equiv="content-type" content="text html; charset=utf-8"> <link rel="stylesheet" href="path to stylesheet css" type="text css" > <script type="text javascript" src="path to script js"><script> < head> <body> HTML5 < body> < HTML> < DOCTYPE HTML> HTML5 <HTML lang="ko"> <html> <head> <title> HTML5< title> <meta charset="utf-8"> <link rel="stylesheet" href="path to stylesheet css" > <script src="path to script js"><script> < head> <body> HTML5 < body> < HTML> - HTML DOCTYPE SGML DTD HTML5 DOCTYPE HTML MS IE6 - HTML Link Type - CSS CSS type="text/ css" Script Type - HTML5 type="text/javascript" Title Meta Link Style Script meta HTML metadata 39

head title - link - (CSS) style - script - meta - (Refresh) - name - Metadata - http-equiv - HTML5 - content - name http-equiv Text HTML5 - charset - HTML base - URL (Target) (Link) - <base href=" URL"> - <base target="_blank"> - <base href=" URL" target="_blank"> Meta HTML ( ) <meta name="description" content="html "> <meta name="keywords" content="html "> <meta name="author" content="html "> <meta name="copyright" content="html "> <meta name="reply-to" content=" "> <meta name="date" content="html "> 40

01 (<meta>) 5 - <meta http-equiv="refresh" content="5"> 5 - <meta http-equiv="refresh" content="5; http your_website com"> HTML5 HTML5 HTML5 (HTML ) CSS3 HTML5 HTML5 CSS3 HTML5 CSS3 JavaScript HTML 4 01HTML5 41

42 HTML5 HTML <div> header ( ) footer hgroup nav section h1 h6 article ( ) aside main body figure figcaption figure () ol (reverse ) li() a (download ) href a (ping ) strong time mark ()

43 01 ruby rt rp rb rtc ruby bdi wbr details summary details menu command dialog canvas 2 ( ) API audio video source video audio embed track <video> <audio> datalist (ComboBox) keygen (Key Pair) output meter progress

44 form - autocomplete novalidate input - autocomplete novalidate - form formaction formenctype formmethod formnovalidate formtarget - minlength height width min max placeholder required - list multiple step pattern dirname input (Type) - month week date datetime datetime-local time - color email number range search tel url contenteditable (3 ) contextmenu data-* ( ) draggable dropzone & API hidden ( ) inert (WHATWG HTML) aria-* HTML role aria spellcheck ( ) translate microdata HTML tab-index address article body b cite dl -

45 01 hr i label menu noscript script s script small strong u HTML 5 (2014-05-26) - http www w3 org html wg drafts html CR W3C Editor's Draft (Candidate Recommendation) 11 Obsolete feature (http www w3 org html wg drafts html CR obsolete html#obsolete) img border 0 CSS script language <script type="text javascript" language="javascript"> language type type a name name id CSS( ) - basefont big blink center font marquee multicol nobr spacer s strike tt u

46 ( ) - frame frameset noframes iframe CSS ( ) - applet embed object - acronym abbr - bgsound audio - dir ul - isindex form - listing pre code - nextid GUIDs - noembed object - plaintext text/plain MIME type - strike del s - xmp pre code "<" "&lt" "&" "&amp" charset rev urn methods link a shape coords a name a embed img option(id) accept form(input accept ) nohref area profile head version html ismap usemap input lowsrc img target link scheme meta archive classid code codebase codetype declare standby object type valuetype param language event for script datapagesize summary table

47 01 axis td th scope td datasrc a applet button div frame iframe img input label legend marquee object option select span table textarea datafld a applet button div fieldset frame iframe img input label legend marquee object param select span textarea dataformatas button div input label legend marquee object option select span table alink link vlink bgcolor text marginbottom marginheight marginleft marginright margintop marginwidth body char charoff valign width col clear br compact dl ol ul type li ul char charoff tbody thead tfoot td th tr hspace vspace embed iframe input img object color noshade size width hr allowtransparency frameborder marginheight marginwidth scrolling iframe border object img width col hr table td th pre bgcolor bordercolor cellpadding cellspacing frame rules table align caption col div embed hr iframe h1 h6 input img object legend table p tbody thead tfoot td th tr valign tbody thead tfoot th td tr bgcolor table tr td th body background body table thead tbody tfoot tr td th height nowrap td th rules table