Microsoft PowerPoint - HTML5_V1.0

Transcription

1 HTML5 개요 - HTML5 와웹개발방법론 - HTML5 개요 - HTML5 설계원칙 - HTML5 특징 - HTML5 의새로운기능 preview

2 웹개발방법론 1990 년대웹서버와웹브라우저간정적 HTML 문서를주로보내주거나 CGI(Common Gateway Interface) 를이용하여개발 마크업과프로그램코드가섞여있는개발방식사용 2

3 웹개발방법론 2000 년대초반백엔드 - MVC 모델기법 [ 데이터모델, 템플릿, 비즈니스로직분리 ] 를통해개발생산성향상 프론트엔드 - 웹표준개발방법론 [ 구조 (HTML), 표현 (CSS), 동작 (DOM Script) 를분리 ] 3

4 웹개발방법론 2000 년대후반프론트엔드의웹서버에종속적인비동기웹애플리케이션개발 웹콘텐츠가클라이언트의 PC 로로딩된후, 웹서버에 Ajax 호출을통해데이터를받아온후 DOM 을갱신하는개발방법 [ 예 ) 지메일과구글맵스 ] 4

5 웹개발방법론 2010 년대초반 HTML5 서버와독립적인웹애플리케이션의개발이가능 모바일환경에서오프라인기능과로컬데이터베이스의지원은웹서버와독립할수있는환경제공 Canvas, 드래그앤드롭, 지오로케이션, 파일 API 등을통한사용자경험확장시킴 5

6 HTTP 서비스 1 단계 모든인터넷서비스가웹브라우저로통합 하이퍼텍스트라는문자위주의정보전달쳬계 2 단계 인터넷만연결되어있다면모든애플리케이션을웹브라우저에서실행하여어떤장소에서도동일한작업환경을갖추는것 웹브라우저를통해다양한서비스통합 어플리케이션을웹브라우저안으로통합시작 웹브라우저가웹어플리케이션을구동하고관리하는수준의플랫폼으로진화 웹컨텐츠의멀티미디어화 3 단계 모바일환경의확산으로웹에서사용되었던많은기능들을웹브라우저만으로실행되도록하는것 HTML5

7 HTML 역사 Web 1.0 HTML & CSS 마크업과정보 Web 2.0 AJAX & Open API 애플리케이션플랫폼. HTML5 새로운요소와 API 독립적인웹애플리케이션 HTML5 = 추가된 HTML 태그 + CSS3 + 강력한 javascript API 7

8 HTML5 역사 연월사양설명 1993 년 6 월 HTML1.0 IETF Internet Draft 1995 년 11 월 HTML 2.0 RFC 년 1 월 HTML 3.2 W3C 권고 1997 년 12 월 HTML 4.0 W3C 권고 1998 년 2 월 XML 1.0 W3C 권고 1998 년 10 월 DOM Level 1 W3C 권고 1999 년 12 월 HTML 4.01 W3C 권고 2000 년 1 월 XHTML 1.0 W3C 권고 2000 년 11 월 DOM Level 2 Core W3C 권고 8

9 HTML5 배경 웹이정적문서에서동적프로그램으로의변화 XHTML2.0 의기존웹과의비호환성과, 엄격한 XML 규칙의적용으로인한제어의어려움 WHATWG (Web Hypertext Application Technology Working Group) 모질라재단, 애플, 오페라소프트웨어의세회사가모여현재의 HTML4.01 기술과호환되면서웹의기능과표현범위를확장하고자하는기술표준을작성 9

10 HTML5 역사 VS 1. 차세대웹표준으로 XHTML 추진 2. HTML/XHTML 과의호환성을고려하지않은 XHTML XHTML 보다 HTML 업데이트 2. W3C 에제안을거절당함 3. Apple, Mozila, Opera 주도로워킹그룹을 2004 년발족 10

11 HTML5 역사 년 W3C 는 WG 라는워킹그룹을발족 2. WHATWG 와공동으로 HTML5 의제정에함께하기로함 년 1 월 22 일 W3C 가 HTML5 의초안을공개함. 4. XHTML 추진에주력하던 W3C 가획기적으로방침을전환한역사적인사건 년 10 월 WHATWG 가 HTML5 표준화작업을 W3C 로넘김 년 7 월에 XHTML2 의사양제정이중지됨 11

12 HTML5 역사 연월사양설명 2011 년 5 월 HTML5 최종초안 (Last Call Working Draft) 2012 년 Q2 HTML5 후보표준안 (Candidate Recommendation) 2014 년 Q1 HTML5 제안표준안 (Proposed Recommendation) 2014 년 Q2 HTML5 최종표준안 (Recommendation) 2 개이상의브라우저에서테스트완료 브라우저업체의피드백반영 12

13 HTML5 와기존마크업의차이점 HTML4 에서의블록과인라인개념을대체하는콘텐츠모델 요소를그룹화하고각그룹에는이름을붙임 각그룹에는해당그룹에소속된요소에어떠한콘텐츠를넣어야좋은가를규정 사용자와의더정교한상호작용과사용자의이동성을지원하는방향으로표준화작업이진행 특정기업의독점기술에의존하지않고 add-on 또는 plug-in 없이도웹을사용 접근성중시 표준코덱기반의비디오, 오디오재생환경을내장 그래픽지원을위한캔버스제공 사용자의이동성을위해오프라인캐시, 웹파일, 웹데이터베이스를지원 위치정보, 웹워커, 웹소켓등을제공 13

14 HTML5 설계원칙 호환성 (Compatibility) 컨텐츠의호환성 : HTML 5 이전버전으로제작한컨텐츠가문제없이이용가능해야한다. 이전브라우저와의호환성 : HTML 5 가지원되지않는이전버전의브라우저에서도이용가능해야한다. 기능의재사용 : 각브라우저사들이각자브라우저에구현해놓은서로다른기능들을 HTML 5 라는이름아래공통된사양으로정의하여브라우저들간의호홖성을가지게한다. 이용방법의호환성 : 기존에사용하던 HTML Tag 의사용법을그대로사용할수있게한다. 혁신보다는발전을우선함 : HTML 5 이라는 Version UP 이새로운 MarkUP Language 를구현하는것이아닌기존에존재하던 HTML 을개량한다 실용성 : 웹현장에서필요로하는것들을중점적으로진행해야한다. 상호운영성 : HTML 5 를적용한브라우저라면동일하게동작해야한다. 보편적접근성 : 컨텐츠의소비자가기계 (Device, Search Engine) 와모든사람들 ( 장애자를포함한 ) 이접근할수있도록한다. 14

15 HTML5 설계원칙 실용성 (Utility) 사용자, 개발자, 브라우저개발자, 사양서, 이론상의순수함의순서로실용성의우선순위 보안성를고려하여새로운사양을개발 상호운용성 (Interoperability) 웹개발자가브라우저의차이를의식하지않더라도 HTML5 를적용한브라우저라면똑같이동작하도록가능한한쓸데없이복잡한것들을없애도록분명한원칙 보편적접근성 (Universal Access) 모든미디어, 모든언어, 장애인을포함한모든사람이접근할수있도록기능을개발

16 HTML5 특징 웹의애플리케이션화 복잡한자바스크립트코드대신브라우저의기본내장기능으로대체 새롭고간단한 DOCTYPE 새롭고간단한문자셋선언 표현과내용의분리 하위호환성 웹애플리케이션플랫폼의표준 W3C 와연동 HTML4 보다접근성중시 문서구조나시맨틱스 (Semantics) 에관련된요소 멀티미디어를지원하기위한요소 16

17 HTML5 새로운기능 preview HTML Device : device 요소를규정한사양 요소 ( 태그, Element) 를통해비디오카메라와같은장치에액세스할수있도록고안 HTML5 Microdata 태그의 id 나 class 를이용해의미적표현을하는마이크로포맷 (Microformat) 은제한적이므로이를대체함문서의구조를나타내는것뿐만아니라각각의구체적인의미를마크업을통해나타냄 HTML5 2D Context : Canvas API 를규정한사양 Canvas 태그내각종객체를회전및변환하고그레디언트, 이미지생성등각종효과를주는기능부분을기술 17

18 HTML5 새로운기능 preview Web Workers 백그라운드에서 JavaScript 를처리하는기술로서처리가끝날때까지브라우저가멈추는일이발생하지않는다. Web Storage Cookie 로는다룰수없었던대용량의데이터를브라우저에서저장하는 API 표시할콘텐츠를미리브라우저에저장키와값으로이루어진데이터를저장서버의부하를줄여성능을향상시킴 Indexed Database API 데이터를브라우저쪽에저장하는기술값의효율적인검색과동일키에여러 data value 를저장 18

19 HTML5 새로운기능 preview Web SQL Database 데이터를브라우저쪽에저장하기위한기술데이터저장과검색시 SQL 을사용 Server-Sent Events 서버와의 HTTP 연결을통해실시간으로메시지를수신하기위한 API HTTP 연결이이루어지면 JavaScript 의 XMLHttpRequest 객체를이용하는대신메시지단위로처리를수행 WebSockets API 서버와의쌍방향통신을위한 API 서버와의실시간전이중통신 (Full Duplex) 을실현서버쪽에 WebSockets 에대한준비가필요함 19

20 HTML5 새로운기능 preview WebSockets Protocol 통신프로토콜로 HTTP 를사용하지않고 WebSockets 전용프로토콜을사용 Geolocation API 위치정보위도, 경도, 표고, 진행방향, 이동속도등의정보를얻을수있게해주는 API File API file 타입의 input 요소에지정된파일을다루기위한 API 20

21 HTML5 새로운기능 preview HTML5 Communictions Cross Document Messaging 과 Channel Messaging 에관한규정 Cross Document Messaging 을이용하여다른도메인간의웹페이지끼리서로메시지를주고받음상대의 DOM 을직접제어하는대신 Cross Document Messaging 을적용한스크립트를이용하면웹페이지끼리명령을주고받고그결과를자신의웹페이지에반영할수있다. Application Cache History API 21

22 HTML5 관련 W3C 주요 WG 현황 HTML WG WG 명 Web Application WG Device APIs and Policy WG 표준개발범위 HTML5 마크업관련표준개발 웹애플리케이션개발에필요한웹소켓, 웹워커, IndexedDB, FileAPI 등을포함하여 HTML5 와관련된주요 API 표준개발 데스크탑, 랩탑, 모바일인터넷단말 (MID), 핸드폰등다양한기기의웹브라우저에서일정, 업무, 연락처, 카메라, 메시지, 시스템정보, 이벤트등의다양한단말기능을사용할수있도록하는 API 표준 개발표준현황 - HTML5 - HTML+RDFa - HTML Microdata - HTML Canvas 2D Context - Web Sockets API - Web Storage - Web Workers - Indexed Database API - Server-Sent Events - Cross-Origin Resource Sharing (CORS) - HTML5 Web Messaging - Clipboard Operations - File API - File API: Directories and System - File API: Writer - Programmable HTTP Caching and Serving - Contacts API - The Calendar API - The Media Capture API - The Messaging API - The System Information API

23 HTML5 관련 W3C 주요 WG 현황 WG 명 표준개발범위 개발표준현황 Geolocation WG Geolocation API 를포함하여가속센서, 방향센서등센서에관련된표준개발 - Geolocation API - DeviceOrientation Event Web Notification WG 사용자에게알려주기위해필요한 Notification 과관련된 API 표준으로, Notification 과관련하여사용자인터액션 (Interaction) 관리에필요한이벤트에대한표준도포함 - Web Notifications Web Performance WG 웹브라우저의특징들과 API 들에대한애플리케이션성능측정에대한표준개발 - Navigation Timing Web Event WG 모든디바이스의멀티터치, 펜 - 테블릿입력등의사용을가능하게하는방법에대한표준개발 - Web Events Web Real-Time Communications WG 웹브라우저에서 P2P(Peer to Peer) 오디오, 비디오등실시간통신을위한클라이언트 API 표준개발 - WG Charter 검토중

24 로깅과디버깅 console.log API 자바스크립트로깅 브라우저의개발자도구, 콘솔탭에정보를출력할수있도록하는 Firebug 의 API 크롬, 익스플로러, 오페라등브라우저에서지원 window.json 데이터표현도구 자바스크립트의객체리터럴을사용해서데이터를표현 HTML5 애플리케이션의데이터교환형식으로서사실상의표준 Parse() : 직렬화 Stringify() : 문자열로변경 브라우저내장개발자도구

25 웹브라우저별자바스크립트엔진 브라우저엔진명참고사항 Apple Safari 5 Nitro(SquirrelFish Extreme) Safari4 에출시됐고 5 버전에서더욱개선됐다바이트코드옵티마이저와 context-threaded 내장컴파일러를도입했다. Google Crome 5 V8 Crome 2부터사용했다. 효율적인메모리확장성을위 해인터럽트없는진일보한가비지컬렉션을사용한다. MS IE 9 Chakra 백그라운드컴파일과효율적인타입시스템에초점을 맞추고있으며 IE8에비해 10배정도개선됐다고한다. Mozilar Firefox 4 JagerMonkey 3.5 버전부터더욱정교해졌으며트레이스트리를이용 한내장컴파일과빠른인터프리트를지원한다. Opera 10 Carakan 레지스트기반바이트코드와선택적인내장컴파일을 사용해 버전에서약 75% 개선됐다. 25

26 HTML5 참조사이트 HTML5Rocks 구글이만든사이트 HTML5Test 브라우저별지원현황파악가능, 사용중인브라우저의 HTML5 지원여부체크 HTML5Doctor HTML5 마크업관련블로그및 Q&A HTML5gallery HTML5 기반웹사이트모음 Mozilla Hacks Mozilla 기반웹기술블로그 : 브라우저버전별로 HTML5 지원여부

27 HTML5 기본 - 개발환경구축 - HTML5 선언방법

28 HTML5 개발환경 Aptana Studio 버전 3 부터는 HTML5, CSS3 를지원한다. 구글은이클립스를통해간단하고마치데스크탑어플리케이션을만드는것처럼다양한디버깅환경을제공하는 GWT(Google Web Toolkit) 플러그인을제공한다. Adobe Dreamweaver CS5 에는 HTML5 의태그와 CSS3 개발이추가되어있다. Adobe Flash CS5 28

29 HTML5 지원브라우저의알파버전 IE9 - ie.microsoft.com/testdrive/ Firefox: ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latesttrunk/ Chrome(Chromium): build.chromium.org/buildbot/continuous/ Safari: nightly.webkit.org/

30 DOCTYPE <! DOCTYPE html> 반드시대문자로생략하면브라우저가최신렌더링모드를사용하지않아 HTML5 의일부기능이작동하지않음 HTML4 와 XHTML1 과거의완벽하게호환 HTML 구문을따르는문서는언제나 text/html 형식으로배포할수있다. iframe 과같은요소가외부콘텐츠를포함할때 text/htmlsanboxed 형식을선언 XML 로구성된문서는반드시 application/xhtml+xml 나 application/xml 로배포 30

31 문자인코딩 <meta charset= UTF-8 /> <meta http-equiv= Content-Type content = text/html; charset= UTF-8 /> HTML5 문자인코딩지시방법 1) HTTP 헤더에 Content-Type 을표시하여전송하는방법 2) 문서앞부분에특수유니코드 BOM(Byte Order Marker) 문자를표시하여인코딩에대한정보를제공하는방법 3) 문서파일의초기 512byte 크기내에 meta 태그의 charset 속성으로인코딩을표시하는방법 HTML5 문자인코딩방법으로 utf-8 사용을권장 31

32 HTML5 컨텐츠모델 요소를그룹화 컨텐츠모델의규정에따라마크업하지않으면표준이되지않으므로주의를기울여야하는개념 32

33 HTML5 컨텐츠모델 33

34 HTML5 컨텐츠모델 34

35 종료태그를기술해서는안되는요소 area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source <meta charset= UTF-8 /> O <meta charset= UTF-8 ></meta> X 35

36 상황에따라태그를생략할수있는요소 요소시작태그종료태그 html O O head O O body O O li dt dd p rt rp optgroup option colgroup O O thead tbody O O tfoot tr td th O O O O O O O O O O O O O 36

37 상황에따라태그를생략할수있는요소 <ul> </ul> <li> 종료태그생략 1 <li> 종료태그생략 2 <table> <tr><th> 제목1<th> 제목2 <tr><td>1-1<td>1-2 </table> == <table> <tbody> <tr><th> 제목1</th><th> 제목2</th></tr> <tr><td>1-1</td><td>1-2</td></tr> </tbody> </table> 37

38 속성에관해 속성값의인용부호는생략가능 ( 단공백,<,>,,,`,= 를포함하지않은경우 속성값이 boolean 일경우생략시 true( 값이 false 인경우는속성자체를지정하지않음 ) 속성값을공백문자를지정하거나속성이름자체를속성값으로지정하면 true 취급 <input id=age type=number disabled> <input id=age type=number disabled= > <input id=age type=number disabled= disabled > 38

39 HTML5 마크업예제 정상적인태그를사용한경우 <!DOCTYPE html> <HTML> <HEAD> <title> HTML5 예제 </title> <meta charset="utf-8"/> <style type="text/css"> h1{font-size:2em;}</style> </head> <BODY> <h1>html5 예제 </h1> <p> 단락 1</p> <input type="text" disabled> </BODY> </HTML> 39

40 HTML5 마크업예제 태그를생략한경우 <!DOCTYPE html> <title> HTML5 예제 </title> <meta charset="utf-8"> <style type="text/css"> h1{font-size:2em;}</style> </head> <h1>html5 예제 </h1> <p> 단락 1</p> <input type="text"> 40

41 XHTML5 마크업예제 <?xml version="1.0" encoding="utf-8"?> <html xmlns=" <head> <title> XHTML5 예제 </title> <style type="text/css"> h1{font-size:2em;}</style> </head> <body> <h1>html5 예제 </h1> <p> 단락 1</p> <input type="text" disabled="disabled"> </body> </html> 41

42 HTML5 의새로운요소 ( 문서구조 ) section article aside nav footer header hgroup 범용적인섹션, 문서의아웃라인을구성일반적인문서및애플리케이션영역을표시할때사용 섹션의한종류로뉴스기사나블러그글과같은웹페이지로부터독립된콘텐츠를나타낸다. 섹션의한종류로바깥쪽섹션에대한보충정보를나타낸다. 문서내내비게이션요소의영역을표시할때사용 섹션의꼬리말부분을표시할때사용 문서를소개하거나내비케이션메뉴모음을표시할때사용 여러개의제목 (h1~h6) 을하나로정리한다. 섹션의머리말표시할때 42

43 구조적표현을위한태그 <div id= header > <header> <div id= nav > <nav> <div id= sidebar > <div id= article > <div id= footer > <seccion> <article> <aside> <nav> <footer> HTML4 의문서구성 HTML5 의문서구성

44 HTML5 의새로운요소 ( 문서구조 ) 44

45 HTML5 의새로운요소 ( 외부컨텐츠의삽입 ) 태그명설명 figure video audio source canvas embed 그림이나비디오같은캡션을동반하는내용을문서안에삽입할때사용 멀티미디어콘텐츠비디오플레이어 멀티미디어콘텐츠오디어플레이어 video/audio 리소스의 URL 이나타입을지정 그래프, 게임과같은동적인비트맵그래픽을표시할때사용 플러그인콘텐츠를표시할때사용 45

46 HTML5 의새로운요소 ( 텍스트및기타 ) 태그명 mark ruby/rt/rp time command details keygen output progress meter 스크립트에의한계산결과를화면에출력할때사용 디스크사용량등의계측결과를그래픽으로표시할때사용 설 다운로드중이거나시간이걸리는작업이진행중임을표시할때사용 명 웹페이지의의도와는다른문맥의강조 한자의발음등을표시하는루비언어를표현할때사용 날짜나시간을표시할때사용 사용자가실행할수있는명령어를표시할때사용, menu 요소안에서메뉴항목으로사용 사용자의요구에따라얻은컨트롤이나정보를표시할때사용 공개키암호방식의비밀키와공개키생성을제어할때사용 46

47 HTML5 의없어진요소 ( 비표준도포함 ) CSS로처리할수있는요소 프레임관련요소 거의사용되지않았던요소 요소 설명 대체수단 basefont 기본폰트지정 big 텍스트사이즈를크게함 blink 문자열을점멸시킴 cener 내용을가운데정렬 font 폰트지정 marquee 문자를스크롤시킴 CSS를대신사용 s 취소선 spacer 스페이스를삽입 strike 취소선 tt 글꼴을같은폭으로표시 u 텍스트에밑줄을그음 bgsound 배경음을삽입 audio 요소를대신사용 47

48 HTML5 의없어진요소 ( 비표준도포함 ) 요소설명대체수단 applet 자바애플릿삽입대신 embed/object 요소를사용 acronym 약어나이니셜을표시대신 abbr 요소를사용 dir 디렉토리내용을표시 ul 요소를사용 frame frameset noframes isindex listing xmp noembed 프레임 프레임세트 프레임에대응하지않는브라우저를위한컨텐츠 서버로송신하는테스트입력란 내용그대로출력 내용그대로출력 embed 를사용할수없을때의대체요소 Iframe 과 CSS 를이용하거나서버사이드로컨텐츠를결합 Form 과텍스트필드이조합을사용 pre 요소와 code 요소를사용 폴백이필요하다면 object 요소를사용 plaintext 내용그대로출력 MIME 타입 text/html 을사용 rb 루비대상문자열을지정루비대상문자열은 ruby 요소안에직접기술 48

49 HTML5 에서변경된요소 요소 HTML4 HTML5 href 속성이없는 a address name 속성에컨텐츠의위치를지시하는앵커 (anchor) 연락처정보가어떤콘텐츠와관련규정없음 placeholder 링크를나타냄 연락처정보가어떤콘텐츠부분과관련된연락처정보인가를구별하는방법이규정됨 b 굵은글씨로랜더링 제품소개내제품명, 문서초록의키워드, 인쇄강 조표현을가진텍스트를표현할때사용 hr 라인단락단위의주제바꿈을할때사용 i 이탤릭체로렌더링 목소리나분위기등등을나타내는텍스트의범위 에사용또는전문용어나배의이름등인쇄물에서 이탤릭체로표현될수있는텍스트범위에사용 label 폼컨트롤을관련시킴 플랫폼, 인터페이스기준에따라폼컨트롤의캡션 을지정할때사용 menu 목록을나타내는요소로서페지됨 컨텍스트메뉴나도구모음등웹애플리케이션에서사용 strong 강조, em 과동일컨텐츠의중요성을나타내는요소로재정의 small 작은글씨로랜더링 세부주석및법적인쇄문서에서작은인쇄정보 를지정할때사용 49

50 input 요소의 type 속성콘트롤형식 값상태데이터타입콘트롤타입 hidden 감춰짐임의의문자열 n/a text 텍스트줄바꿈없는텍스트텍스트필드 search 검색줄바꿈없는텍스트검색필드 tel 전화번호줄바꿈없는텍스트텍스트필드 url URL 절대 URI 텍스트필드 이메일 이메일주소나이메일주소 리스트 텍스트필드 password 비밀번호 줄바꿈없는텍스트 데이터입력이나타나지않 는텍스트 datetime 날짜와시각 UTC 날짜와시각날짜와시각콘트롤 date 날짜시간대없는날짜날짜콘트롤 month 달시간대없는년과달달콘트롤 week 주시간대없는주번호주콘트롤 time 시각시간대없는시각시각콘트롤 datetime-local 로컬날짜와시각 시간대없는날짜와시각 날짜와시각콘트롤 number 숫자숫자값텍스트나스피너콘트롤 50

51 input 요소의 type 속성 콘트롤형식 값상태데이터타입콘트롤타입 range 범위 숫자값이나정확한숫자가필 요없는의미상의값 color 색 8-bit 적녹청 srgb 칼라컬러웰 checkbox 체크박스 이미설정된리스트값의 0또 는다른값 슬라이더콘트롤 체크박스 radio 라디오버튼지정된값라디오버튼 file 파일입력창 MIME type과파일명이있는 파일목록 submit 전송버튼 폼서식을전송하는지정된 값 Image 이미지버튼 폼서식을전송하는이미지좌 표값 레이블과버튼 버튼 reset 리셋버튼해당사항없음버튼 button 버튼해당사항없음버튼 클릭가능한이미지나버튼 51

52 HTML5 새로도입된태그의 type 속성 태그명속성명설명 a, area media link 태그의속성과동일하게만들기위해적용할미디어타입 을지정할때사용 a, area ping a, area 태그를클릭했을경우 ping 속성에의해주어진주소를 호출하여카운터와같은일을진행하고자할때사용 area hreflang, rel a, link 태그의속성과동일하게만들기위해사용하며, hreflang은링크할리소스의언어코드를, rel 속성은링크할속 성의타입을지정할때사용 base target a 태그의속성과동일하게만들기위해링크된문서가표시될 문서 (document) 를지정하고자할때사용 ol reverse Li 태그를일련번호가큰순서대로표시하고자할때사용 meta charset 문자인코딩을지정할때사용 input, select, textarea, button input, textarea autofocus placeholder type 속성값이 hidden 이아닌경우에지정할수있음. 페이지로드가완료된후사용자의커서이동없이곧바로입력또는선택하게할때사용 사용자가컨트롤에값을입력하거나입력형식에대한힌트를제공하고자할때사용 52

53 HTML5 새로도입된태그의 type 속성 태그명속성명설명 input, select, textarea, button, fieldset input,textarea 등폼컨트롤 form required Form 에 id 값을적용하기위한속성으로, form 태그밖에컨트롤이위치해있더라도 id 값을갖는 form 과함께전송 (submit) 되고자할때사용 폼을전송할때반드시입력해야함을지정할때사용 fieldset disable Fieldset 태그에속한모든콘텐츠를사용할수없도록할 때사용 input autocomplete, min, max, step, multiple, pattern autocomplete : 자동완성여부지정 min, max, step : 최대값, 최소값지정 step : 컨트롤의증가단위를지정 pattern : 값을체크하는정규표현식을지정하기위해 form novalidate 폼컨트롤의값을체크하지않고전송하고자할때사용 input, button formaction, formenctype, formmethod, formnovalidate, formtarget Form 태그의 action, enctype, method, novalidate, target 속성들을재정의하고자할때사용 53

54 HTML5 새로도입된태그의 type 속성 태그명속성명설명 menu type, label type : 메뉴형태를지정할때사용 label : 메뉴명칭을지정할때사용 style scoped style 태그에의해기술된스타일을 style 태그의부모영역에속한자 식태그에모두적용시키고자할때사용 script async 스크립트가실행할수있는형태에서비동기적으로실행하도록할때 사용 html manifest 오프라인웹애플리케이션을제작하거나캐시명세를정의할때사용 link sizes 아이콘의크기를정의할때사용 (rel 속성으로아이콘을정의 ) iframe sandbox, seamless, srcdoc sandbox : allow-same-origin, allow-forms, allow-scripts 값중하나를가지며, iframe 의콘텐츠동작의제약을지정할때사용 seamless iframe 영역이 document 영역과분할되어표시되지않도록할때사용 srcdoc : 인라인프레임에포함시킬컨텐츠를지정할때사용 54

55 HTML5 새로도입된태그의 type 속성 태그명속성명설명 모든태그 class, dir, id, lang, title contenteditable contextmenu 전역속성으로, 모든태그에적용가능한속성 편집가능한영역임을표시하는속성으로내용으로변경할수있도록할때사용 문맥메뉴를제공하고자할때사용 datadraggable hidden spellcheck accesskey tabindex 태그에데이터를사용자정의로부여하고자할때사용드래그사용여부를지정할때사용 document 반영여부를지정할때사용맞춤법검사여부를지정할때사용단축키로사용할값을지정할때사용탭키의이동순서를지정할때사용 55

56 HTML5 작성 TIP HTML5 문서검증 사용하는브라우저가 HTML5 기능지원여부확인 tml5.html 56

57 HTML5 작성 TIP 새로운요소가의도한대로표시될수있도록 CSS 에서표시를조정할필요있음 새로운요소중 block 요소 ( 자동줄바꿈 ) 로표시하는것이자연스러운것들은 CSS 로지정함 address, article, aside, figure, footer, header, hgroup, menu, nav, section{ display:block; } 57

58 HTML5 작성 TIP IE6,7,8 에서는새로추가된엘리먼트를인식할수없기때문에아래의 Javascript 를실행해야함. document.createelement( article ); document.createelement( section ); document.createelement( header ); document.createelement( footer );. 이것도귀찮으시면오픈소스로공개된외부스크립트를이용 <script src= js ></script>. 58

59 HTML5 작성 TIP 현재브라우저가특정기능을지원하는지 Code 상에서확인하기위해필요한 JavaScript 라이브러리 <script src="modernizr.min.js" type="text/javascript /> if (Modernizr.geolocation){ navigator.geolocation.getcurrentposition(function(position) { setuserlatandlong(position.coords.latitude,position.coords.longi tude); }); } if(modernizr.localstorage){ }else{ } 59

60 HTML5 작성 TIP modernizr Canvas Canvas Text HTML5 Audio HTML5 Audio formats HTML5 Video HTML5 Video Formats rgba() hsla() border-image border-radius box-shadow Multiple backgrounds CSS Property.fontface.canvas.canvastext.audio NA.video NA.rgba.hsla.borderimage.borderradius.boxshadow.multiplebgs JavaScript Check Modernizr.fontface Modernizr.canvas Modernizr.canvastext Modernizr.audio Modernizr.audio[format] Modernizr.video Modernizr.video[format] Modernizr.rgba Modernizr.hsla Modernizr.borderimage Modernizr.borderradius Modernizr.boxshadow Modernizr.multiplebgs

61 HTML5 작성 TIP modernizr Feature opacity CSS Animations CSS Columns CSS Gradients CSS Reflections CSS 2D Transforms CSS 3D Transforms CSS Transitions Geolocation API Input Types Input Attributes localstorage sessionstorage Web Workers CSS Property.opacity.cssanimations.csscolumns.cssgradients.cssreflections.csstransforms.csstransforms3d.csstransitions.geolocation NA NA.localstorage.sessionstorage.webworkers JavaScript Check Modernizr.opacity Modernizr.cssanimations Modernizr.csscolumns Modernizr.cssgradients Modernizr.cssreflections Modernizr.csstransforms Modernizr.csstransforms3d Modernizr.csstransitions Modernizr.geolocation Modernizr.inputtypes[type] Modernizr.input[attribute] Modernizr.localstorage Modernizr.sessionstorage Modernizr.webworkers

62 HTML5 작성 TIP modernizr SVG SMIL Feature applicationcache SVG Clip Paths Web SQL Database IndexedDB Web Sockets Hashchange Event History Management Drag and Drop Cross-window Messaging addtest() Plugin API.svg.smil.indexeddb.websockets.hashchange.historymanagement.draganddrop.crosswindowmessagi ng NA CSS Property.applicationcache.svgclippaths.websqldatabase JavaScript Check Modernizr.applicationcache Modernizr.svg Modernizr.svgclippaths Modernizr.smil Modernizr.websqldatabase Modernizr.indexeddb Modernizr.websockets Modernizr.hashchange Modernizr.historymanagem ent Modernizr.draganddrop Modernizr.crosswindowmes saging Modernizr.addTest(str,fn)

63 HTML5 엘리먼트

64 <head> 영역 <!doctype html> <meta charset=utf-8> <meta charset= utf-8 > <meta charset= utf-8 /> 64

65 HTML5 구조태그 <section> 영역, 구역 을의미 영역의의미를나타내기위해 h1, h2~h6 요소들과같이사용 콘텐츠를그룹화 콘텐츠의의미영역으로서의섹션이아닌단순한디자인설정을위한그룹에는 <div> 태그를이용한다. 독립된형태, 중첩된형태로사용가능 65

66 HTML5 구조태그 <header> 머리글영역 제목, 로고, 소개내용이나내비게이션보조수단들이모여있는곳 (1 번이상가능 ) 섹션의헤딩 (h1~h6), 한색션의목차, 검색폼, 관련로고 <header> <hgroup> <h1>thai cookery school</h1> <h1>learn authentic Thai</h1> </hgroup> <nav> <ul> <li>home</li> <li>cookery</li> <li>contact</li> </ul> </nav> </header> <header> <hgroup> <h1>thai cookery school</h1> <h1>learn authentic Thai</h1> </hgroup> </header> <nav> <ul> <li>home</li> <li>cookery</li> <li>contact</li> </ul> </nav> 66

67 HTML5 구조태그 <nav> 페이지의주요링크들을묶어서관리하는요소 페이지안을이동할수있는링크또는사이트내부의다른페이지들을이동할수있는링크를만들때사용 내비게이션은링크가모였있다고꼭 <nav> 로정의할필요는없음 메뉴와같은주요링크를 nav 요소로관리한다. <nav> <h2> Main navigation</h2> <ul> <li>home</li> <li>cookery</li> <li>contact</li> </ul> </nav> <nav> <p><a href= >home</a></p> <p><a href= >About</a></p> </nav> 67

68 HTML5 구조태그 <aside> 시각적효과를위한요약부나사이드바를위해사용하거나 광고를위한영역이나내비게이션엘리먼트를모아놓은영역 메인컨텐츠와관련성이적은별도의내용이라고생각되는컨텐츠를위해사용 aside 엘리먼트주위에있는컨텐츠와관련있는콘텐츠로구성된페이지영역으로, 컨텐츠와구분되는영역 출력물에서는보통사이드바영역으로표시된다. <aside> <nav> <h1>thai cookery school</h1> <h1>learn authentic Thai</h1> </nav> <nav> <h1>thai cookery school</h1> <h1>learn authentic Thai</h1> </nav> <section> <h1>thai cookery school</h1> <h1>learn authentic Thai</h1> </section> </aside> 68

69 HTML5 구조태그 <footer> 부모엘리먼트중가장가까운섹셔닝콘텐츠또는섹셔닝독립엘리먼트를위한영역 (1 번이상 ) 저자에대한정보, 저작권을표기하기위한영역 하나의페이지내에다수의 footer 가 whswo 할수있음 <small> 은 권리에대한정의, 절차에대한안내, 법적제한, 또는 copyright 내용이들어있는작은글자영역, 속성에대한설명또는라이선스관련공지를위한내용등으로사용 69

70 HTML5 구조태그 <article> 문서, 페이지, 애플리케이션, 사이트안에들어가는독립적으로구성할수있는컴포넌트를별도로배포하거나재사용하기위한구조 신문의기사, 블로그, 댓글, 위젯, 가젯등 중첩하여사용할수있다. 70

71 HTML5 구조태그 <hgroup> 섹션의제목들을그룹화하는요소 문서요약이나문서구조를표시할때안에있는 <h1> 에서 <h6> 엘리먼트중가장우선순위가놓은것의텍스트가 <hgroup> 엘리먼트를대표하는내용이된다. <article> <hgroup> <h2> 비밀속에감춰와썬애플의야심작 </h2> <h1> 차세대아이폰!</h1> </hgroup> </article> 71

72 HTML5 구조태그 =>html4 <div class="post"> <h2>css3 와관련된책도출간될예정입니다.</h2> <small>10 월 19, 2010</small> <div class="entry"> <p> 현재실제로적용할수있는각종 CSS..</p> </div> <p class="">posted in 번역서 No Comments</p> </div> =>html5 <article> <header> <h2>css3와관련된책도출간될예정입니다.</h2> <time>10월 19, 2010</time> </header> <p> 현재실제로적용할수있는각종 CSS..</p> <footer> <p class="">posted in 번역서 No Comments</p> </footer> </article> 72

73 HTML5 구조태그 문서구조화알고리즘 모든브라우저지원하지않음 HTML5 에서각종엘리먼트 (<section>,<article>,..) 를언제사용해야하는지구분할수있음 에서검증함 <section> 과 <article> 엘리먼트는대부분헤딩을갖음 <nav> 과 <aside> 엘리먼트는일반적으로헤딩을갖지않음 73

74 HTML5 구조태그 섹셔닝독립체 (sectioning roots) 엘리먼트중에 <blockquote>, <body>, <details>, <fieldset>, <figure>, <td> 같은것들은섹셔닝독립체로분류 문서구조에서각기영역을갖지만안에들어있는헤딩과섹션은문서구조에잡히지않음 74

75 HTML5 구조태그 <article> 과 <section> 의차이점 article 은독립적인그자체로완전한개별컨텐츠를의미 예 ) 블로그포스트, 뉴스기사등 section 은페이지안의주제가다른영역을구분짓거나하나의글을부분으로나누기위한것 신문을생각보면몇가지섹션이있다. 스포츠섹션, 부동산섹션등으로나뉜다. 각섹션은글 (article) 로구성된다. 또하나의글에대해서영역 (section) 으로나뉘는것들도있다. 75

76 HTML5 구조태그 코멘트추가 <article> 안에 <article> 을사용하여코멘트구현 =>html5 <article> <header> <h2> 에이콘출판사에서 <time datetime= >12 월 1 일 <time> 에주최하는파티에참석하세요. </h2> <p>published on <time pubdate= > 2010 월 6 월 20 일 </time></p> </header> <article><!-- 코멘트시작 --> <header></header> </article><! 코멘트끝 --> <article><!-- 코멘트시작 --> <header></header> </article><! 코멘트끝 --> </article> 76

77 HTML5 Phrasing 콘텐츠태그 <time> 날짜와시간을기계가이해할수있게명확하게인코딩하면서사람도이해할수있게노출함. 24 시간기준으로된시간을표시함 datetime 속성은기계가읽을수있는부분이들어감 텍스트부분은사용자에게표시됨 기계가읽을수있는형식과동일한내용을사람들에게노출해도된다면별도로 datetime 속성을쓰지않아도됨 양수만들어갈수있으므로서기이전의날짜는표현못함 1904 년 7 월 과같이부정확한날짜는표시할수없음 <time datetime= >11 월 13 일 2009</time> <time datetime= > 브루스의 21 번째생일 </time> <time datetime= > 브루스의 21 번째생일 </time> 77

78 HTML5 Phrasing 콘텐츠태그 pubdate 속성 <time> 엘리먼트에서지정한값이 <article> 이나 <body> 컨텐츠전체의발행일자인지아닌지를나타냄 =>html5 <article> <header> <h2> 에이콘출판사에서 <time datetime= >12 월 1 일 <time> 에주최하는파티에참석하세요. </h2> <p>published on <time datetime= pubdate> 2010 월 6 월 20 일 </time></p> </header> </article> 78

79 HTML5 Interactive Contents 태그 <details> 영역이펼쳐지고 / 접히는기능을제공 자바스크립트로구현할필요가없음 <details> 하위에있는 <summary> 엘리먼트에포커스를줄수있고그부분이컨트롤영역이됨 open 속성 : 페이지가로딩될때엘리먼트가펼쳐진모양이되게설정 <details> <summary> 복사중... <progress max=" " value=" "></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> </dd> </dl> </details> 79

80 <figure> 사진에설명을추가하거나해당사진의작가가누구인지를표시해야하는경우 이미지와컨텐츠를명식적으로연결시킬수있음 <figure> <img src= test.jpg /> <figcaption> Bruce and Remy welcome questions <small>photo Bruce s mum</small> </figcaption> </figure> 80

81 <mark> 출력물에형광펜으로특정단어들을칠해서강조하는효과 스펙에서는 직접작성한부분에사용하는경우사용자의현재행위와연동해관련있는부분을하이라이트하는의미로사용 검색결과로검색어를하이라이트할때사용 <p>basically, it is used to bring the reader's attention to <mark>a part of the text</mark></p> 81

82 <ruby>,<rp>,<rt> HTML5 스펙에따르면 <ruby> 엘리먼트는인라인엘리먼트로명확하게표현을하고싶은단어나문자를감쌓을때사용 ruby 요소는루비를표시한텍스트를나타냄 <p> 저는 <ruby> 大韓民國 <rt> 대한민국 </rt> </ruby> 입니다.</p> <p> 저는 <ruby> 大 <rt> 대 </rt> 韓 <rt> 한 </rt> 民 <rt> 민 </rt> 國 <rt> 국 </rt> 입니다.</p> </ruby> 82

83 MathML

84 HTML5 폼엘리먼트

85 HTML5 폼엘리먼트 HTML5 의폼엘리먼트는기능적인동작과의미에대한것 종전의 Javascript 라이브러리를이용하지않으면구현할수없었던부분을 HTML5 마크업만으로실현가능 input 태그의 type 속성이상당수추가됨 search, tel, url, , datetime, date, month, week, time, datetime-local, number, range, color <input type= search > 브라우저의상단에검색표시줄과같은검색엔진에적용 <input type= tel > <input type= url > <input type= > <input type= range> 지정된값의범위내에서숫자를선택할수있음. 일반적으로슬라이드바의형태 85

86 HTML5 폼엘리먼트 HTML5 의이전부터있었던폼엘리먼트 ( 바뀐부분 ) checkbox javascript 를이용하여값을지정할수있는 interminate 라는속성이추가됨 var checkbox = document.getelementbyid( check ); Checkbox.interminate = true; file HTML5에서는큰폭으로기능개선 - 파일을여러개선택가능 - 선택할수있는파일의종류를지정할수있음 - 파일이름이외의데이터도 Javascript로접근가능 86

87 HTML5 폼엘리먼트 HTML5 의이전부터있었던폼엘리먼트 ( 바뀐부분 ) <input id= f type= file multiple accept= image/* onclick= showfileinfo() > function showfileinfo(){ var selectedfiles = document.getelementbyid( f ).files; var fileinfos = []; for(var i=0; i<selectedfiles.length;i++){ var file = selectedfiles[i]; fileinfos.push(file.name +, +file.size); } alert(fileinfos.join( \n )); } 87

88 HTML5 폼엘리먼트 HTML5 의이전부터있었던폼엘리먼트 ( 바뀐부분 ) submit,image form 요소의 method/action/enctype 속성이 formmethod/formaction/formenctype 으로바뀜 <input type= submit formmethod= POST formaction= /create value= 작성 > 88

89 HTML5 폼엘리먼트 output 엘리먼트 - 가능상태의 hidden 요소 - 요소의값은계산결과를화면에출력 <form oninput="x.value=parseint(a.value)+parseint(b.value)">0 <input type="range" name="a" value="50" />100 +<input type="number" name="b" value="50" /> =<output name="x" for="a b"></output> </form> 89

90 HTML5 폼엘리먼트 keygen 엘리먼트 - 공개키암호방식의키쌍을생성하기위한엘리먼트 - 폼송신시에공개키는서버에전송비밀키는클라이언트에서패스워드에의해보호됨 <form action= /key > <keygen name= key > <input type= submit value= 송신 > </form> 90

91 HTML5 폼엘리먼트 progress 엘리먼트 - 작업이진행중임을나타내는시각요소 ( 프로그레스바 ) - value 와 max 속성을지정 - Value 는현재완료된작업량, max 는전체작업량 - 속성값은모두소수를지정하고 max 는기본으로 1.0 <progress id= pro max=0 value=0> <span class= provalue >0</span> <span class= promax >0</span> 완료.. </progress> function updatepro(value, max){ var p = document.getelementbyid( pro ); p.max = max; p.value = value; } 91

92 HTML5 폼엘리먼트 range 엘리먼트 - 사용자가지정된범위내에서숫자를선택할수있다. - value 와 max 속성을지정 - Value 는현재완료된작업량, max 는전체작업량 - 브라우저에서숫자를보여주지않으므로 onchange 핸들러에이벤트를걸어서선택된값을보여준다. <script type= text/javascript > function showvalue(newval){ document.getelementbyid( agedisplay ).innerhtml=newval; } </script> <label for= age >Age</label> <input id= age type= range min= 18 max= 120 value= 18 onchange= showvalue(this.value) > <spane id= agedisplay >18</span> 92

93 HTML5 폼엘리먼트 meter 엘리먼트 - 일정범위안의비율이나수치를시각적으로표시 - 현재디스크의요량, 투표결과의비율등 - 브라우저별로 UI 가다름 - 속성은 min, max, value, low, high, optimum - progress 엘리먼트와같이지원하지않는브라우저에서는태그사이에입력. 93

94 HTML5 Form 요소 유형 number color datetime datetime-local time date week month 용도숫자갑산포함하는필드휠모양이나팔레트모양으로표현되는색상선택도구날짜와시간, 시간대표시시간대가빠진날짜와시간표시시간대에관한정보없이시간을표시하거나선택달력에서날짜를선택해당년도에서주를선택해당년도에서월을선택 94

95 HTML5 form 속성과기능 placeholder 속성 - 입력필드에관한간단한설명을표시하기위해사용 - placeholder 속성에지정한문자열은입력폼에대해입력이없는상태일때흐리게표시되는설명문 autofocus 속성 - 폼엘리먼트에 autofoucs 속성을지정하면페이지로딩이끝남과동시에자동으로해당폼으로커서가위치하게됨 list 속성과 datalist 요소 - input 에입력할가능성이많은ㅗㄱ록을미리지정해둘수있다. - 컨트롤의값에추천할전체목록을 datalist 에 option 요소로모두추가한다. - Input 요소에 list 속성을추가해서 datalist 의 id 를지정하면두속성을연결할수있다. 95

96 HTML5 form 속성과기능 autocomplete 속성 - 브라우저에게나중을대비해입력값을저장해야할지알려준다. - 로컬브라우저파일의안전하지않는저장소에서중요한사용자데이터를보호하는데사용된다. - on : 해당필드는보호하지않으며값을저장하고불러올수있다. - off : 해당필드는보호되고값을저장하지않는다. - unspecified : <form> 의기본값으로, 폼에포함되지않거나폼에아무런값도지정되지않으면 on 유형과같이동작한다. min 속성 max 속성 step 속성 : 증가하거나감소하는단위를설정 required 속성 valueasnumber() 함수 - 컨트롤의값을텍스트에서숫자형식으로, 또는반대로변환하는함수 96

97 HTML5 form 속성과기능 <input type= name= required autocomplete= off > <input type= text name= fruit required list= fruits > <datalist id= fruits > <option value= apple label= 사과 > <option value= oragne label= 오렌지 > <option value= grape label= 포도 > </datalist> 97

98 HTML5 form 유효성검사 잘못된데이터를찾아서해당문제점을사용자에게표시 HTML5 에는폼의값을체크할수있는 8 가지방법을제공한다 ValidityState 는 HTML5 폼유효성검사를지원하는브라우저의어떤컨트롤에서든접근할수있다. ValidityState 는각폼요소에대해지정된이름으로 8 가지유효성조건을접근할수있다. element.validity.valid 컨트롤을나타내는유효성검사에서오류가없으면 true 를, 오류가있으면 false 를반환 읽기전용속성 willvalidate 속성은특정컨트롤에유효성검사를할것인지알려준다. Input.checkValidity() 해당 input 요소의유효성검사를하고결과를반환 모두문제없으면 true 를그렇지않으면 false 를반환 formnovalidate 속성은모든유효성검사를우회한다.

99 HTML5 form 유효성검사 validationmessage input 요소의유효성검사를통과하지못하면브라우저가사용자에게표시하는예정된메시지를반환 읽기전용속성 setcustomvalidity(message) Input 요소의유효성검사를통과하지못하면오류메시지를매개변수 (message) 에지정된문자열로지정

100 HTML5 form 유효성검사 element.validity.valuemissing 해당폼컨트롤에반드시값이지정되게한다. 폼컨트롤에 required 속성값을 true로설정한다. element.validity.typemismatch 지정된유형에맞는값인지확인한다.(numer, , URL 등 ) 폼컨트롤에특정 type 속성을지정한다. element.validity.patternmismatch 폼컨트롤에설정한패턴을따르게한다. 폼컨트롤의 pattern 속성에적절한패턴을설정한다. element.validity.toolong 값에너무많은문자가들어가지않게한다. 폼컨트롤에 maxlength 속성을지정한다.

101 HTML5 form 유효성검사 rangeoverflow 숫자의최대값을제한한다. max 속성에최대값을지정한다. rangeunderflow 숫자의최소값을제한다. min 속성에최소값을지정한다. stepmismatch min, max, step 의조합을모두따르게한다. step 속성으로숫자값의증감단위를지정한다. customerror 애플리케이션코드에의해서계획되고지정된에러를다룬다. customerror 의상태에폼컨트롤을추가하는 setcustomvalidity(message) 를호출한다.

102 HTML5 form 속성과기능 유효하지않은이벤트에이벤트핸들러추가 // 유효하지않는이벤트에이벤트핸들러를추가 function invalidhandler(evt) { var validity = evt.srcelement.validity; // 특정제약조건이실패했는지검사 if (validity.valuemessing) { // 해당입력필드에값이없음을표시 } // 여기에추가제약조건을설정 // 브라우저에서유효성검사결과를기본값으로보여주고싶지않으면 // 다음과같이이벤트를취소 evt.preventdefault(); } // 유효하지않은이벤트에이벤트등록 myfield.addeventlistener( invalid, invalidhandler, false); 102

103 HTML5 요소지원브라우저확인 <command> return type in document.createelement( command ) ; <datalist> return options in document.createelement( datalist ) ; <details> return open in document.createelement( details ) ; <device> return type in document.createelement( device ) ; <form> return novalidate in document.createelement( form ) ;

104 HTML5 요소지원브라우저확인 <iframe sandbox> return sandbox in document.createelement( iframe ) ; <iframe srcdoc> return srcdoc in document.createelement( iframe ) ; <input autofocus> return autofocus in document.createelement( input ) ; <input placeholder> return placeholder in document.createelement( input ) ;

105 HTML5 요소지원브라우저확인 <input type= color > var i = document.createelement( input ); i.setattribute( type, color ); return i.type!== text ; <input type= > var i = document.createelement( input ); i.setattribute( type, ); return i.type!== text ; <input type= number > var i = document.createelement( input ); i.setattribute( type, number ); return i.type!== text ;

106 HTML5 요소지원브라우저확인 <input type= range > var i = document.createelement( input ); i.setattribute( type, range ); return i.type!== text ; <input type= search > var i = document.createelement( input ); i.setattribute( type, search ); return i.type!== text ; <input type= tel > var i = document.createelement( input ); i.setattribute( type, tel ); return i.type!== text ;

107 File API

108 File API File API 란웹애플리케이션이로컬파일의내용에접근할수있도록하는 API 클라이언트의 Web Page 에서클라이언트 PC 의 File 을읽기위해서 File 을서버로 Upload 할필요가없습니다. 사용자의파일시스템에모두접근할수있는것은아님 접근가능한파일은드래그 & 드랍이나파일선택폼 (type 속성에 file 을지정한 input 요소 ) 을이용하여사용자가직접선택한파일에한정 108

109 File API File API 구성인터페이스 File 인터페이스 - 파일이름이나크기등기본적인메타데이터에접근 FileReader 인터페이스 - 파일의내용을읽어들임 파일 API 지원여부확인 return type FileReader!= undefined ; 109

110 File API File 인터페이스속성과메서드 속성 / 메서드 name type urn size slice(start,length ) 설명 파일이름 파일의 MIME 타입 파일의범용식별자 파일크기 시작위치와길이를지정하여파일의내용을잘라서새로운 Blob 객체를만듦 110

111 File API <input type= filesinput type= file multiple> var files = document.getelementbyid( filesinput ).files; for(var i=0; i<files.length; i++){ var file = files[i]; alert( 파일이름 : +file.name+ 크기 : +file.size); } target.ondrop = function(event){ var files = event.datatransfer.files; for(var i=0; i<files.length; i++){ var file = files[i]; alert( 파일이름 : +file.name+ 크기 : +file.size); } }; 111

112 FileReader API 파일내용읽음 파일내용읽기 API 를이용하면텍스트파일이나바이너리파일의내용을읽을수있음 파일읽기 API 는동기 API 와비동기 API 로나눔 동기 API(FileReaderSync) 는메서드의처리결과를반환값이나예외형태로얻을수있지만백그라운드워커안에서만사용할수있는제한이있음 비동기 API(FileReader) 는언제든지사용할수있지만메서드의이벤트처리결과를이벤트핸들러로얻어야만하므로코딩이복잡함. 112

113 FileReader API 비동기 API(FileReader) 속성 / 메서드 readasbinarystring(fileblob) readastext(fileblob,encoding ) readasdataurl(file) result error Onload Onprogress onerror 설명 파일내용을읽어들여바이너리문자열로저장 파일내용을읽어들여문자열로저장 파일내용을읽어들여 dataurl 형식의문자열로저장 읽어들인파일의내용 에러발생시의에러정보 읽어들이기에성공했을때호출되는이벤트핸들러. load 이벤트에대응 읽어들이기의진행상황을얻을수있는이벤트핸들러. progress 이벤트에대응 읽어들이기에러시에호출되는이벤트핸들러 113

114 FileReader 객체생성 FileReader API var reader = new FileReader(); 이벤트핸들러를지정하여파일의내용을처리 reader.onload = function(){ var filecontent = reader.result; }; File 객체를지정하여파일의내용을읽음 reader.readastext(file, utf-8 ); 114

115 File API Error 상수 상수 Code 설명 NOT_FOUND_ERR 1 읽을 File 을찾지못할때 SECURITY_ERR 2 Web Application이 Access하기에안전하지못한 File일때 File에너무많은읽기호출이있을때사용자의선택한이후에 File에변경이있을때 ABORT_ERR 3 abort() 함수호출과같은것으로인해읽기가 중지되었을때 NOT_READABLE_ERR 4 File 접근권한문제와같은것으로인해 File을 읽지못할때 ENCODING_ERR 5 DataURL FH로표현될수있는 File이나 Blob 을구현한제한된곳의 DataURL에대한 URL 길이제한이걸렸을때 115

116 FileReaderSync API 동기방식의 FileReaderSync 은 Worker 안에서사용 동기 API(FileReaderSync) 속성 / 메서드 readasbinarystring(fileblob) readastext(fileblob,encoding ) readasdataurl(file) 설명 파일내용을읽어들여바이너리문자열로저장 파일내용을읽어들여문자열로저장 파일내용을읽어들여 dataurl 형식의문자열로저장 116

117 FileReaderSync 객체생성 FileReaderSync API var reader = new FileReaderSync(); File 객체를지정하여파일의내용을읽음 Var filecontent = reader.readastext(file); 117

118 Inline Edit

119 HTML5 Inline Edit 사용자가콘텐츠를수정할수있도록개발자가가요소를편집가능하게만들수있다. contenteditable 속성 - 개별적인 HTML 요소를편집가능하게만드는속성 - true, false, inherit designmode 속성 - 전체문서를편집가능하게만드는속성 - on, off spellcheck 속성 - 스펠링체크기능을활성화하는속성 - true, false 컨텍스트편집지원여부확인 return iscontenteditable in document.createelement( spna ); 119

120 Selector API

121 요소검색 자바스크립트메서드 함수 설명 getelementbyid( ) getelementsbyname( ) getelementsbytagname( ) 특정 id 속성값에해당하는요소를반환한다. <div id = foo > getelementbyid( foo ); 특정 name 속성값에해당하는요소를반환한다. <input type= text name= foo > getelementsbyname( foo ); 특정태그이름과일치하는모든요소를반환한다. <input type= text > getelementsbytagname( input ); 121

122 Selector API DOM 으로부터요소를빠르고쉽게찾아낼수있다. queryselector, queryselectorall 메서드추가 기존자바스크립트라이브러리 (Prototype, jquery 등 ) 들이지원하던 DOM Selector 의네이티브구현 queryselector 메서드는인자로받은선택조건을 DOM 트리로부터검색하여첫번째일치하는요소노드를반환한다. 노드가발견되지않으면 null 을반환한다. queryselectorall 메서드는인자로받은선택조건을 DOM 트리로부터검색하여일치하는모든요소노드를반환한다. 일치되는노드가없는경우, 비어있는목록을반환한다. getelementbyclassname 도추가적으로사용할수있게되었다. 검색조건에는우리가일반적으로많이사용하는 CSS 선택문법을그대로사용할수있으며, 쉼표 (',') 로구분하여하나이상의검색조건을추가할수있다.

123 요소검색 QuerySelector 메서드 함수 queryselector() 설명 페이지내에서특정선택자규칙과일치하는첫번째요소를반환한다. queryselector( input.error ); 클래스명이 error 인첫번째 input 태그를반환한다. 특정선택자규칙또는여러규칙과일치하는모든요소를반환한다. queryselectorall() queryselectorall( #results td) id 속성값이 results 인요소내의테이블셀요소가반환된다. 123

124 CSS Selector Universal selectors 보편적선택자 스타일을적용하기위한페이지에서모든 Element 를선택한다 * { border : 1px solid #000000; } Attribute selectors 속성선택자 속성선택자는선택되는 Element 가담고있는속성에기초한것에대한스타일을정의한다. img[alt]{ border : 1px solid #000000; } Child selectors 자식선택자 특정 Element 의특정자식 Element 를선택하기위해서하나의자식선택자를사용할수있습니다. h3 > strong { color : blue; } Descendent selectors - 전승선택자 직계자손 Element 뿐만아니라 Element 계층어디서든선택된 Element 를찾습니다. div em {... } Adjacent sibling selectors - 인접선택자 인접선택자는특정 element 이후선언된특정 element 를선택할수있게해줍니다. h2 + p {... }

125 Selector API 사용법 // 클래스이름이 'warning', 또는 'note' 인단락요소 (<p>) 를모두찾음 var special = document.queryselectorall("p.warning, p.note"); // id 가 'main', 'basic', 'exclamation' 인요소들중첫번째발견된요소를찾음 var el = document.queryselector("#main, #basic, #exclamation"); // HTML 문서의 <body> 에속한 <style> 요소들중 // 'type' 속성이없거나, 'text/css' 인첫번째발견된요소를찾음 var style = document.body.queryselector("style[type='text/css'], style:not([type])"); // id 가 'fruits' 인요소의 <input> 요소 ( 체크박스 ) 들중선택된 (checked) 요소를찾음 var list = document.queryselectorall("#fruits input:checked"); // 또는 var list = document.getelementbyid('fruits').queryselectorall("input:checked"); 125

126 Canvas API

127 HTML5 Canvas API Canvas 요소는그래픽을자유롭게그릴수있는영역 웹페이지내에가로 300 픽셀, 세로 150 픽셀의사각형영역이만들어진다. 원이나사각형등의도형이나선, 이미지등의 2D 그래픽, 차트, 애니메이션을동적으로생성하고렌더링할수있다. WebGL ( 라는사양을기본으로한 3D 그래픽용캔버스도실험적으로적용 2010 년 1 월시점에서 IE 를제외한모든주요브라우저에서사용 IE 에서는 ExplorerCanvas 나 uucanvas.js 등의라이브러리를사용하면제한적으로사용가능 127

128 Canvas 지원브라우저확인 return!!document.createelement( canvas ).getcontext ; <canvas> 텍스트 API var c= document.createelement( canvas ); return c.getcontext && typeof c.getcontext( 2d ).filltext == function ;

129 Canvas 지원브라우저확인 if (Modernizr.canvas){ // 그리기함수이용 Drawing }else{ // 캔버스를지원하지않습니다. } 캔버스텍스트 API 지원여부 if (Modernizr.canvastext){ //Text 그리기 }else { //Canvas Text 지원하지않습니다. } Modernizr( 는 MIT 라이선스를가진오픈소스로 HTML5 와 CSS3 의다양한기능을지원하는지확인하는자바스크립트라이브러리다.

130 캔버스사용 <canvas id= canvas1 width= 300 height= 300 ></canvas> //canvas DOM 객체생성 var canvas = document.getelementbyid( canvas1 ); // 그리기컨텍스트를생성 var context = canvas.getcontext( 2d ); // 사각형그리기 context.fillrect(0,0,150,100); // 텍스트그리기 context.filltext( Hello, Canvas!, 155,110); 130

131 캔버스사용 // 선그리기시작 context.beginpath(); // 선그리기 context.moveto(0,100); context.lineto(300,100); context.moveto(150,0); context.lineto(150,200); // 캔버스의윤곽을그린다. context.rect(0,0,300,200); // 화면에출력 context.stroke(); // 선그리기종료 context.closepath(); 131

132 사각형그리기 strokerect(x,y,w,h) fillrec(x,y,w,h) clearrect(x,y,w,h) 이미지삽입 drawimage(image, dx, dy) drawimage(image, dx, dy, dw, dh) clearrect(image, dx,dy, sx,sy,sw,sh, dx,dy,dw,dh); 132

133 선또는도형그리기 패스 (Path) 란캔버스의 API 를이용하여그려진선들의집합 패스를구성하는하나하나의선을 서브패스 서브패스는두개이상의점을직선 ( 또는곡선 ) 으로연결한하나의선 패스를그래픽으로표시하기위한순서 1. beginpath() 로패스그리기시작 - beginpath() 를호출하면이전에그렸던패스는모두리셋되고새로그림 2. 캔버스의 API 를이용하여패스그리기 - 여기서그린패스는아직화면에표시되지않음 3. stroke() 나 fill() 을이용하여그래픽을화면에표시 - stroke() 는패스를선으로그림, fill() 은패스내부가채워짐 133

134 서브패스를그리기위한 API moveto(x,y) - 서브패스를그리기시작할좌표로이동 ( 시작좌표설정 ) lineto(x,y) 현재좌표와지정한좌표를연결하는직선을그림 // 패스초기화 cx.beginpath(); // 캔버스의기준점으로이동 cx.moveto(0,0); // 대각선긋기 cx.lineto(100,100); // 선을출력 cx.stroke(); 134

135 서브패스를그리기위한 API quadraticcurveto(cpx, cpy, x,y) - 2 차베지에곡선을그림 beziercurveto(cp1x, cp1y, cp2x, cp2y, x,y) 3 차베지에곡선을그림 135

136 서브패스를그리기위한 API arcto(x1, y1, x2, y2, radius) - 직선과이에접하는원호를그림 arc(x, y, radius, startangle, endangle, anticlockwise) 3 차베지에곡선을그림 rect(x, y, w, h) - 사각형을그림 closepath() 패스가닫히지않은경우마지막으로그린서브패스의종료점에서패스의시작점까지직선을그어패스를자동으로닫음 136

137 패스를기준그래픽 API stroke() - 패스를선으로표현 fill() 패스내부를채움 clip() - 패스내부를클립영역으로지정함. 클리핑영역은 beginpath() 로해제 137

138 선과채우기의스타일지정 CSS 컬러 그라데이션 (CanvasGradient) 패턴 (CanvasPattern) CSS 컬러 - 선이나채우기의색을문자열로지정 - red, #FF0000, rgb(255,0,0) 등 - strokestyle, fillstyle 에아무것도지정하지않았을때 #00000( 검정색 ) 이기본값 138

139 선과채우기의스타일지정 그라데이션 (CanvasGradient) - 선형그라데이션과원형그라데이션두가지를사용 - createlineargradient(x0, y0, x1, y1) - createradialgradient(x0, y0, r0, x1, y1, r1); - addcolorstop(offset, color); var c = document.getelementbyid("mycanvas"); var cxt = c.getcontext("2d"); var g = cxt.createlineargradient(0, 0, 175, 50); g.addcolorstop(0, "#FF0000"); g.addcolorstop(1, "#00FF00"); cxt.fillstyle = g; cxt.fillrect(0, 0, 175, 50); 139

140 선과채우기의스타일지정 패턴 (CanvasPattern) 지정 - createpattern(image, repeat) - 인수 image 에는 img 요소나, video 요소, 캔버스를지정 - 인수 repeat 에는이미지를반복하는방법으로 repeat, repeat-x, repeat-y, no-repeat 중하나의값을문자열로지정 투명도지정 globalalpha - 0.0( 완전투명 ) 부터 1.0( 투명하지않음 ) 까지의값을지정 - cx.globalalpha = 0.5; 140

141 선스타일지정 선의굵기를지정 (linewidth) - linewidth 속성에정수를이용하여선의굵기를지정, 기본은 1px 선의끝점에스타일지정 (linecap) - 선의끝점에스타일지정은 linecap 속성 - 속성값으로 butt( 스타일없음. 기본 ), round, square 실제선의길이 141

142 선스타일지정 선들이교차했을때생기는각의스타일지정 (linejoin) - 속성값으로 bevel( 효과없음 ), round, mitter 142

143 그림자효과 shadowcolor 그림자색깔 shadowoffsetx 그림자를표시할위치의 x좌표 ( 기본값 0) shadowoffsety - 그림자를표시할위치의 y좌표 ( 기본값 0) shadowblur 그림자의흐림정도를지정 ( 기본값 0) cx.shadowoffsetx = 5; cx.shadowoffsety = 5; cx.shadowcolor = gray ; cx.shadowblur = 2; cx.fillrect(10, 10, 50, 50); 143

144 그림영역이겹칠때의동작지정 두도형이겹칠때지정할수있는속성 globalcompositeoperation source-atop source-in source-out source-over( 기본 ) destination-atop destination-in destination-out destination-over lighter copy xor 144

145 텍스트삽입 filltext(text, x, y, maxwidth) stroketext(text, x, y, maxwidth) Font css 의글꼴이나크기를지정 textalign center, light, left textbaseline - top, haning, middle, alphabetic, ideographic, bottom 145

146 그래픽변형하기 scale(x,y); - 가로방향배율x와세로방향배율y를지정하여확대, 취소 rotate(angle) 좌표를지정한각도만큼회전 translate(x,y) 가로방향 x, 세로방향 y 만큼좌표를변경 transform(m11,m12,m21,m22,dx,dy) settransform(m11,m12,m21,m22,dx,dy) 146

147 Canvas 이미지저장 todataurl() 은이미지데이터문자열을반환 todataurl() 함수는두개의매개변수를가지는데, 첫번째인수는이미지 MIME 타입을지정하는데이용되며나머지인수는이미지품질정도와같은추가이미지효과를지정하는데사용된다 147

148 Canvas 이미지저장 //Canvas 에그린그림을이미지로변환하기 <canvas id="drawcanvas" width="200" height="200" style=" position: relative; border: 1px solid #000;"></canvas> <button onclick="fromdataurl();"> 캔버스복사 =></button> <canvas id="copycanvas" width="200" height="200" style=" position: relative; border: 1px solid #000;"></canvas>... <script type="text/javascript"> function fromdataurl(){ var copycanvas = document.getelementbyid('copycanvas'); var copycontext = copycanvas.getcontext('2d'); var image = new Image(); image.src = canvas.todataurl(); image.onload = function(){ copycontext.drawimage(image,0,0); } } </script> 148

149 Canvas 이미지저장 //Canvas 에그린그림을다른 Canvas 로복사하기 <canvas id="drawcanvas" width="200" height="200" style=" position: relative; border: 1px solid #000;"></canvas> <button onclick="fromdataurl();"> 캔버스복사 =></button> <canvas id="copycanvas" width="200" height="200" style=" position: relative; border: 1px solid #000;"></canvas>... <script type="text/javascript"> function fromdataurl(){ var copycanvas = document.getelementbyid('copycanvas'); var copycontext = copycanvas.getcontext('2d'); copycontext.drawimage(canvas,0,0); } </script> 149

150 Canvas API Canvas API 를사용해개별픽셀단위에접근할수있다. 2D Context 객체에는모든개별픽셀을가져와 4 개채널 red, green, blue, 알파투명도로분석할수있다. var ctx = document.queryselector( canvas ).getcontext( 2d ), img = document.createelement( img ); img.onload = function(){ ctx.drawimage(img, 0, 0); var pixels = ctx.getimagedata(0, 0, img.width, img.height); //pixels 변수는 CanvasPixelArray 형식이리턴된다. 픽셀에대한행렬로된배열 //[r1, g1, b1, a1, r2, g2, b2, a2, r3, g3, b3, a3,.] for (var i=0, n=pixels.data.length;i<n;i+=4) { pixels.dat[i+0] = 255 picels.data[i+0];//red pixels.dat[i+1] = 255 picels.data[i+1];//green pixels.dat[i+2] = 255 picels.data[i+2];//blue } ctx.putimagedata(pixels, 0, 0); }; img.src = authors.jpg ;

151 drawing state 2D API 의현재그림상태 drawing state 와관련된도구들 save() : 스택에현재그림상태를저장 push restore() : 스택의제일위에있는것을가져오는 pop drawing state 에포함되는내용 변환내용 클리핑영역 다음속성들의현재값 (fillstyle, font, globalalpha, globalcompositeoperation, linecap, linejoin, linewidth, miterlimit, shadowblur, shadowcolor, shadowoffsetx, shadowoffsety, strokestyle, textalign, textbaseline) for (var j=1 ; j<50 ; j++) { ctx.save(); ctx.fillstyle= #fff ; ctx.translate(75-math.floor(math.random() * 150), 75-Math.floor(Math.random()*150)); drawstar(ctx, Math.floor(Math.random() *4) +2); ctx.restore(); }

152 SVG: 확장가능한백터그래픽 (Scalable Vector Graphics) HTML5 명세에포함되면서부터표준으로자리매김 2 차원백터그래픽만을표현 XML 형식으로작성 SVG 뷰어를이용하는등다양한삽입방법으로사용자가조회할수있다. <circle>, <rect> 등과같은그래픽태그들을이용하여작성 SMIL 또는스크립트를이용하여동적인변화를주거나 CSS 를지정하여모양을꾸밀수도있다. SVG 와스크립트를접목하여상호작용이발생하는차트, 다이어그램, 일러스트레이트등선명한화질을가진확대가능한자료를웹페이지에삽입할수있으며, 마인드맵과같은애플리케이션을개발할수있다. 152

153 Canvas 와 SVG 와의차이점 Canvas SVG 이미지처리방식 Bitmap Vector DOM 존재하지않음 (DOM Control 불가 ) 존재함 (Script 로 Control 가능 ) 외부이미지편집 Bitmap image 편집용이 Vector image 편집용이 성능 Animation 높은해상도의이미지를사용하면성능저하 Animation API 가없으므로 Script 의 Timer 를사용 이미지가복잡해질수록 Markup 이복잡해져성능이저하 높은수준의 Animation 을지원 Cross Browsing 모든 Web Browser 에서지원하지않음 외부이미지로저장 jpg, png 등으로저장가능 모든 Browser 에서지원되는 Drawing 표준 불가 적합한서비스 Graph 구현, Game Graph 구현, 매우세밀한해상도를지원하는 UI 및 Application 적합하지않은서비스 Standalone Application UI Game 153

154 SVG 의장점 접근성 image 를접근가능하게만들기위해설계되었습니다. 파일크기 bitmap image 보다작습니다. 크기조절에도깨지지않음 Vector graphic 의특징. Script 조작가능 JavaScript 와 DOM 으로접근가능. Animation SGV 언어 Core 자체에 animate 기능이내장되어있습니다. 154

155 SVG: 확장가능한백터그래픽 (Scalable Vector Graphics) <svg xmlns=" xmlns:xlink=" <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/> </svg> 155

156 Canvas 보안구현 origin-clean 캔버스엘리먼트안에는 origin-clean 플래그 ( 기본값 : true) 속성이있다. 캔버스가속해있는문서와불러온이미지나비디오의원본출처 (origin) 가같지않은경우플래그는 false 값으로바뀝니다. 다른도메인의이미지나비디오를사용할경우해당캔버스의 origin-clean 플래그는 false 로설정된다. 원격에서가져온이미지 (origin 플래그값이 false) 가포함된캔버스는 getimagedata() 나 todataurl() 이실행될때보안예외를발생시킨다. 한번캔버스의속성이바뀌면캔버스크기를바꾸거나캔버스위에새로운그림을그려도속성값이변하지않고동일하게해당메소드들을사용할수없습니다. 이미지에수정을가한후에캔버스에서이미지데이터에접근하지않는다면캔버스에다른도메인의이미지를그리는데는문제가없다.

157 Video & Audio

158 HTML5 Video & Audio HTML5 에서는브라우저의플러그인없이도미디어를데이터를재생가능 2010 년 1 월시점에서는 Firefox3.5, Safari4, Google Chrome3 등의브라우저가 video/audio 요소를지원 <video src= Javascript 를이용하면재생, 일시정지, 재생속도변경등을처리할수있음 브라우저지원여부확인 var hasvideo =!!(document.createelement( video ).canplaytype); 158

159 HTML5 Video & Audio HTML5 <audio> 지원여부확인 return!!document.createelement( audio ).canplaytype; //<audio> 의 MP3 포맷지원 var a = document.createelement( audio ); return!!(a.canplaytype && a.canplaytype( audio/mpeg; ).replace(/no/, )); //<audio> 의 Vorbis 포맷지원 var a = document.createelement( audio ); return!!(a.canplaytype && a.canplaytype( audio/ogg; codecs= vorbis ).replace(/no/, )); 159

160 HTML5 Video & Audio HTML5 <audio> 지원여부확인 //<audio> 의 WAV 포맷지원 var a = document.createelement( audio ); return!!(a.canplaytype && a.canplaytype( audio/wav; codecs= 1 ).replace(/no/, )); //<audio> 의 AAC 포맷지원 var a = document.createelement( audio ); return!!(a.canplaytype && a.canplaytype( audio/mp4; codecs= mp4a.40.2 ).replace(/no/, )); 160

161 HTML5 Video & Audio HTML5 <video> 지원여부확인 return!!document.createelement( video ).canplaytype; //<video> captions return track in document.createelement( track ); //<video poster> Return poster in document.createelement( video ); 161

162 HTML5 Video & Audio HTML5 <video> 지원여부확인 //<video> 의 WebM 포맷지원 var v = document.createelement( video ); return!!(v.canplaytype && v.canplaytype( video/webm; codecs= vp8,vorbis ).replace(/no/, )); //<video> 의 H.264 포맷지원 var v = document.createelement( video ); return!!(v.canplaytype && v.canplaytype( video/mp4; codecs= avc1.42e01e, mp4a.40.2 ).replace(/no/, )); //<video> 의 H.264 포맷지원 var v = document.createelement( video ); return!!(v.canplaytype && v.canplaytype( video/ogg; codecs= theora,vorbis ).replace(/no/, )); 162

163 HTML5 Video & Audio Video 의한가지문제는브라우저별로재생할수있는미디어형식이다르다는점. 100% 호환성있는구현은불가능 ( 코덱개발 ) 모바일에서는호환성있는구현가능 (Android, iphone) 163

164 오디오및비디오제한사항 오디오및비디오스트리밍 : HTML5 의비디오비트단위스위칭에대한표준은현재로서는없다. 미디어는 HTTP 는다른도메인간리소스공유의제약을받는다. 전체화면모드비디오는보안상의이슈로자바스크립트로접근할수없다. 브라우저에서사용자의선택에따라비디오를전체화면으로보여주는옵션을제공하고있다. Audio, video 요소에대한접근성에대해서는아직까지명세에충분히기술돼있지않다.

165 Audio Element 가사용할수있는속성 속성명값기능 src 파일경로 Source autoplay autoplay 페이지가 Load 되자마자사운드를재생할지를지정합니다. controls controls 플레이어를표시합니다. loop 재생횟수 audio 를반복재생할횟수를지정합니다. preload none, auto, meta Page 가열리면 audio 를미리 Load 합니다. 165

166 Video Element 가사용할수있는속성 속성 설명 controls 재생 Control 표시를제어합니다. autoplay 동영상이 Loading 되면곧바로재생을시작합니다. autobuffer poster 이속성을사용하게되면사용하기전부터다운로드가진행됩니다. 사용자가재생할때쯤이면동영상이어느정도다운로드가된상태일것입니다. 동영상이 Download 중이거나 Buffering 중에나타낼이미지를지정합니다. loop 동영상을반복재생합니다. width 동영상의너비를지정합니다. height 동영상의높이를지정합니다. 166

167 HTML5 Video & Audio 공통요소로 src외 loop, controls autoplay 속성이있음 - loop : 재생이끝나면처음부터다시반복재생 - controls : 각브라우저고유의컨트롤바를표시 - autoplay : 재생할수있는상태가되면자동으로재생 <video src= ></video> <audio src= <video src= controls loop autoplay></video> 167

168 HTML5 Video & Audio video/audio 태그안쪽에기술하는내용은브라우저가해당요소를지원하지않을때대신출력할내용 <video src= controls loop autoplay> 이페이지를보려면 video 요소를지원하는브라우저를이용하여주세요. </video> 168

169 HTML5 Video & Audio video 요소의고유특성 - width : 동영상의넓이 - height : 동영상의높이 - poster : 재생할수있는동영상이다운로드될때까지대신표시할이미지 URL <video src= controls loop autoplay> 이페이지를보려면 video 요소를지원하는브라우저를이용하여주세요. </video> 169

170 HTML5 Video & Audio source 요소를사용한미디어데이터지정 - video/audio 태그사이에 <source> 요소를이용 - src : 미디어데이터의 URL - type: 미디어데이터의 MIME 타입 - media : 미디어데이터의이용조건인미디어쿼리 <source src= type= audio/vorbis ></source> <source src= type= video/ogg ></video> 170

171 HTML5 Video & Audio 미디어타입과속성값 유형 Ogg 컨테이너의 Theora 비디오와 Vorbis 오디오 Ogg 컨테이너의 Vorbis 오디오 MP4 컨테이너의단순프로파일 H.264 비디오 MP4 컨테이너의단순프로파일 MPEG-4 비주얼 (MPEG-4 비주얼 ) 과저복잡도프로파일 ACC 오디오 속성값 type= video/ogg; codecs= theora, vorbis type= audio/ogg ; codecs=vorbis type= video/mp4 codecs= avc1.42e01e, mp4a.40.2 type= video/mp4 codecs= mp4v.20.8, mp4a

172 HTML5 Video & Audio 일반적인제어함수 미디어재생에관한 Javascript API load() 동영상을다시읽어들임 ( 재생하지않음 ) play() pause() canplaytype(type) 동영상을재생함 재생중인동영상을일시정지함 MIME 타입에따라재생가능한 video 요소인지여부를테스트한다. 172

173 HTML5 Video & Audio 미디어요소의읽기전용속성 currentsrc error starttime duration paused defaultplaybackrat e playbackrate ended buffered 미디어재생에관한 Javascript API 현재재생중인미디어데이터의 URL 에러가발생했을경우에러코드를반환 재생할위치를초단위로나타냄 미디어데이터의길이를초단위로나타냄 일시정시인지아닌지를반환 기본재생속도. 기본값은 1.0 재생속도. 기본값은 1.0 이며 0 이상앞으로재생마이너스이면거꾸로재생 재생이종료되었는지반환 버퍼링이완료되어브라우저가재생할수있는비디오의시간범위를나타낸다. 173

174 HTML5 Video & Audio 쓰기가능한속성값 autoplay muted volume loop controls autobuffer 미디어재생에관한 Javascript API 미디어클립이자동재생되도록설정 음소거인지반환, 오디오음소거수행, 및취소 음량을표시함. 0.0 ~ 1.0 까지값을가짐 클립이재생완료후다시재생되면 true 를반환하거나, 클립이순환재생되도록설정 사용자컨트롤을보여주거나숨긴다. 현재컨트롤이보여지는지여부도알수있다. 미디어파일을재생하기전에해당파일이로드됐는지여부를플레이어에전달자동재생으로설정됐다면 autobuffer 속성은무시 174

175 HTML5 Video & Audio Event Canplaythrough Play Canplay Pause Error Loadeddata Loadedmetadata Ended Volumechange Ended 비디오를재버퍼링없이끝까지재생할수있다고판단되는순간에발생 단지몇프레임일지라도비디오가재생가능하면발생 에러가발생하면전달 미디어의첫번째미디어프레임의로드가완료되었을때발생 미디어의메타데이터 ( 크기, 지속시간, 텍스트트랙등 ) 로딩이끝나면전달 비디오가끝에도달해서멈췄을때발생 음소거, 음소거해제, 볼륨의변화를감지

176 HTML5 Video & Audio Event Timeupdate Playing Seeking Seeked 비디오의시간이바뀔때마다발생, 1 초이내에도여러번발생할수있음 미디어가재생을시작했다는것을의미 비디오가처음으로돌아가재생을다시시작할때 playing 이벤트는보내지만 play 이벤트는보내지않는다. 탐색작업이시작되면전달됨, 탐색바가움직이기시작할때발생할수도있다. 탐색작업이완료되면발생

177 HTML5 Video & Audio 스크립트만으로오디오를재생할방법 var audio = new Audio("song.mp3"); audio.play(); 브라우저에서비디오요소를지원하는지를검사하는방법 document.createelement('video').canplaytype 브라우저가지원하는코덱을검사하는방법 var v = document.createelement('video'); var supported = v.canplaytype('video/mp4; codecs="avc1.58a01e, mp4a.40.2"'); if ( supported == 'probably') { return true; } 177

178 Drag & Drop API

179 Drag&Drop API 드래그 & 드랍 API 이용방법 - 드래그대상요소와드랍대상요소를구분 드래그대상을지정 (draggable 요소 ) - 드래그대상이웹애플리케이션안의요소라면 draggable 속성을지정 - 값은 true/false/ 값없음으로지정 <li id= apple1 draggable> 사과 </li> draggable 값이 True 인경우 API 를이용한 Javascript 를사용해야움직일수있다. Drag & Drop 지원여부확인 return draggable in document.createelement( span ); 179

180 Drag&Drop API 드래그시작이벤트처리 (dragstart 이벤트 ) - 데이터를교환할때 DataTransfer 객체를사용 <ul id= list1 ondragstart= ondragstart(event) > <li id= apple1 draggable> 사과 </li> <li id= grape1 draggable> 포도 </li> <li id= orange1 draggable> 오렌지 </li> </ul> // 드래그시작시처리 function ondragstart(event){ if(event.target.tagname.tolowcase()== li ){ event.datatransfer.setdata( listitemid,event.target.id); }else{ //li 요소가아니면처리하지않음 event.preventdefault(); } } 180

181 Drag&Drop API 드랍대상요소에서발생하는이벤트를처리 - 드랍대상요소에서는적어도세가지이벤트를처리 - 모든요소가기본값상태에서는드랍을허용하지않음 - 드랍을허용하려면기본값상태를취소 (event.preventdefault()) 할필요가있음 dragenter 드래그중마우스포인터가요소와겹치는순간호출되는이벤트. dragover 드래그중마우스포인터가요소위를가로지를때단속적으로발생하는이벤트 drop 드랍처리를실행할때발생하는이벤트. DataTransfer 로부터데이터를꺼내어처리. 이벤트가끝난후이벤트가다른요소에전파 ( 이벤트버블링 ) 되는것을방지하기위해 stoppropagation() 호출해야함. 181

182 Drag&Drop API 드래그 & 드랍에관한이벤트목록 이벤트이벤트알리는곳설명 dragstart 드래그대상요소드래그가시작 drag 드래그대상요소드래그중 dragenter dragover dragleave 드래그중마우스커서가위치한요소 드래그중마우스커서가위치한요소 드래그중마우스커서가위치한요소 드래그조작이요소안의범위에들어옴 드래그조작이요소안의범위를통과중 드래그조작이요소안의범위를벗어남 drop 드랍할곳의요소드랍되었음 dragend 드래그대상요소드래그종료 182

183 DataTransfer Drag & Drop API 를사용시 Drag & Drop 되는요소들의 Data 를담는역할 Drag 될데이터에대한형식과값등을관리하는역할 드래그할수있는데이터 Drag 객체 의미 text, text/plain 문자열 url, text/url-list url, 여러개의 url 의목록일수도있다. file 윈도우탐색기와같이다른프로그램에서드래그된파일 183

184 DataTransfer 의속성과메서드 DataTransfer dropeffect 속성 / 메서드 effectallowed types 설명 드래그 & 드랍종류를나타내는문자열. copy, move, link, none 중하나가됨 copy, move, link, none 개별동작이나 copymove, linkmove, all 처럼둘이상을동시에허용할수있음. setdata() 를호출할때지정되는포맷문자열을배열형식으로얻음. cleardata(type) 드래그중인데이터를삭제. setdata(type,data) getdatat(type) files 드래그할데이터를저장함 포맷을지정하여데이터를가져옴 다른애플리케이션으로부터드래그한파일을가져옴 184

185 DataTransfer 의속성과메서드 Drag&Drop API 속성 / 메서드 setdragimage(image,x,y) addelement(element) 설명 Img 요소를이용하여드래그중의피드백을지정함 드래그중피드백이미지에추가할요소를지정 185

186 Web Messaging postmessage MessageChannel

187 Cross Document Messageing Web Messaging 한페이지에의해활성화된다른웹페이지간의비동기적메시지교환을가능하게하는기술 Web Messaging 이전에는활성화된페이지간의메시지처리를위해동일한도메인내에서상대방의 DOM(Document Object Model) 접근으로메시지를전달하였다. 서로다른도메인의경우에는크로스사이트스크립팅이라는보안문제로상대방의 DOM 접근이금지되어있다. HTML5 Web Messaging DOM 접근법에의한메시지전달이아니라메시지전송을위한 postmessage 메서드와메시지도착시발생하는 message 이벤트핸들러를사용하여서로다른도메인간에도메시지를교환하는기법 일대일교환방식을확대하여다대다메시지교환이가능한 MessageChannel 객체를제공하고있다. Web Messaging 기법을사용하면서로다른도메인에위치하여범용기능을수행하는웹라이브러리의제작이용이하다 187

188 Cross Document Messageing 브라우저제작사에서는다른도메인에서로드된콘텐츠를획득하거나수정할경우브라우저는보안예외를발생시키고작동을차단한다. 매시업 (mashup) 은브라우저내에서다른사이트의콘텐츠와통신할수있는몇가지적합한경우이다. 매시업 (mashup) 은지도, 채팅, 뉴스등다른사이트의콘텐츠를조합해서새로운메타애플리케이션을만드는것 브라우저제작사와표준화단체는다른도메인문서간메시징기능에합의 다른도메인문서간메시징을이용하면 iframe, 탭, 윈도우간에보안통신이가능 메시지를보내는표준방식은 postmessage API 로정의 postmessage 는자바스크립트컨텍스트간에비동기메시지통신을제공 postmessage 같은도메인문서간의통신에도사용되지만특히브라우저의동일도메인정책에의해허용되지않는문서간의통신에더욱유용 188

189 Cross Document Messageing window 객체는다른페이지로메시지를전달하기위해 postmessage 메서드를제공 메시지수신을위해 window 객체의 message 이벤트를제공 postmessage 메서드에의해전달된메시지는해당 window 의메시지큐에놓이며, 가장먼저도착한메시지를큐에서꺼내 message 이벤트를발생시킨다. postmessage 는 HTML5 웹워커와같은자바스크립트컨텍스트간의통신에사용 초기버전의 postmessage 는문자열만지원했지만, 최근버전에서는자바스크립트객체, 캔버스 imagedata, 파일도지원 지원되는객체는브라우저구현에따라다르다. 189

190 도메인보안의이해 웹상에서신뢰관계를모델링하는데사용되는주소의부분집합 호스트와포트로구성 HTML5 에서는도메인의직렬화 (serialization) 를정의한다. 도메인은문자열형식으로 API 와프로토콜을참조할수있다. 다른도메인간통신은도메인으로송신자를식별한다. 수신자는신뢰할수없거나모르는도메인일경우메시지를무시할수있다. postmessage 의보안규칙은예상치못한 ( 원치않는 ) 도메인의페이지에서메시지를받을수없도록보장한다. 메시지에포함된도메인은브라우저에제공되며변조될수없다. 190

191 Cross Document Messageing MessageEvent 라고하는 javascript 객체나문자열을비동기방식으로주고받음으로써여러프로그램간의데이터를공유 Cross Document Messageing 기술 둘이상의웹페이지가서로데이터를주고받을수있다. 다른도메인간의통신이가능 수신측 Window 의 postmessage() Method 를호출 수신측에서는자신의 window 에대해 onmessage Event Handler 를지정한다. 브라우저지원여부확인 if(typeof window.postmessage == undefined ){ //postmessage 를지원하지않는브라우저입니다. } 191

192 postmessage window.postmessage(data, [ports], target) window 객체에첫번째인자로주어진 data 를전송한다. Data : 전송할메시지를지정하는문자열 Ports : MessageChannel 객체의 MessagePort 전달을위해사용되는포트배열 Target : 메시지를수신하는도메인을지정하는문자열. 보안상의위험을최소화하기위해사용. 만약 window 객체의도메인이름과 target 의인자가서로다를경우, 전송메시지는폐기된다. * 으로지정한경우, 임의의도메인에대해서도전송이허용됨을뜻하지만, 도메인이름을기술해주는것이바람직하다. 192

193 framebusting postmessage 를이용하면 iframe 과부모페이지간에통신수락을할수있다. var framebusttimer; var timeout = 3000; // framebust 의타임아웃시간을 3 초로설정 // 최상위윈도우가아니면 3 초후최상위윈도우의 location 을변경 if(window!= window.top){ framebusttimer = settimeout{ function(){ window.top.location = location; }, timeout); } // 신뢰할수있는도메인에서메시지가도착하면 window.addeventlistener( message, function(e){ switch(e.origin) { case trustedframer: cleartimeout(framebusttimer); // 타이머해제 break; } ), true); 193

194 MessageEvent 두지점간에주고받는메시지 JavaScript 객체 HTML5 웹소켓과 HTML5 웹워커의일부분 MessageEvent 의속성 data 수신된메시지내용을담고있는속성 origin 메시지송신처의도메인이름을알려주는속성신뢰할수없는도메인에서온메시지는무시할수있다. lasteventid 서버전송이벤트방법에서사용하는마지막이벤트아이디를알려주는속성 source 메시지를보내는윈도우객체를알려주는속성 ports 메시지포트전달방법의사용시전달된포트를알려주는속성 194

195 MessageEvent 메시지를수신하는쪽은 onmessage 라는이벤트핸들러를지정하여 MessageEvent 형의객체를얻음 // 메시지를수신. MessageEvent 형의객체를얻음 window.onmessage = function(e){ //origin 속성으로부터송신처를확인 if(e.origin == ){ //data 속성으로부터수신된메시지내용을확인 alert(e.data); } } message 이벤트를처리할수있도록이벤트리스너를추가해도같은효과를얻음 window.addeventlistener( message, function(e){.. },false); 195

196 XMLHttpRequest Level2 Ajax 를구현할수있는 API 과거에는같은도메인간의 XMLHttpRequest 만허용 XHR2 는다른도메인간자원공유 (CORS, Cross Origin Resource Sharing) 을통해다른도메인간의 XMLHttpRequest 가가능 Origin 헤더는요청을보낸도메인을서버에제공하며, Origin 헤더는브라우저에의해보호되고애플리케이션코드로변경할수없다. 다른도메인간 XHR2 를사용하면다른도메인에서제공되는서비스를사용하는웹애플리케이션을만들수있다. 다른도메인간 XHR2 를사용하지않으면같은도메인간의통신만가능하다. W3C 에서 CORS 라는규칙하에서타도메인간의전송표준발표 196

197 CORS(Cross-Origin Resource Sharing) Ajax Same Origin Policy 원칙 현재브라우저에보여지고있는 HTML 을내려준웹서버 (Origin) 에게만 Ajax 요청을보낼수있다. CORS 는요청을받는웹서버가허락하면크로스도메인이라도 Ajax 로통신할수있다. 크로스도메인에위치한웹서버가응답에적절한 Access-Control-Allow- 류의헤더를보냄으로써크로스도메인 Ajax 를허용할수있다. 197

198 CORS(Cross-Origin Resource Sharing) CORS 명세서는인증서를포함한요청또는 GET, POST 이외의요청과같은민감한액션에대해기술 서버의액션지원여부를확인하려면브라우저에서서버로 OPTIONS 요청을보내야한다. CORS 를지원하는서버가있어야만통신이가능하다. 198

199 CORS (Cross-Origin Resource Sharing) 하는방법 본래 http->https 로 iframe 에서통신을할때도메인이다를경우 Cookie 나 Header 정보들이처리가안된다 서버측처리 Access-Control-Allow-Credentials : true 클라이언트에게 Header 나 Cookie 등을믿고보내라는의미 Access-Control-Allow-Origin: * 서버에서 Access-Control-Allow-Origin 를요청한패킷의 Origin 을보고해당 Origin 값으로내려줘야한다. Access-Conrol-Max-Age : 해당초동안 OPTIONS 를안올린다. Access-Control-Allow-Methods : POST 클라이언트측처리 Js 에서호출전 open 과 send 사이에 http_request.withcredentials= true 199

200 HTML5 XHR2 지원브라우저 HTML5 XMLHttpRequest Level2 를지원하는브라우저 브라우저 IE 9.0 Firefox 9.0 Chrome 16.0 Safari 5.1 Opera 11.6 ios Safari Opera Mini 세부사항미지원지원지원지원미지원 5.0 지원미지원 200

201 HTML5 XHR2 단계적응답이벤트 HTML5 XMLHttpRequest Level2 단계적응답이벤트속성 이벤트핸들러속성에각이벤트마다콜백함수를설정할수있다. 기존의 readystate 속성과 readystatechange 이벤트는하위호환성을위해계속지원된다. 단계적응답이벤트는전송될전체데이터의크기와전송된데이터의크기, 전체크기를알고있는지에대한불린값필드를가지고있다. 단계적응답이벤트이름 Loadstart Progress Abort Error Load loadlend 201

202 XMLHttpReqeust API 사용 브라우저지원여부확인 var xhr = new XMLHttpRequest() if (typeof xhr.withcredentials == undefined) { document.getelementbyid( support ).innerhtml = 다른도메인간 XMLHttpRequest 를지원하지 <strong> 않는 </strong> 브라우저입니다. ; }else { document.getelementbyid( support ).innerhtml = 다른도메인간 XMLHttpRequest 를 <strong> 지원하는 </strong> 브라우저입니다. ; } 202

203 XMLHttpReqeust API 사용 다른도메인간요청보내기 var crossoriginrequest = new XMLHttpRequest() crossoriginrequst.open( GET, true); } 네트워크에문제가있었거나, 접근차단또는대상서버가 CORS 를지원하지않는경우요청이실패하여에러가발생한다. 203

204 XMLHttpReqeust API 사용 Onprogress 이벤트사용하기 var crossoriginrequest = new XMLHttpRequest() crossoriginrequst.onprogress = funcion(e){ var total = e.total; var loaded = e.loaded; } if (e.lengthcomputable) { // 단계적응답정보를표현한다. } crossoriginrequst.upload.onprogress = funcion(e){ var total = e.total; var loaded = e.loaded; } if (e.lengthcomputable) { // 단계적응답정보를표현한다. } 204

205 Channel Messaging Window 객체기반의메시지교환은목적지 window 객체가지정되어있기때문에지정된 window 객체인단하나의수신처에게메시지를전송한다. MessageChannel 객체는일대일메시지교환은물론다대다메세지교환을실현하기위한 API MessageChannel 의속성 port1, port2 : 메시지의송수신에대한종단점으로사용되는 MessagePort 객체속성 속성 port1 과 port2 는메시지송수신의종단점으로, 한쪽에서보낸메시지는다른쪽에서수신된다. 두 port 는파이프라인으로연결되어있는형태로동작하며, port1 에서보낸메시지는 port2 에서수신된다. 205

206 MessagePort 속성 / 메소드 postmessage start close onmessage addeventlistener removeeventlistener 설명 메시지의송신을처리하는메소드 포트에메시지가도착할경우 message 이벤트발생을활성화시키는메서드수신역할을수행하는포트는반드시이메서드가사전에호출되어있어야만 message 이벤트가발생한다. start 메시지에의해시작된 message 이벤트발생을비활성화시키는메소드이다. 포트에메시지가도착하면 message 이벤트가발생한다. Message 이벤트핸들러의설정을위해사용되는속성 이벤트핸들러설정을위해사용되는메서드 이벤트핸들러의설정을제거하기위해사용되는메서드 206

207 Messaging Port 의전달 MessageChannel 객체의 MessagePort 를서로다른도메인에서사용하려면 port1, port2 중하나의포트를다른쪽의 window 객체에통지해야한다. Window 객체의 postmessage 메서드는서로다른도메인에대해서도호출할수있으므로, 메시지를교환하고자하는 window 에게 MessageChannel 객체의 MessagePort 를 postmessage 메서드를통해전달한다. Document A Document B MessageChannel port1 port1 207

208 HTML5 MessageEvent 크로스도큐먼트메시징, Web Workers, Server-Sent Events 등커뮤니케이션 API 를기반으로한 API 는모두 message 이벤트를처리하여메시지를수신 각 API 의차이점은어떤객체가 Message 이벤트를발생하는주체가되는가에있음 크로스도큐먼트메시징 window 객체 Web Worker Worker 의인스턴스 Server-Sent Events EventSource 인스턴스 208

209 Application Cache API

210 Application Cache 애플리케이션캐시란웹애플리케이션을오프라인에서도사용할수있도록웹애플리케이션이필요로하는리소스를클라이언트쪽에캐시하는기능 리소스란웹애플리케이션을구성하는 HTML, CSS, Javascript, 이미지파일등 애플리케이션캐시를이용하면웹애플리케이션에있어필수적인리소스를브라우저에의해자동으로캐시 캐시매니페스트란웹애플리케이션을동작시키기위해어떤파일이캐시에필요한지를브라우저에알림 210

211 Application Cache 오프라인브라우징 오프라인상태에서도사용자가사이트에접근할수있다. 속도향상 로컬영역에저장된리소스들은매우빠른로드속도로호출된다. 서버부하감소 브라우저는오직리소스가변경된경우에만다운로드를시도한다. 211

212 Application Cache 서버 CSS HT ML JS 캐시매니페스트 매니페스트에따라캐시되고관리됨 브라우저 CSS HT ML JS 캐시매니페스트 212

213 Application Cache 오프라인에서도사용가능한애플리케이션 이메일작성과읽기 문서편집 프리젠테이션편집과게시 To-do 리스트작성 Cache manifest 파일 브라우저가하드디스크에서일반적으로리소스를저장하는위치에애플리케이션캐시 (application cache) 라는것을만든다. 브라우저 세부사항 IE Firefox Chrome Safari Opera 미지원 3.5이상지원 4.0이상지원 4.0이상지원 10.6이상지원

214 Application Cache 서버에캐시매니페스트는 text/cache-manifest 라는 MIME 타입으로배포되도록설정 예를들어 Apache HTTP Server 에서는 mime.types 파일에아래와같이수정 # manifest라는확장자파일에대해 MIME 타입을설정 text/cache-manifest manifest 캐시매니페스트 URL 을 html 요소의 manifest 속성에지정하면오프라인웹애플리케이션이완성됨 <!DOCTYPE html> <html manifest= hello.manifest > </html> 214

215 CacheManifest 파일작성방법 text/cache-manifest MIME 타입으로전송되어야한다. 문자의인코딩은 UTF-8 CACHE MANIFEST 라는행으로시작해야함 주석은 # 문자로시작한다. 캐시매니페스트는캐시해야할리소스를줄바꿈으로구분하여나열 줄바꿈문자로는 \n\r, \n, \r 를모두사용할수있다. 파일은 URL 형식으로기술하며, 절대경로또는상대경로로표시한다. 모든파일은메인페이지와동일한도메인내에있어야한다. CACHE, FALLBACK, NETWORK 라는세개의섹션으로구분하여기술한다. 별도의세션지시어가기술되어있지않은경우에는 CACHE 섹션으로간주한다. 215

216 Application Cache CACHE MANIFEST # v2 # 명시적으로캐시된항목 CACHE: index.html stylesheet.css images/logo.png scripts/main.js # 사용자가온라인상태가되었을때필요한리소스들 NETWORK: login.php /myapi # static.html 파일은 main.py 파일에접근할수없을때보여짐 FALLBACK: /main.py /static.html 216

217 CacheManifest 파일 파일로저장할때는.manifest 라는확장자를저장하는것이관례 사이트당최대 5MB 까지캐시할수있다. manifest 파일이나또는 manifest 에명시된파일의다운로드가실패할경우브라우저는가장최근에성공적으로다운로드한파일을그대로사용하며, 실패이벤트를발생한다. CACHE 섹션 캐시할리소스의 URL 을지정하기위한섹션 이섹션안에기술된리소스는브라우저에의해자동으로캐시되어오프라인상황에서로컬캐시로부터읽혀서비스된다. 217

218 CacheManifest 파일 FALLBACK 섹션 URL 의리소스가없을때이를대신할리소스를지정 메인페이지에서사용되기는하지만매니페스트의 CACHE 섹션에지정되지않은파일들을오프라인상황에서대체할파일로기술하기위함 작성법은맨처음폴백대상이되는 URL 을적고공백이나탭을구분자로하여대체리소스 URL 을적음 FALLBACK 섹션은온라인 / 오프라인에상관없이적용 NETWORK 섹션 NETWORK 섹션안에지정된 URL 과일치하는리소스는캐시되지않고반드시네트워크를통해액세스를시도함 파일명또는경로명이아닌 * 만으로지정된항목은다른도메인에대해서도모두네트워크를통해전송받아처리할경우에사용된다. 218

219 애플리케이션캐시의 API 와이벤트처리 오프라인웹애플리케이션 API 브라우저지원여부확인 if (window.applicationcache){ // 오프라인애플리케이션을지원하는브라우저입니다. } IE 에서온라인인지오프라인지확인방법 // 페이지가로딩되면온라인, 오프라인상태를표시 function loaddemo(){ if(navigator.online){ log( Online ){ }else{ log( Offline ); } } // 온라인상태를이벤트에추가 window.addeventlistener( online, function(e) { log( online ); } window.addeventlistener( offline, function(e){ log( offline ); }, true); 219

220 애플리케이션캐시의 API 와이벤트처리 Javascript 로애플리케이션캐시에엑세스하기위해서는 window.applicationcache, 혹은간단히 applicationcache 객체를이용하여프로그램적으로관리할수있다. //applicationcache 객체의메서드와속성 status 애플리케이션캐시의상태를나타내는정수값 update() 캐시파일의업데이트를비동기적으로수행함 swapcache() update() 메서드가완료된경우에실행하며, 기존에사용하던캐시를새롭게업데이트된캐시로교체한다. 상수 Cache상태값 Cache 상태설명이벤트 UNCACHED 0 캐시되지않음 IDLE 1 사용되지않음 oncached CHECKING 2 확인중 onchecking DOWNLOADING 3 다운로드중 ondownloading UPDATEREADY 4 최신캐시업데이트준비완료 onupdateready OBSOLETE 5 에러에의해캐시무효화 onobsolete 220

221 캐시상태확인스크립트 var appcache = window.applicationcache; switch (appcache.status) { case appcache.uncached: // UNCACHED == 0 return 'UNCACHED'; break; case appcache.idle: // IDLE == 1 return 'IDLE'; break; case appcache.checking: // CHECKING == 2 return 'CHECKING'; break; case appcache.downloading: // DOWNLOADING == 3 return 'DOWNLOADING'; break; case appcache.updateready: // UPDATEREADY == 4 return 'UPDATEREADY'; break; case appcache.obsolete: // OBSOLETE == 5 return 'OBSOLETE'; break; default: return 'UKNOWN CACHE STATUS'; break; }; 221

222 캐시상태확인스크립트 프로그램적으로캐시를갱신하려면 applicationcache.update() 를호출 applicationcache.status 를확인한결과가 "UPDATEREADY"( 갱신준비 ) 상태라면 applicationcache.swapcache() 를호출하여오래된캐시를새로운파일로교체가능 var appcache = window.applicationcache; appcache.update(); // 사용자의캐시를갱신하도록시도함... if (appcache.status == window.applicationcache.updateready) { appcache.swapcache(); // 가져오기에성공한경우새로운캐시로교체 } 업데이트진행상황, 사용가능한업데이트가없을때오류발생이벤트 onerror, onnoupdate, onprogress 222

223 애플리케이션캐시이벤트 상수 checking error noupdate downloading progress updateready chached obsolete 업데이트체크중 처리중에러가발생 설명 매니페스트파일이변경되어있지않는경우에발생하는이벤트 업데이트다운로드를시작할때발생하는이벤트 다운로드진행중일때발생하는이벤트 업데이트가완료되어새로운캐시로교체할수있음을알리는이벤트 swapcache() 를호출할수있음 캐시완료 매니페스트얻기에실패하여캐시가무효화되었을경우에발생 // 이벤트처리를하려면 addeventlistener() 을이용하여이벤트핸들러등록 applicationcache.addeventlistener( updateready, function(){ //updateready 이벤트시의처리 },false); 223

224 캐시된파일의업데이트 Manifest 파일에의해로컬캐시에저장된파일은서버에의해파일이새롭게변경되더라도사용자의 reload 요청시새롭게업데이트되지않는다. 웹브라우저가기존의매니페스트파일만을비교, 처리하여캐시된파일이변경되어도메니페스트파일이변경되지않는이상기존에캐시되어있는파일을재사용하기때문 Manifest 파일에의해캐시된파일을변경하고자할경우에는반드시 Manifest 파일도함께변경시켜주어야한다. Manifest 파일의주석문으로버전을변경하여업데이트방법을사용한다. 224

225 error handling function handlecacheerror(e) { alert('error: 젠장! 캐시갱신을실패하였습니다.'); }; // 최초 manifest 의캐시가완료된경우이밴트발생 appcache.addeventlistener('cached', handlecacheevent, false); return 'UNCACHED'; break; case appcache.idle: // IDLE == 1 return 'IDLE'; break; case appcache.checking: // CHECKING == 2 return 'CHECKING'; break; case appcache.downloading: // DOWNLOADING == 3 return 'DOWNLOADING'; break; case appcache.updateready: // UPDATEREADY == 5 return 'UPDATEREADY'; break; case appcache.obsolete: // OBSOLETE == 5 return 'OBSOLETE'; break; default: return 'UKNOWN CACHE STATUS'; break; }; 225

226 Web Storage

227 Cookie 서버에서클라이언트로텍스트값을주고받을수있게브라우저에내장 쿠키값은사용자가도메인을방문할때마다송신된다. 웹서버가서버측장바구니데이터베이스와일치하는브라우저쿠키에고유한 ID 를저장해어떤장바구니가어느사용자의것인지알수있게영역실별자를저장할수있다. 쿠키값은타겟광고의목적으로어떤페이지에사용자가방문했는지추적하는것과같이사용자에게큰지장이없는경우에사용할수있다. 사용가능한용량이매우제한적 (4KB) 쿠키에연관된모든요청에따라서버에서브라우저로오간다.( 쿠키데이터는네트워크상에서참조가가능하며암호화되지않았을때보안위험이생긴다.)

228 Web Storage Web Storage 란웹브라우저를실행하고있는클라이언트의로컬디스크에소량의데이터를저장해두기위한스토리지 Web Storage 이전에는 Cookie 를사용 Web Browser 마다별도로가지고있는저장공간에 Data 를 Key-Value 형식으로저장 Web Storage 종류에는 Local Storage 와 Session Storage 가있음 Offline Web Application 과비슷하게갑자기전원이꺼진다거나다시 PC 를켰을때이전에작업한데이터를보존또는웹메일을 Web Storage 에저장해두었다가읽는등, 서버의많은정보를 Client 에저장 228

229 Web Storage 크기에제한이없음 Cookie 는하나의사이트에저장할수있는크기가제한되어있음 (4Kb). Web Storage 에서는이러한제한없음 서버로보내지지않음 Cookie 는 HTTP 요청에자동으로포함되어서버로전송. Web Storage 에서는이러한동작은일어나지않음 유효기간의제한이없음 Cookie 처럼특정기간이지나면자동으로삭제되지않음 Javascript 객체를저장할수있음 Cookie 와는다르게 Web Storage 에는 Javascript 객체를저장할수있음 229

230 HTML5 WebStorage 지원브라우저 HTML5 WebStroage 를지원하는브라우저 브라우저 IE Firefox Chrome Safari Opera 세부사항 8.0이상지원 3.0이상지원 3.0이상지원 4.0이상지원 10.5이상지원 230

231 Local Storage 웹사이트도메인마다각각별도로생성되는저장영역 저장된데이터의유효시간이없는구조로처리된다. localstorage 에설정된값은같은키값을사용하는다른페이지에서불러쓸수있다. localstorage 에설정된값은같은페이지에서나중에로딩될때도적용된다 // 스토리지에값을설정 localstorage.setting = {color: red,lang: ko }; localstorage[ setting ] = {color: red,lang: ko }; localstorage.setitem( setting, {color: red,lang: ko }); // 스토리지에값을읽음 var settings = localstorage.settings; var settings = localstorage[ settings ]; var settings = localstorage.getitem[ settings ]; 231

232 Web Storage 지원여부확인 Web Storage function checkstoragesupport(){ // 세션스토리지 if (window.sessionstorage){ alert( sessionstorage 를지원하는브라우저입니다. ); }else{ alert( sessionstorage 를지원하지않는브라우저입니다. ); } // 로컬스트로지 if(window.localstorage){ alert( localstorage 를지원하는브라우저입니다. ); }else{ alert( localstorage 를지원하지않는브라우저입니다. ); } } 232

233 Web Storage Session Storage 란윈도우 (window 객체 ) 와같은유효범위, 생존기간을가지며도메인마다따로생성되는스토리지 같은웹페이지가별도의윈도우 ( 탭 ) 로열릴때각각의윈도우마다 Session Storage 가생성 윈도우가닫히면세션스토리지도삭제 sessionstorage 에설정된값은같은키값을사용하는다른페이지에서불러쓸수없다. sessionstorage 에설정된값은같은페이지에서나중에로딩될때도적용되지않는다. 윈도우 1 examplea.com exampleb.com 윈도우 2 도메인이다르므로스토리지도다름도메인같으나윈도우가다르므로스토리지도다름 examplea.com 233

234 Web Storage Session Storage 는몇개의페이지를거쳐저장해야하는데이터가있고, 사용자가이애플리케이션을다음에방문했을때꼭다시봐야하는경우가아닌경우저장영역으로적합 쿠키에서는저장됐던출처를바탕으로공유하기때문에데이터누출되지만, sessionstorage 는애플리케이션에접근되는페이지를통해저장되므로데이터값이누출되지않는다. SessionStorage 값이저장된윈도우혹은탭에서만해당값이유지된다. 값이만들어진윈도우혹은탭에서만보여진다. LocalStorage 윈도우와브라우저수명이다해도값이유지된다. 같은도메인에서실행되는모든윈도우와탭을통해값이공유된다. 234

235 Web Storage API interface Storage { readonly attribute unsigned long length; getter DOMString key(in unsigned long index); getter any getitem(in DOMString key); setter creator void setitem(in DOMString key, in any data); deleter void removeitem(in DOMString key); void clear(); }; length 속성 : Storage 객체에저장된키 / 값집합의 size Key(index) 함수 : 특정키를조회 getitem(key) 함수 : 키로값을가져오는방법 setitem(key, value) 함수 : 지정된키에해당하는스토리지를찾아값을저장 removeitem(key) 함수 : 지정된키에해당하는스토리지를찾아값을삭제 clear() : 스토리지의모든값리스트를지운다. 235

236 Web Storage Local Storage 는 Server 측과의통신작업이없다 Cookie 를이용한저장작업을 Local Storage 가대신하기에적합 // 스토리지에값을삭제 delete localstorage.settings; delete localstorage[ settings ]; localstorage.removeitem( settings ); // 모든데이터삭제 localstorage.clear(); // 스토리지데이터의루프처리 for(var i=0;i<localstorage.length;i++){ var key = localstorage.key(i); var value = localstorage[key]; } 236

237 Storage Event 속성 interface StorageEvent : Event { readonly attribute DOMString key; readonly attribute any oldvalue; readonly attribute any newvalue; readonly attribute DOMString url; readonly attribute Storage storagearea; }; key 속성 oldvalue newvalue url 설명 변경된 Key, clear() Method 가호출되면 null 을반환한다. 변경되기전의값 ( 복사본 ). 새로운키로값을등록하였다면 null. 변경된후의값 ( 복사본 ). 값이삭제되었을때는 null. Event 가발생한문서의 URL. storagearea 변경된 Storage 참조. 237

238 스토리지이벤트처리 로컬스토리지나세션스토리지가변경되면 window 객체로부터 storage 이벤트가발생 이이벤트를처리하면스토리지에데이터가추가되거나변경되는사항을감시할수있음 window.addeventlistener( storage, function(event){ alert( 키 : + event.key +, 이전값 : + event.oldvalue +, 지금값 : + event.newvalue +, url : + event.url +, storageread : + event.storagearead); }, false); 238

239 Local Storage 사용예 // 브라우저에서 localstorage 를지원하지않는경우 if (typeof(localstorage) == 'undefined' ) { alert(' 당신의브라우저는 HTML5 localstorage 를지원하지않습니다. 브라우저를업그레이드하세요.'); } else { try { localstorage.setitem("name", "Hello World!"); // key-value 형식으로저장 } catch (e) { // 할당량초과로인하여데이터를저장할수없음 if (e == QUOTA_EXCEEDED_ERR) { alert(' 할당량초과!');} } // 저장된값호출 document.write(localstorage.getitem("name")); // 스토리지로부터일치하는아이템삭제 localstorage.removeitem("name"); } 239

240 사용자데이터를쿠기대신 Storage 에저장하도록개선하는스크립트 // 브라우저의 localstorage 지원여부를판단 if (('localstorage' in window) && window.localstorage!== nul l){ // 개체에프로퍼티를할당하는쉬운방법을사용 localstorage.wishlist = '["Unicorn","Narwhal","Deathbear"]'; } else { // 브라우저에서 Web Storage 를지원하지않는다면 // document.cookie 를이용한다. var date = new Date(); date.settime(date.gettime()+(365*24*60*60*1000)); var expires = date.togmtstring(); var cookiestr = 'wishlist=["unicorn","narwhal","deathbear"];' + ' expires='+expires+'; path=/'; document.cookie = cookiestr; } 240

241 JSON 객체스토리지 HTML5 웹스토리지의명세서에는모든타입의객체를키 / 값형태로저장할수있다고되어있지만현재실행되는일부브라우저에는텍스트문자열데이터타입만저장되도록제한하고있다. JSON 은객체를문자열로, 또는문자열을객체로표시할수있는데이터교환표준이다. JSON 은브라우저클라이언트로부터 HTTP 를통해서버로객체를전달하는수단 JSON 은웹스토리지에복잡한객체를저장하거나꺼낼때순서대로나열하면서복잡한데이터타입을유지하는데사용한다. 241

242 JSON 객체스토리지 <script> var data; function loaddata(){ data = JSON.parse(sessionStorage[ mystoragekey ]; } funcation savedata(){ sessionstorage[ mystoragekey ] = JSON.stringify(data); } window.addeventlistener( load, loaddata, true); window.addeventlistener( unload, savedata, true); </script> 242

243 JSON 객체스토리지 1. Problem : localstorage(sessionstorage 도동일 ) 에 javascript 객체를저장하고빼서사용하고싶음. 2. Storage Interface 에서제공하는 setitem, getitem 을사용해서 Json type 의 Object 나 Function 을저장한뒤꺼내오면실제객체로인식하지못하는문제가있었습니다. 3. 이를해결하기위해서다음과같이 Storage Interface 를확장시켜줘야합니다. Storage.prototype.setObject = function(key, value) { this.setitem(key, JSON.stringify(value)); } Storage.prototype.getObject = function(key) { return this.getitem(key) && JSON.parse(this.getItem(key)); } 243

244 JSON 객체스토리지 4. 예제 var objecta = { stringvalue : new String("okTest"), arrayvalue : new Array("A","B","C") } localstorage.setobject("key1",objecta); var itema = localstorage.getobject("key1"); console.log(itema.stringvalue); // 결과 = oktest console.log(itema.arrayvalue.join()); // 결과 = A,B,C localstorage.setitem("key1",objecta); var itema = localstorage.getitem("key1"); console.log(itema.stringvalue); // 결과 = undefined console.log(itema.arrayvalue.join()); // 결과 = undefined 244

245 Web SQL Database

246 Web SQL Database Web SQL Database 는로컬저장장치에저장 비동기자바스크립트인터페이스를통해웹애플리케이션에서클라이언트측데이터베이스 SQLite 를조작하기위한 API 클라이언트쪽에서사용할수있는관계형데이터베이스 SQL 사용에익숙한개발자에게있어서는사용하기쉽고강력한사양 SQLite 에서사용할수있는 SQL 을모두지원 Web SQL Database 의 API 는비동기 API 와동기 API 로나눔 SQLite 에종속적이며, 데이터베이스제품의비표준화된 SQL 문장등장의우려로표준화작업이잠정적으로중단됨 오라클에서제안한 IndexedDatabase 가대안으로등장 모바일장치들이 SQLite 를데이터베이스로지원하고있으므로향후어떤방향으로표준화작업이완료될것인지불투명함 246

247 Web SQL Database 미래 Web SQL Database 는이미 Safari, Chrome, Opera 에사용됐지만, Firefox 에는사용되지않을것이고, 현재 WHATWG 에서는 중지 명세서에는 SQL 선언문을실행하는 API 에대해 SQL 선언문은문자열을사용하고 SQL 표현법으로 SQLite 를따른다고정의 표준에 SQL 에대한특정한요구가더받아들여지길기대하긴어려워서웹 SQL 데이터베이스는새로운명세서에등장한더단순하고특정 SQL 데이터베이스버전에국한되지않는인덱스데이터베이스 (Indexed Database, 이전의 WebSimpleDB) 로대체되었습니다. Indexed Database 의브라우저구현은현재진행중 247

248 Web SQL Database 데이터베이스이용법 ( 비동기 API) SQL 처리가완료되면콜백함수에의해처리결과를통지해주는구조 프로그램의구조를복잡하게만드는단점을갖고있지만, 지속적인사용자인터페이스 (UI) 처리가가능하다는장점이있다. // 로컬데이터베이스에액세스하려면다음과같은순서를따른다. 데이터베이스를연다. 트랜잭션을시작한다. 트랜잭션안에서 SQL 을실행한다. 248

249 Web SQL Database 순서 1 : 데이터베이스를연다. opendatabase(name, version, displayname, estimatedsize, creationcallback); name 데이터베이스의식별자를문자열로지정데이터베이스이름은대소문자구분. 지정한이름의데이터베이스가없을때는새로만듦 version 대기중인데이터베이스의버전을문자열로지정 displayname 사용자에표시될데이터베이스이름을지정 esitmatedsize 데이터베이스용량. 단위는바이트 creationcallback 처리가완료되었을때호출할콜백함수를지정 반환값 데이터베이스객체에대한참조 version : 현재사용중인데이터베이스의버전문자열 changeversion : 데이터베이스의버전을변경하는메소드 transaction : SQL 문장을처리하기위한트랜잭션을여는메소드 readtransaction : 읽기전용의트랜잭션을여는메소드 249

250 Web SQL Database if (!window.opendatabase) { document.write(" 이 Browser 는 Web SQL Database 를지원하지않습니다."); return false; } else {... } var db = opendatabase( mail_db, 1, 이메일애플리케이션용 DB, 1024,1024); var db; opendatabase(( mail_db, 1, 이메일애플리케이션용 DB, 1024,1024, function(database){ db = database; }); 250

251 Web SQL Database 순서 2 : 트랜잭션을시작한다. 트랜잭션이란데이터베이스에대한여러개의조작을하나로묶어처리하는기술 Commit 트랜잭션안에모든조작을수행 Rollback 트랜잭션안에모든조작을취소 개발자는커밋과롤백을명시적으로실행할필요없음 트랜잭션안의처리를콜백함수로지정하여그함수가정상으로종료되면자동으로커밋되고, 에러가발생하면자동으로롤백되기때문 트랜잭션을실행하려면 transaction() 메서드를사용 251

252 Web SQL Database transaction(callback, errorcallback, successcallback); 첫번째인수외에는생략할수있음 callback 트랜잭션으로처리할데이터베이스조작처리가있는함수 errorcallback 트랜잭션처리중에러가발생했을때호출 successcallback 트랜잭션처리를정상적으로완료하였을경우에호출 var db = opendatabase(.); db.transaction( function(tx){ // 인수 tx 를사용하여 SQL 을실행 }); 252

253 Web SQL Database var db = opendatabase(.); db.transaction(function(tx){ // 인수 tx 를사용하여 SQL 을실행 }, function(error){ // 에러처리수행 }, function(){ // 트랜잭션성공시의처리수행 } ); 253

254 Web SQL Database 순서 3 : 트랜잭션안에서 SQL 을실행한다. SQL 을실행하기위해서는 executesql() 사용 executesql(sql, args, successcallback, errorcallback); sql 처리할 SQL 문장을나타내는문자열 args SQL 문안에? 문자를넣어 args 에지정한값으로치환될값배열 successcallback SQL 실행에성공했을때처리될콜백함수 errorcallback - SQL 문장실행시에러가발생했을때의처리할콜백함수 첫번째인수외에는생략할수있음 254

255 Web SQL Database tx.executesql( create table People(name,age integer) ); tx.executesql( insert into People values(?,?),[ 홍길동, 30]); tx.executesql( selct * from People,[], function(tx,rs){ // SQL 실행에성공했을때의처리 }, function(error){ // SQL 실행에실패했을때의처리 }); 255

256 var db = opendatabase(.); db.transaction(function(tx){ Web SQL Database tx.executesql( select * from People,[], function(tx,rs){ for(var i=0;i<rs.rows.length;i++){ var row = rs.rows[i]; var rowhtml = <tr><td> +row.name+ </td><td> + row.age+ </td></tr> } table.innerhtml = rowhtml; }, function(error){ // SQL 실행에실패했을때의처리 }); }); SQLResultSet Select 문실행결과를배열로반환 index를지정하여행객체를얻음 256

257 Web SQL Database INSERT 문의결과처리 테이블에자동으로번호가매겨지는 ID 열이있을때는숫자형이어야하고, autoincrement 라는옵션을지정 tx.executesql( create table Employee( + employee_id integer primary key autoincrement, + name, age integer) ); tx.executesql( insert into Employee(name,age) values(?,?), [ 홍길동,30], function(tx, rs){ alert( id[ +rs.insertid+ ] 번의레코드생성 ); } ); 처리결과로부터자동으로매겨진 ID 값을얻음 257

258 Web SQL Database UPDATE,DELETE 문의결과처리 UPDATE 문, DELETE 문을실행했을때몇건의레코드에영향을받았는지알려면처리결과에포함된 rowsaffected 속성을이용 처리결과로부터삭제된레코드수를얻음 tx.executesql( delete from Employee,[], function(tx, rs){ alert(rs.rowsaffected + 건의레코드삭제 ); } ); 258

259 Web SQL Database 버전관리 웹 SQL 데이터베이스는클라이언트에존재할경우에는개별클라이언트의데이터베이스를변경해야한다. changeversion(oldversion, newversion, callback, errorcallback, successcallback); oldversion 이전버전을나타내는문자열 newversion 새로운버전을나타내는문자열 callback 버전변경시처리할콜백함수 successcallback 정상적으로변경되었을경우실행되는콜백함수 errorcallback - 에러가발생했을때의실행되는콜백함수 259

260 Web SQL Database 데이터베이스이용법 ( 동기 API) 데이터베이스관련처리는 Worker 를사용하여처리해야한다. // 로컬데이터베이스에액세스하려면다음과같은순서를따른다. 데이터베이스를연다. 트랜잭션을시작한다. 트랜잭션안에서 SQL 을실행한다. 260

261 Web SQL Database 순서 1 : 데이터베이스를연다. opendatabasesync(name, version, displayname, estimatedsize, creationcallback); name 데이터베이스의식별자를문자열로지정데이터베이스이름은대소문자구분. 지정한이름의데이터베이스가없을때는새로만듦 version 대기중인데이터베이스의버전을문자열로지정 displayname 사용자에표시될데이터베이스이름을지정 esitmatedsize 데이터베이스용량. 단위는바이트 creationcallback 처리가완료되었을때호출할콜백함수를지정 261

262 Web SQL Database var db = opendatabasesync( mail_db, 1, 이메일애플리케이션용 DB, 1024,1024); var db; opendatabasesync( mail_db, 1, 이메일애플리케이션용 DB, 1024,1024, function(database){ db = database; }); 262

263 Web SQL Database 순서 2 : 트랜잭션을시작한다. 트랜잭션을시작하는방법은비동기 API 와거의같음 트랜잭션을실행하려면 transaction() 메서드를실행하고트랜잭션안의코드는콜백함수에서지정 263

264 Web SQL Database transaction(callback); 비동기 API 와는달리트랜잭션이에러로종료될때는예외가발생하므로단순하게 try/catch 블록을이용하여에러를처리할수있음 에러처리용콜백함수는지정할필요없음 transaction() 메서드의인수는하나 264

265 Web SQL Database 순서 3 : 트랜잭션안에서 SQL 을실행한다. SQL 을실행하기위해서는 executesql() 사용 executesql(sql, args); sql SQL 문 args SQL 문안에? 문자를넣어 args 에지정한값으로치환 비동기 API 와의차이는처리결과를메서드의반환값으로얻을수있음 비동기 API 에비해더간단한코드를작성 265

266 Web SQL Database var db = opendatabasesync( mail_db, 1, 이메일애플리케이션용 DB,1024*1024); // 트랜잭션시작 db.transaction(function(tx){ // 검색결과를반환값으로얻음 var results = tx.executesql( select * from People,[] ); // 결과객체의내용은비동기 API 때와같음 for(var i=0;i<results.rows.length;i++){ var row = results.rows[i]; } }); 266

267 Web Workers

268 Web Workers Web Workers 란 Javascript 코드를백그라운드에서실행시키기위한기술 웹애플리케이션에서백그라운드프로세스를사용할수있게해준다. 워커란백그라운드에서실행되는코드를의미 웹브라우저는웹페이지를하나의스레드로실행 오랜시간에걸친계산처리등을 Javascript 로수행하면처리중에는사용자가 UI 를조작할수없음 이러한문제를해결하기위한장치가 Web Workers Web Workers 를이용하면 UI 스레드와는별도의백그라운드프로세스로 Javascript 코드를실행 별도의스레드로동작하여멀티코어 CPU 를활용할수있게해준다. 워커의종류는워커와공유워커로두종류가있음 268

269 CPU 부하를줄이기위한 Web Worker 를적용사례 긴문서의문자서식지정 문법강조기능 이미지프로세싱 이미지합성 Large Data 배열처리

270 Web Workers DOM UI 스레드 UI 변경 new worker postmessage() postmessage() 메시지를통해데이터를주고받을수있음 워커로 DOM 을조작할수없음 270

271 Web Workers Web Worker 가호출하여사용하게될 Javascript 파일이필요 워커생성 // worker.js 를실행하여워커를생성 var worker = new Worker( worker.js ); postmessage() 와 onmessage 이벤트는 UI Thread 와 Background 사이에서통신을수행 워커에대해메시지보내기 // 워커에대해 Hello 라는문자열을보냄 worker.postmessage( Hello ); 271

272 Web Workers 보내진메시지를수신하려면워커쪽에서는 onmessage() 라는이벤트핸들러를지정하여 MessageEvent 형객체를얻으면됨 // 워커쪽처리 onmessage = function(e){ // 메시지처리수행 }; // 메시지를수신. MessageEvent 형객체를얻음 addeventlistener( message,function(e){ // 메시지처리수행 },false); 272

273 Web Workers 워커로부터메시지보내기 // 워커안의수신핸들러 onmessage = function(e){ postmessage( Echo from worker : +e.data); }; 워커로부터메시지를수신 worker.onmessage = function(e){ alert(e.data); }; 273

274 Web Workers Worker 객체의메서드 Onerror Terminate() 메서드 postmessage(message,[ports]) ; onmessage 설명 에러를포착하기위한이벤트핸들러 워커를강제로종료함 워커에메시지를보냄 워커로부터의메시지를포착하기위한이벤트핸들러 274

275 Web Workers 공유워커란여러개의객체간에공유되는백그라운드프로세스를말함 공유워커의생성과개념 var worker1 = new SharedWorker( worker.js, wk ) var worker2 = new SharedWorker( worker.js, wk ) 275

276 Web Workers worker1 (scrpturl = worker.js, wk ) worker1 (scrpturl = worker.js, wk ) 워커프로세스 워커프로세스 worker2 (scrpturl = worker.js, wk ) 워커프로세스 worker2 (scrpturl = worker.js, wk ) 일반워커은인스턴스와백드라운드프로세스가 1:1 공유워커에서는스크립트 URL 과이름이같으면여러개의인스턴스사이에백그라운드프로세스가를공유 276

277 Web Workers 공유워커와메시징송수신 // 클라이언트로부터접속요청을받음 onconnect = function(e){ // 클라이언트와연결되는포트정보확인 var port = e.ports[0]; // 클라이언트부터의메시지를수신 port.onmessage = function(e){.. }; }; 277

278 Web Workers 공유워커에메시지보내기 // 공유워커를생성 var worker = new SharedWorker( worker.js, wk ) // 공유워커에메시지보내기 worker.port.postmessage( Hello ); 공유워커로부터메시지수신 worker.port.onmessage = function(e){ alert(e.data); }; 278

279 Web Workers Worker 로동작하는자바스크립트에서사용할수있는속성, 메서드, 객체 속성 / 메서드 / 객체 close importscript postmessage self location navigator onmessage onerror 설명 워커의메시지수신을중지하는메서드 지정한주소의자바스크립트파일을읽어실행하는메소드 워커생성자에게메시지를전달하는메소드 워커자신을나타내는변수 워커생성시갖는 location 에관한정보로, window.location 정보와동일한값을갖는다. 워커생성시갖는 location 에관한정보로, window.navigator 정보와동일한값을갖는다. 워커생성자가보낸메시지를수신하는이벤트핸들러 에러발생시발생하는이벤트핸들러 279

280 Web Workers Worker 로동작하는자바스크립트에서사용할수있는속성, 메서드, 객체 속성 / 메서드 / 객체 settimeout setinterval clearinterval opendatabase opendatabasesync indexeddb XMLHttpRequest Worker, SharedWorker MessageChannel EventSource WebSocket 설명타이머관련작업을수행할수있는메서드웹데이터베이스를처리하기위한객체 Ajax를처리하기위한객체워커사용을위한객체웹메시징을위한메시지채널객체서버전송이벤트처리를위한객체웹소켓을위한객체 280

281 Web Sockets

282 Web Sockets Ajax 코멧 클라이언트에서서버로자신이원하는시간에보내서데이터를가져오는기술 서버에서원하는시간에데이터를클라이언트로보내주게되는서비스 코멧을구현하기위한핵심기술은롱폴링 (Long Polling) 기법 Polling 기법 특정주기별로서버를계속호출하며새로발생한이벤트가있는지가져오는것 폴링기법은 iframe 을이용하거나자바스크립트타이머를이용할수있다. " 요청 - 응답 때문에서버에부하가걸리기쉽고, 많은트래픽이낭비된다. 282

283 Polling 기법 보통웹사이트에서한페이지를내려받기위해서는이미지, 스크립트파일등의여러구성요소를다운받기위해서적어도 20 개이상의요청 - 응답이발생 폴링기법의한계 : 정밀한시간에데이터를받기어렵다.

284 Polling 기법 타이머를이용한 Polling 의구현 settimeout(function(){xhrrequest({"foo":"bar"})}, 2000); function xhrrequest(data){ var xhr = new XMLHttpRequest(); // 데이터요청보내기 xhr.open("get", " true); xhr.onreadystatechange = function(){ if(xhr.readystate == 4){ // 서버로부터업데이트하기 } }; xhr.send(null); } 284

285 Comet 구현 Client 서버가클라이언트의요청에응답할때, Content-Length 헤더를출력하지않으면클라이언트는서버측으로부터접속이종료될때까지계속데이터를받음 이러한특성을이용하여서버측에서접속을끊지않고계속유지한다면숨겨진 <iframe> 에서아주긴시간동안서버푸시 (server-push) 가가능 접속을유지하는동안서버는이벤트가발생할때 <script> 태그를출력해서 <iframe> 문서의부모문서에데이터를전달 <script>parent.exec_callback({... 데이터...});</script> 폭넓은호환성 에러처리어려움 HTTP 의상태를다룰수없다 모바일브라우저에서는사용할수없다 웹브라우저의기본보안정책인동일출처정책 (Same-Origin Policy) 의영향을받으므로도메인이나스키마, 포트가다른문서간에는사용할수없다.

286 Long Polling (Server Push) Long Polling 은클라이언트가요청을보내면서버에서이벤트가발생할때까지 ( 데이터가갱신된다거나하는등 ) 응답을하지않고가지고있다가이벤트가발생하면응답을하고클라이언트는바로다시요청을보내는방식 특정이벤트가일어날경우에만 disconnection 불필요한요청, disconnection 을줄일수있다.

287 Long Polling (Server Push) 롱폴링을구현하기위한기술 - IFrame 을이용하는방법 - XmlHttpRequest 를이용하는방법 - JSONP 라고불리고있는자바스크립트삽입을이용하는방법 - IE 에서 Iframe 의한계를보안하기위한 HtmlFile 개체를이용하는방법

288 Long Polling 구현 <script> 태그의 src 속성에서버측에서응답할주소를입력하고, 서버측에서는응답할내용이있을때까지이접속을계속유지 var script = document.createelement('script'); script.src = ' ; 접속을유지하다가응답할내용이발생하면서버측에서는이름을전달받은콜백함수에데이터를전송 콜백함수에전달하는데이터의형태는 JSON 데이터를사용하는것이일반적이며, 확장성측면에서도더유리 JSON 데이터를콜백함수로감싸서응답하는방식을 JSONP 방식계속유지 callback_function_name( {some:data, in_any:format, you:want} ); 콜백함수가실행되면전달받은데이터를처리함과동시에방금끊어진접속을대체할수있는새로운 <script> 태그를생성 계속대기 + 계속생성하는것이바로 <script> long-polling 방식의핵심

289 Streaming 요청을최초한번보내면 chunk 데이터를통해서이벤트가있을때마다계속클라이언트에데이터를보내주는방식 클라이언트가원하는시간에데이터를서버로보낼수있고서버또한클라이언트로데이터를푸쉬하는모델