HTML5 & API 입문

Transcript HTML5 & API 입문

HTML5 & API 입문(1차)
발표자 : 김선영
책 구성과 발표 계획
Part
Part1. HTML5의 기초 지식
Chapter
발표일정
발표자
01. HTML5 개요
02. HTML 퀵 스타트
6/21
김선영
6/28
백문기
7/1
김선영
7/5
백문기
7/8
김선영
7/12
백문기
7/15
김선영
7/19
백문기
03. 캔버스
04. Video & Audio
05. 아웃라인을 위한 마크업
Part2. HTML5의 새로운 기능
06. 폼 요소
07. 드래그 & 드롭 API
08. 리치 텍스트 편집용 API
09. 그 밖의 새로운 기능과 API
10. 커뮤니케이션 API
11. 오프라인 웹 애플리케이션
12. Web Storage
13. Web SQL Database
Part3. 웹 애플리케이션 작성
용 API
14. Web Workers
15. Web Sockets
16. Geolocation API
17. Server-Sent Events
18. 그 밖의 API
1차 발표 내용
1.
2.
3.
4.
웹 표준 기술의 이해
01. HTML5 개요
02. HTML5 퀵 스타트
03. 캔버스
웹 표준 기술 이해
•
•
•
•
•
•
HTML (Hypertext Markup Language)
XML (eXtensible Markup Language)
XHTML (eXtensible + HTML)
CSS (Cascading Style Sheets)
JavaScript
DOM (Document Object Model)
웹 표준 기술 이해 #1
• HTML (Hypertext Markup Language)
–
–
–
–
웹 문서 작성을 위한 기본 언어
링크, 인용 등으로 구조적 문서를 만드는 방법 제공
미리 정해진 태그 사용
주로 보여주는 모양을 표시하는 태그
<html>
<head>
<title>웹 문서입니다.</title>
</head>
<body>
.
.
</body>
</html>
웹 표준 기술 이해 #2
• XML (eXtensible Markup Language)
–
–
–
–
웹 문서를 넘어서 모든 종류의 데이터, 문서 표현
DTD 이용 사용자 정의 태그 생성
모양보다는 내용과 구조를 표시하는 태그
문법 규칙이 엄격
<?xml version="1.0"
encoding="euc-kr"?>
<kmc>
<직원>
<사원번호>0001</사원번호>
<성명>홍길동</성명>
</직원>
<직원>
.
.
</직원>
</kmc>
+ XSL
또는 CSS
웹 표준 기술 이해 #3
• XHTML (eXtensible Hypertext Markup Language)
–
–
–
–
–
HTML을 XML 문서 규칙에 맞게 만든 것
미리 정해진 태그 사용
XML과 같이 문법 규칙이 엄격
XML이 사용되는 모든 툴 사용 가능
브라우저 지원 문제가 걸림돌
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>
<html xmlns=http://www.w3.org/1999/xhtml“ xml:lang=“ko-KR”>
<head>
<title>웹 문서입니다.</title>
</head>
<body>
.
.
</body>
</html>
웹 표준 기술 이해 #4
• CSS (Cascading Style Sheets)
– 구조적 문서(HTML, XML)에 Font, color, 레이아웃 등을 적
용하기 위해 사용되는 언어
– 가장 큰 목적은? 문서의 내용과 표현을 분리하는 것!
– 문서의 사이즈 감소로 전송되는 데이터 량 감소
– 유지보수 비용 절감
– HTML은 내용과 구조 표현 -> 검색엔진 이해
+ CSS
웹 표준 기술 이해 #5
• JavaScript
– 웹 문서가 문서가 아닌 애플리케이션으로서의 동
작을 하도록 하는 브라우저에서 실행되는 프로그
래밍 언어
• DOM (Document Object Model)
– HTML, XML 문서에 대한 프로그래밍 인터페이스
– 문서에 대한 구조적 정보를 제공, 문서 구조나 표
현 및 내용을 바꿀 수 있도록 프로그램에서 접근
하는 방법 제공
– 주요객체) window, document, element, nodeList
웹 표준 기술 이해 #5
• JavaScript & DOM 사용 예
– bold로 표기된 부분이 DOM API 사용부분, 나머
지는 JavaScript
var table = document.getElementById(“table”);
var tableAttrs = table.attributes;
for (var i = 0; i < tableAttrs.length; i++) {
if (tableAttrs[i].nodeName.toLowerCase() == “border”) {
table.border = “1”;
}
}
table.summary = “note : increased border”;
01. HTML5 개요
1.1
1.2
1.3
1.4
1.5
1.6
HTML5?
HTML5와
HTML5의
XHTML과
HTML5가
HTML5의
관련 API
새로운 기능
HTML5
만들어지기까지
현황과 미래
01. HTML5 개요
1.1 HTML5?
- HTML? 웹 문서를 작성하기 위해 사용되
는 마크업 언어
- HTML5? HTML + CSS + Javascript를 기
초로 한 Open Web Platform
01. HTML5 개요
1.2 HTML5와 관련 API
일반적으로 HTML5라 불리는 범위
Geolocation
Web Workers
Data Cache
API
File API
Web Storage
HTML5
Canvas
오프라인
커뮤니케이션
드래그&드롭
Video&Audio
Server-Sent
Events
Indexed
Database API
Web Sockets
………
Web SQL
Database
01. HTML5 개요
1.3 HTML5의 새로운 기능
1)
2)
3)
4)
더
더
더
더
풍부한 웹 애플리케이션
시맨틱한 마크업
높은 접근성
높은 호환성
01. HTML5 개요
1.3 HTML5의 새로운 기능
1) 더 풍부한 웹 애플리케이션
- 동영상이나 음성 재생(video&audio 요소)
-
자유로운 2D 그래픽(canvas 요소)
오프라인에서도 작동하는 애플리케이션
도메인 간의 통신 구현
Client측 데이터 저장(Web Storage, Web SQL DB 등)
백그라운드 처리 수행(Web Workers)
서버로부터의 데이터 푸시 & 쌍방향 통신(Web Sockets 등)
로컬 파일의 내용을 읽어들임(File API)
01. HTML5 개요
1.3 HTML5의 새로운 기능
2) 더 시맨틱한 마크업
- 시맨틱 : 사람뿐만 아니라 기계가 이해할 수 있는 정보
- 문서구조나 문서 안의 데이터의 의미를 나타내는 사양 포함
<html>
<body>
<div class=“header”>..</div>
<div class=“content”>..</div>
<div class=“footer”>..</div>
</body>
</html>
<html>
<body>
<header>..</header>
<section class=“content”>
..
</section>
<footer>..</footer>
</body>
</html>
01. HTML5 개요
1.3 HTML5의 새로운 기능
3) 더 높은 접근성
- 접근성이란? 장애가 있는 사람들에게 생활을 둘러싼 여러 가지 사
물을 이용할 수 있도록 돕는다는 개념.
- 컴퓨터의 경우 문서나 애플리케이션의 사용의 편의성
예) 시각장애자의 경우 음성브라우저 이용 웹 컨텐츠 이용.
- header, footer, section 등 프로그램이 문서구조 이해
- HTML5는 WAI-ARIA(Web Accessibility Initiative – Accessible Rich
Internet Application)라는 접근성 향상을 목표로 한 사양 포함.
01. HTML5 개요
1.3 HTML5의 새로운 기능
4) 더 높은 호환성
- 버전 간 호환성
- 후방 호환성
: 기존 HTML로 작성된 문서가 HTML5 지원 브라우저에서도 제
대로 표시되는 것
- 전방 호환성
: HTML5를 지원하지 않는 브라우저에서도 HTML5 문서 사용
- 브라우저 간 호환성
- 완전한 상호 호환을 이루고자 상세한 사양 기술
- 이미 사용되고 있는 내용에서 사양 추출
01. HTML5 개요
1.4 XHTML과 HTML5
HTML5는 여러가지 사양을 하나로 정리!
HTML5
HTML4.01
DOM HTML
XHTML1.0
HTML5
DOM HTML
XHTML5
01. HTML5 개요
1.5 HTML5가 만들어지기까지
W3C
WHATWG
1999년 HTML4.01권고, 이후 XHTML에 주력
2004년 워크숍에서 HTML 표준화를 바라는 브라
우저 제작사의 제안을 배척
2004년 애플, 모질라, 오페라 등 브라우저 제작사
들 자체 표준화 단체 결성(WHATWG)
2007년 HTML WG 발족하여 HTML5 제정에 협력
할 것을 표명
2008년 HTML5가 W3C의 초안으로 공개
2009-10 HTML5 사양 최종 심사 청구
2009-07 XHTML2 WG 활동을 중지하고 HTML5
표준화 작업 진행
사양서의 타이틀을 WHATWG HTML로 바꾸고 사
양의 업데이트를 진행 중
01. HTML5 개요
1.6 HTML5의 현황과 미래
W3C의 표준 제정 프로세스
초안(Working Draft : WD)
제정 중인 사양을 공개하는 것으로 사양에 대한 의견을 폭넓게 수렴
최종 초안(Last Call Working Draft : LCWD)
권고 후보가 되기 전 최종 검토 기간
권고 후보(Candidate Recommendation : CR)
실제 기능 적용을 요청하고 피드백을 수집.
문제가 있으면 WD 단계로 되돌아가는 일도 있음.
권고안(Processed Recommendation : PR)
둘 이상의 기능 적용 사례가 있고 테스트를 통과한 단계
권고(Recommendation : REC)
사양의 완성
02. HTML5 퀵 스타트
2.1
2.2
2.3
2.4
2.5
2.6
2.7
HTML과 XHTML
HTML 문법 기술 방법
XHTML 문법 기술 방법
HTML5의 새로운 요소
HTML5에서 없어진 요소
HTML5 문서 검증
HTML5 코딩 팁
02. HTML5 퀵 스타트
2.1 HTML과 XHTML
- HTML5로 코딩하기 위해 HTML로 기술할 것인지
XHTML로 기술할 것인지 선택
- 문법과 이용할 수 있는 기능의 차이
- HTML5 : HTML5 사양에 정의된 HTML 문법 사양
- XHTML5 : HTML5 사양에 정의된 XHTML 문법 사양
02. HTML5 퀵 스타트
2.2 HTML 문법 기술 방법
- MIME 타입 : text/html
- HTML5 파일 확장자 : .html 또는 .htm
- HTML5 파일의 시작부분에 DOCTYPE 선언
: <!DOCTYPE html>
- 문자 인코딩 지정 방법
: <meta charset=“UTF-8”> 또는
<meta http-equiv=“Content-Type”
content=“text/html; charset=UTF-8”> 이용
02. HTML5 퀵 스타트
2.2 HTML 문법 기술 방법
- HTML 문법 상세 몇 가지..
1) 종료 태그를 기술해서는 안되는 요소
: meta, area, base, br, col, command, embed, hr, img,
input, keygen, link, param, source
- 틀린 예)
<meta charset=“UTF-8”></meta>
- 맞는 예)
<meta charset=“UTF-8”>
<meta charset=“UTF-8”/>
02. HTML5 퀵 스타트
2.2 HTML 문법 기술 방법
- HTML 문법 상세 몇 가지..
2) 상황에 따라 태그를 생략할 수 있는 요소
<table>
<tr><th>사번 <th>성명
<tr><td>001 <td>소지섭
<tr><td>002 <td>유지태
</table>
<table>
<tbody>
<tr><th>사번</th> <th>성명</th></tr>
<tr><td>001</td> <td>소지섭</td></tr>
<tr><td>002</td> <td>유지태</td></tr>
</tbody>
</table>
02. HTML5 퀵 스타트
2.2 HTML 문법 기술 방법
- HTML 문법 상세 몇 가지..
3) 속성에 관해
- 속성 값에 인용부호 생략 가능
- true/false 값을 가지는 속성 속성 값 생략 가능
- 값이 false인 경우는 속성 지정 자체를 하지 않음.
<input id=“age” type=“number” disabled>
<input id=age type=number disabled=“”>
<input id=age type=number disabled=“disabled”>
<input id=“age” type=“number”>
02. HTML5 퀵 스타트
2.2 HTML 문법 기술 방법
- HTML을 이용한 마크업 예
<!DOCTYPE html>
<html>
<head>
<title>문서의 제목입니다.</title>
<meta charset=“UTF-8”>
<style type=“text/css”>h1 {font-size: 2em;}</style>
</head>
<body>
<h1>HTML을 이용한 마크업 예제</h1>
<p>단락 1</p>
<input type=“text” disabled>
</body>
</html>
02. HTML5 퀵 스타트
2.3 XHTML 문법 기술 방법
- MIME 타입 : application/xhtml+html, text/xml,
application/xml 등 내용이 xml임을 나타내는 것
- XHTML 네임스페이스
: http://www.w3c.org/1999/xhtml
- 문자 인코딩 지정 방법
: xml 규직에 따라 xml선언부에 encoding 속성 이용
<?xml version=“1.0” encoding=“UTF-8”?>
- 문법 상세 : xml문법에 따라 마크업 수행
02. HTML5 퀵 스타트
2.3 XHTML 문법 기술 방법
- XHTML을 이용한 마크업 예
<?xml version=“1.0” encoding=“UTF-8”?>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<title>문서의 제목입니다.</title>
<meta charset=“UTF-8”>
<style type=“text/css”>h1 {font-size: 2em;}</style>
</head>
<body>
<h1>HTML을 이용한 마크업 예제</h1>
<p>단락 1</p>
<input type=“text” disabled>
</body>
</html>
02. HTML5 퀵 스타트
2.4 HTML5의 새로운 요소
- 문서 구조에 관한 것
: section, article, aside, nav, footer, header, hgroup
- 외부 콘텐츠의 삽입
: figure, video, audio, source, canvas, embed
-폼
: keygen, output, progress, meter
- 텍스트 및 기타
: mark, ruby/rt/rp, time, command, details, datalist
02. HTML5 퀵 스타트
2.5 HTML5에서 없어진 요소
-
주로 화면 표현과 관련된 요소
big, blink, marquee, frame관련 요소, applet 등
후방 호환성을 위해 브라우저에서는 제대로 표시
밸리데이터(검증용 S/W) 문법 체크 시 에러나 경고
가능한 사용하지 않도록 주의
2.6 HTML5 문서 검증
- http://html5.validator.nu
02. HTML5 퀵 스타트
2.7 HTML5 코딩 팁
- 오래된 브라우저에서 새로운 요소를 사용하려면..
: 새로운 요소가 의도대로 표시되도록 CSS 이용
예1) 새로운 요소 중 block요소로 표시되는 것
address, article, aside, figure, footer, header, hgroup, menu, nav,
section {
display: block;
}
예2) 기본적으로 표시되지 않는 것
[hidden], command, datalist, menu[type=context], rp, source {
display: none;
}
02. HTML5 퀵 스타트
2.7 HTML5 코딩 팁
- Hack : 브라우저 간의 CSS 해석 오류나 차이를 이용하
여 특정 브라우저만을 위한 CSS를 만드는 방법
- IE에 한정된 약간의 Hack
: IE에서는 브라우저가 알지 못하는 요소에 대해 CSS 스타일 지정이 잘 작
동하지 않음.


03. Canvas
3.1 캔버스를 이용한 그래픽 조작
3.2 캔버스 사용 방법
3.3 사각형 그리기
3.4 이미지 삽입
3.5 복잡한 선이나 도형 그리기
3.6 선과 채우기의 스타일 지정
3.7 선 스타일 지정
3.8 그림자 효과
3.9 그림 영역이 겹칠 때의 동작 지정
3.10 텍스트 삽입
3.11 그래픽 변형하기
3.12 그리기 컨텍스트 상태의 저장과 복원
3.13 픽셀로 캔버스에 그리기
3.14 이미지를 URL로 얻기
3.15 캔버스 보안
3.16 캔버스를 이용한 애니메이션의 기본
3.17 캔버스 관련 API
3.18 캔버스 관련 샘플
03. Canvas
3.1 캔버스를 이용한 그래픽 조작
- canvas요소
: 그래픽을 자유롭게 그릴 수 있는 고정된 영역
<canvas id="canvas1" width="300“ height="200“ />
- 2010년 1월 IE를 제외한 주요 브라우저에서 사용 가능
- WebGL(http://khronos.org) 사양을 기본으로 한 3D 그
래픽용 캔버스도 실험적으로 적용되고 있음.
03. Canvas
3.2 캔버스 사용 방법
1) canvas 태그 기술
2) canvas DOM 객체 생성
3) getContext(“2d”) 메소드로 그리기 컨텍스트 생성
4) 그리기 컨텍스트 메소드로 그림 그리기
※ 그리기 컨텍스트 예) 그림3.1
<canvas id="canvas1" width="300" height="200"></canvas>
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
context.fillRect(0, 0, 150, 100);
context.fillText("Hello, Canvas!", 155, 110);
03. Canvas
3.3 사각형 그리기
- strokeRect(x, y, w, h) : 사각형 윤곽 그리기
- fillRect(x, y, w, h) : 사각형 색으로 채우기
- clearRect(x, y, w, h) : 지정된 사각형 영역 지우기
03. Canvas
3.4 이미지 삽입
- drawImage(image, dx, dy) : 이미지 원래 크기로 삽입
- drawImage(image, dx, dy, dw, dh) : 사이즈, 위치 지정
- drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
: 이미지로부터 일부분 잘라내어 삽입
- image : img, video, canvas 요소의 DOM객체 지정 가능
- 주의! Image요소의 로딩이 완료된 후 drawImage 호출하기!
- 예제) 그림 3.4
sy
sx
sh
dy
sw
dx
dh
dw
03. Canvas
3.5 복잡한 선이나 도형 그리기
- 패스(Path) : 캔버스 API를 이용해서 그려진 선들의 집합
- 서브패스 : 패스를 구성하는 하나하나의 선
사각형 패스
각 변은 서브 패스
03. Canvas
3.5 복잡한 선이나 도형 그리기
1) beginPath()로 패스 그리기 시작
2) 캔버스 API 이용하여 패스 그리기
3) stroke()(선그리기)나 fill()(채우기)을 이용하여 화면에 표시
4) closePath() 패스 그리기 종료, 생략 가능
※ 그리기 예제)
그림 3.6 2차 베지에 곡선
그림 3.8 3차 베지에 곡선
그림 3.10 arcTo() 직선과 이에 접하는 원호그리기
그림 3.12, 그림 3.13, 그림 3.14 arc() 원호 그리기
03. Canvas
3.5 복잡한 선이나 도형 그리기
-
패스를 기준으로 그래픽을 나타내기 위한 API
stroke() : 패스를 선으로 표현
fill() : 패스 내부를 채움.
clip() : 패스 내부를 클리핑 영역으로 지정, 그려지는 그
림은 클리핑 영역 안쪽에만 표시. 오린 듯한 이미지 삽입
가능.
그림 3.15 클리핑 예제
03. Canvas
3.6 선과 채우기의 스타일 지정
- strokeStyle 속성 : stroke()로 그려진 선 속성
- fillStyle 속성 : fill(), fillRect()의 채우기 스타일 속성
- 위 속성에 지정할 수 있는 값
: CSS컬러, 그라데이션, 패턴
1) CSS 색 지정 방법 전부 이용가능
: ‘red’, ‘#FF0000’, rgb(255,0,0) 등
2) 그라데이션 지정 – 선형(그림 3.16), 원형(그림 3.17)
3) 패턴 지정 : createPattern(image, repeat) 그림 3.18
- image : img, video, 캔버스 지정 가능
- repeat : repeat, repeat-x, repeat-y, no-repeat
4) 투명도 지정 : globalAlpha 속성(0.0~1.0) 그림 3.18_2
03. Canvas
3.7 선 스타일 지정
- lineWidth : 선의 굵기 지정, 픽셀 단위 정수로
- lineCap : 선의 끝점 스타일 지정 (그림 3.19)
butt
round
square
실제 선의 길이
- lineJoin : 선들이 교차했을 때 생기는 각의 스타일 지정 (그림 3.20)
- miterLimit : lineJoin=‘miter’지정 시 생기는 삼각형의 길이 제한
butt
각을 뾰족하게 하려고 생기는 삼각형(ⓐ)
round
miter
Miter 한계 길이(lineWidth%2*miterLimt)
-> 위 삼각형(ⓐ)의 길이가 Miter 한계 길이를 넘기면 삼각형 표시X
03. Canvas
3.8 그림자 효과
-
간단하게 선이나 도형에 그림자 추가 가능
그림자 관련 속성 4가지
shadowColor : 그림자 색깔(기본값 투명)
shadowOffsetX : 그림자 표시할 X좌표, 대상으로 부터
몇 픽셀 떨어졌는지 지정(기본값 0)
- shadowOffsetY : 그림자 표시할 X좌표 (기본값 0)
- shadowBlur : 그림자의 흐림 정도(기본값 0)
- 예제) 그림3.23
03. Canvas
3.9 그림 영역이 겹칠 때의 동작 지정
- 새로운 도형을 그릴 때 그려진 이미지와 겹칠 때의 처리
- globalCompositeOperation 속성값(기본 source-over)
- source-atop : 겹쳐진 부분에만 나중에 그린 그림 표시(그림3.24)
- source-in : 겹쳐진 부분만 표시(그림3.25)
- source-out : 나중에 그린 그림이 겹치지 않은 곳에만 표시(그림3.26)
- source-over : 나중에 그린 그림이 위에 겹쳐져 표시(그림3.27)
- destination-atop : 겹친 부분에만 먼저 그린 그림이 표시(그림3.28)
- destination-in : 겹친 부분만 표시(그림3.29)
- destination-out : 먼저 그린 그림이 겹치지 않은 곳에만 표시(그림3.30)
- destination-over : 먼저 그린 그림이 위에 겹쳐져 표시(그림3.31)
- lighter : 모두 표시, 겹친 부분은 두 그림을 합친 것(그림3.32)
- copy : 나중에 그린 그림만 표시(그림3.33)
- xor : 모두 표시, 겹친 그림은 표시하지 않음(그림3.34)
03. Canvas
3.10 텍스트 삽입
-
캔버스에 문자열 삽입
fillText(text,x,y,maxWidth) : 채워진 텍스트
strokeText(text,x,y,maxWidth) : 텍스트의 외곽선만 표시
font 속성 : 글꼴, 글꼴 크기 지정
textAlign 속성 : 문자열 가로방향 위치
left, right, center, start, end
- textBaseline : 텍스트가 표시되는 기준선
top, hanging, middle, alphabetic, ideographic, bottom
- measureText(text) : 삽입한 문자열의 여러 정보 확인
- 예제) 그림3.40
03. Canvas
3.11 그래픽 변형하기
-
좌표를 변환하여 그래픽 변환
scale(x,y) : 가로배율 x, 새로배율 y로 확대, 축소
rotate(angle) : 지정한 각도(angle, 2π=360°) 만큼 회전
translate(x,y) : 가로 x, 세로 y만큼 좌표 이동
예제) 그림3.41
transform(m11, m12, m21, m22, dx, dy)
: 좌표 변환 매트릭스에 직접 변경 적용
- 예제) 그림3.43
03. Canvas
3.12 그리기 컨텍스트 상태의 저장과 복원
-
save() : 그리기 컨텍스트 상태 저장
restore() : save()로 저장한 그리기 컨텍스트 상태 복원
캔버스에 그려진 그래픽이나 패스가 저장되는 것 아님.
좌표 변환 매트릭스, fillStyle, lineWidth, font 등과 같은
그리기 컨텍스트의 상태를 저장하는 것!
- 예제) 그림3.41_2 (그림3.41 소스와 비교하여 보기)
03. Canvas
3.13 픽셀로 캔버스에 그리기
- 비트맵 이미지 픽셀 조작을 통해 그리거나 변경
1) ImageData형 객체 생성
- createImageData(), getImageData()
2) 픽셀 조작
3) 변경된 비트맵을 캔버스에 다시 그리기
- putImageData()
- 픽셀 조작 예) 그림 3.47
03. Canvas
3.13 픽셀로 캔버스에 그리기
- ImageData 객체의 속성
- width : 이미지 너비
- height : 이미지 높이
- data : 픽셀데이터를 나타내는 숫자(0~255)로 이루어진 1차원 배열
ImageData.data.length = (이미지 픽셀 수) * 4
1픽셀에 해당하는 데이터
적
청
녹
투명도
0~255
0~255
0~255
0~255
ImageData.data[0]
ImageData.height
ImageData.width
ImageData.data의 끝
03. Canvas
3.14 이미지를 URL로 얻기
- 그려진 이미지를 URL로 얻을 수 있음.
- canvas.toDataURL(type)
: type은 이미지의 MIME type(기본값 ‘image/png’)
- 이미지를 URL로 얻는다는 것은 이미지를 문자열로 취급
할 수 있다는 것을 의미!
: 이미지 문자열을 서버에 저장하거나 PC에 저장
- 이미지 URL 형식
data:<MIME타입>;base64,<이미지 데이터를 base64로 인코딩한 문자열>
예) data:image/png;base64,iVBORw0KGgo……
03. Canvas
3.15 캔버스 보안
- Javascript 애플리케이션은 기본적으로 자신의 도메인과
만 스크립트나 통신을 이용해 데이터 주고받기가 가능
- 캔버스에서도 다른 도메인에서 참조한 요소의 내용은
읽기만 가능. 스크립트를 이용한 접근은 제한!
-> 접근 시 SECURITY_ERR 예외 발생
03. Canvas
3.16 캔버스를 이용한 애니메이션의 기본
- 캔버스로 프로그램에 의한 애니메이션 구현 가능
- 주의할 점! 캔버스에 그려진 이미지는 이동 불가능
→ 앞서 그린 이미지를 지우고 다시 그리기
- 일정 부분을 지우고 다시 그리는 방법은 복잡하므로 일
정 간격으로 캔버스 전체를 다시 그리는 방법 이용
- setTimeout()이나 setInterval()을 이용하여 반복
setTimeout(code, delay) : delay(ms) 후 code 실행
setInterval(code, delay) : delay간격으로 code 반복 실행
- 예제) 그림 3.48
03. Canvas – Sample #1
• Oooze 게임
– http://www.gamesforthebrain.com/game/oo
oze/
03. Canvas – Sample #2
• Flashy Tetris
– http://aduros.emufarmers.com/easel/
03. Canvas – Sample #3
• bomomo
– http://bomomo.com/
03. Canvas – Sample #4
• Canvas Painter
– http://caimansys.com/painter/index.html
03. Canvas – Sample #5
• Mandelbrot Set(프랙탈 뷰어)
– http://www.atopon.org/mandel/
03. Canvas – Sample #6
• Canvas Slideshow
– http://www.lo2k.net/v7/lab/flickr/index/flickr_id/
28791827@N00
03. Canvas – Sample #7
• Tilt-Shift photo effect in Canvas
– http://www.p01.org/releases/Tilt-shift_photo_effe
ct_in_Canvas/
03. Canvas – Sample #8
• Canvas Animation
– http://cs.helsinki.fi/u/ilmarihe/canvas_animati
on_demo/mozcampeu09.html
• A canvas slippy map
– http://concentriclivers.com/slippymap.html
03. Canvas – 참고 Site
• HTML5 Spec (WD)
- HTML5
- HTML5 Canvas 2D Context
• Canvas Animation 예제
– HTML Canvas Demos
– 모질라 개발자 센터

HTML5 & API 입문

Transcript HTML5 & API 입문

Directory