HTML5 & API 입문(1차) 발표자 : 김선영.

HTML5 & API 입문(1차) 발표자 : 김선영

책 구성과 발표 계획 HTML5 개요 : HTML5란, HTML5의 새로운 기능 등
Part Chapter 발표일정 발표자 Part1. HTML5의 기초 지식 01. HTML5 개요 6/21 김선영 02. HTML 퀵 스타트 Part2. HTML5의 새로운 기능 03. 캔버스 04. Video & Audio 6/28 백문기 05. 아웃라인을 위한 마크업 06. 폼 요소 7/1 07. 드래그 & 드롭 API 08. 리치 텍스트 편집용 API 7/5 09. 그 밖의 새로운 기능과 API Part3. 웹 애플리케이션 작성용 API 10. 커뮤니케이션 API 7/8 11. 오프라인 웹 애플리케이션 12. Web Storage 7/12 13. Web SQL Database 14. Web Workers 7/15 15. Web Sockets 16. Geolocation API 7/19 17. Server-Sent Events 18. 그 밖의 API HTML5 개요 : HTML5란, HTML5의 새로운 기능 등 HTML5 퀵 스타트 : HTML5로 코딩을 시작하기 위한 기본지식 Canvas : 2D 그래픽을 자유롭게 표현할 수 있는 요소 Video & Audio : HTML5 이전에는 Flash나 Silverlight 등 외부 플러그인 없이 동영상이나 오디오 실행 불가능. -> HTML5 지원 브라우저에서는 이러한 플러그인 없이 미디어 Data를 재생하는 것이 가능함. 아웃라인을 위한 마크업 : HTML5에서 새롭게 추가된 아웃라인 관련 태그 설명 폼 요소 : input, select 등 사용자가 입력하거나 선택하는 UI관련 요소로 이전에는 Javascript로 처리하던 입력보조나 입력값 검증을 HTML 마크업만으로 실현 가능 드래그 & 드롭 API : 웹 이외의 다른 애플리케이션과 드래그 & 드롭 기능 사용 가능 리치 텍스트 편집용 API : WYSIWYG 에디터나 맞춤법 검사 기능 구현에 도움이 되는 리치 텍스트 편집을 위한 API 그 밖의 새로운 기능과 API : 캡션을 가진 그래프나 이미지 등을 삽입하기 위한 figure 요소, 한자 등의 발음을 표기하기 위한 ruby 요소, 메뉴를 표현하기 위한 기능 등 소개 커뮤니케이션 API : 윈도우나 백그라운드 태스크(Web Workers), 서버에서 동작하는 프로그램과 비동기 방식으로 메시지를 주고 받을 수 있는 API 오프라인 웹 애플리케이션 : 네트워크에 연결되어 있지 않아도 동작하는 애플리케이션 구축 가능 Web Storage : Client Disk에 소량의 Data를 저장해두기 위한 스토리지(과거에는 Cookie 사용) Web SQL Database : Client 측에서 사용 가능한 관계형 DB Web Workers : Javascript 코드를 백그라운드로 실행시키기 위한 기술. UI스레드와는 별도의 백그라운드 프로세스로 Javascript 코드 실행 가능 Web Sockets : 브라우저와 서버간 소켓 연결 기능 제공. 소켓 연결이 이루어지면 Client나 Server쪽 어느곳에서나 아무때나 메시지 전송 가능 Geolocation API : 디바이스의 위치 정보를 얻기 위한 API Server-Sent Events : 서버로부터의 Data 푸시를 지원하기 위한 client측 API와 푸시 data를 정의한 사양 그 밖의 API : 로컬 파일에 접근할 수 있는 File API, XMLHttpRequest Level2, Indexed Database API 등 소개

1차 발표 내용 웹 표준 기술의 이해 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> . Hypertext? : 정보와 정보 사이를 쉽게 접근할 수 있도록 전자적 연결을 통한 정보를 제공하는 것. 링크로 연결되는 문서를 의미 서로 연결되어 있으므로 참조나 설명이 용이하고 자신이 원하는 내용으로의 이동이 간편함. . Markup? : 문서 내용의 의미와 표현 양식을 알려주기 위해 추가되는 코드나 태그 집합.

웹 표준 기술 이해 #2 XML (eXtensible Markup Language)
웹 문서를 넘어서 모든 종류의 데이터, 문서 표현 DTD 이용 사용자 정의 태그 생성 모양보다는 내용과 구조를 표시하는 태그 문법 규칙이 엄격 <?xml version="1.0" encoding="euc-kr"?> <kmc> <직원> <사원번호>0001</사원번호> <성명>홍길동</성명> </직원> . </kmc> + XSL 또는 CSS . DTD (Document Type Definition) : 새롭게 정의한 태그들 간의 관계나 이들이 표현하는 문서의 구조 등을 표현하기 위해 사용 기업 간 정보 전송 시 주고받는 정보의 규칙을 정의하고 검증하기 위한 용도로 사용. . XSL (eXtensible Stylesheet Language) . 문법 규칙 엄격 : 대소문자 구별, 문서의 최상위 태그는 반드시 하나. 종료 태그 반드시 존재. 속성값은 반드시 인용 부호로 감싼다 등..

웹 표준 기술 이해 #3 XHTML (eXtensible Hypertext Markup Language)
HTML을 XML 문서 규칙에 맞게 만든 것 미리 정해진 태그 사용 XML과 같이 문법 규칙이 엄격 XML이 사용되는 모든 툴 사용 가능 브라우저 지원 문제가 걸림돌 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” <html xmlns= xml:lang=“ko-KR”> <head> <title>웹 문서입니다.</title> </head> <body> . </body> </html> . XHTML은 브라우저 지원 문제가 걸림돌 . 문법 엄격 : 모든 요소, 속성은 소문자 모든 요소는 반드시 중첩 반드시 닫는 태그 속성은 반드시 속성값과 함께 사용 자바스크립트에서 html 태그가 쓰이는 경우 <와 같은 문자는 오류 -> \<와 같이 이스케이스 시키거나 CDATA Section으로 묶어줌.

웹 표준 기술 이해 #4 CSS (Cascading Style Sheets)
구조적 문서(HTML, XML)에 Font, color, 레이아웃 등을 적용하기 위해 사용되는 언어 가장 큰 목적은? 문서의 내용과 표현을 분리하는 것! 문서의 사이즈 감소로 전송되는 데이터 량 감소 유지보수 비용 절감 HTML은 내용과 구조 표현 -> 검색엔진 이해 + CSS . 과거 HTML은 표현을 위한 용도로 주로 사용 : 테이블은 원래 표 형식의 데이터를 위한 것인데 레이아웃을 위한 용도로 사용, h1 태그 등도 문서의 제목을 나타내기 위한 태그로 검색엔진이 중요하게 보는 항목 -> 기본 표현이 맘에 들지 않는다는 이유로 bold나 다른 태그 이용하여 스타일 입히는 형태로 사용 . 현재 추세는 HTML은 구조를 작성하는데 사용하고 CSS로 레이아웃, 폰트, 색상 등의 표현을 나타내는데 사용

웹 표준 기술 이해 #5 JavaScript DOM (Document Object Model)
웹 문서가 문서가 아닌 애플리케이션으로서의 동작을 하도록 하는 브라우저에서 실행되는 프로그래밍 언어 DOM (Document Object Model) HTML, XML 문서에 대한 프로그래밍 인터페이스 문서에 대한 구조적 정보를 제공, 문서 구조나 표현 및 내용을 바꿀 수 있도록 프로그램에서 접근하는 방법 제공 주요객체) window, document, element, nodeList . JavaScript는 구조적, 객체지향형 프로그래밍 가능 . DOM은 특정 언어에 종속적인 Spec는 아님. (자바 애플리케이션에서도 XML 문서를 처리하기 위해 DOM 사용) . HTML이나 XML의 문서 내용이 DOM에 저장되고 JavaScript를 통해서 문서에 접근하고 조작.

웹 표준 기술 이해 #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 HTML5? 1.2 HTML5와 관련 API 1.3 HTML5의 새로운 기능 1.4 XHTML과 HTML5 1.5 HTML5가 만들어지기까지 1.6 HTML5의 현황과 미래

01. HTML5 개요 1.1 HTML5? - HTML? 웹 문서를 작성하기 위해 사용되는 마크업 언어 - HTML5? HTML + CSS + Javascript를 기초로 한 Open Web Platform

01. HTML5 개요 1.2 HTML5와 관련 API Canvas 오프라인 일반적으로 HTML5라 불리는 범위 HTML5
커뮤니케이션 드래그&드롭 Video&Audio Geolocation Web Workers Data Cache API File API Server-Sent Events Indexed Database API Web SQL Database Web Storage Web Sockets ……… 일반적으로 HTML5라 불리는 범위 HTML5

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> 시맨틱 웹이란 컴퓨터가 정보 자원의 뜻을 이해하고 논리적 추론까지 할 수 있는 지능형 기술을 뜻한다. 사람이 읽기에도 가독성이 떨어지지 않을 뿐 아니라 프로그램이 문서 구조의 의미를 이해할 수 있음. 검색엔진이나 리스트 광고 등 HTML을 파싱하여 처리하는 서비스의 정확성 향상

01. HTML5 개요 1.3 HTML5의 새로운 기능 3) 더 높은 접근성
- 접근성이란? 장애가 있는 사람들에게 생활을 둘러싼 여러 가지 사물을 이용할 수 있도록 돕는다는 개념. - 컴퓨터의 경우 문서나 애플리케이션의 사용의 편의성 예) 시각장애자의 경우 음성브라우저 이용 웹 컨텐츠 이용. - header, footer, section 등 프로그램이 문서구조 이해 - HTML5는 WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Application)라는 접근성 향상을 목표로 한 사양 포함. WAI-ARIA를 사용하여 임의의 요소에 역할과 상태를 나타내는 속성을 부여 -> 스크린 리더에 그 의미를 전달할 수 있음.

01. HTML5 개요 1.3 HTML5의 새로운 기능 4) 더 높은 호환성 - 버전 간 호환성 - 후방 호환성
- 전방 호환성 : HTML5를 지원하지 않는 브라우저에서도 HTML5 문서 사용 - 브라우저 간 호환성 - 완전한 상호 호환을 이루고자 상세한 사양 기술 - 이미 사용되고 있는 내용에서 사양 추출 Ruby(한자 발음 등을 표시하기 위한 요소)는 IE에서 사용되던 것 Canvas는 사파리에서 사용되던 것

01. HTML5 개요 1.4 XHTML과 HTML5 HTML5는 여러가지 사양을 하나로 정리! HTML5 XHTML5
DOM HTML HTML4.01 XHTML1.0 HTML5는 여러가지 사양을 하나로 정리! HTML4.01을 XML 형식으로 기술할 수 있도록 한 것 -> XHTML1.0 DOM? 문서 구조를 다루기 위한 API 언어에 의존하지 않는 DOM Level2 Core라는 사양을 HTML/XHTML에 맞게 확장시킨 것이 DOM HTML HTML5 사양에 정의된 DOM 사양 -> DOM HTML HTML5 사양에 정의된 HTML 문법 사양 -> HTML5 HTML5 사양에 정의된 XHTML 문법 사양 -> XHTML5

01. HTML5 개요 1.5 HTML5가 만들어지기까지 W3C WHATWG
1999년 HTML4.01권고, 이후 XHTML에 주력 W3C WHATWG 2004년 워크숍에서 HTML 표준화를 바라는 브라우저 제작사의 제안을 배척 2007년 HTML WG 발족하여 HTML5 제정에 협력할 것을 표명 2008년 HTML5가 W3C의 초안으로 공개 XHTML2 WG 활동을 중지하고 HTML5 표준화 작업 진행 2004년 애플, 모질라, 오페라 등 브라우저 제작사 들 자체 표준화 단체 결성(WHATWG) HTML5 사양 최종 심사 청구 사양서의 타이틀을 WHATWG HTML로 바꾸고 사양의 업데이트를 진행 중 W3C : Web을 만든 팀 버너스 리가 1994년 설립한 비영리단체로 웹에서 사용되는 기술의 표준화를 추진하는 것을 목적으로 함. WHATWG : Web Hypertext Application Technology Working Group, 이미 널리 보급된 HTML의 업데이트를 재개해야 한다는 브라우저 제작사의 요구를 W3C가 거절하여 주요 브라우저 제쟉사인 애플, 모질라, 오페라 에서 공동으로 만든 별도의 워킹 그룹(2004년 발족) Google I/O 2009 개발자 콘퍼런스에서 차세대 웹 표준으로 적극 추천됨에 따라 단숨에 전 세계 개발자들의 주목을 받게 됨. WHATWG은 HTML5의 표준화 작업을 W3C에 넘기고 자체적으로 HTML의 업데이트를 계속 진행함.

01. HTML5 개요 1.6 HTML5의 현황과 미래 W3C의 표준 제정 프로세스 초안(Working Draft : WD)
제정 중인 사양을 공개하는 것으로 사양에 대한 의견을 폭넓게 수렴 최종 초안(Last Call Working Draft : LCWD) 권고 후보가 되기 전 최종 검토 기간 권고 후보(Candidate Recommendation : CR) 실제 기능 적용을 요청하고 피드백을 수집. 문제가 있으면 WD 단계로 되돌아가는 일도 있음. WHATWG에 의해 최종 심사 청구(Last Call)된 것으로 W3C 내에서는 아직 초안(Working Draft 단계) -> 이후 사양의 논의에 따라 큰 폭으로 변할 가능성이 있으므로 항상 염두에 두고 W3C의 표준화 작업 주시!! 권고안(Processed Recommendation : PR) 둘 이상의 기능 적용 사례가 있고 테스트를 통과한 단계 권고(Recommendation : REC) 사양의 완성

02. HTML5 퀵 스타트 2.1 HTML과 XHTML 2.2 HTML 문법 기술 방법 2.3 XHTML 문법 기술 방법 2.4 HTML5의 새로운 요소 2.5 HTML5에서 없어진 요소 2.6 HTML5 문서 검증 2.7 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”> 이용 DOCTYPE 선언 : 브라우저에 HTML5 문서라는 것을 알려주는 기능으로 이 DOCTYPE을 보고 브라우저는 최신 렌더링 모드를 사용하여 문서를 해석함. -> 이 선언을 사용하지 않으면 브라우저가 최신 렌더링 모드를 사용하지 않아 HTML5 일부 기능이 동작하지 않음.

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> 외부 표 링크 종료 태그를 생략할 수 있는 것은 대부분 같은 종류의 요소가 반복되는 경우 (li, tr 등) 요소의 태그를 생략할 경우 그 요소는 암묵적으로 존재한다는 것에 주의

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 네임스페이스 : - 문자 인코딩 지정 방법 : xml 규직에 따라 xml선언부에 encoding 속성 이용 <?xml version=“1.0” encoding=“UTF-8”?> - 문법 상세 : xml문법에 따라 마크업 수행 간단한 xml 문법 모든 요소나 속성은 반드시 소문자 이어야 함. 속성값은 반드시 인용 부호로 감싸야 함. 종료태그는 생략할 수 없으나 요소 값이 빈 경우 시작태그를 />로 끝냄으로써 종료태그를 대신할 수 있음.

02. HTML5 퀵 스타트 2.3 XHTML 문법 기술 방법 - XHTML을 이용한 마크업 예
<?xml version=“1.0” encoding=“UTF-8”?> <html xmlns= <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에서 없어진 요소 2.6 HTML5 문서 검증 - 주로 화면 표현과 관련된 요소
- big, blink, marquee, frame관련 요소, applet 등 - 후방 호환성을 위해 브라우저에서는 제대로 표시 - 밸리데이터(검증용 S/W) 문법 체크 시 에러나 경고 - 가능한 사용하지 않도록 주의 2.6 HTML5 문서 검증 - 후방 호환성 : 기존 HTML 문법으로 작성된 문서가 HTML5 지원 브라우저에서도 제대로 표시되는 것

02. HTML5 퀵 스타트 2.7 HTML5 코딩 팁 - 오래된 브라우저에서 새로운 요소를 사용하려면..
: 새로운 요소가 의도대로 표시되도록 CSS 이용 예1) 새로운 요소 중 block요소로 표시되는 것 address, article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } 웹 브라우저는 자신이 알지 못하는 요소는 무시함. Block요소 : 요소의 전후에 줄 바꿈이 자동으로 삽입되는 요소 예2) 기본적으로 표시되지 않는 것 [hidden], command, datalist, menu[type=context], rp, source { display: none; }

02. HTML5 퀵 스타트 2.7 HTML5 코딩 팁 - Hack : 브라우저 간의 CSS 해석 오류나 차이를 이용하여 특정 브라우저만을 위한 CSS를 만드는 방법 - IE에 한정된 약간의 Hack : IE에서는 브라우저가 알지 못하는 요소에 대해 CSS 스타일 지정이 잘 작동하지 않음.  - 위의 IE Hack : Javascript를 이용해 억지로 요소를 인식시키는 방법 -> 알지 못하는 요소가 렌더링 되기 전 JS에서 createElement()를 이용하면 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 캔버스 관련 샘플 캔버스 : 자유롭게 2D 그래픽을 그리기 위한 HTML5의 새로운 요소

03. Canvas 3.1 캔버스를 이용한 그래픽 조작 - canvas요소 : 그래픽을 자유롭게 그릴 수 있는 고정된 영역
<canvas id="canvas1" width="300“ height="200“ /> - 2010년 1월 IE를 제외한 주요 브라우저에서 사용 가능 - WebGL( 사양을 기본으로 한 3D 그래픽용 캔버스도 실험적으로 적용되고 있음. 캔버스의 기본 사용 방법과 대표적인 API를 주로 설명

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); 캔버스의 기본 사용 방법과 대표적인 API를 주로 설명

03. Canvas 3.3 사각형 그리기 - strokeRect(x, y, w, h) : 사각형 윤곽 그리기
- fillRect(x, y, w, h) : 사각형 색으로 채우기 - clearRect(x, y, w, h) : 지정된 사각형 영역 지우기 캔버스의 기본 사용 방법과 대표적인 API를 주로 설명

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 sx sy sw sh dx dy dw dh 캔버스의 기본 사용 방법과 대표적인 API를 주로 설명

03. Canvas 3.5 복잡한 선이나 도형 그리기 - 패스(Path) : 캔버스 API를 이용해서 그려진 선들의 집합
- 서브패스 : 패스를 구성하는 하나하나의 선 사각형 패스 각 변은 서브 패스 캔버스의 기본 사용 방법과 대표적인 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() 원호 그리기 베지에 곡선 : n개의 점으로 이루어진 (n-1)차 곡선 각 인수의 의미는 마지막 API 참조!!

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’지정 시 생기는 삼각형의 길이 제한 각을 뾰족하게 하려고 생기는 삼각형(ⓐ) Miter 한계 길이(lineWidth%2*miterLimt) butt round miter -> 위 삼각형(ⓐ)의 길이가 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 textBaseline 브라우저에 따라 조금씩 다르게 동작함. measureText : 반환 값은 TextMatrics객체로, 현재 사양에서는 width라는 속성만 갖고 있음. -> 삽입한 텍스트의 가로폭을 구해 배경색 삽입

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 소스와 비교하여 보기) textBaseline 브라우저에 따라 조금씩 다르게 동작함. measureText : 반환 값은 TextMatrics객체로, 현재 사양에서는 width라는 속성만 갖고 있음. -> 삽입한 텍스트의 가로폭을 구해 배경색 삽입

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

03. Canvas – Sample #2 Flashy Tetris

03. Canvas – Sample #3 bomomo

03. Canvas – Sample #4 Canvas Painter

03. Canvas – Sample #5 Mandelbrot Set(프랙탈 뷰어)

03. Canvas – Sample #6 Canvas Slideshow

03. Canvas – Sample #7 Tilt-Shift photo effect in Canvas

03. Canvas – Sample #8 Canvas Animation A canvas slippy map
A canvas slippy map

03. Canvas – 참고 Site HTML5 Spec (WD) Canvas Animation 예제 HTML5
HTML5 Canvas 2D Context Canvas Animation 예제 HTML Canvas Demos 모질라 개발자 센터

HTML5 & API 입문(1차) 발표자 : 김선영.

Similar presentations

Presentation on theme: "HTML5 & API 입문(1차) 발표자 : 김선영."— Presentation transcript:

Similar presentations

About project

지원

로그인

Auth with social network:

HTML5 & API 입문(1차) 발표자 : 김선영.

Similar presentations

Presentation on theme: "HTML5 & API 입문(1차) 발표자 : 김선영."— Presentation transcript:

Similar presentations

About project

지원