웹 표준을 위한 html5 & css3 & javascrpt & jquery

www.kyobobook.co.kr

교보문고

웹 표준을 위한 HTML5 & CSS3 & javascrpt & JQuery

09 장 . HTML5 의 강력해진 기능 살피기

웹표준을 위한 HTML 5웹표준을 위한 HTML 5


• HTML5 에서 지원되는 video 태그 별도의 브라우저 플러그인을 설치하지 않더라도 미디어를 웹

페이지에서 쉽게 재생

QuickTime 과 Flash 브라우저 플러그인을 설치하여 재생해야 한다는 문제 해결책

www.kyobobook.co.kr

Section 01. 비디오와 오디오

• src 속성동영상 파일의 경로를 지정

• <video> 태그 안쪽 브라우저가 해당 요소를 지원하지 않을 때 대신 출력할 내용

www.kyobobook.co.kr

예

<video src="media/test.mp4">재생할 수 없는 브라우저 입니다 .</video>

09 장 . HTML5 의 강력해진 기능 살피기Section 01. 비디오와 오디오

• <video> 태그 속성<audio> 태그에서도 공통적으로 사용되는 속성

www.kyobobook.co.kr

속성 설명

loop 동영상 재생이 끝나면 처음부터 다시 반복 재생

controls 각 브라우저 고유의 컨트롤 바를 표시

autoplay 동영상 파일이 로드되는 즉시 자동으로 재생

<video src="media/test.mp4" controls loop autoplay></video>



• <video> 태그 속성 <audio> 태그에서는 사용되지 못하는 고유 속성

www.kyobobook.co.kr

웹표준을 위한 HTML 5

속성 설명

width 동영상의 넓이

height 동영상의 높이

poster 재생할 동영상이 로드 중이거나 버퍼링 중일 때 보여 질 이미지 URL

preload

동영상 파일을 다운로드하여 재생하게끔 하는 방식으로 none, metadata, auto 값을 설정할 수 있다 . none 은 사용자가 컨트롤을 조작하기 전까지 내려

받지 않으며 일반적으로 불필요한 트래픽을 최소화하기 위해 비디오를

캐시하지 않는다 . metadata 는 브라우저가 크기 , 시간 , 첫 번째 프레임과

같은 리소스에 대한 정보를 조회하게 하는데 사용하면 좋다 . auto 은

기본값이며 브라우저가 파일을 자동으로 내려 받게 한다 .


• <video> 태그사이에 사용되는 <source> 태그에서 자주 사용되는 속성

www.kyobobook.co.kr

속성 설명

src 미디어 데이터의 URL

type 미디어 데이터의 MIME 타입



• video 의 한 가지 문제는 현재까지는 웹에 지원되는 표준 포맷이 없기 때문에 브라우저별로 재생할 수 있는 미디어 형식이 다르다 .

• HTML5 와 관련이 있는 가장 일반적인 비디오 컨테이너 포맷으로는 mp4, ogg, WebM 등이 있고 이에 따른 비디오 코덱은 H.264, Theora, Vorbis 등이 있다 .

www.kyobobook.co.kr

브라우저 파일형식 코덱 파이어폭스 3.5+ ogg Theora, Vorbis 오페라 10.5+ ogg Theora, Vorbis 사파리 mp4 H.264, AAC 크롬 5 ogg

mp4 Theora, VorbisH.264, AAC

아이폰 & 안드로이드 mp4 H.264, AAC 인터넷 익스플로러 9 mp4 H.264, AAC 인터넷 익스플로러 8 지원 안함 지원 안함 플래시 플레이어 mp4 H.264, AAC



• <video> 요소에 사용되는 미디어의 포맷이 브라우저별로 통일되어 있지 않기 때문에 mp4, ogg 두 가지 포맷을 모두 준비해야 하며 동영상이 제대로 작동되기 위해서는 MIME 타입을 명확히 제시

www.kyobobook.co.kr

<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>


미디어 재생에 관한 자바 스크립트 API

www.kyobobook.co.kr

속성 설명currentSrc 현재 재생 중인 미디어 데이터의 URLcurrentTime 현재 재생 위치를 초 단위로 나타냄startTime 재생할 위치를 초 단위로 나타냄duration 미디어 데이터의 길이를 초 단위로 나타냄

paused 일시 정시인지 아닌지를 알려준다 . 일시 정지시 true 를 반환한다 .

defaultPlaybackRate 기본 재생 속도 . 기본 값은 1.0

playbackRate 재생 속도 . 기본 값은 1.0 이며 0 이상 앞으로 재생 마이너스이면 거꾸로 재생

muted 음 소거인지 반환volume 음량을 표시함 . 0.0 ~ 1.0 까지 값을 가짐load() 동영상을 다시 읽어 들임 ( 재생하지 않음 )play() 동영상을 재생함pause() 재생 중인 동영상을 일시 정지함


audio 태그로 음악 재생하기

• <video> 요소에 사용되는 미디어의 포맷이 브라우저별로 통일되어 있지 않기 때문에 mp4, ogg 두 가지 포맷을 모두 준비해야 하며 동영상이 제대로 작동되기 위해서는 MIME 타입을 명확히 제시

www.kyobobook.co.kr

<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>



• 캔버스 사용방법 canvas 태그를 사용하여 그래픽 처리를 하기 위해서는 제일 먼저 canvas 태그에

너비와 높이를 지정하여 그래픽을 자유롭게 그릴 수 있는 영역을 설정

document 의 getElementById() 함수로 Canvas DOM 객체에 접근

www.kyobobook.co.kr

Section 02. canvas 태그로 다양한 이미지 그리기


• 컨텍스트 캔버스에 그림을 그리기 위한 canvas.getContext() 함수 호출

www.kyobobook.co.kr



• 사각형을 그리기

www.kyobobook.co.kr



• 사각형 그리기와 색상 지정하기 canvas 로 사각형을 그리기 위해서 제공되는 함수

www.kyobobook.co.kr



• 선 또는 도형 그리기 패스를 그래픽으로 표시하기 위한 순서1. beginPath() 를 호출2. 캔버스의 API 를 이용하여 패스를 그림3. stroke() 혹은 fill() 을 호출하여 그래픽을 화면에 표시4. closePath() 를 호출

www.kyobobook.co.kr



• 선의 스타일을 지정하는 속성 선의 두께를 지정하는 lineWidth 속성 선 끝 부분의 스타일을 지정하는 lineCap 속성 선이 꺾이는 부분의 스타일 지정을 지정하는 lineJoin 속성

www.kyobobook.co.kr



• lineCap( 캡스타일 ) 선 끝 부분의 스타일을 지정하는 속성으로 선의 끝부분을 butt,

round( 원형 ), square( 사각형 ) 이렇게 3 가지의 값 중 하나로 설정

'butt' 가 기본 값

www.kyobobook.co.kr



• lineJoin

www.kyobobook.co.kr



• 원

(x, y) 를 원점으로 지정한 반지름 (radius) 으로 원호를 시작 각도 (startAngle) 부터 종료 각도(endAngle) 까지 시계 혹은 반시계 방향(anticlockwise) 으로 렌더링

' 방향 지정 ' 을 위한 값으로는 false 혹은 true 둘 중에 하나를 지정할 수 있는데 false 는 반시계 방향으로 , true 는 시계 방향

시작 , 종료 각도를 지정하기 위한 단위는 ' 도(degree)' 가 아닌 ' 라디안 (radian)' 으로 표시

www.kyobobook.co.kr



• 텍스트를 출력하기 위한 함수

• textAlign 텍스트 가로 방향의 정렬을 지정하기 위해서 사용하는 속성 속성 값으로 left, right, center, start, end 가 있다

www.kyobobook.co.kr



• textBaseline 텍스트 출력 기준선을 설정하는 속성 top, middle, bottom, alphabetic, hanging, ideo graphic

www.kyobobook.co.kr



• 이미지 관련 함수

첫 번째 매개변수는 캔버스 위에 출력될 이미지의 x 좌표 두 번째 매개변수는 y 좌표 세 , 네 번째 매개변수는 이미지의 크기를 설정해주는 값

www.kyobobook.co.kr



• 드래그 & 드롭 API draggable 요소

드래그 대상을 지정하는 요소드래그 대상은 draggable="true" 속성 지정

www.kyobobook.co.kr

Section 03. Drag & Drop API


• 드래그 & 드롭 API ondragstart 이벤트 핸들러에 함수를 지정하면 드래그가 시작될 때

dragstart 이벤트가 발생하여 해당 함수 (dragStart) 가 호출

www.kyobobook.co.kr



• 드래그 & 드롭 API 드롭 대상 (Target)

끌어다 놓을 곳 , 즉 draggable 의 단짝으로 드래그가 가능한 아이템의 목적지에 대한 엘리먼트를 의미

www.kyobobook.co.kr



• 드래그 & 드롭 API 드롭 대상 (Target)

www.kyobobook.co.kr



• 드래그 & 드롭 API 데이터 공유를 위해서는 드래그 이벤트가 발생하면 호출되는 dragstart

이벤트 처리 함수에서 dataTransfer 객체의 setData() 를 이용해서 전송할 데이터를 설정

www.kyobobook.co.kr



• 드래그 & 드롭 API• 데이터 공유를 위해서는 데이터를 전송하여 드롭 이벤트가

발생되면 , 호출되는 이벤트 처리 함수인 dragDrop() 함수에서 수신받기 위해 dataTransfer 객체의 getData() 함수를 호출하여 dataTransfer 로부터 데이터를 꺼내어 처리

www.kyobobook.co.kr



• 애플리케이션 캐시 인터넷이 끊긴 오프라인 상태에서도 서비스를 사용하도록 웹 애플리케이션에 필요한 리소스를 클라이언트 쪽에 캐시하는 기능

www.kyobobook.co.kr

Section 04. 애플리케이션 캐시


• 애플리케이션 캐시 캐시 매니페스트 매번 내려받아야 ( 캐시해야 ) 할 파일 ( 리소스 ) 들을 나열해 놓은 간단한

텍스트 파일 파일의 첫 번째 행은 'CACHE MANIFEST' 로 시작

이름을 명명할 때에는 관례상 확장자를 '.manifest' 로 저장주석은 # 뒤에 기술

www.kyobobook.co.kr



• 애플리케이션 캐시 캐시 매니페스트 HTML 페이지에서 캐시 파일로 지정하기 위해서는 html 요소의 manifest 속성을 추가하여 캐시 매니페스트 파일 경로 (URL) 를 지정

www.kyobobook.co.kr



• 웹 스토리지 클라이언트 쪽에 양이 적은 데이터를 저장해 두기 위한 저장 장치 . 쿠키와 비슷한 기능을 제공하지만 쿠키와 달리 , 특별한 경우를 제외하고 서버에 정보를 보내지 않음

유효 기간 제한이 없고 자바스크립트 객체를 저장할 수 있다 .

• 스토리지에 값을 설정하는 ( 저장하는 ) 예

www.kyobobook.co.kr

Section 05. 웹 스토리지


• 스토리지에 값을 얻어오는 ( 읽는 ) 예

• 스토리지에 값을 삭제하는 예

www.kyobobook.co.kr



• 스토리지에 모든 데이터를 삭제하는 예

www.kyobobook.co.kr



• Web SQL Database 클라이언트 쪽에서 사용할 수 있는 관계형 데이터베이스

• 로컬 데이터베이스에 접근하기 위한 순서

www.kyobobook.co.kr

Section 06. Web SQL Database


• 데이터베이스를 열기 - openDatabase()

www.kyobobook.co.kr



• SQL 을 실행하기 - executeSql()

www.kyobobook.co.kr



• 웹 워커 웹 페이지도 이러한 멀티 스레드 구현이 가능 자바스크립트 코드를 UI 스레드와는 별도인 백그라운드에서 수행하는

방법• 웹 워커를 활용한 프로그램 2 개 파일 필요

HTML 페이지 , 웹 워커에 대한 코드가 있는 자바스크립트 파일• 웹 워커 실행

HTML 페이지에서 Worker 라는 객체를 통해 HTML 페이지에 Worker 객체를 생성하기 위해서는 워커 코드를

기술한 자바스크립트파일 (.js) 을 Worker 객체 생성시 전달

www.kyobobook.co.kr

Section 07. 웹 워커


• postMessage() 메인 소스와 워커 사이에 서로 데이터를 주고받고 , 비동기로 데이터를

공유하기 위한 함수

• 워커 코드에서는 onmessage 이벤트 핸들러를 통해 워커를 생성한 곳으로부터 메시지를 받아옴

www.kyobobook.co.kr

Section 07. 웹 워커


• 사용자의 현재 위치 정보 ( 위도 , 경도 ) 를 얻기 위한 자바스크립트 API

www.kyobobook.co.kr

Section 08. 지오로케이션 API


• 디바이스의 현재 위치를 얻으려면 navigator 에 정의된 ge-olocatoin 객체의 getCurrentPosition() 함수를 이용하여 콜백 함수 정의

• getCurrentPosition() 함수는 현재 위치 정보를 얻기 위한 시도를 함

www.kyobobook.co.kr



• 성공적으로 위치 정보를 얻었다면 첫 번째 매개변수에 기술한 successCallBack 함수가 호출되고 에러가 발생했을 때는 두 번째 매개변수에 기술한 errorCallback 을 호출

www.kyobobook.co.kr



• coords 의 속성

www.kyobobook.co.kr



• 현재 위치를 계속 추적할 수 있는 함수인 watchPostion() 함수의 기본 형식

www.kyobobook.co.kr



• 로컬 파일을 읽으려면 File API 에서 제공하는 File 과 Fil-eReader 인터페이스 File 인터페이스파일 이름이나 크기에 대한 정보를 알 수 있다 .

www.kyobobook.co.kr

Section 09. File API


FileReader 인터페이스파일의 내용을 읽어 들임 `

www.kyobobook.co.kr

Section 09. File API


• 클라이언트에서 동작하는 데이터베이스를 조작하는 API• 오브젝트 스토어로 불림• 인덱스키 밸류 스토리지를 작성함

• Indexed Database 객체의 존재를 확인하는 작업

www.kyobobook.co.kr

Section 10. Indexed Database API


• open() 함수 데이터베이스를 열거나 지정된 이름으로 생성된 데이터베이스가

없다면 새롭게 생성

• 데이터베이스에 대한 요청을 처리하고 나면 success 혹은 error 이벤트가 발생하기 때문에 이벤트에 적당한 처리를 해야 함

www.kyobobook.co.kr



• success 이벤트가 발생하면 버전을 확인합니다 . 버전이 null이면 setVersion() 함수를 호출하여 새로운 버전을 설정

www.kyobobook.co.kr



• 새로운 버전을 설정한 후에는 데이터베이스 인터페이스(IDBDatabase) 제공해주는 createObjectStore() 함수로 객체의 저장소 (Object Store) 를 지정

www.kyobobook.co.kr


웹 표준을 위한 html5 & css3 & javascrpt & jquery

Documents