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

웹표준을 위한 HTML 5 웹표준을 위한 HTML 5 웹 표준을 위한 HTML5 & CSS3 & javascrpt & JQuery 09장. HTML5의 강력해진 기능 살피기

09장. HTML5의 강력해진 기능 살피기 • HTML5에서 지원되는 video 태그 • 별도의 브라우저 플러그인을 설치하지 않더라도 미디어를 웹 페이지에서 쉽게 재생 • QuickTime과 Flash 브라우저 플러그인을 설치하여 재생해야 한다는 문제 해결책 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • src속성 • 동영상 파일의 경로를 지정 • <video> 태그 안쪽 • 브라우저가 해당 요소를 지원하지 않을 때 대신 출력할 내용 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • <video> 태그 속성 • <audio> 태그에서도 공통적으로 사용되는 속성 <video src="media/test.mp4" controls loop autoplay></video> www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • <video> 태그 속성 <audio> 태그에서는 사용되지 못하는 고유 속성 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • <video> 태그사이에 사용되는 <source> 태그에서 자주 사용되는 속성 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • video의 한 가지 문제는 현재까지는 웹에 지원되는 표준 포맷이 없기 때문에 브라우저별로 재생할 수 있는 미디어 형식이 다르다. • HTML5와 관련이 있는 가장 일반적인 비디오 컨테이너 포맷으로는 mp4, ogg, WebM등이 있고 이에 따른 비디오 코덱은H.264, Theora, Vorbis등이 있다. www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 <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의 강력해진 기능 살피기 미디어 재생에 관한 자바 스크립트 API www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 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의 강력해진 기능 살피기 • 캔버스 사용방법 • canvas 태그를 사용하여 그래픽 처리를 하기 위해서는 제일 먼저 canvas 태그에 너비와 높이를 지정하여 그래픽을 자유롭게 그릴 수 있는 영역을 설정 • document의 getElementById() 함수로 Canvas DOM 객체에 접근 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 컨텍스트 • 캔버스에 그림을 그리기 위한 canvas.getContext() 함수 호출 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 사각형을 그리기 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 사각형 그리기와 색상 지정하기 • canvas로 사각형을 그리기 위해서 제공되는 함수 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 선 또는 도형 그리기 • 패스를 그래픽으로 표시하기 위한 순서 • 1. beginPath()를 호출 • 2. 캔버스의 API를 이용하여 패스를 그림 • 3. stroke() 혹은 fill()을 호출하여 그래픽을 화면에 표시 • 4. closePath()를 호출 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 선의 스타일을 지정하는 속성 • 선의 두께를 지정하는 lineWidth속성 • 선 끝 부분의 스타일을 지정하는 lineCap속성 • 선이 꺾이는 부분의 스타일 지정을 지정하는 lineJoin속성 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • lineCap(캡스타일) • 선 끝 부분의 스타일을 지정하는 속성으로 선의 끝부분을 butt, round(원형), square(사각형) 이렇게 3가지의 값 중 하나로 설정 • 'butt'가 기본 값 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 lineJoin www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 원 • (x, y)를 원점으로 지정한 반지름(radius)으로 원호를 시작 각도(startAngle)부터 종료 각도(endAngle)까지 시계 혹은 반시계 방향(anticlockwise)으로 렌더링 • '방향 지정'을 위한 값으로는 false 혹은 true 둘 중에 하나를 지정할 수 있는데 false는 반시계 방향으로, true는 시계 방향 • 시작, 종료 각도를 지정하기 위한 단위는 '도(degree)'가 아닌 '라디안(radian)'으로 표시 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 텍스트를 출력하기 위한 함수 • textAlign • 텍스트 가로 방향의 정렬을 지정하기 위해서 사용하는 속성 • 속성 값으로 left, right, center, start, end가 있다 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • textBaseline • 텍스트 출력 기준선을 설정하는 속성 • top, middle, bottom, alphabetic, hanging, ideographic www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 이미지 관련 함수 • 첫 번째 매개변수는 캔버스 위에 출력될 이미지의 x 좌표 • 두 번째 매개변수는 y 좌표 • 세, 네 번째 매개변수는 이미지의 크기를 설정해주는 값 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 드래그 & 드롭API • draggable요소 • 드래그 대상을 지정하는 요소 • 드래그 대상은 draggable="true" 속성 지정 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 드래그 & 드롭API • ondragstart이벤트 핸들러에 함수를 지정하면 드래그가 시작될 때 dragstart이벤트가 발생하여 해당 함수(dragStart)가 호출 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 드래그 & 드롭API • 드롭대상(Target) • 끌어다 놓을 곳, 즉 draggable의 단짝으로 드래그가 가능한 아이템의 목적지에 대한 엘리먼트를 의미 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 드래그 & 드롭API • 드롭대상(Target) www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 드래그 & 드롭API • 데이터 공유를 위해서는 드래그 이벤트가 발생하면 호출되는 dragstart이벤트 처리 함수에서 dataTransfer객체의 setData()를 이용해서 전송할 데이터를 설정 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 드래그 & 드롭API • 데이터 공유를 위해서는 데이터를 전송하여 드롭 이벤트가 발생되면, 호출되는 이벤트 처리 함수인 dragDrop() 함수에서 수신받기 위해 dataTransfer객체의 getData() 함수를 호출하여 dataTransfer로부터 데이터를 꺼내어 처리 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 애플리케이션 캐시 • 인터넷이 끊긴 오프라인 상태에서도 서비스를 사용하도록 웹 애플리케이션에 필요한 리소스를 클라이언트 쪽에 캐시하는기능 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 애플리케이션 캐시 • 캐시 매니페스트 • 매번 내려받아야(캐시해야)할 파일(리소스)들을 나열해 놓은 간단한 텍스트 파일 • 파일의 첫 번째 행은 'CACHE MANIFEST'로 시작 • 이름을 명명할 때에는 관례상 확장자를'.manifest'로 저장 • 주석은 # 뒤에 기술 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 애플리케이션 캐시 • 캐시 매니페스트 • HTML 페이지에서 캐시 파일로 지정하기 위해서는 html 요소의 manifest 속성을 추가하여 캐시 매니페스트 파일 경로(URL)를 지정 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 웹 스토리지 • 클라이언트 쪽에 양이 적은 데이터를 저장해 두기 위한 저장 장치. 쿠키와 비슷한 기능을 제공하지만 쿠키와 달리, 특별한 경우를 제외하고 서버에 정보를 보내지 않음 • 유효 기간 제한이 없고 자바스크립트 객체를 저장할 수 있다. • 스토리지에값을 설정하는(저장하는) 예 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 스토리지에값을 얻어오는(읽는) 예 스토리지에값을 삭제하는 예 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 스토리지에 모든 데이터를 삭제하는 예 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • Web SQL Database • 클라이언트 쪽에서 사용할 수 있는 관계형데이터베이스 • 로컬 데이터베이스에 접근하기 위한 순서 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 데이터베이스를 열기 - openDatabase() www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 SQL을 실행하기 -executeSql() www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 웹 워커 • 웹 페이지도 이러한 멀티 스레드 구현이 가능 • 자바스크립트 코드를 UI 스레드와는 별도인 백그라운드에서 수행하는 방법 • 웹 워커를 활용한 프로그램 2개 파일 필요 • HTML 페이지, 웹 워커에 대한 코드가 있는 자바스크립트 파일 • 웹 워커 실행 • HTML 페이지에서 Worker라는 객체를 통해 • HTML 페이지에 Worker 객체를 생성하기 위해서는 워커 코드를 기술한 자바스크립트파일(.js)을 Worker 객체 생성시 전달 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • postMessage() • 메인 소스와 워커 사이에 서로 데이터를 주고받고, 비동기로 데이터를 공유하기 위한 함수 • 워커 코드에서는 onmessage이벤트 핸들러를 통해 워커를 생성한 곳으로부터 메시지를 받아옴 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 사용자의 현재 위치 정보(위도, 경도)를 얻기 위한 자바스크립트 API www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 디바이스의 현재 위치를 얻으려면 navigator에 정의된 geolocatoin객체의 getCurrentPosition() 함수를 이용하여 콜백함수 정의 getCurrentPosition() 함수는 현재 위치 정보를 얻기 위한 시도를 함 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 성공적으로 위치 정보를 얻었다면 첫 번째 매개변수에 기술한 successCallBack함수가 호출되고 에러가 발생했을 때는 두 번째 매개변수에 기술한 errorCallback을 호출 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 coords의속성 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 현재 위치를 계속 추적할 수 있는 함수인 watchPostion() 함수의 기본 형식 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 로컬 파일을 읽으려면 File API에서 제공하는 File과 FileReader인터페이스 • File 인터페이스 • 파일 이름이나 크기에 대한 정보를 알 수 있다. www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • FileReader인터페이스 • 파일의 내용을 읽어 들임` www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 클라이언트에서 동작하는 데이터베이스를 조작하는 API 오브젝트 스토어로 불림 인덱스키밸류스토리지를작성함 Indexed Database 객체의 존재를 확인하는 작업 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • open() 함수 • 데이터베이스를 열거나 지정된 이름으로 생성된 데이터베이스가 없다면 새롭게 생성 • 데이터베이스에 대한 요청을 처리하고 나면 success 혹은 error 이벤트가 발생하기 때문에 이벤트에 적당한 처리를 해야 함 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • success 이벤트가 발생하면 버전을 확인합니다. 버전이 null이면 setVersion() 함수를 호출하여 새로운 버전을 설정 www.kyobobook.co.kr

09장. HTML5의 강력해진 기능 살피기 • 새로운 버전을 설정한 후에는 데이터베이스 인터페이스(IDBDatabase) 제공해주는 createObjectStore() 함수로 객체의 저장소(Object Store)를 지정 www.kyobobook.co.kr

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