09장. HTML5의 강력해진 기능 살피기
Download
Report
Transcript 09장. HTML5의 강력해진 기능 살피기
www.kyobobook.co.kr
웹표준을 위한 HTML 5
웹표준을 위한 HTML 5
웹 표준을 위한 HTML5 & CSS3 & javascrpt & JQuery
09장. HTML5의 강력해진 기능 살피기
교보문고
09장. HTML5의 강력해진 기능 살피기
Section 01. 비디오와 오디오
• HTML5에서 지원되는 video 태그
별도의 브라우저 플러그인을 설치하지 않더라도 미디어를 웹 페이
지에서 쉽게 재생
QuickTime과 Flash 브라우저 플러그인을 설치하여 재생해야 한다
는 문제 해결책
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 01. 비디오와 오디오
<video src="media/test.mp4">
예 재생할 수 없는 브라우저 입니다.
</video>
• src 속성
동영상 파일의 경로를 지정
• <video> 태그 안쪽
브라우저가 해당 요소를 지원하지 않을 때 대신 출력할 내용
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 01. 비디오와 오디오
• <video> 태그 속성
<audio> 태그에서도 공통적으로 사용되는 속성
속성
설명
loop
동영상 재생이 끝나면 처음부터 다시 반복 재생
controls
각 브라우저 고유의 컨트롤 바를 표시
autoplay
동영상 파일이 로드되는 즉시 자동으로 재생
<video src="media/test.mp4" controls loop autoplay></video>
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
웹표준을 위한 HTML 5
• <video> 태그 속성
<audio> 태그에서는 사용되지 못하는 고유 속성
속성
설명
width
동영상의 넓이
height
동영상의 높이
poster
재생할 동영상이 로드 중이거나 버퍼링 중일 때 보여 질 이미지 URL
동영상 파일을 다운로드하여 재생하게끔 하는 방식으로 none, metadata,
auto 값을 설정할 수 있다. none은 사용자가 컨트롤을 조작하기 전까지 내려
preload
받지 않으며 일반적으로 불필요한 트래픽을 최소화하기 위해 비디오를 캐시하
지 않는다. metadata는 브라우저가 크기, 시간, 첫 번째 프레임과 같은 리소스
에 대한 정보를 조회하게 하는데 사용하면 좋다. auto은 기본값이며 브라우저
가 파일을 자동으로 내려 받게 한다.
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 01. 비디오와 오디오
•
<video> 태그사이에 사용되는 <source> 태그에서 자주 사용되는 속성
속성
설명
src
미디어 데이터의 URL
type
미디어 데이터의 MIME 타입
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 01. 비디오와 오디오
•
video의 한 가지 문제는 현재까지는 웹에 지원되는 표준 포맷이 없기
때문에 브라우저별로 재생할 수 있는 미디어 형식이 다르다.
•
HTML5와 관련이 있는 가장 일반적인 비디오 컨테이너 포맷으로는
mp4, ogg, WebM 등이 있고 이에 따른 비디오 코덱은 H.264,
Theora, Vorbis 등이 있다.
브라우저
파이어폭스 3.5+
오페라 10.5+
사파리
크롬 5
아이폰&안드로이드
인터넷 익스플로러 9
인터넷 익스플로러 8
플래시 플레이어
파일형식
ogg
ogg
mp4
ogg
mp4
mp4
mp4
지원 안함
mp4
코덱
Theora, Vorbis
Theora, Vorbis
H.264, AAC
Theora, Vorbis
H.264, AAC
H.264, AAC
H.264, AAC
지원 안함
H.264, AAC
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 01. 비디오와 오디오
•
<video> 요소에 사용되는 미디어의 포맷이 브라우저별로 통일되어
있지 않기 때문에 mp4, ogg 두 가지 포맷을 모두 준비해야 하며 동
영상이 제대로 작동되기 위해서는 MIME 타입을 명확히 제시
<video id="media" width="600" height="400" autoplay>
<source src="my_video.mp4" type='video/mp4'>
<source src="my_video.webm" type='video/webm'>
<source src="my_video.ogv" type='video/ogg;
codecs="theora, vorbis"'>
</video>
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 01. 비디오와 오디오
미디어 재생에 관한 자바 스크립트 API
속성
currentSrc
currentTime
startTime
duration
paused
defaultPlaybackRate
playbackRate
muted
volume
load()
play()
pause()
설명
현재 재생 중인 미디어 데이터의 URL
현재 재생 위치를 초 단위로 나타냄
재생할 위치를 초 단위로 나타냄
미디어 데이터의 길이를 초 단위로 나타냄
일시 정시인지 아닌지를 알려준다.
일시 정지시 true를 반환한다.
기본 재생 속도. 기본 값은 1.0
재생 속도. 기본 값은 1.0이며
0 이상 앞으로 재생 마이너스이면 거꾸로 재생
음 소거인지 반환
음량을 표시함. 0.0 ~ 1.0까지 값을 가짐
동영상을 다시 읽어 들임(재생하지 않음)
동영상을 재생함
www.kyobobook.co.kr
재생 중인 동영상을 일시 정지함
09장. HTML5의 강력해진 기능 살피기
Section 01. 비디오와 오디오
audio 태그로 음악 재생하기
•
<video> 요소에 사용되는 미디어의 포맷이 브라우저별로 통일되어
있지 않기 때문에 mp4, ogg 두 가지 포맷을 모두 준비해야 하며 동
영상이 제대로 작동되기 위해서는 MIME 타입을 명확히 제시
<audio preload="auto" loop="loop"
autoplay="autoplay" controls="controls">
<source type="audio/mp3" src="media/big_buck_bunny_32s.mp3" />
<source type="audio/ogg" src="media/big_buck_bunny_32s.oga " />
재생할 수 없는 브라우저 입니다.
</audio>
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 02. canvas 태그로 다양한 이미지 그리기
•
캔버스 사용방법
canvas 태그를 사용하여 그래픽 처리를 하기 위해서는 제일 먼저 canvas 태그에 너
비와 높이를 지정하여 그래픽을 자유롭게 그릴 수 있는 영역을 설정
document의 getElementById() 함수로 Canvas DOM 객체에 접근
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 02. canvas 태그로 다양한 이미지 그리기
• 컨텍스트
캔버스에 그림을 그리기 위한 canvas.getContext() 함수 호출
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 02. canvas 태그로 다양한 이미지 그리기
• 사각형을 그리기
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 02. canvas 태그로 다양한 이미지 그리기
• 사각형 그리기와 색상 지정하기
canvas로 사각형을 그리기 위해서 제공되는 함수
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 02. canvas 태그로 다양한 이미지 그리기
• 선 또는 도형 그리기
1.
2.
3.
4.
패스를 그래픽으로 표시하기 위한 순서
beginPath()를 호출
캔버스의 API를 이용하여 패스를 그림
stroke() 혹은 fill()을 호출하여 그래픽을 화면에 표시
closePath()를 호출
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 02. canvas 태그로 다양한 이미지 그리기
• 선의 스타일을 지정하는 속성
선의 두께를 지정하는 lineWidth 속성
선 끝 부분의 스타일을 지정하는 lineCap 속성
선이 꺾이는 부분의 스타일 지정을 지정하는 lineJoin 속성
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 02. canvas 태그로 다양한 이미지 그리기
• lineCap(캡스타일)
선 끝 부분의 스타일을 지정하는 속성으로 선의 끝부분을 butt,
round(원형), square(사각형) 이렇게 3가지의 값 중 하나로 설정
'butt'가 기본 값
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 02. canvas 태그로 다양한 이미지 그리기
• lineJoin
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 02. canvas 태그로 다양한 이미지 그리기
• 원
(x, y)를 원점으로 지정한 반지름(radius)으로 원
호를 시작 각도(startAngle)부터 종료 각도
(endAngle)까지 시계 혹은 반시계 방향
(anticlockwise)으로 렌더링
'방향 지정'을 위한 값으로는 false 혹은 true 둘
중에 하나를 지정할 수 있는데 false는 반시계 방
향으로, true는 시계 방향
시작, 종료 각도를 지정하기 위한 단위는 '도
(degree)'가 아닌 '라디안(radian)'으로 표시
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 02. canvas 태그로 다양한 이미지 그리기
• 텍스트를 출력하기 위한 함수
• textAlign
텍스트 가로 방향의 정렬을 지정하기 위해서 사용하는 속성
속성 값으로 left, right, center, start, end가 있다
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 02. canvas 태그로 다양한 이미지 그리기
• textBaseline
텍스트 출력 기준선을 설정하는 속성
top, middle, bottom, alphabetic, hanging, ideo graphic
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 02. canvas 태그로 다양한 이미지 그리기
• 이미지 관련 함수
첫 번째 매개변수는 캔버스 위에 출력될 이미지의 x 좌표
두 번째 매개변수는 y 좌표
세, 네 번째 매개변수는 이미지의 크기를 설정해주는 값
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 03. Drag & Drop API
• 드래그 & 드롭 API
draggable 요소
드래그 대상을 지정하는 요소
드래그 대상은 draggable="true" 속성 지정
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 03. Drag & Drop API
• 드래그 & 드롭 API
ondragstart 이벤트 핸들러에 함수를 지정하면 드래그가 시작될 때
dragstart 이벤트가 발생하여 해당 함수(dragStart)가 호출
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 03. Drag & Drop API
• 드래그 & 드롭 API
드롭 대상(Target)
끌어다 놓을 곳, 즉 draggable의 단짝으로 드래그가 가능한 아이템의 목
적지에 대한 엘리먼트를 의미
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 03. Drag & Drop API
• 드래그 & 드롭 API
드롭 대상(Target)
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 03. Drag & Drop API
• 드래그 & 드롭 API
데이터 공유를 위해서는 드래그 이벤트가 발생하면 호출되는 dragstart
이벤트 처리 함수에서 dataTransfer 객체의 setData()를 이용해서 전송
할 데이터를 설정
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 03. Drag & Drop API
• 드래그 & 드롭 API
• 데이터 공유를 위해서는 데이터를 전송하여 드롭 이벤트가 발
생되면, 호출되는 이벤트 처리 함수인 dragDrop() 함수에서 수
신받기 위해 dataTransfer 객체의 getData() 함수를 호출하여
dataTransfer로부터 데이터를 꺼내어 처리
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 04. 애플리케이션 캐시
• 애플리케이션 캐시
인터넷이 끊긴 오프라인 상태에서도 서비스를 사용하도록 웹 애플리케이
션에 필요한 리소스를 클라이언트 쪽에 캐시하는 기능
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 04. 애플리케이션 캐시
• 애플리케이션 캐시
캐시 매니페스트
매번 내려받아야(캐시해야)할 파일(리소스)들을 나열해 놓은 간단한 텍
스트 파일
파일의 첫 번째 행은 'CACHE MANIFEST'로 시작
이름을 명명할 때에는 관례상 확장자를 '.manifest'로 저장
주석은 # 뒤에 기술
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 04. 애플리케이션 캐시
• 애플리케이션 캐시
캐시 매니페스트
HTML 페이지에서 캐시 파일로 지정하기 위해서는 html 요소의 manifest 속성을 추가하
여 캐시 매니페스트 파일 경로(URL)를 지정
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 05. 웹 스토리지
• 웹 스토리지
클라이언트 쪽에 양이 적은 데이터를 저장해 두기 위한 저장 장치. 쿠키
와 비슷한 기능을 제공하지만 쿠키와 달리, 특별한 경우를 제외하고 서버
에 정보를 보내지 않음
유효 기간 제한이 없고 자바스크립트 객체를 저장할 수 있다.
• 스토리지에 값을 설정하는(저장하는) 예
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 05. 웹 스토리지
• 스토리지에 값을 얻어오는(읽는) 예
• 스토리지에 값을 삭제하는 예
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 05. 웹 스토리지
• 스토리지에 모든 데이터를 삭제하는 예
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 06. Web SQL Database
• Web SQL Database
클라이언트 쪽에서 사용할 수 있는 관계형 데이터베이스
• 로컬 데이터베이스에 접근하기 위한 순서
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 06. Web SQL Database
• 데이터베이스를 열기 - openDatabase()
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 06. Web SQL Database
• SQL을 실행하기 - executeSql()
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 07. 웹 워커
• 웹 워커
웹 페이지도 이러한 멀티 스레드 구현이 가능
자바스크립트 코드를 UI 스레드와는 별도인 백그라운드에서 수행하는
방법
• 웹 워커를 활용한 프로그램 2개 파일 필요
HTML 페이지, 웹 워커에 대한 코드가 있는 자바스크립트 파일
• 웹 워커 실행
HTML 페이지에서 Worker라는 객체를 통해
HTML 페이지에 Worker 객체를 생성하기 위해서는 워커 코드를 기술
한 자바스크립트파일(.js)을 Worker 객체 생성시 전달
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 07. 웹 워커
• postMessage()
메인 소스와 워커 사이에 서로 데이터를 주고받고, 비동기로 데이터를
공유하기 위한 함수
• 워커 코드에서는 onmessage 이벤트 핸들러를 통해 워커를
생성한 곳으로부터 메시지를 받아옴
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 08. 지오로케이션 API
• 사용자의 현재 위치 정보(위도, 경도)를 얻기 위한 자바스크립
트 API
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 08. 지오로케이션 API
• 디바이스의 현재 위치를 얻으려면 navigator에 정의된
geolocatoin 객체의 getCurrentPosition() 함수를 이용하여
콜백 함수 정의
• getCurrentPosition() 함수는 현재 위치 정보를 얻기 위한 시
도를 함
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 08. 지오로케이션 API
• 성공적으로 위치 정보를 얻었다면 첫 번째 매개변수에 기술한
successCallBack 함수가 호출되고 에러가 발생했을 때는 두
번째 매개변수에 기술한 errorCallback을 호출
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 08. 지오로케이션 API
• coords의 속성
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 08. 지오로케이션 API
• 현재 위치를 계속 추적할 수 있는 함수인 watchPostion() 함
수의 기본 형식
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 09. File API
• 로컬 파일을 읽으려면 File API에서 제공하는 File과
FileReader 인터페이스
File 인터페이스
파일 이름이나 크기에 대한 정보를 알 수 있다.
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 09. File API
FileReader 인터페이스
파일의 내용을 읽어 들임`
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 10. Indexed Database API
• 클라이언트에서 동작하는 데이터베이스를 조작하는 API
• 오브젝트 스토어로 불림
• 인덱스키 밸류 스토리지를 작성함
• Indexed Database 객체의 존재를 확인하는 작업
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 10. Indexed Database API
• open() 함수
데이터베이스를 열거나 지정된 이름으로 생성된 데이터베이스가 없다
면 새롭게 생성
• 데이터베이스에 대한 요청을 처리하고 나면 success 혹은
error 이벤트가 발생하기 때문에 이벤트에 적당한 처리를 해
야함
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 10. Indexed Database API
• success 이벤트가 발생하면 버전을 확인합니다. 버전이 null이
면 setVersion() 함수를 호출하여 새로운 버전을 설정
www.kyobobook.co.kr
09장. HTML5의 강력해진 기능 살피기
Section 10. Indexed Database API
• 새로운 버전을 설정한 후에는 데이터베이스 인터페이스
(IDBDatabase) 제공해주는 createObjectStore() 함수로 객체
의 저장소(Object Store)를 지정
www.kyobobook.co.kr