- PDF 무료 다운로드

Size: px

Start display at page:

Download ""

옥담 근
6 years ago
Views:

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

4 P R E F A C E HTML5 HTML5 (User Agent) UA HTML5 ( ) ( ) canary(64-bit) / beta-m Nightly 33 0a1 / (Notepad++) http //notepad-plus-plus org 4 - developer mozilla org - msdn microsoft com HTML5 ROCKS - html5rocks com

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

6 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 HTML DIV (Interactive) CHAPTER 6 (Form) 96

7 CHAPTER HTML HTML HTML HTM HTML5Input 118 (Drag and Drop) (Drag Data Store) (DataTransfer) API 144 CSS (Simple Selector) (Pseudo-classes) (Pseudo-elements) 196 C O N T E N T S CHAPTER

8 C O N T E N T S CHAPTER CHAPTER CSS Writing Mode Level (Inline-level) (Abstract Box Terminology) CSS Text Decoration Module Level ( ) CSS CSS (display ) ( ) (floating boxes) (Overflow)

9 CHAPTER (Background) (Borders) (Corners) (Flexible Box Layout) (Grid Layout) C O N T E N T S (User Interface) (Element Icons) (Resizing) (Overflow) CHAPTER (Multi-column Layout) 444 9

10 C O N T E N T S (Transform) (Transition) (Marquee) (Animation) (Media Query) (Media Features) 489 CHAPTER (Canvas)

11 CHAPTER CHAPTER /- arc() arcto() 538 (Bezier Curve) ( ) (Fill Style) (Winding Rule) (Gradient) (Pattern) C O N T E N T S

12 C O N T E N T S CHAPTER CHAPTER (Hit Regions) (MediaController) (TextTrack) audio source video (track) API (Blob) (File) (File Reader) URL

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.

13 CHAPTER (Dedicated Worker) (Shared Worker) API API 718 Geolocation Geolocation API Google Maps API v C O N T E N T S 13

15 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

16 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

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

18 HTML HTML5 HTML5 2 http //www w3 org/html/wg/drafts/html/cr/ HTML5- (Plug-in) HTML5 API (Range) ( (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 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

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

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

22 HTML5 HTML5 HTML5 WHATWG HTML5 HTML5 HTML HTML5 HTML /555 HTML HTML5 22

23 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

24 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

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

26 HTML 5 0 HTML 5 1W3C HTML5 HTML 5 1 HTML 5 0 ( W3C ) HTML5 (Ian Hickson) W3C HTML5 W3C WHATWG W3C HTML W G W3C WHATWG HTML(Living HTML Trunk ) W3C ( Branch ) 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 ( ) (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

27 01 HTML5 MS ( CPU ) " " (http www apple com hotnews thoughts-on-flash ) 2009 Google I O HTML5 Gears HTML5 - http www engadget com 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 -

28 - http www visionmobile com product developer-economics-q statedeveloper-nation - http www zdnet co kr news news_view asp artice_id= HTML5 ios 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 "

29 01 OS HTML5 HTML HTML5 HTML5 ios 19 HTML (IoT Internet of Things) IoT " " 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= ) 29

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

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

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

33 01 (IoT) ' (IoT)' 1999 (MIT) (Auto-ID Center) (Kevin Ashton) RFID( ) M2M(Machine to Machine ) M2M ( ) HTML HTML5 HTML5 HTML5 1 HTML5 ( ) - http www w3 org html wg drafts html CR W3C Editor's Draft (Candidate Recommendation) 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

34 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

35 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

36 - 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

37 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

38 - 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

39 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

40 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

41 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 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 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 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 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 45 01 hr i label menu noscript script s script small strong u HTML 5 ( ) - 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 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 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

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을 동 향 제 23 권 5호 통권 504호 HTML5가 웹 환경에 미치는 영향 이 은 민 * 16) 1. 개 요 구글(Google)은 2010년 5월 구글 I/O 개발자 컨퍼런스에서 HTML5를 통해 플러 그인의 사용이 줄어들고 프로그램 다운로드 및 설치가 필요 없는 브라우저 기반 웹 플랫폼 환경이 점차 구현되고 있다고 강조했다. 그리고 애플(Apple)은 2010년