Html5

SIGONG media
스마트 연구소
안 상 길 대 리
2012 . 07 . 10

목차

1. HTML5 ?
2. HTML5 새로운 기능 – [new form Element]
3. Offline web development
4. Data messaging API
5. Multi thread and Location API

웹 브라우저 점유율(유럽)

웹 브라우저 점유율(국내)

웹 브라우저별 HTML5 지원 여부

CSS3 + HTML + JavaScript + Etc

JavaScript

출처: http://caniuse.com

웹 브라우저별 HTML5 지원 여부 – 점수 500점 만점

출처: http://html5test.com

개발 환경(필요 유틸리티)

• 브라우저
• Firefox(http://www.mozilla.com/firefox)
• Chrome(http://www.google.com/chrome)
• Opera(http://www.opera.com)
• Safari(http://www.apple.com/kr/safari)
• Internet Explorer(http://windows.microsoft.com/ko-KR/internet-
explorer/downloads/ie)

• 서버 개발환경
• JDK(http://www.oracle.com/technetwork/java)
• Apache Tomcat(http://tomcat.apache.org)
• Node JS

• IDE
• Eclipse(http://www.eclipse.org/downloads)

문서 선언 예제

<!DOCTYPE html>
<html lang=“ko”>
<head>
<title>HTML 선언</title>
<meta charset=“utf-8”>
</head>
<body>

</body>
</html>

새로운 기능

1. Canvas
2. Video
3. Form 요소
4. 드래그 & 드롭
5. 파일 API

Canvas
그래픽(2D/3D)을 자유롭게 그릴 수 있는 영역

Video
그래픽(2D/3D)을 자유롭게 그릴 수 있는 영역

컨테이너 비디오 코덱 오디오 코덱

MP4 H.264 AAC

WebM VP8 Vorbis

Ogg Theora Vorbis

<input> 요소의 새로운 속성 값

1. number
• 숫자를 입력하기 위한 필드
• min, max, step 속성 사용 가능

2. range
• 일정 범위의 숫자를 입력하기 위한 필드
• min, max, step 속성 사용 가능

3. color
• 색상을 선택하기 위한 필드

기능이 추가된 <input> 요소

File
1. multiple 속성 추가
- 여러 개의 파일 선택 가능
2. accept 속성 추가
- 지정한 MIME 타입의 파일만 선택 가능
- image/*, video/*, audio/* 형태도 가능
3. files 속성 추가
- 파일의 상세 정보를 확인

기능이 추가된 <input> 요소

submit, image
1. form method 속성 추가
- form 요소의 method 속성을 지정
2. form action 속성 추가
- form 요소의 action 속성을 지정
3. form enctype 속성 추가
- form 요소의 enctype 속성을 지정

<form>
<input type="submit"
formmethod="POST" formaction="/create" value="등록" />
<input type="submit"
formmethod="GET" formaction="/list" value="목록" />
</form>

새로운 입력 요소

<output>
• 수치 계산의 결과를 표현하는데 사용
- value 속성을 이용하여 연관성 있는 요소의 계산 결과를 표현
성인<input name="adult" type="number" min="0" value="0"> +
어린이<input name="child" type="number" min="0" value="0"> =
<output onforminput="value=adult.valueAsNumber+child.valueAsNumber">합계</output>

<keygen>
• form을 submit 할 때 primary key와 public key를 생성하여 public key는 서버에
송신하고 primary key는 로컬에 저장되어 클라이언트 인증서 생성과 같이 다
양한 목적으로 사용 가능


<progress>
1. 진행중인 작업의 시각적인 효과를 위한 요소
2. 속성
- value : 완료된 작업량(0.0 ~ 1.0)
- max : 전체 작업량(0.0 ~ 1.0 기본은 1.0)
3. 요소 사이에 기술한 값은 progress를 지원하지 않는 브라우저에서 처리
4. position 속성에는 백분율 값이 있음(value/max)


<meter> Tag
1. 일정 범위 안의 비율이나 수치를 시각적으로 표시
2. 속성
- min : 최소 값(기본값 0)
- max : 최대 값(기본값 1)
- value : 현재 값(기본값 0)
- low : 값이 낮음(생략 시 min과 같음)
- high : 값이 높음(생략 시 max와 같음)
-optimum : 최적 값(생략 시 min과 max의 중간 값)

3. 요소 사이에 기술한 값은 meter를 지원하지 않는 브라우저에서 처리
<meter min="0" max="100" low="60" high="90" value="100">A</meter>
<meter min="0" max="100" low="60" high="90" value="95">A</meter>
<meter min="0" max="100" low="60" high="90" value="88">B</meter>
<meter min="0" max="100" low="60" high="90" value="75">C</meter>
<meter min="0" max="100" low="60" high="90" value="65">D</meter>
<meter min="0" max="100" low="60" high="90" value="50">F</meter>

입력 값 검증

입력 값 검증용 속성
• 폼을 제출할 때 자동으로 입력 값 검증
• 입력 값 검증에 실패할 경우 폼 전송이 이루어지지 않음
• 입력 값 검증용 속성
- required : 필수 입력
- pattern : 정규표현식을 사용하여 입력 값 패턴 지정
- maxLength : 최대 입력 가능 문자 수
- min, max : 숫자/날짜 형식 필드의 최소값과 최대값을 지정
- step : 숫자/날짜 형식 필드의 증감 단위를 지정

입력 검증 값 예제

required
• <input type="text" name="id" required />

pattern
• <input type="tel" name="phone"
pattern=
"^(?d{3})?[-s]d{3,4}[-s]d{4}.*?$" />

min, max, step
• <input type="number" name="age" min="14"
max="30" step="2" />

자동 완성 기능 제어

1. 입력 항목의 자동 완성 기능 제어
• 자동 완성 기능을 명시적으로 on/off
- autocomplete 속성
• 입력 후보 목록을 직접 지정
- <datalist> 요소

2. 자동 완성 기능 제어 예제
언어 : <input type="text" name="id" list="language" />
<datalist id="language">
<option value="c" label="C언어" />
<option value="java" label="자바" />
<option value="vb" label="비쥬얼 베이직" />
</datalist>

입력 요소의 공통 속성

1. placeholder 속성
• 입력 필드가 비어있을 때 보여줄 간단한 문자열 지정

2. autofocus 속성
• 페이지 로딩 후 최초 포커스 지정

새로운 이벤트

1. 입력 필드의 데이터 입력이나 변경 시 발생
• input : 입력 필드의 데이터 입력 시 발생
• change : 입력 필드의 데이터 변경 시 발생

2. 폼 내의 이벤트 연동
• 폼 안의 한 요소에 input/change 이벤트 발생 시 폼 안의 모든 요소에 발생
하는 이벤트
- forminput
- formchange

입력1<input type="text" id="t1" /><br/>
입력2<input type="text" id="t2"
onForminput="this.value=document.getElementById('t1').value" /><br/>
입력3<input type="text" id="t3"
onForminput="this.value=document.getElementById('t1').value" /><br/>

File

Javascript 에서 … 되어 있었으나 File interface 는 Browser 가 막 건드릴 수있는 것
이 아니라 File 선택 Form 이나 Drag & Drop 을 통해서 사용자가 직접 선택한 File에
한정되므로 안심해도 좋을 것입니다.

http://slides.html5rocks.com

Offline web development

1. Application Cache
2. Web storage
3. Web Database
4. Indexed DB

• 오프라인 웹 애플리케이션
• 네트워크에 연결되어 있지 않아도 동작하는 애플리케이션

• 오프라인 웹 애플리케이션의 이점
• 스마트폰이나 넷북 등의 모바일 단말기에서 네트워크 상태와
상관없이 계속 사용할 수 있음
• 클라이언트에 캐시된 리소스를 사용하므로 응답성이 좋음
• 네트워크 접속이 줄어들어 전원 관리에 유리
• 서버의 네트워크 트래픽이 줄어듬

Application Cache(2/1)

• 오프라인 브라우징 – 오프라인 상태에서 접근 가능
• 속도향상 – 로컬영역에 저장된 리소스를 매우빠른 속도로 로드
• 서버부하감소 – 브라우저는 오직 리소스가 변경된 경우에만 다운로
드를 시도한다.

기존 브라우저 캐싱 개념과 다른점
기존 브라우저와 같이 자주 사용되는 이미지 및 텍스트가 브라우저의 OOO에 의해 캐싱되는것이
아닌 개발자에 의해 정의된 방식에 따라 동작한다.

CACHE MANIFEST

#version : 2012.07.09.04

CACHE : •명시적으로 캐시시킬 항목을 정의한다.
•Cache 되지 않고 매번 네트워크
NETWORK :
상에서 다운받아 사용할 목록
FALLBACK : •Offline 상태에서 필요한 리소스가 없을 때
이를 대신할 리소스를 지정한다.

Application Cache(2/2)
주의 사항
w3c 1.0 version 확장자 ".manifest"라는 확장자를 붙여 저장하였으나.
IIS 에서 이미 사용중인 type이 있어 충돌,

w3c 2.x version 에서 appcache 저장하여 사용하도록 권고.

FALLBACK 사용시 첫 번째 URI는 리소스 이며, 두 번째는 대체되는 파일이다.
개발단계에서 Cache 사용시 어려움이 있음 – file reload ….

MIME-TYPE 지정

•Web.xml •jsp Page

<mime-mapping> <%@ page
<extension>appcache</extension> contentType="text/cach
e-manifest;
<mime-type> charset=UTF-8" %>
text/cache-manifest
</mime-type>

</mime-mapping>

Web Storage(3/1)
일종의 클리이언트 사이드 데이터 베이스이며, 이 데이터 는 서버가 아닌 각
사용자의 브라우저에서 보관된다. 사용시 Key Value 형태로 저장 되기 때문에 ,
별도의 쿼리문법이나 복잡한 메커니즘을 이해하지 않아도 된다.

특징
Localstorage 와 Sessionstorage로 구분된다.

이 둘의 차이점은 브라우저가 완전히 종료되고 난 후에도 데이터가 유지 되는가?의 차이다.

KEY VALUE
age 30
name Hong kil dong
… …
… …
… …

JAVA Map CLASS 의 KEY / VALUE 형태

Web Storage(3/2)
주의 사항
Web Storage는 WebDatabase와 마찬가지로 브라우저에서 제공되는 공간을 사용한다.
이에 다른 브라우저로 webStorage에 접근 해도 동일한 데이터를 가져 올수 없다.

Ex )
Web Storage DATA
firefox Chrome X
Browser Change

Firefox Filefox O
Browser maintain

Cookie 대신 Web Storage 사용
쿠키데이터가 HTTP 헤더 요청에 포함되어 이는 응담시간에 나쁜 영향을 미친다.
특히 XHR(xmlHttpRequest)이 많은 웹 애플리케이션은 더욱 그렇다.
가장좋은 사례는 쿠키의 크기를 줄여 주는것이지만 HTML5에서는 Web Storage를 사용한다.

Web Storage(3/3)
Web Storage vs. Cookie
• 기본 크기는 5M byte(쿠키는 4K byte)
• 서버로 데이터를 보내지 않음(쿠키는 요청 헤더에 자동으로 포함)
• 만료 기간이 없음(쿠키는 만료기간 지정)
• 자바스크립트 객체를 저장할 수 있음(쿠키는 문자열만 저장)

Local Storage
• 도메인별로 각각 별도로 생성되는 저장 영역
• 다른 도메인에서는 접근 불가능

Session Storage
• 브라우저(window 객체)와 같은 생존 기간을 가지는 저장 영역
• 브라우저가 닫히면 세션 스토리지 정보도 사라짐
• 각각의 브라우저가 같은 도메인에 접속하더라도 세션 스토리지는 각각 생성
• 브라우저의 기능(새 창, 새 탭 등)을 이용하여 새롭게 창을 열었을 경우에는 세
션 스토리지의 값이 복사되며 이후에 수정된 내용은 각각의 창마다 따로 관리
• 로컬 스토리지처럼 도메인별로 각각 별도로 저장 영역이 생성되므로 동일 브
라우저 창이라고 해도 도메인이 다르면 접근 불가

Web Database (1/2)
HTML5와 함께 새로 생겨남
브라우저에 내장(embedded) 되어있는 관계형 데이터베이스
도메인별로 각각 별도의 데이터베이스 공간이 생성
현재 모든 브라우저가 SQLite를 사용

Web Database 2가지 사용방법

1. 동기 방식
2. 비동기 방식

비동기 방식 동기방식
Worker 에서만 사용가능
openDatabase(name, version, openDatabaseSync(name, version,
displayname, estmatedSize, displayname, estmatedSize,
creationCallback) creationCallback)

SQL 문은 표준 DDL, DCL, DML 을 사용한다.
(preparedStatement Class)

Web Database (2/2)
특징
• Web database 사용하는 대부분의 사례가 비동기 API 방식을 사용
• 비동기 API는 non-blocking 방식
• Return 값을 통해 데이터를 얻지 못하기 때문에 정의된 callback 함수정의 필요
• HTML을 통한 transaction 이기 때문에 외부에서 SQL 실행 불가능

Transaction 분류
• 읽기/쓰기 (Transaction)
• 읽기 전용 (readTransaction)

주의점
• 데이터를 읽고 쓸 때 전체 데이터 베이스가 잠김

Indexed DB
Indexed Database API는 구조적 데이터 장소이다.
이는 Web Storage, Web Database와 함께 온/오프라인 상태에서 사용 할 수 있는
Client-side database 이다.

특징
• Web database에 비해 Indexed DB는 스크립트릉 이요한 데이터 베이스를 다루
기에 최적화된 인터페이스를 제공
• 알고리즘 방식의 입/출력을 지원
• 비동기/동기 API 지원
• 관계형 데이터베이스(RDBMS) 형식으로 데이터 구조 설계 할 수 있다.

Data Messaging API

1. Communication API
1. Message Event
2. Cross Document Messaging
3. Channel Message
2. Server Sent Event
3. WEB Socket

Communication API – Message Event
MessageEvent 는 두지점 간에 주고 받는 메시지를 말한다.
Communication API의 기본이 된다.
메시지 송신
• postMessage(data, [ports], targetOrigin) 메서드를 이용
- data : 송신할 메시지(자바스크립트 객체)
- ports : 채널 메시지 전송 시 공유할 포트배열(생략 가능)
- targetOrigin : 수신처의 도메인
메시지 수신
• 메시지 수신 시 발생하는 message 이벤트를 이용
• 이벤트 핸들러 함수의 인자로 넘어오는 MessageEvent 객체의 속성을 이용하
여 메시지 수신

메시지 송수신 주체
• 통신 종류별 postMessage() 메서드와 message 이벤트 발생
-Cross document : window 객체
- Channel : MessagePort 객체
-Web Workers : Worker 객체
- Server-Sent Events : EventSource 객체

Communication API – Cross Document Messaging
Many to Many 메시지 통신을 실현하기 위한 API

특징
• 둘이상의 웹페이지가 서로 데이터를 주고 받을 수 있다.
• Same origin policy(동일 출처 정책)이 적용되지 않아 도메인 간 통신이 가
• non-blocking 방식으로 callback Method를 사용하여 메시지 전달
•메시지 송신
-수신 대상 window의 postMessage() 메서드 이용
•메시지 수신
-자신의 window의 message 이벤트 처리

주의
• 다른 도메인간의 통신이 가능 하기 때문에 보안 중요.
• origin 속성을 사용하여 확인 보안 확인 가능
•메시지 송신 시 다른 도메인으로의 메시지 전송을 막기 위해 postMessage()의 targetOrigin 값을 수신
처 도메인으로 지정
•다른 도메인에서 부적절한 메시지를 보낼 경우에 대비해 MessageEvent의 origin 속성으로 송신처 도
메인을 확인 후 메시지 수신

Communication API – Channel Messaging
Many to Many 메시지 통신을 실현하기 위한 API

특징
• MessageChannel 이라는 channel을 이용하여 Message 를 송수신
• 출입구가 되는 Channel에는 두개의 Port가 있다. (port1, port2)
• Port1에 수신된 메시지는 Port2로,
• Port2에 수신된 메시지는 Port1으로 전달됨

Server Sent Event
특징
• 여러 클라이언트를 상대해야 하는 웹 서버의 특징상 다수의 클라이언트 정보를 유지하기
엔 서버의 자원이 너무 많이 소모되므로 웹 서버는 클라이언트의 요청이 발생하면 응답을
한 후 클라이언트와의 연결을 종료함

• 서버는 접속한 클라이언트와의 커넥션을 유지하지 않으므로 클라이언트가 요청하기 전
에는 응답을 할 수 없음

• 서버로부터의 push 서비스는 불가능
서버의 push 서비스 대안 기술들
• hidden frame
- hidden frame을 이용하여 주기적으로 polling
- 불필요한 요청 발생
• Ajax
- XMLHttpRequest 객체를 이용하여 주기적으로 polling
- 불필요한 요청 발생
• Comet
- XMLHttpRequest 객체를 이용하여 서버에 요청을 보내고 서버에서는 바로 응답하지
않고 커넥션을 유지하다가 서버에 이벤트가 발생하면 응답하는 방식(long-polling)
- 브라우저는 서버의 응답을 처리한 후 바로 재요청
- 서버의 이벤트 발생 시 곧바로 응답을 받을 수 있으므로 실시간 push 서비스와 가장
근접한 방식

5. Multi thread
and Location API

Geolocation API
브라우저가 사용자의 지리적 위치를 찾아내고 그 정보를 애플리케이션에서 이용
할 수 있도록 하는 기능

특징
•사용자의 위치정보를 이용하기 위해 승인 절차를 거처야 함.
•지오태킹 기능을 제공할 수 있고 근처에서 촬영된 사진 정보를 유기적으로 연결 하
여 서비스 할 수 있다.
•사용자의 위치가 변경될때마다 callback메서드로 전달되어 항상 최신위치 정보를
유지 할 수 있다.
•GPS 정보를 활용 할 수 있다.

•지리정보를 수신하는 기기의 환경에 따라 고도와 방향정보 도 얻을수 있다.

Worker / Notifications (1/2)

Worker
1. 브라우저의 스레드
• 기본적으로 웹 페이지는 하나의 스레드로 처리
• 처리 시간이 오래 걸리는 스크립트의 실행 동안에는 UI(DOM, 사용
자 이벤트 처리) 작업을 처리할 수 없음

2. Worker
• 메인 스레드(UI)와 독립되어 백그라운드 프로세스로 처리되는 스크
립트
• 처리 시간이 오래 걸리는 작업에 사용하면 메인 스레드와 같이 병행
하여 동작
• 워커를 이용한 병렬 처리는 멀티 코어에서 최적화된 성능을 발휘
• UI 처리와 비즈니스 로직의 분리

3. Worker의 종류
• 전용(dedicated) 워커
- 워커 객체와 백그라운드 프로세스가 일대일로 대응
• 공유(shared) 워커
- 다수의 워커 객체에 의해 공유되는 백그라운드 프로세스(데이
터 공유)

Worker / Notifications(2/2)

Notifications
크롬의 독자적인 알림수단.
브라우저의 탭 또는 윈도의 활성화 여부에 상관 없이 동작 한다.

Html5

More Related Content

What's hot (20)

Similar to Html5 (20)

Html5