1 장 . H T M L 5 소개

1장.HTML5 소개 To Flash 정보영재세미나 1 김태영교수님 20128144 홍창의

Prolog Html5 특징 & 장점 HTML5 is… • 즉시 모드(immediate mode) 비트맵 영역이다. cf. 보류모드(retained mode) : 플래시, 실버라이트, SVG  화면 오브젝트의 코드에 있는 특성(좌표)에 따라 드로잉(Low level 연산작업을 하지 않지만, 비트맵 화면의 최종 렌더링 불가능) • 브라우저의 원하는 영역에 image, shape, text 색상-회전-투명도-픽셀조정-직선-곡선-박스-이미지 채우기 등 적용 가능하다. • Canvas 2D context는비트맵그림 그리기에 훌륭한 출력용 API • 자바스크립트(크로스호환성이 있는)로 키보드,마우스입력/ 타이머,이벤트,클래스,에니메이션,게임 제작 가능

Prolog Html5 Canvas 지원 브라우저 • 인터넷익스플로러 8 제외한 모든 브라우저 • 1등 : 구글 크롬, 파이어폭스, 사파리, 오페라… 가능 • MS : 인터넷익스플로러 9(2) 부터 지원

1.1 기본적인 HTML 페이지 1.1.1 <!doctype html> *웹브라우저가 페이지를 표준모드로 랜더링.. *HTML문서의 최상단에 위치 <!doctype html> <html lang=“ko"> <head> <meta charset="UTF-8"> <title>Ch1Ex1: Basic Hello World HTML Page</title> </head> <body> Hello World! </body> </html> 1.1.2 <html lang=“ko"> *언어 정의 태그 * En – fr – de – it –ja – pl – ru - es <canvas>(자바스크랩트) 의 위치 1. <head> ~ </head> : 권장 2. <body> ~ </body>

1.1 기본적인 HTML 페이지 1.1.3 <meta charset="UTF-8"> *웹브라우저의 문자인코딩 방법 지정 <!doctype html> <html lang=“ko"> <head> <meta charset="UTF-8"> <title>Ch1Ex1: Basic Hello World HTML Page</title> </head> <body> Hello World! </body> </html> 1.1.4 <title> … </title> *HTML페이지의 내용을 색인화 <실습> 문서편집기 실행  코딩  File 저장 브라우저 실행  열기(or drag)

1.2 HTML <div><canvas>태그 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ch1Ex2: Hello World HTML Page With A DIV </title> </head> <body> <div style="position: absolute; top: 50px; left: 50px;“> Hello World! </div> </body> </html> 1.2.1 <div style="position: absolute; top: 50px; left: 50px;" *인라인 CSS *페이지의 위에서 50픽셀. 왼쪽에서 50픽셀 떨어진 절대위치에 그리도록 지시 1.2.1 <canvas> *절대위치<Div>태그와 함께 사용 *<div>태그 안에 두면 마우스포인터의 상대적인 위치 정보 취득 가능

1.3 DOM과 캔버스 DOM (Document Object Model) 은 HTML페이지를 객체로 표현 • 브라우저가 페이지 랜더링한 한 후에도 내용, 스타일을 동적으로 변경 가능 • DOM은 자바스크랩트로 제어 • Canvas요소는 DOM으로 접근 가능하지만, 그래픽요소는 접근 불가능(Canvas는 프래임에 그릴 정보만 가진채 즉시모드로 작동) • Window, document 객체 * Window : 최상위객체  캔버스 app 시작 전 모든 코드와 값이 제대로 올라왔는지 확인 * document : 모든 html 태그 포함, 자바스크립트로 <canvas> 인스턴스에 접근할 때 사용

1.4 자바스크립트와 캔버스 1.4.1 자바스크립트 프레임워크와 라이브러리 * jQuery, Processing.js 라이브러리를 포함한 다양한 자바스크립트 프레임워크에 캔버스를 지원하는 프래임워크 등장 예정 (Modernizr, JSColor, WebGL 등) 1.4.2 자바스크립트 삽입 위치 1. <head>에넣기 : 찾기 쉽지만, HTML페이지 로딩 전 자바스크립트 시작(대책, 자바스크립트 동작 전 HTML페이지 확인) 2. <body>에넣기 : 자바스크립트 동작 전 전체 페이지 로딩 3. 자바스크립트 코드는 HTML 내부, 외부 가능 외부 로딩 <script src = “canvasapp.js”> </script>

1.5 “Hello World!” 예제 1.4.1 자바스크립트 프레임워크와 라이브러리 * jQuery, Processing.js 라이브러리를 포함한 다양한 자바스크립트 프레임워크에 캔버스를 지원하는 프래임워크 등장 예정 (Modernizr, JSColor, WebGL 등) <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ch1Ex3: Your First Canvas Application </title> <script src="modernizr-1.6.min.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowLoaded, false); var Debugger = function () { }; Debugger.log = function (message) { try { console.log(message); } catch (exception) { return; } } function eventWindowLoaded () { canvasApp(); }

1.5 “Hello World!” 예제 1.4.1 자바스크립트 프레임워크와 라이브러리 * jQuery, Processing.js 라이브러리를 포함한 다양한 자바스크립트 프레임워크에 캔버스를 지원하는 프래임워크 등장 예정 (Modernizr, JSColor, WebGL 등) <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ch1Ex3: Your First Canvas Application </title> <script src="modernizr-1.6.min.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowLoaded, false); var Debugger = function () { }; Debugger.log = function (message) { try { console.log(message); } catch (exception) { return; } } function eventWindowLoaded () { canvasApp(); } function canvasSupport () { return Modernizr.canvas; } function canvasApp () { if (!canvasSupport()) { return; } var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); Debugger.log("Drawing Canvas"); function drawScreen() { //background context.fillStyle = "#ffffaa"; context.fillRect(0, 0, 500, 300); //text context.fillStyle = "#000000"; context.font = "20px _sans"; context.textBaseline = "top"; context.fillText ("Hello World!", 195, 80 ); //image var helloWorldImage = new Image(); helloWorldImage.src = "helloworld.gif"; helloWorldImage.onload = function () { context.drawImage(helloWorldImage, 160, 130); } //box context.strokeStyle = "#000000"; context.strokeRect(5, 5, 490, 290); } drawScreen(); } </script> </head> <body> <div style="position: absolute; top: 50px; left: 50px;"> <canvas id="canvasOne" width="500" height="300"> Your browser does not support HTML 5 Canvas. </canvas> </div> </body> </html>

1.5 “Hello World!” 예제 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ch1Ex3: Your First Canvas Application </title> <script src="modernizr-1.6.min.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowLoaded, false); var Debugger = function () { }; Debugger.log = function (message) { try { console.log(message); } catch (exception) { return; } } function eventWindowLoaded () { canvasApp(); } 1. 모든 HTML요소와 전체페이지 로딩 확인 * 자바스크립트 이벤트 처리 부분 만들기 (이벤트 해당 객체 이벤트 처리) * Window객체의 load 이벤트에 리스너를 추가 * DOM객체의 addEventListener( ) 함수 1) 이벤트 : load - 리스너가 기다리는 이벤트 이름 2) 이벤트처리함수 : eventWindowLoaded( ) - 이벤트가 발생하면 부르는 함수 3) useCapture : true/false - 하위단계로 이벤트 보내는지 여부 window.onload = function( ) { canvasApp( ); } window.onload = canvasApp( );

1.5.1 캔버스를위한 자바스크립트 코드 캡슐화하기 function canvasSupport () { return Modernizr.canvas; } function canvasApp () { if (!canvasSupport()) { return; } var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); Debugger.log("Drawing Canvas"); function drawScreen() { //background context.fillStyle = "#ffffaa"; context.fillRect(0, 0, 500, 300); //text context.fillStyle = "#000000"; context.font = "20px _sans"; context.textBaseline = "top"; context.fillText ("Hello World!", 195, 80 ); 2. 자바스크립트 애플리케이션 실행 * 자바스크립트는 HTML 페이지 안에서 작동하며 다른 자바스크립트 애플리케이션, 코드와 같이 실행 가능하다. but,변수 & 함수가 다른 자바스크립트와 충돌할 위험이 있다. * canvas는 독립적 : 정해진 영역에서만 화면을 출력 but,한페이지에 여러 개의 캔버스 동작 시 충돌 위험이 있다. * 캡슐화 방안 : 변수와 함수를 또 다른 함수의 로컬 영역 안에 넣어서 충돌 문제 해결 * 예시 참조

1.5.2 HTML페이지에 캔버스 넣기 ………………………………………………………. function canvasApp () { if (!canvasSupport()) { return; } var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); Debugger.log("Drawing Canvas"); …………………………………………………………. </script> </head> <body> <div style="position: absolute; top: 50px; left: 50px;"> <canvas id="canvasOne" width="500" height="300"> Your browser does not support HTML 5 Canvas. </canvas> </div> </body> </html> <canvas> 태그의 특성 1. Id : 자바스크립트 코드에서 해당 <canvas> 태그 참조할 때 사용하는 이름 2. width : 캔버스의 폭, 단위 pixel 3. height : 캔버스의 높이, 단위 pixel * <canvas> ~ </canvas> 캔버스 작동 오류시 나타날 문구 작성 가능 1) <canvas> 객체에 대한 참조값을 갖는 theCanvas 변수 선언 2) document의 getElementById( ) 함수를 불러서 canvasOne의 참조값을 구함

1.5.3 브라우저가 캔버스를 지원하는지 알아보기 If (!theCanvas || !theCanvas.getContext) { return; } Canvas를 사용하기 전 HTML 페이지에 이미 정의해놓은 getContext 메서드가 있는지 확인하는 방법 function canvasSupport( ) { return !!document.creatElement(‘testcanvas’).getContext; } function canvasApp( ) { If (! canvasSupport) { return; } } 마크필그림 브라우저 지원 여부 테스트용 캔버스 <script src="modernizr-1.6.min.js"></script> ……………………….. function canvasApp () { if (!canvasSupport()) { return; } Modernizr 라이브러리 이용법

1.5.4 2D 컨텍스트 구하기 var context = theCanvas.getContext("2d"); 2D 컨텍스트 참조값

1.5.5 drawScreen( ) 함수 function drawScreen() { //background context.fillStyle = "#ffffaa"; context.fillRect(0, 0, 500, 300); //text context.fillStyle = "#000000"; context.font = "20px _sans"; context.textBaseline = "top"; context.fillText ("Hello World!", 195, 80 ); //image var helloWorldImage = new Image(); helloWorldImage.src = "helloworld.gif"; helloWorldImage.onload = function () { context.drawImage(helloWorldImage, 160, 130); } //box context.strokeStyle = "#000000"; context.strokeRect(5, 5, 490, 290); } drawScreen(); } 사각형 그리기 문자의 색상 설정 폰트 크기와 두께 폰트의 수직 정렬 방법 문자 화면에 출력 이미지(이미지객채,x좌표,y좌표) 문자와 이미지 주변에 사각형 그리기

1 장 . H T M L 5 소개

1 장 . H T M L 5 소개

Presentation Transcript