SlideShare a Scribd company logo
1 of 38
Download to read offline
HTML5
서비스플랫폼개발팀 이덕곤
Daum Communication
HTML5
A vocabulary and associated APIs for HTML and XHTML
!
HTML의 새로운 표준안 - 8가지 클래스의 새로운 기능 구현
XHTML같은 정확성과 HTML의 특성 인 ‘유연성’을 동시에 지원
HTML5?
멀티미디어
더이상 플래시에 의존할 필요가 없다
MP4등의 동영상 바로 첨부 가능
http://commons.wikimedia.org/wiki/Category:HTML5_Technology_Classes_icons
그래픽
2차원 : SVG 백터, 자바스크립트 캔버스 래스터
3차원 : CSS3, 자바스크립트 WebGL
통신
폴링으로 서버에 부담을 주지 않는다
웹 소켓을 사용한 실시간 양방향 통신 가능
장치 접근
네이티브앱이 아니어도 GPS에 접근 가능!
오프라인 및 저장소
Web SQL & Client-side Storage
시맨틱 태그
div div div… 의미론적인 웹
header, nav, aside, section, article, footer
성능 및 통합
웹 워커를 사용하면 화면 멈추는일 없이 연산 처리 가능
CSS3 완벽지원
3차원 효과는 물론 애니메이션 적용 가능
역사
WHATWG
웹 하이퍼텍스트(문서) 애플리케이션 테크놀로지 워킹 그룹
(Web Hypertext Application Technology Working Group, WHATWG)
http://www.whatwg.org/
익스플로러의 독점 액티브엑스 플러그인으로 점점 무거워지는 사이트
모질라재단과 오페라 소프트에서 새로운 표준안 제출
하지만 이 제안은 “웹의 혁명을 위한 기존 지향점에 위배된다”는 이유로 거절
!
그래서 탄생했습니다. 모두 합해 점유율 2%의 회사 셋이 모여…
Web App 1.0 & HTML5
• Web Application 1.0 (WHATWG)
• 웹기반 어플리케이션 개발을 위해 필요한 스펙들에 대한 검토/연구 진행하여 표준안 제시
• HTML5 (W3C)
• 웹컨텐츠을 구현하는 HTML에 대한 표준안 정립
• 독자적인 스펙개발 또는 WHATWG에서 제시한 스펙과 API 연구를 검토하여

HTML 표준안으로 병합
• WHATWG vs HTML(W3C)
• 각자 독립된 기구이나 서로의 연구 개발내용 검토를 통해 표준스펙을 제안
• W3C는 이러한 표준안을 HTML5 스펙으로 정의하여 단계별 공표
이쯤에서 보는 브라우저 역사
http://millky.com/home/byuri/10000566
HTML5 - Syntax
• DTD (DocumentTypeDefinition)
• <!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 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
➜ <!DOCTYPE html> (대소문자 구별 없음)
!
• CharacterEncoding
• <meta http-equiv=“Content-Type” content=“text/html”; charset=UTF-8>
• ➜ <meta charset=“UTF-8”>
새로운 TAG
TAG DESCRIPTION
<section> 일반적인 문서 및 Application 영역 표시
<article> 뉴스기사 / 글단락 같은 독립적 컨텐츠 단위 표시
<aside> 문서 주요부분 외의 기타 컨텐츠 표시
<hgroup> 영역별 머릿말 영역 (<h1~6>태그 조합 사용)
<header> 문서 내 소개 및 주요 Navigation을 묶거나 <artcle> 머릿말 사용
<footer> 문서 내 꼬리말 부분(저자, 저작권)을 묶거나 <article>내에서 사용
<nav> 문서 내 내비게이션 요소 표시
<mark> 주목해야할 문구 전달
<meter> 특정 범위에 속하는 숫자값을 전달 (월급, 득표율, 점수 등)
<time> 시간정보 전달
<audio>,<video> 오디오 및 비디오 컨텐트 정의
<source> <video>와 <audio>를 위한 여러개의 미디어 리소스 정의
<canvas> 스크립트(대게 자바스크립트)를 통해서 그림을 그리는데 사용
<acronym> <applet> <basefont> <big> <center> <dir>
<font> <frame> <frameset> <noframes> <strike> <tt>삭제된 TAG
<얖> (<div>)
New Elements
(Document Structure)
밀키는요?
<section>
<header>
<nav>
<article>
<header>
<aside>
<footer>
<div>
.
.
.
.
.
<div>
멀티미디어 첨부
<audio controls="controls">
<source src="http://test.mp3" type="audio/mp3"/>
<source src="http://test.ogg" type="audio/ogg"/>
</audio>
!
<video controls="controls">
<source src="http://test.mp4" type="video/mp3">
<source src="http://test.webm" type="video/webm">
</video>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" id="movie_name" align="middle">
<param name="movie" value="movie_name.swf"/>
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="movie_name.swf" width="550" height="400">
<param name="movie" value="movie_name.swf"/>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
오디오와 비디오 지원
익스플로러 크롬  파이어폭스 사파리 오페라 
MP3 O O X O X
OGG X O O O O
WAV X O O X O
http://kurien.tistory.com/74
익스플로러 크롬  파이어폭스 사파리 오페라 
MP4
(H.264+ACC)
O O X O X
WEBM
(VP8+VORBIS)
X O O X O
OGV
(THEORA+VORBIS)
X O O X O
MP3 라이선스
http://www.mp3licensing.com/royalty/games.html
MP3 포맷의 권리는 상업적인 용도에 사용될 경우 무료가 아님
MP3는 현재 독일의 호퍼연구소가 독점적 권리를 소유
5000카피 이상 퍼지면? $2500! 다행히 2017년 전부 만료예정
오프라인 저장소
• Web Storage
• localStorage (sessionStorage)
• Cookie
!
• Web SQL Database
• Google gears
!
• Indexed Database
Web Storage
• 대부분의 브라우저에서 지원
• 사용하기 쉽다
• 유효기간이 없다
• 용량이 크다
• 오직 client을 위한 Storage
• 브라우저간 공유
• 문자만 저장, 객체는 toString
• Internet Explorer 8
• Firefox 3.5
• Safari 4
• Google Chrome 4
• Opera 10.50
• iOS 2.0
• Android 2.0
Web Storage
function clickCounter() {	
	 if (typeof (Storage) !== "undefined") {	
	 	 if (localStorage.clickcount) {	
	 	 	 localStorage.clickcount = Number(localStorage.clickcount) + 1;	
	 	 } else {	
	 	 	 localStorage.clickcount = 1;	
	 	 }	
	 	 alert("버튼 클릭 횟수 "	+ localStorage.clickcount + " 번");	
	 } else {	
	 	 alert("Web Storage is not supported by this browser.");	
	 }	
}
function clickCounter_session() {	
	 if (sessionStorage.clickcount) {	
	 	 sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;	
	 } else {	
	 	 sessionStorage.clickcount = 1;	
	 }	
	 alert("버튼 클릭 횟수 "	+ sessionStorage.clickcount + " 번 (이번 세션에만)";	
}
Web SQL Database
• SQLLite가 임베디드
• SQLLite의 문법을 그대로 사용
• 도메인당 5mb를 제공
• 단순한 API, 간단한 callback
• SQLLite는 표준이 아님
• 다른 디바이스 지원 문제
• 2009년 12월 버전 이후로는 스펙의 책정이 중지
• SQL의 사양에 대해 브라우저 개발사간의 동의를 얻지못한 것이 주원인
• Safari 4.0
• Chrome 4.0
• Opera 10.50
• iOS 3.0
• Android 2.0
Indexed Database API
• Web SQL Database 단점을 해결하기 위해 표준화
• database open, object store 생성
• 객체의 저장과 삭제
• index 작성 및 이용
• 효율적인 검색 및 커서 조작
• 결국 고가용성 환경이 아닌, 모바일 환경에서의 가벼운 로컬DB 컨셉
• 관계형DB보다는 같은 객체기반의 비관계형 DB가 더 어울림
http://www.html5rocks.com/en/tutorials/webdatabase/todo
커뮤니티 반응
http://www.w3.org/TR/IndexedDB/
Application Cache
• HTML, JS, CSS 등의 문서파일들과 이미지 파일들을 캐쉬
• 오프라인상일때도 사용 가능!!
!
• offline 브라우징
• 사용자들은 offline중에도 application을 사용할 수 있음
• speed
• 캐쉬된 리소스를 불러오는 것은 더 빠름
• 서버 부하 감소
• 브라우저는 단지 바뀐 부분만 서버로부터 받음
App Cache의 사용
cache.manifest 파일
!
CACHE MANIFEST
# 이렇게 샾으로 시작되는 줄은 주석이다.
# 캐쉬될 파일들을 지정하는 곳 CACHE:는 생략가능
CACHE:
imgs/a.png
imgs/b.png
imgs/c.png
# 언제나 네트웍을 통해 받아와야만 하는 파일 리스트
NETWORK:
search.json
news.json
# 네트웍에서 파일을 받아올 수 없을 때 보여줄 파일
FALLBACK:
search.json no-network.json
img/main_image.png img/backup_image.png
HTML 설정
!
<html manifest="cache.manifest">
<head>
…
cache.manifest 파일은
HTTP Header의 Content-type이
text/cache-manifest
manifest 파일에 지정되지 않은 파일들은
두번째 접속 때부턴 무조건 받아오지 못함
!
캐쉬되지 않았으면 좋겠는 파일이 있다면
manifest의 NETWORK: 항목에 추가해야함
위치 첨부
function getLocation_cord() {	
	 if (navigator.geolocation) {	
	 	 navigator.geolocation.getCurrentPosition(showPosition);	
	 } else {	
	 	 alert("Geolocation is not supported by this browser.");	
	 }	
}	
function showPosition(position) {	
	 alert("위도:" + position.coords.latitude		
	 	 	 + "; 경도:" + position.coords.longitude);	
}
Geolocation은 사용자의 지리학적 위치를 알아낼 수 있음
특정 네트워크에서는 표시되지 않을 수 있음
해당 기능은 유저의 허용이 있어야만 사용할 수 있는 기능임
밀키는요?
다음 지도 API
<script type=“text/javascript"	
	 	 src=“http://apis.daum.net/maps/maps3.js?apikey=KEY"	
	 	 charset="utf-8"></script>
var latitude = position.coords.latitude;	
var longitude = position.coords.longitude;	
!
map = new daum.maps.Map(document.getElementById('map'), {	
	 center : new daum.maps.LatLng(latitude, longitude)	
});	
var marker = new daum.maps.Marker({	
	 position : new daum.maps.LatLng(latitude, longitude)	
});	
marker.setMap(map);
http://dna.daum.net/apis/maps
데이터형 API - 로컬 API
$.ajax({	
	 url : "http://apis.daum.net/local/geo/coord2addr?apikey=KEY"	
	 	 	 "&longitude=" + longitude + "&latitude=" + latitude +
	 	 	 "&output=json&callback=callback",	
	 dataType : "jsonp",	
	 jsonp : "callback",	
	 success : function(d)	
	 {	
	 	 alert(d.fullName);	
	 }	
});
http://dna.daum.net/apis/local/ref#coord2addr
Device APIs Working Group (DAP WG)
• Geolocation 외에도 브라우저에서 하드웨어를 제어 하려는 시도
• 웹 애플리케이션이 디바이스 자원 접근 API를 정의하고 있음
• 주소록, 일정, 카메라 제어, 배터리 정보, 갤러리, 파일 시스템 등
• 예 : 카메라
• http://dev.w3.org/2009/dap/camera/
• <input type="file" accept="image/*;capture=camera">
W3C의 표준화 단계
• WD -> LC -> CR -> PR -> Rec
• WD: Working Draft
• LC: Last Call
• CR: Candidate Recomendation
• Rec: Recomendation
http://www.w3.org/2009/dap/
Canvas SVG
둘다 웹페이지에서 그림을 그리기 위한 도구이지만 근본적으로 다르다
CANVAS  SVG 
• JavaScript를 이용하여 2D & 3D 구현

• 해상도 의존적(픽셀단위, 비트맵)

• Event Handler를 지원하지 않음

• 좋지않은 텍스트 렌더링

• 결과를 png나 jpg로 저장 가능

• 한번 그림이 그려지게 되면 끝

• 위치가 바뀌면 새로 그림

• 많은 객체가 자주 다시 그려져야 함으로
그래픽 집약적 게임에 적합
• XML로 2D그래픽을 설졍하기 위한 언어

• 해상도에 독립적(벡터)

• Event Handler 지원

• 거대한 렌더링이 필요한 어플리케이션에
적합(Google Maps)

• 복잡해질 경우 렌더링 속도가 느림

• 각각 그려진 모양이 객체에 기억

• 객체의 속성이 바뀌면 새로 그림

• 게임 어플리케이션으로 부적합
CSS3 3D
CSS3 Animation
animation-name: spinningH; /* @ keyframes 애니메이션의 이름을 지정한다. */
animation-timing-function:ease-in-out; /* 애니메이션이 사이클 동안 어떻게 진행되는가를 설명한다. 디폴트는 "ease" */
animation-duration:6s; /* Default 0 애니메이션 한 사이클을 완료하는데 걸리는 초 또는 밀리 초를 지정한다 */
animation-iteration-count:infinite; /* 애니메이션이 재생되는 횟수를 지정한다. */
animation-direction:linear; /* 애니메이션을 역방향으로 재생해야 할지 여부를 지정한다. */
animation-delay:0; /* 애니메이션 시작 될 때 지연 시간을 지정한다. 디폴트는 0 */
animation-play-state:running; /* 애니메이션을 실행하거나 일시 정지 여부를 지정 디폴트는 "running */
@keyframes spinningH {	
from {	
transform: rotateX(0deg) rotateY(0deg);	
}	
to{	
transform: rotateX(360deg) rotateY(360deg);	
}	
}	
!
animation : spinningH 6s infinite linear;
Web Worker
• Javascript코드를 background에서 실행시키기 위한 기술
• Background에서 실행되는 코드를 ‘Worker’라고 불린다
!
• UI(DOM)과는 완전히 분리된 환경에서 동작
• UI Thread와 완전히 별도의 Thread가 생성되어 동작
!
• 사용 예
• 매우 복잡한 수학적 계산 작업
• 원격지에 있는 리소스에 대한 액세스 작업
• 백그라운드에서 조용히(?) 오랜시간 작업해야 하는 경우
• UI 쓰레드에 방해 없이 지속적으로 수행해야 하는 작업 등
http://www.slideshare.net/jidolstar/html5-web-worker
Web Socket
http://www.slideshare.net/arungupta1/getting-started-with-websocket-and-serversent-events-in-java
http://m.mkexdev.net/98
• HTML5 ‘표준’
• 브라우저 · 서버 모두 간결
• 프록시 지원 기대
• 커넥션 기반
• 양방향 풀 듀플렉스
• TCP/IP 소켓을 직접 다루듯
HTML5 로드맵
• HTML5 Recommendation in Q4, 2014
• HTML5.1 Recommendation in Q4, 2016
• http://dev.w3.org/html5/decision-policy/html5-2014-
plan.html
HTML 5.1
HTML 5.1은 도대체 뭔가요?
http://blog.creation.net/533
감사합니다
참고문서 및 사이트
http://www.w3.org/TR/html5/
http://www.w3schools.com/html/html5_intro.asp
http://channy.creation.net/lecture/html5
http://dna.daum.net/apis/dashboard
https://code.google.com/p/frontend-tech-class/
http://devsw.tistory.com/101
http://www.slideshare.net/mixed/client-side-storage-in-html5-13260032
모던 웹 디자인을 위한 HTML5 + CSS3 입문 / 윤인성 / 한빛미디어

More Related Content

What's hot

Leadweb Nodejs
Leadweb NodejsLeadweb Nodejs
Leadweb Nodejs근호 최
 
자바 웹 개발 시작하기 (5주차 : 스프링 프래임워크)
자바 웹 개발 시작하기 (5주차 : 스프링 프래임워크)자바 웹 개발 시작하기 (5주차 : 스프링 프래임워크)
자바 웹 개발 시작하기 (5주차 : 스프링 프래임워크)DK Lee
 
Nodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjsNodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjs기동 이
 
자바 웹 개발 시작하기 (8주차 : 명세서, 단위테스트, 통합)
자바 웹 개발 시작하기 (8주차 : 명세서, 단위테스트, 통합)자바 웹 개발 시작하기 (8주차 : 명세서, 단위테스트, 통합)
자바 웹 개발 시작하기 (8주차 : 명세서, 단위테스트, 통합)DK Lee
 
Node.js를 사용한 Big Data 사례연구
Node.js를 사용한 Big Data 사례연구Node.js를 사용한 Big Data 사례연구
Node.js를 사용한 Big Data 사례연구ByungJoon Lee
 
진짜기초 Node.js
진짜기초 Node.js진짜기초 Node.js
진짜기초 Node.jsWoo Jin Kim
 
overview of spring4
overview of spring4overview of spring4
overview of spring4Arawn Park
 
Nodejs 발표자료
Nodejs 발표자료Nodejs 발표자료
Nodejs 발표자료shanka2
 
Node.js
Node.jsNode.js
Node.jsymtech
 
파크히어 Realm 사용 사례
파크히어 Realm 사용 사례파크히어 Realm 사용 사례
파크히어 Realm 사용 사례선협 이
 
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기XpressEngine
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Kim Hunmin
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나JeongHun Byeon
 
Gradle & IntelliJ & Vert.x
Gradle & IntelliJ & Vert.xGradle & IntelliJ & Vert.x
Gradle & IntelliJ & Vert.xKwnaghwan Cho
 
Node.js DBMS short summary
Node.js DBMS short summaryNode.js DBMS short summary
Node.js DBMS short summaryHoChul Shin
 
세션3 node.js의 의미와 자바의 대안
세션3 node.js의 의미와 자바의 대안세션3 node.js의 의미와 자바의 대안
세션3 node.js의 의미와 자바의 대안Lee Ji Eun
 
Spring boot-summary(part2-part3)
Spring boot-summary(part2-part3)Spring boot-summary(part2-part3)
Spring boot-summary(part2-part3)Jaesup Kwak
 
Startup JavaScript 7 - Node.JS 기초
Startup JavaScript 7 - Node.JS 기초Startup JavaScript 7 - Node.JS 기초
Startup JavaScript 7 - Node.JS 기초Circulus
 
Meteor 0.3.6 Preview
Meteor 0.3.6 PreviewMeteor 0.3.6 Preview
Meteor 0.3.6 PreviewJuntai Park
 
Vert.x 세미나 이지원_배포용
Vert.x 세미나 이지원_배포용Vert.x 세미나 이지원_배포용
Vert.x 세미나 이지원_배포용지원 이
 

What's hot (20)

Leadweb Nodejs
Leadweb NodejsLeadweb Nodejs
Leadweb Nodejs
 
자바 웹 개발 시작하기 (5주차 : 스프링 프래임워크)
자바 웹 개발 시작하기 (5주차 : 스프링 프래임워크)자바 웹 개발 시작하기 (5주차 : 스프링 프래임워크)
자바 웹 개발 시작하기 (5주차 : 스프링 프래임워크)
 
Nodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjsNodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjs
 
자바 웹 개발 시작하기 (8주차 : 명세서, 단위테스트, 통합)
자바 웹 개발 시작하기 (8주차 : 명세서, 단위테스트, 통합)자바 웹 개발 시작하기 (8주차 : 명세서, 단위테스트, 통합)
자바 웹 개발 시작하기 (8주차 : 명세서, 단위테스트, 통합)
 
Node.js를 사용한 Big Data 사례연구
Node.js를 사용한 Big Data 사례연구Node.js를 사용한 Big Data 사례연구
Node.js를 사용한 Big Data 사례연구
 
진짜기초 Node.js
진짜기초 Node.js진짜기초 Node.js
진짜기초 Node.js
 
overview of spring4
overview of spring4overview of spring4
overview of spring4
 
Nodejs 발표자료
Nodejs 발표자료Nodejs 발표자료
Nodejs 발표자료
 
Node.js
Node.jsNode.js
Node.js
 
파크히어 Realm 사용 사례
파크히어 Realm 사용 사례파크히어 Realm 사용 사례
파크히어 Realm 사용 사례
 
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나
 
Gradle & IntelliJ & Vert.x
Gradle & IntelliJ & Vert.xGradle & IntelliJ & Vert.x
Gradle & IntelliJ & Vert.x
 
Node.js DBMS short summary
Node.js DBMS short summaryNode.js DBMS short summary
Node.js DBMS short summary
 
세션3 node.js의 의미와 자바의 대안
세션3 node.js의 의미와 자바의 대안세션3 node.js의 의미와 자바의 대안
세션3 node.js의 의미와 자바의 대안
 
Spring boot-summary(part2-part3)
Spring boot-summary(part2-part3)Spring boot-summary(part2-part3)
Spring boot-summary(part2-part3)
 
Startup JavaScript 7 - Node.JS 기초
Startup JavaScript 7 - Node.JS 기초Startup JavaScript 7 - Node.JS 기초
Startup JavaScript 7 - Node.JS 기초
 
Meteor 0.3.6 Preview
Meteor 0.3.6 PreviewMeteor 0.3.6 Preview
Meteor 0.3.6 Preview
 
Vert.x 세미나 이지원_배포용
Vert.x 세미나 이지원_배포용Vert.x 세미나 이지원_배포용
Vert.x 세미나 이지원_배포용
 

Viewers also liked

자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)

자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)
자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)

자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)
DK Lee
 
자바 웹 개발 시작하기 : 계획
자바 웹 개발 시작하기 : 계획자바 웹 개발 시작하기 : 계획
자바 웹 개발 시작하기 : 계획DK Lee
 
자바 웹 개발 시작하기 (1주차 : 웹 어플리케이션 체험 실습)
자바 웹 개발 시작하기 (1주차 : 웹 어플리케이션 체험 실습)자바 웹 개발 시작하기 (1주차 : 웹 어플리케이션 체험 실습)
자바 웹 개발 시작하기 (1주차 : 웹 어플리케이션 체험 실습)DK Lee
 
8주 dom & event basic
8주  dom & event basic8주  dom & event basic
8주 dom & event basic지수 윤
 
7주 JavaScript Part2
7주 JavaScript Part27주 JavaScript Part2
7주 JavaScript Part2지수 윤
 
4주 CSS Layout
4주 CSS Layout4주 CSS Layout
4주 CSS Layout지수 윤
 
Starpl 20111012 스타플5를_만들기_시작하며
Starpl 20111012 스타플5를_만들기_시작하며Starpl 20111012 스타플5를_만들기_시작하며
Starpl 20111012 스타플5를_만들기_시작하며DK Lee
 

Viewers also liked (7)

자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)

자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)
자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)

자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)

 
자바 웹 개발 시작하기 : 계획
자바 웹 개발 시작하기 : 계획자바 웹 개발 시작하기 : 계획
자바 웹 개발 시작하기 : 계획
 
자바 웹 개발 시작하기 (1주차 : 웹 어플리케이션 체험 실습)
자바 웹 개발 시작하기 (1주차 : 웹 어플리케이션 체험 실습)자바 웹 개발 시작하기 (1주차 : 웹 어플리케이션 체험 실습)
자바 웹 개발 시작하기 (1주차 : 웹 어플리케이션 체험 실습)
 
8주 dom & event basic
8주  dom & event basic8주  dom & event basic
8주 dom & event basic
 
7주 JavaScript Part2
7주 JavaScript Part27주 JavaScript Part2
7주 JavaScript Part2
 
4주 CSS Layout
4주 CSS Layout4주 CSS Layout
4주 CSS Layout
 
Starpl 20111012 스타플5를_만들기_시작하며
Starpl 20111012 스타플5를_만들기_시작하며Starpl 20111012 스타플5를_만들기_시작하며
Starpl 20111012 스타플5를_만들기_시작하며
 

Similar to 20131217 html5

Html5 소개 가이드
Html5 소개 가이드Html5 소개 가이드
Html5 소개 가이드Jong-hyun Park
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기현철 조
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
 
JMI Techtalk : Backend.AI
JMI Techtalk : Backend.AIJMI Techtalk : Backend.AI
JMI Techtalk : Backend.AILablup Inc.
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Sang Seok Lim
 
Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.효근 박
 
NODE.JS 글로벌 기업 적용 사례 그리고, real-time 어플리케이션 개발하기
NODE.JS 글로벌 기업 적용 사례  그리고, real-time 어플리케이션 개발하기NODE.JS 글로벌 기업 적용 사례  그리고, real-time 어플리케이션 개발하기
NODE.JS 글로벌 기업 적용 사례 그리고, real-time 어플리케이션 개발하기John Kim
 
코드로 바로 해버리는 서버리스 오케스트레이션 - Azure Durable Functions
코드로 바로 해버리는 서버리스 오케스트레이션 - Azure Durable Functions코드로 바로 해버리는 서버리스 오케스트레이션 - Azure Durable Functions
코드로 바로 해버리는 서버리스 오케스트레이션 - Azure Durable FunctionsJongin Lee
 
자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기Jeado Ko
 
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)LanarkSeung
 
Tensorflow service & Machine Learning
Tensorflow service & Machine LearningTensorflow service & Machine Learning
Tensorflow service & Machine LearningJEEHYUN PAIK
 
vert.x 를 활용한 분산서버 개발하기
vert.x 를 활용한 분산서버 개발하기vert.x 를 활용한 분산서버 개발하기
vert.x 를 활용한 분산서버 개발하기John Kim
 

Similar to 20131217 html5 (20)

What's new in IE11
What's new in IE11What's new in IE11
What's new in IE11
 
Html5 소개 가이드
Html5 소개 가이드Html5 소개 가이드
Html5 소개 가이드
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
 
Nexacro
NexacroNexacro
Nexacro
 
Html5
Html5 Html5
Html5
 
Pp3 devweb
Pp3 devwebPp3 devweb
Pp3 devweb
 
JMI Techtalk : Backend.AI
JMI Techtalk : Backend.AIJMI Techtalk : Backend.AI
JMI Techtalk : Backend.AI
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
 
Html5 performance
Html5 performanceHtml5 performance
Html5 performance
 
4-3. jquery
4-3. jquery4-3. jquery
4-3. jquery
 
Node.js 첫걸음
Node.js 첫걸음Node.js 첫걸음
Node.js 첫걸음
 
Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.
 
NODE.JS 글로벌 기업 적용 사례 그리고, real-time 어플리케이션 개발하기
NODE.JS 글로벌 기업 적용 사례  그리고, real-time 어플리케이션 개발하기NODE.JS 글로벌 기업 적용 사례  그리고, real-time 어플리케이션 개발하기
NODE.JS 글로벌 기업 적용 사례 그리고, real-time 어플리케이션 개발하기
 
Html5 ie9
Html5 ie9Html5 ie9
Html5 ie9
 
코드로 바로 해버리는 서버리스 오케스트레이션 - Azure Durable Functions
코드로 바로 해버리는 서버리스 오케스트레이션 - Azure Durable Functions코드로 바로 해버리는 서버리스 오케스트레이션 - Azure Durable Functions
코드로 바로 해버리는 서버리스 오케스트레이션 - Azure Durable Functions
 
자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기
 
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
 
Tensorflow service & Machine Learning
Tensorflow service & Machine LearningTensorflow service & Machine Learning
Tensorflow service & Machine Learning
 
vert.x 를 활용한 분산서버 개발하기
vert.x 를 활용한 분산서버 개발하기vert.x 를 활용한 분산서버 개발하기
vert.x 를 활용한 분산서버 개발하기
 

20131217 html5

  • 2. HTML5 A vocabulary and associated APIs for HTML and XHTML ! HTML의 새로운 표준안 - 8가지 클래스의 새로운 기능 구현 XHTML같은 정확성과 HTML의 특성 인 ‘유연성’을 동시에 지원
  • 4. 멀티미디어 더이상 플래시에 의존할 필요가 없다 MP4등의 동영상 바로 첨부 가능 http://commons.wikimedia.org/wiki/Category:HTML5_Technology_Classes_icons 그래픽 2차원 : SVG 백터, 자바스크립트 캔버스 래스터 3차원 : CSS3, 자바스크립트 WebGL 통신 폴링으로 서버에 부담을 주지 않는다 웹 소켓을 사용한 실시간 양방향 통신 가능 장치 접근 네이티브앱이 아니어도 GPS에 접근 가능! 오프라인 및 저장소 Web SQL & Client-side Storage 시맨틱 태그 div div div… 의미론적인 웹 header, nav, aside, section, article, footer 성능 및 통합 웹 워커를 사용하면 화면 멈추는일 없이 연산 처리 가능 CSS3 완벽지원 3차원 효과는 물론 애니메이션 적용 가능
  • 6. WHATWG 웹 하이퍼텍스트(문서) 애플리케이션 테크놀로지 워킹 그룹 (Web Hypertext Application Technology Working Group, WHATWG) http://www.whatwg.org/ 익스플로러의 독점 액티브엑스 플러그인으로 점점 무거워지는 사이트 모질라재단과 오페라 소프트에서 새로운 표준안 제출 하지만 이 제안은 “웹의 혁명을 위한 기존 지향점에 위배된다”는 이유로 거절 ! 그래서 탄생했습니다. 모두 합해 점유율 2%의 회사 셋이 모여…
  • 7. Web App 1.0 & HTML5 • Web Application 1.0 (WHATWG) • 웹기반 어플리케이션 개발을 위해 필요한 스펙들에 대한 검토/연구 진행하여 표준안 제시 • HTML5 (W3C) • 웹컨텐츠을 구현하는 HTML에 대한 표준안 정립 • 독자적인 스펙개발 또는 WHATWG에서 제시한 스펙과 API 연구를 검토하여
 HTML 표준안으로 병합 • WHATWG vs HTML(W3C) • 각자 독립된 기구이나 서로의 연구 개발내용 검토를 통해 표준스펙을 제안 • W3C는 이러한 표준안을 HTML5 스펙으로 정의하여 단계별 공표
  • 8. 이쯤에서 보는 브라우저 역사 http://millky.com/home/byuri/10000566
  • 9. HTML5 - Syntax • DTD (DocumentTypeDefinition) • <!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 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ➜ <!DOCTYPE html> (대소문자 구별 없음) ! • CharacterEncoding • <meta http-equiv=“Content-Type” content=“text/html”; charset=UTF-8> • ➜ <meta charset=“UTF-8”>
  • 10. 새로운 TAG TAG DESCRIPTION <section> 일반적인 문서 및 Application 영역 표시 <article> 뉴스기사 / 글단락 같은 독립적 컨텐츠 단위 표시 <aside> 문서 주요부분 외의 기타 컨텐츠 표시 <hgroup> 영역별 머릿말 영역 (<h1~6>태그 조합 사용) <header> 문서 내 소개 및 주요 Navigation을 묶거나 <artcle> 머릿말 사용 <footer> 문서 내 꼬리말 부분(저자, 저작권)을 묶거나 <article>내에서 사용 <nav> 문서 내 내비게이션 요소 표시 <mark> 주목해야할 문구 전달 <meter> 특정 범위에 속하는 숫자값을 전달 (월급, 득표율, 점수 등) <time> 시간정보 전달 <audio>,<video> 오디오 및 비디오 컨텐트 정의 <source> <video>와 <audio>를 위한 여러개의 미디어 리소스 정의 <canvas> 스크립트(대게 자바스크립트)를 통해서 그림을 그리는데 사용 <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt>삭제된 TAG
  • 14. 멀티미디어 첨부 <audio controls="controls"> <source src="http://test.mp3" type="audio/mp3"/> <source src="http://test.ogg" type="audio/ogg"/> </audio> ! <video controls="controls"> <source src="http://test.mp4" type="video/mp3"> <source src="http://test.webm" type="video/webm"> </video> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" id="movie_name" align="middle"> <param name="movie" value="movie_name.swf"/> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="movie_name.swf" width="550" height="400"> <param name="movie" value="movie_name.swf"/> <!--<![endif]--> <a href="http://www.adobe.com/go/getflash"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/> </a> <!--[if !IE]>--> </object> <!--<![endif]--> </object>
  • 15. 오디오와 비디오 지원 익스플로러 크롬  파이어폭스 사파리 오페라  MP3 O O X O X OGG X O O O O WAV X O O X O http://kurien.tistory.com/74 익스플로러 크롬  파이어폭스 사파리 오페라  MP4 (H.264+ACC) O O X O X WEBM (VP8+VORBIS) X O O X O OGV (THEORA+VORBIS) X O O X O
  • 16. MP3 라이선스 http://www.mp3licensing.com/royalty/games.html MP3 포맷의 권리는 상업적인 용도에 사용될 경우 무료가 아님 MP3는 현재 독일의 호퍼연구소가 독점적 권리를 소유 5000카피 이상 퍼지면? $2500! 다행히 2017년 전부 만료예정
  • 17. 오프라인 저장소 • Web Storage • localStorage (sessionStorage) • Cookie ! • Web SQL Database • Google gears ! • Indexed Database
  • 18. Web Storage • 대부분의 브라우저에서 지원 • 사용하기 쉽다 • 유효기간이 없다 • 용량이 크다 • 오직 client을 위한 Storage • 브라우저간 공유 • 문자만 저장, 객체는 toString • Internet Explorer 8 • Firefox 3.5 • Safari 4 • Google Chrome 4 • Opera 10.50 • iOS 2.0 • Android 2.0
  • 19. Web Storage function clickCounter() { if (typeof (Storage) !== "undefined") { if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount) + 1; } else { localStorage.clickcount = 1; } alert("버튼 클릭 횟수 " + localStorage.clickcount + " 번"); } else { alert("Web Storage is not supported by this browser."); } } function clickCounter_session() { if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; } else { sessionStorage.clickcount = 1; } alert("버튼 클릭 횟수 " + sessionStorage.clickcount + " 번 (이번 세션에만)"; }
  • 20. Web SQL Database • SQLLite가 임베디드 • SQLLite의 문법을 그대로 사용 • 도메인당 5mb를 제공 • 단순한 API, 간단한 callback • SQLLite는 표준이 아님 • 다른 디바이스 지원 문제 • 2009년 12월 버전 이후로는 스펙의 책정이 중지 • SQL의 사양에 대해 브라우저 개발사간의 동의를 얻지못한 것이 주원인 • Safari 4.0 • Chrome 4.0 • Opera 10.50 • iOS 3.0 • Android 2.0
  • 21. Indexed Database API • Web SQL Database 단점을 해결하기 위해 표준화 • database open, object store 생성 • 객체의 저장과 삭제 • index 작성 및 이용 • 효율적인 검색 및 커서 조작 • 결국 고가용성 환경이 아닌, 모바일 환경에서의 가벼운 로컬DB 컨셉 • 관계형DB보다는 같은 객체기반의 비관계형 DB가 더 어울림 http://www.html5rocks.com/en/tutorials/webdatabase/todo
  • 23. Application Cache • HTML, JS, CSS 등의 문서파일들과 이미지 파일들을 캐쉬 • 오프라인상일때도 사용 가능!! ! • offline 브라우징 • 사용자들은 offline중에도 application을 사용할 수 있음 • speed • 캐쉬된 리소스를 불러오는 것은 더 빠름 • 서버 부하 감소 • 브라우저는 단지 바뀐 부분만 서버로부터 받음
  • 24. App Cache의 사용 cache.manifest 파일 ! CACHE MANIFEST # 이렇게 샾으로 시작되는 줄은 주석이다. # 캐쉬될 파일들을 지정하는 곳 CACHE:는 생략가능 CACHE: imgs/a.png imgs/b.png imgs/c.png # 언제나 네트웍을 통해 받아와야만 하는 파일 리스트 NETWORK: search.json news.json # 네트웍에서 파일을 받아올 수 없을 때 보여줄 파일 FALLBACK: search.json no-network.json img/main_image.png img/backup_image.png HTML 설정 ! <html manifest="cache.manifest"> <head> … cache.manifest 파일은 HTTP Header의 Content-type이 text/cache-manifest manifest 파일에 지정되지 않은 파일들은 두번째 접속 때부턴 무조건 받아오지 못함 ! 캐쉬되지 않았으면 좋겠는 파일이 있다면 manifest의 NETWORK: 항목에 추가해야함
  • 25. 위치 첨부 function getLocation_cord() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { alert("Geolocation is not supported by this browser."); } } function showPosition(position) { alert("위도:" + position.coords.latitude + "; 경도:" + position.coords.longitude); } Geolocation은 사용자의 지리학적 위치를 알아낼 수 있음 특정 네트워크에서는 표시되지 않을 수 있음 해당 기능은 유저의 허용이 있어야만 사용할 수 있는 기능임
  • 27. 다음 지도 API <script type=“text/javascript" src=“http://apis.daum.net/maps/maps3.js?apikey=KEY" charset="utf-8"></script> var latitude = position.coords.latitude; var longitude = position.coords.longitude; ! map = new daum.maps.Map(document.getElementById('map'), { center : new daum.maps.LatLng(latitude, longitude) }); var marker = new daum.maps.Marker({ position : new daum.maps.LatLng(latitude, longitude) }); marker.setMap(map); http://dna.daum.net/apis/maps
  • 28. 데이터형 API - 로컬 API $.ajax({ url : "http://apis.daum.net/local/geo/coord2addr?apikey=KEY" "&longitude=" + longitude + "&latitude=" + latitude + "&output=json&callback=callback", dataType : "jsonp", jsonp : "callback", success : function(d) { alert(d.fullName); } }); http://dna.daum.net/apis/local/ref#coord2addr
  • 29. Device APIs Working Group (DAP WG) • Geolocation 외에도 브라우저에서 하드웨어를 제어 하려는 시도 • 웹 애플리케이션이 디바이스 자원 접근 API를 정의하고 있음 • 주소록, 일정, 카메라 제어, 배터리 정보, 갤러리, 파일 시스템 등 • 예 : 카메라 • http://dev.w3.org/2009/dap/camera/ • <input type="file" accept="image/*;capture=camera">
  • 30. W3C의 표준화 단계 • WD -> LC -> CR -> PR -> Rec • WD: Working Draft • LC: Last Call • CR: Candidate Recomendation • Rec: Recomendation http://www.w3.org/2009/dap/
  • 31. Canvas SVG 둘다 웹페이지에서 그림을 그리기 위한 도구이지만 근본적으로 다르다 CANVAS  SVG  • JavaScript를 이용하여 2D & 3D 구현 • 해상도 의존적(픽셀단위, 비트맵) • Event Handler를 지원하지 않음 • 좋지않은 텍스트 렌더링 • 결과를 png나 jpg로 저장 가능 • 한번 그림이 그려지게 되면 끝 • 위치가 바뀌면 새로 그림 • 많은 객체가 자주 다시 그려져야 함으로 그래픽 집약적 게임에 적합 • XML로 2D그래픽을 설졍하기 위한 언어 • 해상도에 독립적(벡터) • Event Handler 지원 • 거대한 렌더링이 필요한 어플리케이션에 적합(Google Maps) • 복잡해질 경우 렌더링 속도가 느림 • 각각 그려진 모양이 객체에 기억 • 객체의 속성이 바뀌면 새로 그림 • 게임 어플리케이션으로 부적합
  • 33. CSS3 Animation animation-name: spinningH; /* @ keyframes 애니메이션의 이름을 지정한다. */ animation-timing-function:ease-in-out; /* 애니메이션이 사이클 동안 어떻게 진행되는가를 설명한다. 디폴트는 "ease" */ animation-duration:6s; /* Default 0 애니메이션 한 사이클을 완료하는데 걸리는 초 또는 밀리 초를 지정한다 */ animation-iteration-count:infinite; /* 애니메이션이 재생되는 횟수를 지정한다. */ animation-direction:linear; /* 애니메이션을 역방향으로 재생해야 할지 여부를 지정한다. */ animation-delay:0; /* 애니메이션 시작 될 때 지연 시간을 지정한다. 디폴트는 0 */ animation-play-state:running; /* 애니메이션을 실행하거나 일시 정지 여부를 지정 디폴트는 "running */ @keyframes spinningH { from { transform: rotateX(0deg) rotateY(0deg); } to{ transform: rotateX(360deg) rotateY(360deg); } } ! animation : spinningH 6s infinite linear;
  • 34. Web Worker • Javascript코드를 background에서 실행시키기 위한 기술 • Background에서 실행되는 코드를 ‘Worker’라고 불린다 ! • UI(DOM)과는 완전히 분리된 환경에서 동작 • UI Thread와 완전히 별도의 Thread가 생성되어 동작 ! • 사용 예 • 매우 복잡한 수학적 계산 작업 • 원격지에 있는 리소스에 대한 액세스 작업 • 백그라운드에서 조용히(?) 오랜시간 작업해야 하는 경우 • UI 쓰레드에 방해 없이 지속적으로 수행해야 하는 작업 등 http://www.slideshare.net/jidolstar/html5-web-worker
  • 35. Web Socket http://www.slideshare.net/arungupta1/getting-started-with-websocket-and-serversent-events-in-java http://m.mkexdev.net/98 • HTML5 ‘표준’ • 브라우저 · 서버 모두 간결 • 프록시 지원 기대 • 커넥션 기반 • 양방향 풀 듀플렉스 • TCP/IP 소켓을 직접 다루듯
  • 36. HTML5 로드맵 • HTML5 Recommendation in Q4, 2014 • HTML5.1 Recommendation in Q4, 2016 • http://dev.w3.org/html5/decision-policy/html5-2014- plan.html
  • 37. HTML 5.1 HTML 5.1은 도대체 뭔가요? http://blog.creation.net/533