[0820] HTML5

XML 파일 생성 방법

[WebContent]→[New]→[Other...] 선택

[XML File] 선택

이름 작성 후 [Finish] 선택

SDK(Software Development Kit) - API(Application Programming Interface)

• 프로그램을 개발하기 위한 도구
• Java SDK : JDK : Java API
• 어떤 운영체제나 기기의 프로그램을 개발하고자 하면 제일 먼저 할 일이 그 운영체제나 기기의 SDK를 다운로드 받아서 설치하는 일 입니다.

• 게임에 관심 - 캔버스, 블럭체인, 보안 같은거 하면 좋음 직종에 대해서 찾아보고 좀 더 공부를 해야 함. 컨텐츠 같은거는 나이가 좀 있는 사람에게 조언을 구하는 게 좋음
• 웹 RPC.
• 캔버스, 웹소켓 중요

HTML5 문서 구조 검증

• 문서 검증 : http://html5.validator.nu
• HTML5를 지원하지 않는 브라우저 확인 : http://caniuse.com/#index
• -> web 개발 시 즐겨찾기 해두면 좋음.
• 시멘틱 태그를 써야할 경우에는 : 아래 태그를 긁어다가 넣기 : 하위 버전에서 자바스크립트를 통해 구현되게 해주는 코드

semantic 태그

• 물리적으로는 div 나 span 와 동일하게 출력되는데 의미를 부여하기 위해서 만든 태그
• <section><article><aside><nav><header><footer> 태그 등이 있습니다.(ppt.HTML5.15p)
• 제목과 같이 보여져야 하는 항목은 figure 태그로 묶고 제목은 figcaption을 이용해서 출력
• 텍스트 내에서 강조는 mark 태그를 이용 : 노란색 음영이 설정됩니다.
• 텍스트 위에 주석처럼 작은 글자를 출력하고자 하는 경우는 ruby를 이용하는 rp 와 rt 태그를 이용합니다.
• rp는 지원하지 않는 브라우저에 추가할 문자열입니다.
• 실제로 보여지는 텍스트는 rt입니다.

본<rp>(</rp><rt>문</rt><rp>)</rp>

• 지원하는 브라우저는 본 위에 문이 작게 출력합니다.
• 지원하지 않는 브라우저는 본(문) 으로 출력됩니다.

Multimedia 태그

1. video 태그

• 예전에는 비디오를 브라우저가 재생하는 것이 아니고 별도의 미디어 프로그램이 재생했다.
• 그래서 미디어 재생 프로그램이 별도로 설치되어 있어야 했다.
• 지금은(HTML5) video 태그를 이용하면 별도의 재생 프로그램 설치 없이 비디오를 재생할 수 있다.
• video 태그 안에 source 태그를 이용해서 여러 개의 비디오 링크를 설정하면, 재생 가능한 source를 검색해서 재생하게 된다.
• 파일 변환만 해두면 모든 브라우저에서 동일한 콘텐츠의 비디오를 재생할 수 있다.
• 이전의 웹 프로그래밍에서는 멀티미디어 재생기를 직접 디자인하고자 하면 silverlight 나 flex 와 같은 프레임워크를 공부해야 했지만 지금은 video 와 audio 태그를 자바스크립트에서 제어할 수 있기 때문에 별도의 프레임워크를 공부하지 않아도 멀티미디어 재생기를 직접 디자인 할 수 있습니다.

• 속성과 메서드
• src: 재생할 파일의 경로
• currentSrc: 실제로 읽어서 재생 중인 미디어 데이터의 URL
• currentTime: 현재 재생 위치를 초 단위로 반환
• startTime: 재생할 위치를 지정
• duration: 데이터의 길이를 초 단위로 반환
• paused: 일시 정지 여부
• defaultPlaybackRate: 재생 속도로 기본 값은 1.0
• playbackRate: 재생 속도
• ended: 종료 여부
• muted: 음소거 여부
• volume: 볼륨(0.0 – 1.0)
• load(): 동영상 다시 읽기
• play(): 동영상 재생
• pause(): 동영상 일시 정지

• 로딩 시 발생하는 이벤트
• emptied: 로딩과 함께 발생하는 이벤트
• loadstart: 로딩 시작
• progress: 데이터 로딩 중
• loadedmetadata: 미디어의 메타데이터를 읽어 들이고 있는 중
• loadeddata: 데이터 로딩 완료
• canplay: 재생 가능
• canplaythrough: 마지막 까지 재생 가능
• load: 다운로드 완료
• stalled: 다운로드 속도 저하
• suspend: 다운로드 중지
• abort: 에러에 의해 중지
• error: 에러 발생
• loadend: 로딩 완료(load, abort, error 이후 발생)

• 재생 시 발생하는 이벤트
• play
• playing
• timeupdate
• waiting
• ended

2. audio

• 음원 재생을 위한 태그

• Audio 속성
• src: 재생할 파일 경로
• muted: 음소거 여부
• volume: 볼륨(0.0 – 1.0)
• loop: 반복 재생 여부

3. canvas

• html5에 추가된 그리기 API
  
• 현재는 3d 캔버스도 webgl을 이용해서 가능
• webgl은 open gl의 웹 버전입니다.(opengl은 linux 나 unix 그래픽 가속 기술)
• 스마트 폰은 open gles를 이용합니다.
• windows의 그래픽 가속 기술은 direct x 입니다.
• http://www.jqplot.com/
• https://www.khronos.org/webgl/

• <canvas>태그를 이용해서 생성

<canvas id=”캔버스id” width=”너비” height=”높이”> </canvas>

• 2D 컨텍스트 생성

var  context변수 = 캔버스객체.getContext(‘2d’);

(Context : default값을 가지고 있다. 화면에 나타나는 것들은 이 것을 이용)

• 자바스크립트에서 그리는 코드 작성
• save(): 원본을 복구할 수 있게 수정되지 않은 상태의 컨텍스트 저장
• restore(): 현재 컨텍스트를 마지막 저장된 상태로 복원

1. canvas 생성

-  <canvas id="캔버스 아이디" width="너비" height="높이"></canvas>

2. 자바스크립트에서 조작

var 캔버스변수 = document.getElementById("캔버스 아이디")

//컨텍스트 가져오기

var 컨텍스트변수 = 캔버스변수.getContext("2d")

//캔버스 조작

3. Context

-  그래픽을 출력하기 위한 기본 정보를 저장하는 객체

그래픽을 출력하려면 면색, 선색, 글자색을 지정해야 하는데, 매번 지정하는 것은 번거로워서, 기본 정보를 Context에 저장해 두고, 그 저장 된 내용을 이용해서 도형이나 그림 또는 글자 등을 캔버스에 출력한다.

-  안드로이드에서도 화면에 무엇인가를 출력하기 위해서는 첫번째 매개변수로 Context 객체를 대입한다.

4. 이미지 출력

-  이미지 객체

생성

new Image()

-  이미지 소스 설정은 src 속성

절대 경로와 상대경로 모두 가능하다.

-  이미지 출력

-  컨텍스트변수.drawImage(이미지객체, x좌표, y좌표) : x좌표와 y좌표의 원본 이미지 크기대로 출력

- 컨텍스트변수.drawImage(이미지객체, x좌표, y좌표, 너비, 높이) : x좌표와 y좌표의 너비와 높이 만큼으로 확대 축소해서 출력한다.

-  컨텍스트변수.drawImage(이미지객체, 자르는x좌표, 자르는y좌표, 자르는너비, 자르는높이, 출력할x좌표, 출력할y좌표, 출력할너비, 출력할높이) : x좌표와 y좌표의 너비와 높이 만큼으로 자른 후 다음 x좌표와 y좌표에 너비와 높이만큼 확대 축소해서 출력한다.

-  이미지 파일의 내용을 비동기적으로 읽기 때문에 바로 출력하는 것은 안 되고, 이미지를 전부 로드하고 난 뒤에 출력을 해야 한다.

-  이미지가 전부 로드되고 onload 이벤트가 발생한다.