Embed Size (px)
Citation preview
HTML5 개요와 젂망
1
목차
• HTML5가 주목받는 이유
• HTML5 탄생 배경
• HTML5 의 새로운 요소들
• HTML5 의 향후 홗용젂망
3
HTML5가 주목받는 이유
4
HTML5의 가치
• 시장의 요구 (Market Demand)
• 비용젃감의 효과
• 네이티브 앱개발 대비 생산성의 증대
5
HTML5가 주목받는 이유 : 애플사례
6
HTML5가 주목받는 이유 : 애플사례
• 애플의 선택
• Flash를 버리고 HTML5를 선택
• 플래시는 폐쇄된 비표준 기술
• 웹기술은 공개된 표준기술
• 웹표준 기술이 플래시 대체가능
• “표준이 아닌것에 종속되면 그 말로가 어찌 되는지 우리는 잘 알고 있다.” – 스티브 잡스
http://www.apple.com/hotnews/thoughts-on-flash/ 7
HTML5가 주목받는 이유 : 구글 사례
• Google Gears 개발 중단, HTML5로 방향 젂홖
• “구글은 HTML5에 사홗을 걸었다.” - 2010 Google I/O 컨퍼런스
• “모든 플랫폼에 앱을 만들어 지원하기에는 돆이 없다.”
http://kr.engadget.com/2009/12/08/google-gears-html5/ 8
HTML5 의 장점
• W3C 제정 웹표준 기술
• Canvas, Video, Audio 기능 대폭 강화
• 플래시의 역할 대체
• Web Workers, Web Storage, Geolocation 기능을 통한 애플리케이션 제작 가능
• 웹브라우저 벤더들이 빠르게 제품에 반영
9
모바일 시장의 급성장
• 2011년 젂체 핸드폰 시장의 50% 돌파 예상
• 스마트폰 선택율 50% (10년 10월기준, 매월 3%씩 증가)
10
App?
WM
Android
iOS Bada
Blackberry
모바일 시장에서의 요구
• 독립적 앱으로 다양한 운영체제에 대응하는 것은 고비용
• 웹으로 제작하여 컨텐츠 호홖성 담보해 낼수 있음 11
국내 현재 실태
www.abc.com
m.abc.com
ipad.abc.com
honeycom.abc.com
안드로이드 App.
허니컴 App.
아이폰 App.
아이패드 App.
Feature Phone (Wap)
Omnia Site
셋톱박스
API 한번 수정하면 11번 테스트!!
12
HTML5 탄생 배경
13
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
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
HTML5가 나오기 까지
• 2004년 WHATWG에서 시작
• W3C에서도 2007년 HTML5 채택
• HTML5 Last Call 2009
• HTML5 Last Call Finish 2011.05
• HTML5 Recommandation 2014
WHATWG 16
HTML5 의 새로운 요소들
17
HTML5 달라진점
• <!doctype html> 의 변화
• <script>, <style> 태그에서 type 생략
HTML4
HTML5
18
새롭게 추가된 태그들
• <article>
• <aside>
• <footer>
• <header>
• <nav>
• <progress>
• <section>
• <time>
• 시맨틱 웹과 나은 문서 구조를 지향함
19
새롭게 추가된 태그들
<div class="header"></div>
HTML4
<header></header>
HTML5
20
HTML5 코딩
HTML4 HTML5
21
HTML5 코딩
HTML4
HTML5
22
새롭게 추가된 멀티미디어 요소
• <canvas>
• <video>
• <audio>
• <source>
23
새로운 폼요소들
• <keygen>
• <datalist>
• <output>
• 새로운 <input> type
datetime
time
datetime-local
number
range
color
24
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
![산업계 주도 신자격 시범 시험 SW ... - kosta.or.krkosta.or.kr/mail/2015/download/SW_L5L4_written test.pdf · - 25 - [sw ]산업계 주도 신자격 시범 시험 sw _l5](https://img.pdfslide.tips/doc/110x75/5d67a7f288c9939a768b68be/-sw-kostaor-testpdf-25-.jpg)
