Html5 강좌파일_v_3.0

165
HTML5 정의와 활용 KOLON BENIT 그린기술센터 장영조 책임

description

Html5 강좌파일_v_3.0

Transcript of Html5 강좌파일_v_3.0

Page 1: Html5 강좌파일_v_3.0

HTML5 정의와 활용KOLON BENIT그린기술센터 장영조 책임

Page 2: Html5 강좌파일_v_3.0

교육목표 / 교육대상

1. 교육목표 - HTML5의 탄생 배경과 개념을 이해한다. - HTML5의 태그 및 API를 이해한다. - HTML5을 어떻게 활용할 것인지에 대해 생각해 본다.

2. 교육대상 기본적인 HTML, CSS, Javascript를 이해하는 사람

Page 3: Html5 강좌파일_v_3.0

HTML5?

- HTML의 차세대 웹 표준?

- ActiveX 같은 비 표준 기술을 대체 할 수 있는 표준 기술?

- HTML5는 지금 해도 되는거야? 표준도 안나왔다매??

- 완전 새로운 언어인가?

Page 5: Html5 강좌파일_v_3.0

HTML5 관련 기사 (나쁜기사)

- 마크 주커버그 “HTML5 집착은 페이스북 최대 실수”http://www.ddaily.co.kr/news/news_view.php?uid=95141

- HTML5는 아직 준비가 안됐다?http://blog.creation.net/435

- 금융권, “HTML5 도입 시기상조, 표준화가 선행돼야”http://www.itdaily.kr/atl/view.asp?a_id=29758

- 웹표준 HTML5에 대한 ‘과도한 환상’http://weekly.khan.co.kr/khnm.html?mode=view&artid=201210161132291&code=116

Page 6: Html5 강좌파일_v_3.0

W3C (World Wide Web Consortium)명실공히 자타가 공인하는 웹 표준기구. W3C는 설립목적인 웹 표준과 가이드라인 개발을 수행하고 있으며, 지금까지의 결과로 지난 10년간 80여개의 W3C 권고안을 발표하였다. W3C는 또한 교육과 소프트웨어 개발에 관여해 왔고, 그리고 웹에 관하여 토론할 수 있는 열린 포럼을 개최해 왔다.

팀 버너스리(Tim Berners-Lee)와 운영진은 W3C를 웹 기술에 대한 컨센서스를 이끌어내는 산업 컨소시엄으로 발전시켜왔다.

- CSS- CGI- DOM- HTML / XHTML- RDF- SVG- SOAP / WSDL- XML / XPath / XQuery / XSLT

Page 7: Html5 강좌파일_v_3.0

WHATWG (Web Hypertext Application Technology Working Group)

그간 웹 표준화 기구인 W3C를 통해 수 많은 웹 표준들이 제정되었음에도 불구하고 플러그인 기술 즉 웹 어플리케이션 기술에 대한 표준은 만들어 지지 못했습니다.표준은 상호 운용성 및 개방성 측면에서 매우 중요하며 공정한 경쟁을 유도할 수 있는 제도적 장치입니다. 이러한 필요성에 따라 W3C는 웹 어플리케이션에 대한 워크샵을 개최하고 이에 대한 의견을 나누었습니다.이 워크샵에서 오페라/모질라 연합은 기존의 HTML 기술을 활용한 중간 단계의 웹 어플리케이션 표준을 빨리 만들자는 제안을 하였습니다.이에 대해 많은 참석자들은 부정적인 반응을 나타냈습니다. 이에 2004년 6월 오페라와 모질라의 Ian Hickson과 David Baron, 애플의 David Hyatt 등이 주축이 되어 W3C와 별도로 표준안을 만들기 위한 웹 어플리케이션 기술 워킹 그룹(Web Hypertext Application Techology Working Group) 을 조직하고 활동에 들어갔습니다.그 뒤로 WHATWG 규격의 편집장인 이안 힉슨(Ian Hickson)이 구글로 옮겼다. 마이크로소프트의 크리스 윌슨은 초대는 받았으나 모든 규격이 로열티 자유 기반으로 구현될 수 있도록 보장하는 특허 정책이 미비함을 언급하며 참가를 하지는 않았다.

Page 8: Html5 강좌파일_v_3.0

HTML의 역사 1991 년부터 1997 년까지 HTML 은 빠르게 발전했다. CSS 가 포함이 되었고, JavaScript 가 추가되었다. HTML 4.0 이후에도 W3C 에 의해서 HTML 은 HTML 4.01, XHTML 1.0, 1.1, 2.0 등으로 진화시키기 위해서 많은 노력을 해왔다. 그 과정에서 W3C 는 HTML 의 Version Up 을 중단하고 XHTML 로 개발의 방향을 변경하였다. XHTML 2.0 은 하위호환성을 고려하지 않는 새로운 언어로 디자인 하기 시작했다.

그런 XHTML 2.0 은 W3C 의 이상과 현실의 차이로 인해서 XHTML은 브라우저들에게서 외면당해졌고, W3C 와는 생각이 다른, 몇개의 브라우져회사가 모여 WHATWG 라는 Working Group 을 설립하여, 웹 개발현실을 반영하면서도 하위버젼의 HTML 과도 호환되는 발전된 HTML 을 정의하기 시작했다. WHATWG 를 인정하지 않던 단호한 W3C 도 XHTML 2.0 을 포기하고 2009 년 10 월, WHATWG 를 인정하였으며, 그들과 방향성을 공유하기 시작했다. 그리고, "HTML 5" 라는 이름으로 새로운 HTML 을 디자인하기 시작했다.

Page 9: Html5 강좌파일_v_3.0

HTML5의 등장HTML은 버전4에서 업그레이드가 지지 부진하였고, W3C가 밀고 있던 XHTML은 호응이 별루 없었다. 하지만 그럼에도 불구 하고, HTML은 웹의 탄생에서 부터 HTML5가 이야기 되고 있는 현재 까지도 많이 사용되었다.

그 때의 지식으로 오늘날까지도 HTML 4 에 대한 그때의 지식으로 오늘날까지도 HTML 을 인고 있는 것을 보면 변화 없이 멈추어 버린 언어라고 생각이 될 수도 있겠지만 HTML 의 버전업이 없다고 웹이 발전하지 않았다는 말은 아닐 것이다.

웹은 그렇게 HTML 버전의 발전은 없었지만 HTML 의 한계를 벗어나기위한 방향으로 발젂되어 왔다. 하지만 그렇게 한계를 벗어나기 위한 발젂이 반복되면서 한계의 극복은 더욱 불완전한 웹 환경으로 몰아가기 시작했다.

유행처럼 번졌던 플러그인과 엑티브엑스 컨트롤의 문제들로 인해 웹은 순수한 HTML 만으로는 표현이 불가능한, 너무도 많은 외부기술에 의존하게 되었다.

웹은 그렇게 HTML 버전의 발전은 없었지맊 HTML 의 한계를 벗어나기위한 방향으로 발전되어 왔다. 하지맊 그렇게 한계를 벖어나기 위한 발전이 반복되면서 한계의 극복은 더욱 불완전한 웹 환경으로 몰아가기 시작했다.

세상은 이런 불완전함을 깨뜨리고 순수하고 완전한 존재를 원하게 되었다.

그래서 나타난 것. "HTML 5" 다.

Page 10: Html5 강좌파일_v_3.0

(W3C 위원 말 중에서..)

HTML 5 의 등장은 플러그인과 엑티브엑스기술에서 웹을 해방시키고 웹의 접근성과 상호운영성 또한 높이게 하는 결과를 가져오게 될 것이다. JavaScript API 를 이용한 HTML 의 확장은 서버의 부하를 줄이고 그 부하를 클라이언트와 나눔과 함께 Application 으로써의 웹의 활용도를 극대화 시킬것이다.

그 결과, HTML 5 는 웹에서 플래쉬, 실버라이트와 같은 플러그 인들의 사용을 줄일 것이다.(플러그인의 사용을 아예 없애지는 못할것이라 생각한다. 사용량을 0 - Zero 로 만들려 하지도 않을 것이고. 그러한 플러그인은 플러그인이 반드시 필요한 영역에서 활발히 활동할 것이라 생각한다.) 순수한 웹 환경은 현재의 Device 는 물론이고 아직 세상에 있지도 않는, 미래에 나오게될 Device 들의 플랫폼이 될 것이다. 마이크로소프트, 구글을 위시한 기업들이 각 사의 브라우져를 Web OS 로서의 기반 플랫폼으로 구성하고 있고, 각 사들의 서비스들을 HTML 5 로 제작하여 차세대 Web 홖경에서의 주도권을 갖기위해 노력하고 있다. 현재 HTML 5 의 표준이 확정되지도 않은 상황 인데도 말이다... 어떤가? HTML 5 를 시작해야하는 이유가 이 정도면 충분한가?

Page 11: Html5 강좌파일_v_3.0

플러그 인 (Plug-in)

Page 12: Html5 강좌파일_v_3.0

플러그 인 (Plug-in)

Page 13: Html5 강좌파일_v_3.0

W3C의 이상향

Page 14: Html5 강좌파일_v_3.0

웹 브라우저 / 모바일 점유율 현황http://gs.statcounter.com/#browser-ww-monthly-201210-201309-bar

Page 15: Html5 강좌파일_v_3.0

웹 접근성 / 웹표준 / 크로스 브라우징

Page 16: Html5 강좌파일_v_3.0

휴 식

Page 17: Html5 강좌파일_v_3.0

HTML & CSS & Javascript

세 가지 요소는 불가분의 관계로서 현재는 이들이 없는 웹 페이지는 거의 존재하지 않습니다. 간단하게 말하면, HTML은 웹 페이지의 뼈대가 되는 것이고 CSS는 뼈대를 포장하는 살(피부)이 되고 JavaScript는 이 둘을 움직이는 근육이 되는 것입니다.이렇게 3가지 요소가 상호 작용함으로써 현재 우리가 보는 웹 페이지가 완성되는 것입니다.

Page 18: Html5 강좌파일_v_3.0

HTML

HTML 마크업은 HTML 요소(엘리먼트, (Elements)와 그들의 속성(Attributes)과 문자 기반 데이터 형태와 문자 참조와 엔티티 참조를 포함하는 몇 가지 핵심 구성 요소로 이루어져 있다. 또 다른 중요한 구성 요소로는 문서 형식 정의(DTD, Document Type Definition)를 명시하는 문서 형식 선언(document type declaration)이다. 차기 HTML 5에서는 DTD를 지정하지 않아도 되고 오직 레이아웃 모드로 지정된다

Page 19: Html5 강좌파일_v_3.0

CSS (Cascading Style Sheet)

CSS 또는 캐스케이딩 스타일 시트(Cascading Style Sheet)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

Page 20: Html5 강좌파일_v_3.0

CSS3

CSS3는 text, fonts, color, backgrounds & borders, transforms, transitions, animaitons와 같은 종류의 모듈들을 추가로 개발하고 있다. CSS3는 기존의 CSS2가 갖지 못했던 화려하고 역동적인 면모를 추가하여 포토샵과 자바스크립트 및 서버측 기술에만 완전히 의존하던 영역들을 개척했다. 상자의 크기에 따른 말줄임 표시, 투명한 배경, 그림자 효과, 둥근 모서리, 그라디언트 , 도형의 회전과 비틀기, 애니메이션 효과 등이 가능해진 것이다. 특히 그래픽 디자인에만 의존하던 영역이 CSS3만으로도 상당부분 가능해지면서 웹 사이트의 성능 향상에 크게 기여할 수 있게 되었다.

Page 21: Html5 강좌파일_v_3.0

Javascript

Page 22: Html5 강좌파일_v_3.0

Javascript 객체 접근1 (참고)

Page 23: Html5 강좌파일_v_3.0

Javascript 객체 접근2 (참고)

접근성 있는 JavaScript 코딩 방법

http://www.wah.or.kr/RIA/JS/js_desc04.asp

Page 24: Html5 강좌파일_v_3.0

HTML5 표준화 일정

- 2006.06 : 웹 하이퍼텍스트 워킹그룹(WHATWG) 출범 Web Form 2.0, Web Applications 1.0

- 2007.03 : 새로운 HTML 워킹 그룹 생성 - 2009.10 : W3C 에서 XHTML 전환 실패를 인정함 - 2011.05 : HTML5 최종 초안 (Last Call Working Draft) - 2012.Q2 : HTML5 후보 표준안 (Candidate Recommendation) - 2 개 이상의 브라우저에서 테스트 완료 - 2014.Q1 : HTML5 제안 표준안 (Proposed Recommendation) - 브라우저 업체의 피드백 반영

- 2014.Q2 : HTML5 최종 표준안 (Recommendation)

Page 25: Html5 강좌파일_v_3.0

HTML5 디자인 원칙 (1)

- 컨텐츠의 호환성 : HTML 5 이전 버전으로 제작한 컨텐츠가 완벽히 정상 작동하리라고는 생각하진 않지맊 문제없이 이용가능 해야한다.

- 이전 브라우저와의 호환성 : 말 그대로 HTML 5 가 지원되지 않는 이전 버전의 브라우저에서도 이용가능해야 한다.

- 기능의 재사용 : 이전까지는 각 브라우저 사들이 각자 브라우져에 구현해 놓은 서로다른 기능들을 HTML 5 라는 이름아래 공통된 사양으로 책정하여 브라우저들간의 호환성을 가지게 한다.

- 이용방법의 호환성 : 기존에 사용하던 HTML Tag 의 사용법을 그대로 사용할 수 있게 한다.

- 혁신보다는 발전을 우선함 : HTML 5 이라는 Version UP 이 새로운 MarkUP Language 를 구현하는 것이 아닌 기존에 존재하던 HTML 을 개량한다.

Page 26: Html5 강좌파일_v_3.0

HTML5 디자인 원칙 (2)

- 실용성 : W3C 가 진행하던 이상적인 MarkUp Language 인 XHTML 2.0 와 같은 HTML 을 제작하는 것이 아닌 웹현장에서 필요로 하는 것들을 중점적으로 진행해야한다.

- 상호운영성 : HTML 5 를 적용한 브라우저라면 동일하게 동작해야한다.

- 보편적 접근성 : 컨텐츠의 소비자가 기계(Device, Search Engine) 와 모든 사람들(장애자를 포함한) 이 접근할 수 있도록 한다.

Page 27: Html5 강좌파일_v_3.0

XHTMLXHTML 인경우 웹 브라우져 출력시 좀더 엄격한 테그 구조를 가지도록 한다는점이 다르다.보통 웹 브라우져는 태그가 잘못된건 잘됐건 상관없이 해석해서 오류는 무시하고 그냥 화면에 HTML문서를 출력해 줍니다.

그런데 XHTML 을 적용하면 잘못된 테그인 경우 오류를 발생하여 화면에 나오지 않도록 해줍니다.XML 이라고 아시겠지만 XML 도 테그하나 열고 닫는 부분이 빠지면 화면에 안나오듯 HTML 테그자체를 XML 화 해서 보여주는걸 XHTML 이라고 합니다.

XML 보시면 테그중 쌍으로 된것도 있지만 아닌것의 경우도 열고 닫는 태그를 같이 포함하고 있죠.

이렇듯 HTML 에서는 한칸 개행할때 <br> 또는 <p> 또는 <p></P> 이렇게 쓰지만XHTML 의 경우는 닫는 테그가 없어도 닫아줘야 합니다.<br />, <p />, <p></p> 와같이 엄격하게 지켜 줘야 한다.

HTML 의 경우 <p></P> 와같이 여는 태그와 닫는 테그의 대소문자가 틀려도 인식을 하지만XHTML 에서는 소문자와 대문자를 각각 다르게 인식을 한다.

Page 28: Html5 강좌파일_v_3.0

HTML5 학습 추천 사이트- W3C 홈페이지 (http://www.w3c.org) W3C 공식 홈페이지

- W3C School (http://www.w3schools.com/) HTML5를 포함한 웹의 기반 기술들을 튜토리얼 식으로 잘 정리한 사이트

- HTML5 Canvas Tuoirial (http://www.html5canvastutorials.com/) HTML5의 Canvas 관련 방대한 메뉴얼과 예제를 제공

- JSFiddle (http://jsfiddle.net/) 웹의 프론트엔드 기술인 HTML, CSS, JavaScript를 웹에서 작성해서 바로 테스트 해볼 수 있고, 그 소스를 저장 공유할 수 있는 서비스이다.

- caniuse (http://caniuse.com/)HTML5의 각종 브라우저와 디바이스의 지원여부를 확인해 볼 수 있는 사이트

Page 29: Html5 강좌파일_v_3.0

HTML5 기능 소개

- HTML4 VS HTML5 다른 점 http://www.w3.org/TR/2010/WD-html5-diff-20100304/

1. Syntax (구문) 2. Language (언어) 3. API -> 핵심 부분 중점적으로..다룰 예정

Page 30: Html5 강좌파일_v_3.0

1. HTML5 (Syntax)- Hello HTML5http://jsfiddle.net/foresight/2EBLF/

1-1. DOCTYPE

웹페이지를 올바르게 처리하게 위해 선언하는 문서 유형 정의(Document Type Definition)를 사용해야하는데

이 부분을 브라우저가 알 수 있어야만 원하는 모습이 제대로 표현된다DOCTYPE은 문서 유형을 정의하는 구문이라 할 수 있으며 HTML4,XHTML,HTML5에 따라 달라진다

- HTML 4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Page 31: Html5 강좌파일_v_3.0

1. HTML5 (Syntax)- XHTML 1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

- XHTML 1.1 (Strict DTD 만 지원)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

- HTML5 (HTML5를 지원하지 않는 모든 경우를 다 허용한다. 이전 버전 수용)<!DOCTYPE html ><!DOCTYPE HTML ><!doctype html >

Page 32: Html5 강좌파일_v_3.0

1. HTML5 (Syntax)1-2. Encoding

그 다음 보이는 것이 Charset. 바로 Encoding 에 대한 사항이다.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">와는 다르게 <meta charset="UTF-8">

굉장히 간략하게 표현한다.

1-3. 기타Tag 이름은 XHTML Type으로 작성하든 HTML Type 으로 작성하던간에 대소문자를 가리지 않는다는 점. (XHTML에 비해 굉장히 편하게 사용하게 변하였다.)

Page 33: Html5 강좌파일_v_3.0

1. HTML5 (Syntax)기존 HTML 문서에서 볼 수 있는<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">와는 다르게 <meta charset="UTF-8">

무척이나 간단해진 것을 알 수 있을 것이다.

Tag 이름은 XHTML Type으로 작성하든 HTML Type 으로 작성하던간에 대소문자를 가리지 않는다는 점.

일단 이 정도라고 할 수 있음.

Page 34: Html5 강좌파일_v_3.0

1. HTML5 (Language)1) 새로 추가된 Element - Html5에서는 각각의 태그가 그 자체 이름만으로도 의미를 짐작할수있는 시맨틱(semantic)태그를 사용

이러한 새로운 Sementic Element 들로 인해서 기존의 Div Tag 들로 나뉘어 졌단 막연하고 무의미했던 Contents 들이 한층더 유용한 정보들로 탈바꿈하게 되었다.또 이런 변화는 우리들에게 Contents 구성에 대한 커다란 숙제를 안겨주고 있다.

Page 35: Html5 강좌파일_v_3.0

1. HTML5 (Language) 2) 기타 추가된 Element

Page 36: Html5 강좌파일_v_3.0

1. HTML5 (Language) 3) 변경된 요소

Page 37: Html5 강좌파일_v_3.0

1. HTML5 (Language)4) 제거된 요소

- CSS로 처리할수있는 Element : 순전히 보여지는 것에만 사용되는 요소들. basefont, big, center, font, s, strike, tt, u .........등

- Frame 관련 Element : 사용성과 접근성에 부정적인 영향을 끼치므로 제거된 요소들, Frame, frameset, noframes

- 거의 사용되지않는 Element - 다른 요소로 기능을 대체할수있는 요소들. acronym ---> 대신 abbr태그를 사용 applet ---> object로 대체

isindex ---> 폼 양식으로 대체dir ---> ul 태그로 대체

* acronym , abr 에 대해서 http://blog.wystan.net/2007/04/14/abbr-vs-acronym-tag

Page 38: Html5 강좌파일_v_3.0

HTML5 (API) API (Application Programming Interface) 란?

응용 프로그램 프로그래밍 인터페이스는 응용 프로그램에서 사용할 수 있도록, 운영 체자나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터 페이스를 뜻 한다.주로 파일제어, 창제어, 화상 처리, 문자 제어 등응 위한 인터페이스를 제공한다.- 위키 백과

즉 새로운 프로그램을 만들 때 사용하는 프로그램 언어 차원에서 제공되거나 구동되는 환경의 집합체라고 할수 있다. HTML5에서는 브라우저에서 동작하는 모든 프로그램 적 기능 들을 의미한다고 보면 되겠다.

Page 39: Html5 강좌파일_v_3.0

1. HTML5 (API)1) 그래픽 및 멀티 미디어 재생 기능 강화

HTML5에서 가장 주목받는 신기능은 그래픽 및 멀티미디이어 관련 태그가 대거 추가 되었다. 대표적인 것이 video, audio, canvas, embed 태그가 있다.

- video : 비디오 재생시 사용- audio : 오디오나 음악파일 재생시 사용- canvas : 도형을 그리거나 이미지 데이터를 보여줄 때 사용. 여기서 이미지 데이터란 우리가 평소에 보던 jpg/gif/png 파일을 말하는 것이 아니라 자바스크립트와 연계되어 코드로 그림을 렌더링 하는 것- embed : 플래쉬 파일 등 예전에 플러그인 형태로 보여주던 것을 내장시켜서 보여주던 것

여태껏 웹에서 동영상을 보는데 전혀 불편함이 없었다. 그렇다면 구지 왜 HTML5에 이러한 기능을 추가 한 것일까?그 이유는 기존에 사용자는 동영상을 보기 위해선 모든 브라우저에 플래쉬나 실버라이트 같은 플러그인을 설치 하거나ActiveX 같은 기술을 설치하여 가능할 수 있었지만, 플러그인 도움 없이 동일한 기능을 구현이 가능하게 됨.

또한, 웹 브라우저 별로 지원하는 파일 형식이 서로 다른 문제점 역시, HTML5에서 이러한 기능을 표준 지원함으로써 , 해결 되었다.(참고로 스마트폰은 MP3 및 MPEG4(H.264)파일 형식을 지원한다.)

2)

Page 40: Html5 강좌파일_v_3.0

1. HTML5 (API)1) Application Cache - 웹 어플리케이션을 오프라인에서도 사용할 수 있도록 필요한 리소스를 클라이언트 쪽에 캐시하는 기능

2) Web Storage / Web SQL DataBase - 데이터 및 사용자가 입력한 정보를 로컬영역에 보존할 수 있게 된다. - 쿠키와 비교했을 때 크기에 제한과 유효기간이 없고, 데이터가 서버로 전송되지 않는다.

3) Web Workers (Multi Thread) - 백그라운드 프로세스로 처리되는 스크립트 - 브라우저 내에 자바스크립트로 멀티 스레드 프로그램을 구현할 수 있다.

4) Web Socket- Full Duplex를 구현한 Web Socket 프로토콜을 이용하여 채팅 프로그램이나 서버로 부터의 Push 서비스가 가능

5) File API- 로컬 파일 시스템과 브라우저 간에 파일을 주고 받을 수 있다.

6) Geolocation- GPS, 셀, 네트워크 등을 이용하여 디바이스의 현재 위치를 파악할 수 있는 기능. (길안내 기능 등..)

Page 41: Html5 강좌파일_v_3.0

1. HTML5 (API)7) Drag & Drop - 이미지나 텍스트를 Drag하여 Drop 넣을수 있는 기능- File API와 궁합이 잘 맞음

8) Device Orientation, Speech Input- 디바이스의 기울기, 방향을 확인 - 마이크로 음성을 입력 받아 문자로 전환해 주는 기능

Page 42: Html5 강좌파일_v_3.0

휴 식(점심시간)

Page 43: Html5 강좌파일_v_3.0

1. HTML5 코딩 시작 4단계1) 문서형 선언<!DOCTYPE html>

2) 자연어 명시 - 현재 문서의 주된 자연어를 명시 한다.<html lang="ko">

3) 인코딩 정의HTML4.0<meta http-equiv="Content-Type" content="text/html; charset=utf-8">XHTML 1.0<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />HTML5<meta charset="UTF-8">- HTML5에서는 기존에 사용하던 방식과 새롭게 추가된 charset 속성 모두 허용한다.

4) 마크업 하기HTML5 문서의 기본적인 구조 요소인 HTML, HEAD, BODY 요소로 구성한다.http://jsfiddle.net/foresight/2EBLF/

Page 44: Html5 강좌파일_v_3.0

1. HTML5 Semantic Element - Outline Element

DIV Layout : http://jsfiddle.net/foresight/LWEdr/

기존 HTML4과 XHTML1.0은 <div> 요소와 <span> 요소를 사용하여 구조화 하였다.이런 방식은 문서 구조와 스타일 지정이 명확하게 구분되지 못하는 문제가 발생하여 이문제를 해결하기 위하여 HTML5는 새롭게 문서 구조를 설계하는 요소가 추가 되었다.

Page 45: Html5 강좌파일_v_3.0

1. HTML5 Semantic Element1. Outline Element

Page 46: Html5 강좌파일_v_3.0

1. HTML5 Semantic Element

<section>장, 절 등의 섹션 영역반드시 제목을 의미하는 헤딩 요소가 포함되어야 한다.article요소와 구분되어 사용해야한다 .section을 기존의 div요소와 구분하지 않고 사용하는 경우가 많은데, div요소는 레이아웃을 구현할때 사용한다.

Section Element 는 장이나 절 단위를 나타낸다고 생각하면 된다. 스타일을 적용하기위해서 Section Element 를 사용해서는 안되며 그런 용도라면 Div Element 를 사용하도록 해야한다.

Page 47: Html5 강좌파일_v_3.0

1. HTML5 Semantic Element

Page 48: Html5 강좌파일_v_3.0

1. HTML5 Semantic Elementheader상단 콘텐츠 영역페이지의 header로 사용할 경우 사이트 제목, 로고, 검색영역으로 사용한다.section요소 내에서 사용할 경우 제목등을 포함하는 내용으로 마크업 할 수 있다.

footer하단 콘텐츠 영역address정보, 관련링크 그리고 저작권등을 마크업한다 .

nav사이트 주요 네비게이션 영역일반적으로 제목요소를 사용하지 않는다.

article독립된 하나의 콘텐츠로 분류할때 사용블로그 포스트나 뉴스본문등과 같은 영역으로 사용된다.

aside부가 콘텐츠 영역

Page 49: Html5 강좌파일_v_3.0

1. HTML5 Semantic Elementaddress주소 등 연락처 정보 영역

Page 50: Html5 강좌파일_v_3.0

1. HTML5 Semantic Element

Page 51: Html5 강좌파일_v_3.0

1. HTML5 Semantic Element

Page 52: Html5 강좌파일_v_3.0

1. HTML5 Semantic Element

Page 53: Html5 강좌파일_v_3.0

1. HTML5 Semantic Element

Page 54: Html5 강좌파일_v_3.0

1. HTML5 Semantic Elementarticle vs section

- article 요소는 주위를 둘러싼 콘텐츠와 별도로 독립할 수 있는 콘텐츠, 즉, 블로그 같은 ‘배포할 수 있는 ‘ 콘텐츠를 마크업 하도록 만들어 졌다.

- section 요소는 단순히 관련있는 콘텐츠를 그룹으로 묶는 용도로 사용 section 요소를 쓰려면 콘텐츠 안에는 제목이 반드시 있어야 함.

Page 55: Html5 강좌파일_v_3.0

1. HTML5 Semantic Element

Page 56: Html5 강좌파일_v_3.0

1. HTML5 Semantic Element - 실습 예제

코오롱 베니트 홈페이지 메인을 현재 까지 배운 지식을 토대로 작성해 보세요.

Page 57: Html5 강좌파일_v_3.0

1. HTML5 Semantic Element - 의미부여 태그

- 그룹 요소 p, br, blockquote, ol, ul, dl, figure, div, hr, pre

- 텍스트 레벨 요소time, em, strong, q, cite, abbr, dfn, small, mark, b ,i그 중 HTML 5 에 추가된 대표적인 mark, date Element 인 것은 태그 등이다.

Fiddle 예제http://jsfiddle.net/foresight/KqnhF/

Page 58: Html5 강좌파일_v_3.0

1. HTML5 String Web Form - Form Element

form은 서버에 사용자 입력 값을 전송하는 역할을 담당하는 요소이다.

HTML5 에서는 사용성이 필요시 되는 태그를 추가 하였으며,폼콘트롤들을 식별할 수 있도록 label요소와 title속성등 레이블을 제공하여, 어떤 데이터를 입력하는 영역인지 알수 있도록 웹 접근성과 사용성을 향상시켰다.

* 추가된 태그 리스트datalist - 텍스트 상자의 입력 값의 후보 목록을 그룹화 할때 사용output - 계산결과를 표현kegen - 폼을 전송할 때 공개키나 비밀키를 생성. HTML5에서 지원하는 keytype은 RSA만 가능progress - 작업의 진행상황 표현meter - 한정된 범위값 표현

Page 60: Html5 강좌파일_v_3.0

휴 식

Page 61: Html5 강좌파일_v_3.0

1. HTML5 API (Multimedia) - VIDEO / AUDIO

기존 HTML4에서는 object 대신에 비표준인 embed 요소를 주로 사용해왔고,플러그인 기반의 콘텐츠 삽입에는 object요소가 사용되었다.그러나 object요소는 이미지, 플래시, 실버라이트, HTML문서, 오디오, 비디오 등 무엇이는 삽입하는 용도로 설계 되었기 때문에브라우저가 오디오나 비디오 콘텐츠에 특화된 재생 컨트롤이라는것을 표시하기에는 너무 포괄적이였다.HTML5에서는 video와 audio요소가 새로 생기면서 비디오와 오디오를 마크업할 수 있게 하였다.이 두요소는 embed나 object와 다른 기능이 추가 되었다. 추가된 기능는 아래와 같다. - 재생, 일시중지등 브라우저의 자체 콘트롤 사용가능 - source에 파일을 여러개 지정하여 브라우저의 비디오/오디오 형식 지원에 따라 자원을 표시할수 있다.VIDEO : http://www.w3schools.com/html/html5_video.aspAUDIO : http://www.w3schools.com/html/html5_audio.asp

Page 62: Html5 강좌파일_v_3.0

1. HTML5 API (Multimedia) - VIDEO / AUDIO TAG 속성

Page 63: Html5 강좌파일_v_3.0

1. HTML5 API (Multimedia) - 코덱 전쟁

Page 64: Html5 강좌파일_v_3.0

1. HTML5 API (Multimedia) - Container / Codec

동영상과 오디오는 컨테이너와 코덱으로 구성이 되어 있다.

1. 컨테이너 : 오디오 스트림과 비디오 스트림, 자막 같은 메타 데이터를 담을 수 있는

봉투

2. 코덱 : 영상(video) 또는 음성(audio) 신호를 컴퓨터가 처리할 수 있도록 디지털신호로 변환 압축하는 코더(coder)와 압축된 영상을 볼 수 있도록 해제하는 디코더(decoder)의 합성어입니 다. 영상과 음성으로 구성된 동영상(video)은 파일용량이 너무 크므로 원활한 파일관리와 전송을 위해 용량을 압축하는데 이 압축을 인코딩(encoding)이라 하고, 모니터에서 압축된 동영상을 보기 위해 재생(압축해제)하는 것을 디코딩(decoding)이라 합니다.

Page 65: Html5 강좌파일_v_3.0

1. HTML5 API (Multimedia) - Container / Codec

Page 66: Html5 강좌파일_v_3.0

1. HTML5 API (Multimedia) - VIDEO / AUDIO DomRefrence

미디어 메소드, 속성, 이벤트들은 재생과 멈춤, 재생상태를 정의하고 있어 고유한 컨트롤러를 가지는 플레이어를 직접 만들 수 있게 되었다.이러한 메소드, 속성, 이벤트들은 javascript로 조작할수 있다.

W3C School : http://www.w3schools.com/tags/ref_av_dom.asp

Page 67: Html5 강좌파일_v_3.0

1. HTML5 API (Multimedia) - VIDEO / AUDIO DomRefrence

1. Method

2. Attribute

Page 68: Html5 강좌파일_v_3.0

1. HTML5 API (Multimedia) - VIDEO / AUDIO DomRefrence

3. Event

Page 69: Html5 강좌파일_v_3.0

1. HTML5 API (Multimedia) - VIDEO / AUDIO DomRefrence

Page 70: Html5 강좌파일_v_3.0

1. HTML5 API (Multimedia) - VIDEO / AUDIO 실습

- 동영상 URL : http://www.w3schools.com/tags/movie.mp4- 미리보기 이미지 : http://www.w3schools.com/images/w3html5.gif 주어진 동영상 파일을 이용하여, VIDEO 태그를 써서 미리보기 이미지를 활용하고, 플레이 버튼, 정지 버튼, 처음으로, 앞으로 이동 버튼, 뒤로 가기 버튼을 5개 만들어서 플레이어를 제어 하시오. (이동 단위는 +- 2 으로 한다. )또한, 플레이어가 종료 되었을 시 경고창으로 종료 되었음을 알린다.클릭 방식은 HTML태그에 선언된 방식이 아닌 화면 초기 시작시에 버튼에 이벤트를 주는 방식으로 개발하시오.

Page 71: Html5 강좌파일_v_3.0

1. HTML5 API (Persistence) - Web Storage

key/value 형태의 간단한 데이터를 저장하기 위한 클라이언트 측 저장공간을 말한다.

이전에는 일반적으로 쿠키를 사용했는데 , 기존 쿠키와 비교했을때 문자뿐만아니라 자바스크립트 객체를 저장할수 있고, 저장공간도 상당히 크며, 쿠키처럼 매 요청마다 데이터를 서버에 전송하지 않아 불필요한 네트워크 트래픽을 발생시키지 않는다.

- 안전한 HTML5 LocalStorage에 대한 연구 논문http://academic.naver.com/view.nhn?doc_id=54919082&dir_id=0&page=0&query=cookie%20webstorage&ndsCategoryId=10512&library=6

Page 72: Html5 강좌파일_v_3.0

1. HTML5 API (Persistence) - Web Storage

클라이언트에 데이터를 저장하기 위해 두가지 개체를 가지고 있다.localStorage 와 sessionStorage 인데 둘은 데이터의 유효 범위와 저장 기간이 달라 용도가 다르게 쓰인다.

localStorage웹 애플리케이션 마다 각각 생성되는 고유의 저장 공간.동일한 애플리케이션내에서는 같은 스토리지를 사용한다.임의로 삭제하지 않는 이상 영구적으로 저장이 가능하다.기존의 Cookie로 대체하기 적합하다.

sessionStorage한번의 세션 동안만 유지되는 저장공간.동일한 애플리케이션이라 하더라도 스토리지가 각각 따로 생성된다.브라우저를 종료하면 각이 삭제되는 임시적 저장을 하는 공간이다.

- W3C School Web Storagehttp://www.w3schools.com/html/html5_webstorage.asp

Page 73: Html5 강좌파일_v_3.0

1. HTML5 API (Persistence) - Web Storage

- 지원여부

- 저장

Page 74: Html5 강좌파일_v_3.0

1. HTML5 API (Persistence) - Web Storage

- 가져오기

- 삭제

Page 75: Html5 강좌파일_v_3.0

1. HTML5 API (Persistence) - Web Storage

- 전체 삭제

Page 76: Html5 강좌파일_v_3.0

1. HTML5 API (Persistence) - Web Storage

- 저장 다양한 표현방식

- 가져오기 다양한 표현방식

- 삭제 다양한 표현방식

Page 77: Html5 강좌파일_v_3.0

1. HTML5 API (Persistence) - Web Storage

- For Loop

- 메모지 예제 (1) : http://jsfiddle.net/foresight/FjRj9/

- 메모지 예제 (2) : http://jsfiddle.net/foresight/ZEM8g/1/ (Session Storage)

Page 78: Html5 강좌파일_v_3.0

1. HTML5 API (Persistence) - Web Storage (QUIZ)

Local Storage는 쿠키를 대체 할 수 있을 것 같은데 도대체 세션 스토리지는 어디에 쓰여야 적합할까요?예를 하나 씩 들어 보세요..

Page 79: Html5 강좌파일_v_3.0

1. HTML5 API (Persistence) - Web SQL DataBase

HTML5 의 로컬 저장소는 이전에 알아본 Web Storage 이외에도 관계형 데이타베이스가 추가로

제공된다. 일명 Web SQL Database 가 그것이다(Web SQL Database 를 지원하는 브라우저는 자체적으로 경량의 관계형 DB를 내장하고 있다)

Web Storage 의 경우 비교적 적은양의 간단한 데이터를 저장하기에 적합한 로컬 저장소인 반면

Web SQL Database 는 보다 구조적이고 체계화된 관계형 데이터를 대랑으로 저장하기에 적합하다

이것은 마치 파일이라는 저장소와 MS SQL 이나 Oracle 과 같은 관계형 데이타베이스의 차이라 하겠다

물론 Web SQL Database가 Oracle 와 같이 서버급, 대용량 DBMS의 면모를 모두 갖추지는 않았지만,안정적이고 경량의 관계형 자료구조를 지원하고 표준 SQL 질의를 통해 데이터를 보다 유연하게 다룰 수 있다는 점과 클라이언트(브라우저)에 직접 내장되어 있다는 점에서 매우 유용한 기능이라 할 수 있다

Web SQL Database 는 아이폰과 같은 모바일 환경에 많이 채용된 경량의 무료 DB엔진인 SQLite를 기반으로 하고 있다

Page 80: Html5 강좌파일_v_3.0

1. HTML5 API (Persistence) - Web SQL DataBase

Page 81: Html5 강좌파일_v_3.0

1. HTML5 API (Persistence) - Web SQL DataBase

http://caniuse.com/#search=Web%20SQL

Page 82: Html5 강좌파일_v_3.0

1. HTML5 API (Persistence) - Indexed DataBase

Indexed Database는 새로 등장한 또다른 로컬 저장소 스펙이다2009년 말까지 사양 책정이 진행중이던 Web SQL Database 의 대안으로 탄생했다즉 현재 Web SQL Database 는 사양 책정이 중지된 상태이며, IndexedDB 라는 새로운 스펙이 대안으로 떠오르고 있는 것이다

Indexed Database 는 자바스크립트 객체 단위의 데이터 저장이 용이하고 그 객체를 대상으로 인덱스를 걸 수 있어 간단한 구현과 효율적인 검색을 수행할 수 있다

관계형 데이타베이스의 경우 저장되는 데이터의 스키마의 유연성이 떨어질 수 있고 SQL 이라는 별도의 독립된 언어를 기반으로 하기 때문에 브라우저간 표준화및 호환성에 문제될 소지가 있다(MS SQL과 오라클이 자체 비표준 SQL을 지원하는 것처럼 변형된 SQL이 발생할 수 있다는 것이다)

반면 Indexed Database 는 SQL 언어와는 무관하며 단순한 저장구조(Key-Value Storage)를 갖추고 있으며 간단한 자바스크립트 API 만으로도 데이터베이스 조작이 가능하여 보다 브라우저 친화적이고 표준화 작업을 쉽게 이끌 수 있다는 장점이 있다

결국 고가용성 환경이 아닌, 모바일 환경에서의 가벼운 로컬DB 컨셉은 관계형DB보다는 Indexed Database와 같은 객체기반의 비관계형 DB가 더 어울린다고 할 수 있겠다.

Page 83: Html5 강좌파일_v_3.0

1일차 끝!!!

Page 84: Html5 강좌파일_v_3.0

1. HTML5 API (DOM API) - DOM

Page 85: Html5 강좌파일_v_3.0

1. HTML5 API (DOM API) - DOM

Page 86: Html5 강좌파일_v_3.0

1. HTML5 API (DOM API) - DOM

Page 87: Html5 강좌파일_v_3.0

1. HTML5 API (DOM API) - DOM

- Example

http://dom-tutorials.appspot.com/static/index.html

Page 88: Html5 강좌파일_v_3.0

1. HTML5 API (DOM API) - querySelector

웹 개발을 할 때 HTML4의 selectors는 좀처럼 불편한게 아니다. document.getElementById와 document.getElementsByClassName 또는 document.getElementsByName 등으로 DOM element에 접근해서 데이터를 가져오거나 변경을 하는 것이 꽤 귀찮은 작업이기 때문에 대부분 jQuery나 다른 DOM selector를 지원하는 라이브러리를 사용하여 개발을 한다. 물론 jQuery는 selector 말고도 많은 강력한 기능이 있지만... HTML5의 selectors API를 비교 설명하기 위해서 jQuery의 selectors만 좁혀서 비교한다. (HTML5의 selector로 jQuery selector를 다 할 수 없을지 모르겠지만 HTML4에 비해서 매우 강력해졌다.)

Page 89: Html5 강좌파일_v_3.0

1. HTML5 API (DOM API) - querySelector, querySelectorAll

Page 90: Html5 강좌파일_v_3.0

1. HTML5 API (DOM API) - querySelector, querySelectorAll

1. 첫번째 예제 http://jsfiddle.net/foresight/Xdvew/2/

2. 두번째 예제http://jsfiddle.net/foresight/mEMwy/2/

Page 91: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas

Canvas Element 는 HTML 5 에서 가장? 많이 주목받고 있는 새롭게 추가된 element 들 중 하나입니다.<canvas>

웹 페이지에서 자바스크립트를 통해 즉시 그림을 그리는데 사용=> 단순한 그림 표현을 넘어 다양한 효과를 주고 텍스트를 표현하고 간단한 애니메이션까지 표현 가능

그림을 그리기 위해서는

1. <canvas>를 사용해서 그림 영역을 지정하고,2. 자바스크립트를 사용해 실제 그림을 그린다.

활용 분야 (활용 분야는 무궁무진함)- 그래프 - 애니 메이션- 게임 제작- 사진 합성- 드로잉

HTML Canvas Tutorial http://www.html5canvastutorials.com/tutorials/html5-canvas-element/

Page 92: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - CANVAS vs SVG

SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 표현하기 위한 XML기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다.

Page 93: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - CANVAS vs SVG

Page 94: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Raphael.js

라파엘은 웹에서 벡터 그래픽 작업을 할 때, 일을 더 쉽게 해결해줄 수 있게 만들어주는 가벼운 자바스크립트 라이브러리이다. 예를 들어 당신만의 고유한 차트나, 이미지를 자르거나 돌리는 위젯을 만들 때 라파엘을 이용하면 좀 더 쉽고 간단하게 할 수 있을 것이다.라파엘은 이미지 생성에 SVG(W3C 권고안) 과 VML을 기본적으로 사용한다. 즉, 당신이 생성한 모든 그래픽 객체는 DOM 객체로 만들어지며, JS의 이벤트 핸들러를 추가하거나 수정할 수 있다는 이야기다. 라파엘의 목적은 만들어진 벡터와 그림들해서 쉽고, 크로스 브라우징을 지원하게 하는 것이다. 라파엘은 현재 Firefox 3.0 이상, Safari 3.0이상, Chrome 5.0이상, Opera 9.5이상, IE 6.0이상을 지원하고 있다.

http://raphaeljs.com/

Page 95: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas

HTML Canvas Elementhttp://www.html5canvastutorials.com/tutorials/html5-canvas-element/

- 선이나 도형을 그리는 차례

1. 패스를 초기화 한다.2. 패스를 지정한다.3. 지정한 패스를 그리기 / 채우기 메서드를 사용하여 선/도형을 그린다.4. 지정한 패스를 닫는다.5. 선을 출력한다.

Page 96: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Path)

HTML Canvas Line

http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

Page 97: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Path)

- 패스 관련 메서드

- beginPath() : 경로 그리기 시작 ; 패스 지정 초기화 ; 이전까지 그렸던 패스는 모두 리셋하고 새로운 패스를 그린다는 의미- closePath() : 경로 그리기 종료 ; 패스를 닫음 ; 선이 마지막으로 종료된 지점과 최초의 지점을 자동으로 연결하는 역할- moveTo(x, y) : 시작점 지정; 점이동 - lineTo(x, y) : 선 그리기 ; 이전 위치에서 지정한 위치 (x,y)까지 선을 그림- stroke() : 선을 출력함- fill() : 색 채우기

- 패스 예제http://jsfiddle.net/foresight/PtvKn/

Page 98: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Rectangle)

HTML Canvas Rectanglehttp://www.html5canvastutorials.com/tutorials/html5-canvas-rectangles/

Page 99: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Rectangle)

HTML Canvas Rectanglehttp://www.html5canvastutorials.com/tutorials/html5-canvas-rectangles/

응용 예제http://jsfiddle.net/foresight/B69An/

Page 100: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Arc)

HTML Canvas Arc

http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/

Page 101: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Arc)

원을 그리기 전에 알아야 할 요소

- 각도(degree) 가 아닌 호도(radian) 를 이용!- 각도를 호도로 변환하는 ( 각도* 원주율 / 180 ) 이런 공식을 이용

Page 102: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Arc)

QUIZ한변이 6cm인 정사각형 안에 가장 큰 원을 그렸습니다. 이 원의 원주는 몇 cm입

니까?

Page 103: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Arc)

원을 그리기 전에 알아야 할 요소- 각도(degree) 가 아닌 호도(radian) 를 이용!- 각도를 호도로 변환하는 ( 각도* 원주율 / 180 ) 이런 공식을 이용

원그리기 : context.arc(x,y, 반지름, 시작각도, 종료각도, 그리는 방향); ex) ctx.arc(100, 100, 50, 0,(Math.PI/180) *360,false);

원호 그리기 : context.arc(x,y, 반지름, 시작각도, 종료각도, 그리는 방향); ex) ctx.arc(100, 100, 50, (Math.PI/180)*225 ,(Math.PI/180) *45,false);

부채꼴 그리기 : moveTo() + arc() + closePath() ex) context.moveTo(150,150) context.arc(150,150, 100, 0, (Math.PI/180)*90, false); context.closePath(); contex.stroke();

응용예제http://jsfiddle.net/foresight/xZrsr/

Page 104: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (실습)

Page 105: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Bezier Curve)

베지에 곡선 bezier curve : n개의 점을 기준으로 만들수 있는(n-1)차 곡선 2차 베지에 곡선 ( 컨트롤 포인트 1개) => quadraticCurveTo(제어점x, 제어점y, 종료점x, 종료점y) 3차 베지에 곡선 ( 컨트롤 포인트 2개) => bezierCurveTo(제어점x1, 제어점y1, 제어점x2, 제어점y2, 종료점x, 종료점y)

Page 106: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Bezier Curve)

- Quardratic Curvehttp://www.html5canvastutorials.com/tutorials/html5-canvas-quadratic-curves/

- Bezier Curvehttp://www.html5canvastutorials.com/tutorials/html5-canvas-bezier-curves/

- 응용 예제http://jsfiddle.net/foresight/njaLJ/

Page 107: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Image 삽입)

- Quardratic CurvedrawImage ( image sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight): Canvas에 이미지 삽입 (그리기) 이미지가 다 로드 된 후 호출해야 함. img.onload = function() {};image : 이미지(DOM image) 또는 Canvas 개체 또는 video 요소sx : 이미지 출력할 x 좌표sy : 이미지 출력할 y 좌표sWidth : [옵션] 이미지 width /원본(source) 잘라낼 영역(clipping rectangle)sHeight : [옵션] 이미지 Height /원본(source) 잘라낼 영역(clipping rectangle)dx : [옵션] 만약 잘라내었다면 , 대상 이미지의 X좌표dy : [옵션] 만약 잘라내었다면 , 대상 이미지의 Y좌표dWidth : [옵션] 만약 잘라내었다면 , 대상 이미지의 widthdHeight : [옵션] 만약 잘라내었다면 , 대상 이미지의 Height

- Canvas Image 예제http://www.html5canvastutorials.com/tutorials/html5-canvas-images/http://www.html5canvastutorials.com/tutorials/html5-canvas-image-size/http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/

Page 108: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Line Style)

lineWidth => 선 두께 지정 ( 기본 1.0 ) lineCap=> 선 끝 부분의 스타일 지정 ( butt, round, square )lineJoin=> 선이 꺽이는 부분의 스타일 지정 (bevel, round, miter)strokeStyle=> 선 색 지정

- 예제http://www.html5canvastutorials.com/tutorials/html5-canvas-line-width/http://www.html5canvastutorials.com/tutorials/html5-canvas-line-color/http://www.html5canvastutorials.com/tutorials/html5-canvas-line-caps/http://www.html5canvastutorials.com/tutorials/html5-canvas-line-joins/

- 응용예제http://jsfiddle.net/foresight/b3ezE/http://jsfiddle.net/foresight/4LTQB/

Page 109: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Fill Style)

* fill() 메소드 사용하는 경우에 fillStyle, globalAlpha 사용※ stroke() <=> strokeStyle 속성

* 속성- fillStyle => 채우기 색 지정- globalAlpha => 색의 투명도 값 (0.0 ~1.0 ) 지정

- 응용예제http://jsfiddle.net/foresight/DUBhL/

Page 110: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Gradient)

그라데이션 지정 관련 메서드

createLinearGradient( 시작점 x1, 시작점 y1, 끝점 x2, 끝점 y2 ) => 선형 그라데이션 지정

createRadialGradient( x1, y1, 첫번째 원의 반지름 r1, x2, y2, 두번째 원의 반지름 r2 ) => 원형 그라데이션 지정

addColorStop(오프셋, 색상) => 그라데이션 경계색 지정 / 오프셋 : 0.0에서 1.0까지의 색상의 상대적인 위치

- 응용예제http://www.html5canvastutorials.com/tutorials/html5-canvas-linear-gradients/http://www.html5canvastutorials.com/tutorials/html5-canvas-radial-gradients/http://www.html5canvastutorials.com/tutorials/html5-canvas-patterns-tutorial/

Page 111: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Font)

font - 폰트 설정 (크기와 글꼴, 글자 스타일) :=> context.font = "20pt '맑은 고딕'"=> context.font = "bold 20pt '맑은 고딕'"

textBaseline- 텍스트 출력 기준선 설정top, middle, bottom, alphabetic, hanging, ideo graphic

Page 112: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Font)

textAlign - 텍스트 가로 방향의 정렬 지정 left, right, center, start, end

measureText- Canvas에 그려진 텍스트의 사이즈(픽셀) 값 반환

2) fillText() : 캔버스에 색이 채워진 텍스트 삽입

형식 : fillText(출력할 텍스트, 시작 x좌표, 시작 Y좌표 [,최대너비])

3) strokeText() : 캔버스에 테두리만 있는 텍스트 삽입

형식 : strokeText(출력할 텍스트, 시작 x좌표, 시작 Y좌표 [, 최대너비])

Page 113: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Font)

textAlign - 텍스트 가로 방향의 정렬 지정 left, right, center, start, end

Page 114: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Font)

measureText- Canvas에 그려진 텍스트의 사이즈(픽셀) 값 반환2) fillText() : 캔버스에 색이 채워진 텍스트 삽입형식 : fillText(출력할 텍스트, 시작 x좌표, 시작 Y좌표 [,최대너비])

3) strokeText() : 캔버스에 테두리만 있는 텍스트 삽입형식 : strokeText(출력할 텍스트, 시작 x좌표, 시작 Y좌표 [, 최대너비])

- 응용 예제http://jsfiddle.net/foresight/jTcgB/

Page 115: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Transforms)

변형 (Transforms) : 요소를 변형rotate() : 회전scale() : 크기 변경translate() : 위치 이동

- Translate 예제http://www.html5canvastutorials.com/advanced/html5-canvas-transform-translate-tutorial/http://jsfiddle.net/foresight/rsKM8/

- Rotate 예제http://www.html5canvastutorials.com/advanced/html5-canvas-transform-rotate-tutorial/http://jsfiddle.net/foresight/VxDwb/

Page 116: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (Transforms)

- Scale 예제http://www.html5canvastutorials.com/advanced/html5-canvas-transform-scale-tutorial/

- Save() , Restore() - 상태 / 저장현재 캔버스의 상태를 저장(save) 또는 복원(restore)- 패스가 아닌 상태값이 저장됨 ; fillStyle,........- 여러 번 호출 시 Stack에 저장 됨 ; LIFO(Last In First Out)

- Save() , Restore() - 예제http://jsfiddle.net/foresight/v8jEE/

Page 118: Html5 강좌파일_v_3.0

1. HTML5 API (Graphics) - Canvas (QUIZ)

실제 Canvas가 지정이 된다면..실무에서 Canvas를 활용하여 뭘 할 수 있을까요??

Page 119: Html5 강좌파일_v_3.0

휴 식

Page 120: Html5 강좌파일_v_3.0

1. HTML5 API (MultiThreads) - Web Workers (개요)

무거운 계산을 백그라운드에서 실행할 수 있다면 계산이 끝날 때까지 사용자 인터페이스UI(User Interface)가 기다릴 필요가 없게 되고, 많은 경우 모던 웹 애플리케이션의 성능이 향상될 것이다. 이처럼 무거운 계산을 수행하는 코드를 웹 애플리케이션의 UI와 별도의 스레드에서 실행시키는 API가 웹 워커 스펙01에 정의되어 있다. 웹 워커는 별도의 스레드로 실행되기 때문에 UI가 사용하는 메모리와 CPU에 영향을 주지 않고 긴 작업을 수행할 수 있다.멀티스레드 프로그래밍은 복잡한 알고리즘과 이론적인 논의 등을 수반하는 까다로운 작업이라고 할 수 있다. 자바를 비롯한 여러 언어가 이러한 복잡함을 숨기기 위한 라이브러리를 개발자들에게 제공한다. 다행히도 웹 워커에서는 훌륭하면서도 간단한 API를 제공한다. worker는 UI스레드와 분리되어 있기 때문에 UI스레드가 가지는 DOM에 접근이 불가능 하므로 UI처리를 할수 없다.이로써 UI처리와 로직을 분리시켜는 역할을 하게 되었다. worker는 두가지 종류를 가진다.

● dedicated worker : 워커 각각이 하나의 프로세스로 동작하며 워커끼리는 데이터를 공유하지 못한다.

● shared worker : 다수의 워커가 하나의 프로세스를 사용하여 워커끼리 데이터공유가 가능하다.

Web Works 지원 스펙http://caniuse.com/#search=Web%20Workers

Page 121: Html5 강좌파일_v_3.0

1. HTML5 API (MultiThreads) - Web Workers (개요)

http://slides.html5rocks.com/#web-workers

Page 122: Html5 강좌파일_v_3.0

1. HTML5 API (MultiThreads) - Web Workers (개요)

Page 123: Html5 강좌파일_v_3.0

1. HTML5 API (MultiThreads) - Web Workers (사용용도)

• 매우 많은 문자열의 Encoding/Decoding• 복잡한 수학 계산(소수prime numbers, 암호화 등)• 매우 큰 배열의 정렬• 네트워크를 통한 데이터 처리• local storage 데이터 처리• 데이터 catching이나 frefetching• 문법검사가 같은 실시간 text 분석• 이미지 처리• 비디오나 오디오 데이터 처리• Background I/O• web services 폴링• 큰 배열이나 JSON 데이터의 처리

Page 124: Html5 강좌파일_v_3.0

1. HTML5 API (MultiThreads) - Web Workers (사용법)

Page 125: Html5 강좌파일_v_3.0

1. HTML5 API (MultiThreads) - Web Workers (사용법)

Page 126: Html5 강좌파일_v_3.0

1. HTML5 API (MultiThreads) - Web Workers (사용법)

- 웹 워크 사용법http://www.w3schools.com/html/html5_webworkers.asp

Page 127: Html5 강좌파일_v_3.0

1. HTML5 API (MultiThreads) - Web Workers (사용법)

- 주요 메소드와 이벤트

Page 128: Html5 강좌파일_v_3.0

1. HTML5 API (MultiThreads) - Web Workers (사용법)

- 사용할수 없는 것들

• The window object

• The document object

• The parent object

• 이런 객체를 사용하는 jQuery 같은 javascript library

- 사용할 수 있는 것들

• The navigator object

• The location object (read-only)

• The XMLHttpRequest function

• binary와 ASCII 변환함수 - atob(), btoa()

• setTimeout() / clearTimeout() and setInterval() / clearInterval()

• dump()

• The application cache

• importScripts()로 로드하는 외부 js 파일

• 다른 Web Workers 생성

Page 129: Html5 강좌파일_v_3.0

1. HTML5 API (MultiThreads) - Web Workers (사용법)

- ImportScripts

Page 130: Html5 강좌파일_v_3.0

1. HTML5 API (MultiThreads) - Web Workers (사용법)

- ImportScripts

Page 131: Html5 강좌파일_v_3.0

1. HTML5 API (MultiThreads) - Web Workers (Shared Worker)

여러 어플리케이션에서 공유할 수 있는 워커가 Shared Worker이다. 공유워커는 이름이나 URL로 식별되고 SharedWorker 를 생성해서 객체를 만든다.

공유워커는 다수의 워커가 한개의 프로세스를 공유 한다.브라우저 창이 달라도 같은 프로세스를 공유하며 SharedWorker 객체 생성시 js파일과 name이 같다면 같은 프로세스를 공유합니다.

향후, 어떻게 될지 모름.(보류..)

Page 132: Html5 강좌파일_v_3.0

1. HTML5 API (MultiThreads) - Web Workers (실습 예제)

웹 워커를 이용하여 Worker.js로 ‘안녕하세요’ 라는 메세지를 보내고 메세지를 받은 Worker는 0.5초 마다 받은 메세지와 함께 count를 1씩 증가 시킨 값을 리턴하고 워커에서 받은 값을 화면에 뿌려주는 것을 만들어 보세요..

Page 133: Html5 강좌파일_v_3.0

1. HTML5 API (Communication) - Web Socket (개요)

순수한 웹 상에서의 실시간 웹을 향한 노력 - frame(or iframe) 을 통한 반복적인 재요청 - Ajax의 등장으로 비동기 반복 요청 - Comet 의 등장으로 서버 데이터 수신 후 재 요청이 가능해져 불필요한 반복 요청의 비효율성은 개선

그러나 이 모든 것은 '폴링(polling)' 방식이다즉 데이터 수신을 위해 서버가 클라이언트에게 전송해 주는 푸시(push)방식이 아니라 클라이언트가 서버에에게 요청하는 폴링(polling) 방식이었다

비교적 최적의 대안이었던 Comet 역시 무의미한 반복 요청을 피하기 위한 연결유지 기법이 적용되었지만 일정 시간 이후에는 연결을 종료하고 다시 연결해야 한다. 그래서 Comet을 Long-Polling 라 한다

Page 134: Html5 강좌파일_v_3.0

1. HTML5 API (Communication) - Web Socket (개요)

Page 135: Html5 강좌파일_v_3.0

1. HTML5 API (Communication) - Web Socket (개요)

http://peterlubbers.sys-con.com/node/1551694

웹에서도 채팅이나 게임, 실시간 주식 차트와 같은 실시간이 요구되는 응용프로그램의 개발을 한층 효과적으로 구현할 수 있게 되었다

Page 136: Html5 강좌파일_v_3.0

1. HTML5 API (Communication) - Web Socket (구현)

웹 소켓 역시 일반적인 TCP 소켓 통신처럼 웹 소켓 역시 서버와 클라이언트간 데이터 교환이 이루어지는 형태이다. 따라서 다른 HTML5 스펙과는 달리 클라이언트 코드만으로 실행 가능한 예를 만들 수는 없다

즉 클라이언트에서는 웹 소켓이 제공하는 자바스크립트 API를 이용해 서버에 연결하고 데이터를 송/수신하는 코드를 구현해야 하며 서버에서는 웹 소켓 프로토콜에 맞는 전용 장치가 구축되어 있어야 한다

Page 137: Html5 강좌파일_v_3.0

1. HTML5 API (Communication) - Web Socket (구현)

웹 소켓 클라이언트

- 서버 연결웹 소켓이 동작하기 위해서 제일 처음 서버와 연결이 되어야 한다. HTML5가 제공하는 WebSocket 객체를 통해 서버 연결을 수행한다. 일반 통신은 ws, 보안 통신은 wss 프로토콜을 이용한다기본 포트 역시 http,https와 동일한 80,443을 이용한다var wsSocker = new WebSocket("ws://Web Socket Server URL");

- 데이터 전송 wsSocket.send("전송할 Message");

- 이벤트 핸들러

Page 138: Html5 강좌파일_v_3.0

1. HTML5 API (Communication) - Web Socket (구현)

- 형태

Page 139: Html5 강좌파일_v_3.0

1. HTML5 API (Communication) - Web Socket (구현)

Page 140: Html5 강좌파일_v_3.0

1. HTML5 API (Communication) - Web Socket (구현)

웹 소켓 서버웹 소켓은 일반적인 TCP 소켓과는 다른 프로토콜로 설계되었다 . 따라서 기존 TCP 서버를 그대로 이용할 수 없고 새로 구현해야 하는데 웹 소켓 서버 사양에 맞도록 구현해야 한다.

웹 소켓 서버를 위한 다양한 오픈소스가 온라인에서 제공되고 있는데, pywebsocket , phpwebsocket, jWebSocket, web-socket-ruby, Socket.IO-node 와 같은 모듈을 이용하면 웹 소켓 서버를 쉽게 구축할 수 있다

jWebSocket (www.jwebsocket.org)

Page 141: Html5 강좌파일_v_3.0

웹 소켓을 실무 어느 부분에 활용 할 수 있는지 생각해 봅시다.

Page 142: Html5 강좌파일_v_3.0

휴 식

Page 143: Html5 강좌파일_v_3.0

1. HTML5 API (위치 정보) - Geolocation API (개요)

Geolocation API 는 HTML 5 에 새롭게 추가된 사용자의 위치정보를 얻기위한 JavaScript API 입니다.여러분들도 잘 아시겠지만 이젠 위치정보를 기반한 서비스가 우리 생활 곳곳에 퍼져있으며 많은 서비스들이 위치정보와 연동하여 사용자들에게 UX 의 편리함을 줄 것입니다.

Geolocation API 는 세개의 Method 로 이루어진 API 입니다.

그 전 먼저 알아야 할 점은 현재의 위치정보가 Network 정보로 부터 추측한 것인지 GPS 로 부터 얻은 것인지에 관한 자세한 내용은 알 수 없다는 것입니다. 단지 GPS 가 내장된 Smartphone 과 같은 Device 에서는 GPS 기능을 활용할 수있고 일반 PC 에서는 WiFi 같은 정보를 이용해서 현재 정보를 알아 낼 수 있습니다.

Geolocation 은 위치정보에 대한 정보를 GPS, WiFi IP Address, GSM/CDMA 망을 사용하는 휴대전화의 IDs 등에서 얻어옵니다. 다만 PC 에서는 한정된 정보만 제공하여 이용이 불가능한 경우가 있고 특히 Mobile Browser 에서 유용한 API 라고 할 수있습니다.

Page 144: Html5 강좌파일_v_3.0

1. HTML5 API (위치 정보) - Geolocation API (사용법)

Geolocation API 와 관련된 함수는 모두 window.navigator 객체에 정의되어 있습니다.다음 Method를 사용하여 위치정보를 얻어 올수 있습니다.

- 현재 위치를 알아 내는 함수navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);coords.latitude : 위도coords.longitude : 경도coords.altitude : 표고coords.accuracy : 위도, 경도의 오차coords.altitudeAccuracy : 표고의 오차coords.heading : 디바이스의 진행 방향 ( 북쪽 기준으로 시계방향의 각도로 표시)coords.speed : 디바이스의 미터/초 단위의 진행 속도timestamp : 위치 정보를 얻은 시각 (1970년 1월 1일부터의 ms로 표현)

- 예제http://jsfiddle.net/foresight/YYf2q/1/https://developers.google.com/maps/articles/geolocationhttp://jsfiddle.net/foresight/bwMNL/

Page 145: Html5 강좌파일_v_3.0

1. HTML5 API (위치 정보) - Geolocation API (사용법)

순수 실시간 위치 정보 시스템을 만들 수 있을까??

Gelocation 은 또 어디에 활용 할 수 있을까??

Page 146: Html5 강좌파일_v_3.0

1. HTML5 API (File) - File API (개요)

HTML5에서는 Web Application 으로 사용자 PC 의 파일을 건드릴 수 있습니다. 파일의 데이터에 대한 직접 읽기가 가능 - 읽기전용 -> 수정 / 삭제 불가

- File API Interface File interface FileReader interface

File interface 를 사용하면 File 의 File Name 이나 Size 등 기본적인 정보에 접근 할 수 있습니다.File Reader interface 는 File 의 내용을 읽을 수 있는 기능을 제공합니다 .

File interface 는 Browser 가 막 건드릴 수있는 것이 아니라 File 선택 Form 이나 Drag & Drop 을 통해서 사용자가 직접 선택한 File에 한정 된다.

Page 147: Html5 강좌파일_v_3.0

1. HTML5 API (File) - File API (사용법)

- File interface - name : 파일 이름 - type : 파일 속성(파일의 MIME타입 , ,알수없을때는 null) - size : 파일 크기 - lastModifiedDate : 파일이 마지막으로 수정된 시간 - slice(start, length) : 파일데이터의 start위치부터 length만큼의 파일 내용을 잘라 새로운 Blob객체를 만드는 함수

- 예제 http://jsfiddle.net/foresight/aSFv5/

- FileReader Interface var 변수 = new FileReader();

객체의 메서드를 사용하여 문자열로 변환하여 저장하기 이벤트 처리를 통해 변환/저장된 파일의 내용을 반환 받기

Page 148: Html5 강좌파일_v_3.0

1. HTML5 API (File) - File API (사용법)

readAsBinaryString(file) => 파일의 내용을 읽어 Binary 문자열로 저장readAsText(file,encoding) => 파일의 내용을 읽어 지정한 인코딩 방식의 문자열로 저장 (기본 : UTF-8)readAsDataURL(file) => 파일의 내용을 읽어 Data URL 형식의 문자열로 저장 참고) http://www.html5canvastutorials.com/advanced/html5-canvas-load-image-data-url/abort() => 파일 읽기 중지result => 읽어 들인 파일 내용

FileReader 객체와 관련된 이벤트 핸들러

onload => 파일 읽기에 성공하였을 경우에 호출onprogress => 파일을 읽고 있는 중에 호출onerror => 파일을 읽는 중에 오류가 발생하였을 경우에는 호출

파일 읽기 기본형태 var file=document.getElementById("file").files[0];

var reader = new FileReader(); //FileReader 객체 생성reader.readAsText(file); //파일을 UTF-8형식으로 변환하여 저장

//파일읽기에 성공하였을 경우에 대한 처리reader.onload = function(){ var view = reader.result;}

Page 149: Html5 강좌파일_v_3.0

HTML5 API (File) - File API (사용법)

- 응용예제http://jsfiddle.net/foresight/fUuyL/2/

- Drag & Drop APIhttp://jsfiddle.net/foresight/fjnqx/1/

Page 150: Html5 강좌파일_v_3.0

1. HTML5 API (Drag & Drop) - Drag & Drop API (사용법)

웹 환경에서는 지금까지 전용 API는 제공되지 않고 유사 구현을 위해 복잡한 자바스크립트 이벤트(mouse 관련 이벤트를 직접 구현함)를 다루어야 했다.

Page 151: Html5 강좌파일_v_3.0

1. HTML5 API (Drag & Drop) - Drag & Drop API (사용법)

- 드래그 대상(Source)드래그 대상은 말 그대로 끌어올 것에 해당한다.HTML 요소에 draggable 속성 값을 true로 설정하면 드래그 대상이 될 수 있다

- 드롭 대상(Target)드롭 대상은 말 그대로 끌어다 놓을 곳에 해당한다HTML 요소들의 기본 값은 드롭을 받아 들이지 않게 되어 있다따라서 드롭이 가능하도록 설정하려면 이벤트의 preventDefault() 함수로 기본 값을 취소해야 한다- 드래그 데이터(Data)드래그 데이터는 말 그대로 이동할 대상 콘텐트에 해당한다.이동할 데이터는 DataTransfer 객체를 통해 이루어 지는데드래그 대상에서 이 객체에 값을 저장하고 드롭 대상에서 이 객체의 값을 꺼내어 오는 방식이다

Page 152: Html5 강좌파일_v_3.0

1. HTML5 API (Drag & Drop) - Drag & Drop API (사용법)

Page 153: Html5 강좌파일_v_3.0

1. HTML5 API (Drag & Drop) - Drag & Drop API (사용법)

- 드롭 이벤트들드래그 앤 드롭과 관련해 총 7가지 이벤트가 존재한다이 이벤트들은 드래그 앤 드롭 과정에서 (거의) 순차적으로 발생하며 드래그,드롭 대상에서자신에게 맞는 이벤트 처리를 해 주면 된다

: dragstart 이벤트드래그 대상에서 정의해야 하는 이벤트 이다드래그가 시작될 때 발생하며 드래그 대상에서는 이 이벤트를 수신하여 이동할 데이터를 DataTransfer 객체에 채우게 된다

: dragenter 이벤트드롭 대상에서 정의해야 하는 이벤트이다이동할 데이터를 마우스로 끌어서 드롭 대상에 들어 오는 순간 발생한다

Page 154: Html5 강좌파일_v_3.0

1. HTML5 API (Drag & Drop) - Drag & Drop API (사용법)

: dragover 이벤트드롭 대상에서 정의해야 하는 이벤트이다이동할 데이터를 마우스로 끌어서 드롭 대상에 올려 놓는 동안 계속해서 발생하는 이벤트이다

: drop 이벤트드롭 대상에서 정의해야 하는 이벤트이다마우스로 끌어서 놓는 순간 발생한다. 드롭 대상에서는 이 이벤트르 수신하여 DataTransfer 객체로부터 데이터를 꺼내 오고 드롭 대상에 끼워 넣는 작업을 하게 된다

Page 155: Html5 강좌파일_v_3.0

1. HTML5 API (Drag & Drop) - Drag & Drop API (사용법)

Page 156: Html5 강좌파일_v_3.0

HTML5 API (Offline Web App) - Application Cache

application cache는 인터넷 연결 없이도 web application을 사용할 수 있다는 뜻입니다. 즉, 웹사이트 개발자가 어떤 파일은 브라우저에 캐쉬저장 시키고, 어떤파일은 항상 서버로 부터 받게끔 설정할 수 있는 것입니다.

application cache는 세가지 이점을 제공합니다.1. offline 브라우징 - 사용자들은 offline중에도 application을 사용할 수 있습니다.2. speed - 캐쉬된 리소스를 불러오는 것은 더 빠릅니다.3. 서버 부하 감소 - 브라우저는 단지 바뀐 부분만 서버로부터 받기만 하면 됩니다.

Page 157: Html5 강좌파일_v_3.0

HTML5 API (Offline Web App) - Application Cache

- 캐쉬 파일 작성하기 캐쉬를 지정하기 위해서는 캐쉬 매니페스트 (캐쉬파일명.manifest) 파일을 지정해 주어야 한다.먼저 manifest 파일은 Browser 에 의해서 Download 되는 파일이므로 웹서버에 manifest 파일에 대해서 "text/cache-manifest" 라는 MIME Type 으로 등록해 주셔야 합니다.

Page 158: Html5 강좌파일_v_3.0

HTML5 API (Offline Web App) - Application Cache

캐시 매니페스트는 크게 세종류의 섹션으로 구분된다. - CACHE 섹션 : 캐쉬할 리소스를 나열하는 영역 - NETWORK 섹션 : 캐쉬하면 안되는 리소스를 나열한 영역 - FALLBACK 섹션 : 오프라인 상태에서 필요한 자원이 캐시되지 않았을 경우 대체할 리소스를 지정

- HTML에서 캐쉬 파일 지정하기

Page 159: Html5 강좌파일_v_3.0

HTML5 API (Offline Web App) - Application Cache (API 사용)

Page 160: Html5 강좌파일_v_3.0

HTML5 API (Offline Web App) - Application Cache

- 업데이트 순서 1) 캐시 매니페스트에 기술된 캐시를 다운로드 2) 캐시된 페이지를 방문할 때 마다 캐시 매니페스트 파일을 서버로 부터 다운 받음

3) 서버로 부터 다운 받은 캐시 매니페스트 파일과 로컬에 저장된 캐시 매니페스트 파일을 비교하여 파일 내용이 바뀌었는지 확인한다.

- 주의 1) 캐시를 다운로드 받다가 하나라도 실패하면 다운로드 받은 캐시를 모두 무효화 하고 이전 캐시를 사용한다. 2) 웹 브라우저는 캐시 매니페스트 파일의 변경 여부만 가지고 캐시 업데이트를 결정하기 떄문에 캐시 매니페스트 파일을 같이 수정하여야 한다.

Page 161: Html5 강좌파일_v_3.0

HTML5 API (Offline Web App) - Application Cache (API 사용)

- Status

Page 162: Html5 강좌파일_v_3.0

HTML5 API (Offline Web App) - Application Cache (API 사용)

- Event

Page 163: Html5 강좌파일_v_3.0

HTML5 API (Offline Web App) - Application Cache (API 사용)

- Event

Page 164: Html5 강좌파일_v_3.0

HTML5 API (Offline Web App) - Application Cache (실습)

Application Cache를 어디에 활용 할지를 생각 해 봅시다.

(간단한 실습 돌려보기)

Page 165: Html5 강좌파일_v_3.0

감사합니다 수고하셨습니다.