1 / 17

1 장 . H T M L 5 소개

1 장 . H T M L 5 소개. To Flash. 정보영재세미나 1 김태영교수님 20128144 홍창의. Prolog. Html5 특징 & 장점. H T M L 5 is… 즉시 모드 (immediate mode) 비트맵 영역이다 . cf. 보류모드 (retained mode) : 플래시 , 실버라이트 , SVG  화면 오브젝트의 코드에 있는 특성 ( 좌표 ) 에 따라 드로잉 (Low level 연산작업을 하지 않지만 , 비트맵 화면의 최종 렌더링 불가능 )

devi
Download Presentation

1 장 . H T M L 5 소개

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

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

  4. 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>

  5. 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)

  6. 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>태그 안에 두면 마우스포인터의 상대적인 위치 정보 취득 가능

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

  8. 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>

  9. 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(); }

  10. 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>

  11. 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( );

  12. 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,한페이지에 여러 개의 캔버스 동작 시 충돌 위험이 있다. * 캡슐화 방안 : 변수와 함수를 또 다른 함수의 로컬 영역 안에 넣어서 충돌 문제 해결 * 예시 참조

  13. 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의 참조값을 구함

  14. 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 라이브러리 이용법

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

  16. 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좌표) 문자와 이미지 주변에 사각형 그리기

More Related