html5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/lo15_usabilitytest_preview.pdf ·...
TRANSCRIPT
![Page 1: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/1.jpg)
HTML5 개요와 젂망
1
![Page 2: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/2.jpg)
목차
• HTML5가 주목받는 이유
• HTML5 탄생 배경
• HTML5 의 새로운 요소들
• HTML5 의 향후 홗용젂망
3
![Page 3: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/3.jpg)
HTML5가 주목받는 이유
4
![Page 4: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/4.jpg)
HTML5의 가치
• 시장의 요구 (Market Demand)
• 비용젃감의 효과
• 네이티브 앱개발 대비 생산성의 증대
5
![Page 5: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/5.jpg)
HTML5가 주목받는 이유 : 애플사례
6
![Page 6: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/6.jpg)
HTML5가 주목받는 이유 : 애플사례
• 애플의 선택
• Flash를 버리고 HTML5를 선택
• 플래시는 폐쇄된 비표준 기술
• 웹기술은 공개된 표준기술
• 웹표준 기술이 플래시 대체가능
• “표준이 아닌것에 종속되면 그 말로가 어찌 되는지 우리는 잘 알고 있다.” – 스티브 잡스
http://www.apple.com/hotnews/thoughts-on-flash/ 7
![Page 7: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/7.jpg)
HTML5가 주목받는 이유 : 구글 사례
• Google Gears 개발 중단, HTML5로 방향 젂홖
• “구글은 HTML5에 사홗을 걸었다.” - 2010 Google I/O 컨퍼런스
• “모든 플랫폼에 앱을 만들어 지원하기에는 돆이 없다.”
http://kr.engadget.com/2009/12/08/google-gears-html5/ 8
![Page 8: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/8.jpg)
HTML5 의 장점
• W3C 제정 웹표준 기술
• Canvas, Video, Audio 기능 대폭 강화
• 플래시의 역할 대체
• Web Workers, Web Storage, Geolocation 기능을 통한 애플리케이션 제작 가능
• 웹브라우저 벤더들이 빠르게 제품에 반영
9
![Page 9: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/9.jpg)
모바일 시장의 급성장
• 2011년 젂체 핸드폰 시장의 50% 돌파 예상
• 스마트폰 선택율 50% (10년 10월기준, 매월 3%씩 증가)
10
![Page 10: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/10.jpg)
App?
WM
Android
iOS Bada
Blackberry
모바일 시장에서의 요구
• 독립적 앱으로 다양한 운영체제에 대응하는 것은 고비용
• 웹으로 제작하여 컨텐츠 호홖성 담보해 낼수 있음 11
![Page 11: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/11.jpg)
국내 현재 실태
www.abc.com
m.abc.com
ipad.abc.com
honeycom.abc.com
안드로이드 App.
허니컴 App.
아이폰 App.
아이패드 App.
Feature Phone (Wap)
Omnia Site
셋톱박스
API 한번 수정하면 11번 테스트!!
12
![Page 12: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/12.jpg)
HTML5 탄생 배경
13
![Page 13: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/13.jpg)
HTML의 역사
• HTML 1.0 1993.03
• HTML 2.0 1995.11
• HTML 3.0 1996.04
• HTML 3.2 1997.01
• HTML 4.0 1997.12
• HTML 4.01 1999.12 현재의 HTML
• XHTML 1.0 2000.01 HTML + XML
• XHTML 1.1 2001.05
• XHTML 2.0 2006.07 하위 호홖 안됨
14
![Page 14: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/14.jpg)
HTML5 의 탄생
• 1999년 : W3C 는 HTML 4.01 을 끝으로 XHTML 1.0 시작
• 2000년 : XHTML 1.0 을 완료하고 XHTML 2.0 작업 착수.
• 2004년 : W3C 의 느린 표준 제정 속도와 XML 기반 기술에 편향된 정책에 반감을 가진 Opera 와 Mozilla 는 W3C 와 별도로 WHATWG(Web Hypertext Application Technology Working Group)을 발족
• 여기에 Apple이 가세하여 WHATWG 은 차세대 XML 기반이 아닌 차세대 HTML 표준 제정을 독자적으로 진행하게 된다.
• 2007년 : Apple, Mozilla, Opera 는 W3C 에 새로운 HTML 워킹그룹을 제안하게 되며 HTML 의 5번째 버젂의 의미로 HTML5로 명명되며 HTML 5번째 버젂의 스펙 작업이 진행.
15
![Page 15: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/15.jpg)
HTML5가 나오기 까지
• 2004년 WHATWG에서 시작
• W3C에서도 2007년 HTML5 채택
• HTML5 Last Call 2009
• HTML5 Last Call Finish 2011.05
• HTML5 Recommandation 2014
WHATWG 16
![Page 16: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/16.jpg)
HTML5 의 새로운 요소들
17
![Page 17: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/17.jpg)
HTML5 달라진점
• <!doctype html> 의 변화
• <script>, <style> 태그에서 type 생략
HTML4
HTML5
18
![Page 18: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/18.jpg)
새롭게 추가된 태그들
• <article>
• <aside>
• <footer>
• <header>
• <nav>
• <progress>
• <section>
• <time>
• 시맨틱 웹과 나은 문서 구조를 지향함
19
![Page 19: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/19.jpg)
새롭게 추가된 태그들
<div class="header"></div>
HTML4
<header></header>
HTML5
20
![Page 20: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/20.jpg)
HTML5 코딩
HTML4 HTML5
21
![Page 21: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/21.jpg)
HTML5 코딩
HTML4
HTML5
22
![Page 22: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/22.jpg)
새롭게 추가된 멀티미디어 요소
• <canvas>
• <video>
• <audio>
• <source>
23
![Page 23: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/23.jpg)
새로운 폼요소들
• <keygen>
• <datalist>
• <output>
• 새로운 <input> type
datetime
time
datetime-local
number
range
color
24
![Page 24: HTML5 개요와 - kosta.or.krkosta.or.kr/mail/retrain/preview/LO15_UsabilityTest_preview.pdf · 세대 html 표준 제정을 독자적으로 진행하게 된다. • 2007년 : Apple,](https://reader031.vdocuments.mx/reader031/viewer/2022011810/5e089cef4f8e552bf842ed7e/html5/thumbnails/24.jpg)
New HTML5 Javascript API
• <canvas> drawing API
• <video>, <audio> control API
• Local Storage API
• Web SQL DB API
• Indexed DB API
• Geolocation API
• Offline web apps API
• Web Socket
• Web Worker
• Drag and Drop API
• File API
25