쉽게 풀어쓴 C 프로그래밍

Size: px
Start display at page:

Download "쉽게 풀어쓴 C 프로그래밍"

Transcription

1 CHAPTER 11. 자바스크립트와캔버스로게임 만들기

2 캔버스 캔버스는 <canvas> 요소로생성 캔버스는 HTML 페이지상에서사각형태의영역 실제그림은자바스크립트를통하여코드로그려야한다.

3 컨텍스트객체 컨텍스트 (context) 객체 : 자바스크립트에서물감과붓의역할을한다. var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d");

4 예제 <!DOCTYPE html> <html> <body> <canvas id="mycanvas" width="200" height="100" style="border: 1px dotted red"></canvas> <script> var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); context.fillstyle = "#00FF00"; context.fillrect(0, 0, 100, 50); </script> </body> </html>

5 직선그리기예제 <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; </style> </head> <body> <canvas id="mycanvas" width="300" height="200"></canvas> <script> var canvas = document.getelementbyid('mycanvas'); var context = canvas.getcontext('2d'); context.beginpath(); context.moveto(0, 0); context.lineto(100, 100); context.lineto(150, 50); context.lineto(200, 100); context.stroke(); </script> </body> </html>

6 사각형예제 <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; </style> </head> <body> <canvas id="mycanvas" width="300" height="200"></canvas> <script> var canvas = document.getelementbyid('mycanvas'); var context = canvas.getcontext('2d'); context.beginpath(); context.rect(10, 10, 100, 100); context.fillstyle = "yellow"; context.fill(); </script> </body> </html>

7 <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; </style> </head> 원예제

8 원예제 <body> <canvas id="mycanvas" width="300" height="200"></canvas> <script> var canvas = document.getelementbyid('mycanvas'); var context = canvas.getcontext('2d'); context.beginpath(); context.arc(100, 100, 80, 0, 2.0 * Math.PI, false); context.strokestyle = "red"; context.stroke(); context.beginpath(); context.arc(100, 100, 60, 0, 1.5 * Math.PI, false); context.closepath(); context.strokestyle = "blue"; context.stroke(); context.beginpath(); context.arc(100, 100, 40, 0, 1.5 * Math.PI, false); context.strokestyle = "green"; context.stroke(); </script> </body> </html>

9 커브예제 <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; </style> </head> <body> <canvas id="mycanvas" width="300" height="200"></canvas> <script> var canvas = document.getelementbyid('mycanvas'); var context = canvas.getcontext('2d'); context.beginpath(); context.moveto(90, 130); context.beziercurveto(140, 10, 288, 10, 288, 130); context.linewidth = 10; context.strokestyle = 'black'; context.stroke(); </script> </body> </html>

10 도형예제 <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; </style> </head> <body> <canvas id="mycanvas" width="300" height="200"></canvas> <script> var canvas = document.getelementbyid('mycanvas'); var context = canvas.getcontext('2d'); context.beginpath(); context.moveto(50, 100); context.lineto(75, 50); context.lineto(100, 100); context.closepath(); context.fillstyle = "green"; context.fill(); </script> </body> </html>

11 텍스트예제 <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; </style> </head> <body> <canvas id="mycanvas" width="300" height="200"></canvas> <script> var canvas = document.getelementbyid('mycanvas'); var context = canvas.getcontext('2d'); context.font = 'italic 38pt Arial' context.filltext('hello World!', 20, 100); </script> </body> </html>

12 그라디언트 createlineargradient(x, y, x1, y1) - 선형그라디언트를생성한다. createradialgradient(x, y, r, x1, y1, r1) - 원형그라디언트를생성한다.

13 선형그라디언트예제 <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; </style> </head> <body> <canvas id="mycanvas" width="300" height="200"></canvas> <script> var canvas = document.getelementbyid('mycanvas'); var context = canvas.getcontext('2d'); var gradient = context.createlineargradient(0, 0, 200, 0); gradient.addcolorstop(0, "white"); gradient.addcolorstop(1, "red"); context.fillstyle = gradient; context.fillrect(10, 10, 180, 90); </script> </body> </html>

14 패턴채우기 <!DOCTYPE HTML> <html> <head>.. </head> <body> <canvas id="mycanvas" width="300" height="200"></canvas> <script> var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); var image = new Image(); image.src = "pattern.png"; image.onload = function () { var pattern = context.createpattern(image, "repeat"); context.rect(0, 0, canvas.width, canvas.height); context.fillstyle = pattern; context.fill(); ; </script> </body> </html>

15 이미지그리기 <body> <canvas id="mycanvas" width="600" height="400"></canvas> <script> var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); var image = new Image(); image.src = "html5_logo.png"; </script> </body> image.onload = function () { context.drawimage(image, 0, 0); ;

16 도형변환 평행이동 (translation) 신축 (scaling) 회전 (rotation) 밀림 (shear) 반사 (mirror) 행렬을이용한일반적인변환

17 평행이동 <body> <canvas id="mycanvas" width="600" height="400"></canvas> <script> var canvas = document.getelementbyid('mycanvas'); var context = canvas.getcontext('2d'); context.fillstyle = "blue"; context.fillrect(0, 0, 100, 100); context.translate(50, 50); context.fillstyle = "red"; context.fillrect(0, 0, 100, 100); </script> </body>

18 애니메이션 Bouncing Ball 예제

19 <!DOCTYPE html> <html> <head> <title>bouncing Ball Example</title> <style> canvas { background: yellow; border: 1px dotted black; </style> Bouncing Ball 예제

20 Bouncing Ball 예제 <script> var context; var dx = 5; var dy = 5; var y = 100; var x = 100; function draw() { var canvas = document.getelementbyid('mycanvas'); var context = canvas.getcontext('2d'); context.clearrect(0, 0, 300, 200); context.beginpath(); context.fillstyle = "red"; context.arc(x, y, 20, 0, Math.PI * 2, true); context.closepath(); context.fill(); if (x < (0 + 20) x > (300-20)) dx = -dx; if (y < (0 + 20) y > (200-20)) dy = -dy; x += dx; y += dy; setinterval(draw, 10); </script> </head>

21 Bouncing Ball 예제 <body> <canvas id="mycanvas" width="300" height="200"></canvas> </body> </html> 웹브라우저로보기

22 간단한게임제작 앵그리버드와유사한다음과같은게임을제작

23 간단한게임만들기 <html> <head> <title>javascript Game</title> <style> canvas { border: 1px dotted red; /* 캔버스에경계선을그려준다. */ background-color: #fcff00; /* 캔버스의배경색을지정한다. */ </style> <script> var context; /* 컨텍스트객체 */ var velocity; /* 사용자가입력한공의초기속도 */ var angle; /* 사용자가입력한공의초기각도 */ var ballv; /* 공의현재속도 */ var ballvx; /* 공의현재 x 방향속도 */ var ballvy; /* 공의현재 y 방향속도 */ var ballx = 10; /* 공의현재 x 방향위치 */ var bally = 250; /* 공의현재 y 방향위치 */ var ballradius = 10; /* 공의반지름 */ var score = 0; /* 점수 */

24 간단한게임만들기 var image = new Image(); /* 이미지객체생성 */ image.src = "lawn.png"; /* 이미지파일이름설정 */ var backimage = new Image(); backimage.src = "net.png"; var timer; /* 타이머객체변수 */ /* 공을화면에그린다. */ function drawball() { context.beginpath(); context.arc(ballx, bally, ballradius, 0, 2.0 * Math.PI, true); context.fillstyle = "red"; context.fill(); /* 배경을화면에그린다. */ function drawbackground() { context.drawimage(image, 0, 270); context.drawimage(backimage, 450, 60); /* 전체화면을그리는함수 */ function draw() { context.clearrect(0, 0, 500, 300); /* 화면을지운다. */ drawball(); drawbackground();

25 간단한게임만들기 /* 초기화를담당하는함수 */ function init() { ballx = 10; bally = 250; ballradius = 10; context = document.getelementbyid('canvas').getcontext('2d'); draw(); /* 사용자가발사버튼을누르면호출된다. */ function start() { init(); velocity = Number(document.getElementById("velocity").value); angle = Number(document.getElementById("angle").value); var angler = angle * Math.PI / 180; ballvx = velocity * Math.cos(angleR); ballvy = -velocity * Math.sin(angleR); draw(); timer = setinterval(calculate, 100); return false;

26 간단한게임만들기 /* 공의현재속도와위치를업데이트한다. */ function calculate() { ballvy = ballvy ; ballx = ballx + ballvx; bally = bally + ballvy; /* 공이목표물에맞았으면 */ if ((ballx >= 450) && (ballx <= 480) && (bally >= 60) && (bally <= 210)) { score++; document.getelementbyid("score").innerhtml = " 점수 =" + score; clearinterval(timer); /* 공이경계를벗어났으면 */ if (bally >= 300 bally < 0) { clearinterval(timer); draw(); </script> </head>

27 간단한게임만들기 <body onload="init();"> <canvas id="canvas" width="500" height="300"></canvas> <div id="control"> 속도 <input id="velocity" value="30" type="number" min="0" max="100" step="1" /> 각도 <input id="angle" value="45" type="number" min="0" max="90" step="1" /> <div id="score"> 점수 = 0</div> <button onclick="start()"> 발사 </button> </div> </body> </html> 웹브라우저로보기

예제 <!DOCTYPE html><html><head> <script type="text/javascript"> function arcto() { var canvas = document.getelementbyid('canvas'); context = canvas.get

예제 <!DOCTYPE html><html><head> <script type=text/javascript> function arcto() { var canvas = document.getelementbyid('canvas'); context = canvas.get 1. 원그리기 1.1 원 / 원호그리기 - arc() 메서드 Ÿ arc() 메서드에서는시작좌표 (x, y), 반지름 (radius), 시작각도 (startangle), 종료각도 (endangle), 그리는방향 (anticlockwise) 을지정해야한다. Ÿ 시작각도와종료각도는브라우저에서원주를따라그려지는호에대한각도로라디안을사용한다. 따라서각도에 Math.PI/180을곱해서사용한다.

More information

Ÿ 캔버스의크기와드로잉표면의크기 <canvas> 요소의 width/height 속성사용하여변경하면캔버스크기를드로잉표면의크기로자동변경한다. CSS를사용해서캔버스크기를지정하는경우는드로잉표면의크기는변경할수없기때문에캔버스와드로잉표면의불일치로인하여예기치않은결과를발생시킬수있음에주

Ÿ 캔버스의크기와드로잉표면의크기 <canvas> 요소의 width/height 속성사용하여변경하면캔버스크기를드로잉표면의크기로자동변경한다. CSS를사용해서캔버스크기를지정하는경우는드로잉표면의크기는변경할수없기때문에캔버스와드로잉표면의불일치로인하여예기치않은결과를발생시킬수있음에주 1. 기본내용 1.1 캔버스 Ÿ canvas 요소는웹페이지에서자바스크립트를통해즉시그림을그리는데사용되며단순한그림표현을넘어여러효과와함께텍스트및애니메이션표현이가능하다. Ÿ 그림을그리기위해서는 를사용해서그림영역을지정하고, 자바스크립트를사용해서실제그림을그린다. 1.2 캔버스좌표시스템 Ÿ 캔버스의좌표시스템은 2D 컨텍스트로, 왼쪽상단모서리에있는평면직교표면을

More information

1.2 도형변환 Ÿ 캔버스의좌표계의이동, 회전및확대 / 축소기능을통한도형의변환을제공한다. Ÿ translate() 메서드는좌표공간의시작점을 (x,y) 로이동한다. Ÿ rotate() 메서드는좌표공간을시계방향으로회전한다. Ÿ scale() 메서드는좌표공간을수평 / 수직방

1.2 도형변환 Ÿ 캔버스의좌표계의이동, 회전및확대 / 축소기능을통한도형의변환을제공한다. Ÿ translate() 메서드는좌표공간의시작점을 (x,y) 로이동한다. Ÿ rotate() 메서드는좌표공간을시계방향으로회전한다. Ÿ scale() 메서드는좌표공간을수평 / 수직방 1. 도형합성및변환 1.1 도형합성 1.1.1 globalcompositeoperation 속성값 Ÿ globalcompositeoperation 속성을설명하면다양한기본합성동작을지정할수있다. 이속성을이용함으로써도형이그려진순서와상관없이겹쳐지는부분에대한처리가가능하다. 예제

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 11 장. 캔버스 목차 11.1 캔버스이해하기 11.2 캔버스기본 API 사용하기 11.3 캔버스고급기능사용하기 2 11.1 캔버스이해하기 11.1.1 캔버스의특징 11.1.2 캔버스시작하기 3 HTML5 캔버스 자바스크립트를이용해서웹문서상에그림그리는기능 HTML5 이전 직접이미지파일을 태그를이용해서문서상에포함 자바애플릿이용

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 13. HTML5 위치정보와드래그앤드롭 SVG SVG(Scalable Vector Graphics) 는 XML- 기반의벡터이미지포맷 웹에서벡터 - 기반의그래픽을정의하는데사용 1999 년부터 W3C 에의하여표준 SVG 의장점 SVG 그래픽은확대되거나크기가변경되어도품질이손상되지않는다. SVG 파일에서모든요소와속성은애니메이션이가능하다. SVG 이미지는어떤텍스트에디터로도생성하고편집할수있다.

More information

HTML5-11강 캔버스2 - 드로잉 확장

HTML5-11강 캔버스2 - 드로잉 확장 표준화문서를기반으로하는지침서 속이깊은 HTML5 & CSS3 김명진지음 11 강 캔버스 Part-2 - 드로잉확장 학습목표 앞장에서캔버스에서드로잉작업에필요한기본적인내용들을살펴보았다. 이번장에서는기본드로잉기능에원및원호를그리는방법, 베지에곡선을그리는방법을학습한다. 그리고다양한색상으로도형을채울수있는그라데이션스타일, 와인딩에따른도형의다양한채우기스타일, 패턴에의한스타일,

More information

01장 웹 개요와 실습 환경 구축

01장 웹 개요와 실습 환경 구축 10 장 캔버스 목차 1. 캔버스이해하기 2. 캔버스기본 API 사용하기 3. 캔버스고급기능사용하기 1 캔버스이해하기 자바스크립트를이용해서웹문서상에그림그리는기능 HTML5 이전 직접이미지파일을 태그를이용해서문서상에포함 자바애플릿이용 플래시이용 HTML5 캔버스 자바스크립트만을이용해서그림을그릴수있다 별도의플러그인이나프로그램설치없이가능 이미지나그림을합성,

More information

HTML5

HTML5 주사위게임 류관희 충북대학교 주사위게임규칙 플레이어 두개의주사위를던졌을때두주사위윗면숫자의합 The First Throw( 두주사위의합 ) 합 : 7 혹은 11 => Win 합 : 2, 3, 혹은 12 => Lost 합 : 4, 5, 6, 8, 9, 10 => rethrow The Second Throw 합 : 첫번째던진주사위합과같은면 => Win 합 : 그렇지않으면

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 7. HTML 와 CSS 로웹사이트만들 기 웹사이트작성 웹사이트구축과정 내비게이션구조도 홈페이지레이아웃 헤더 web Shop 내비게이션메뉴

More information

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 제이쿼리 () 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 CSS와마찬가지로, 문서에존재하는여러엘리먼트를접근할수있다. 엘리먼트접근방법 $( 엘리먼트 ) : 일반적인접근방법

More information

HTML5

HTML5 퀴즈 류관희 게임규칙 동적으로 HTML 요소생성 생성된 HTML 요소의화면배치및위치옮기기 퀴즈게임 국가명과수도명의짝맞추기 배열 ( 국가명, 수도명 ) 짝모두맞추면 => 동영상플레이 2 퀴즈게임 3 4 5 6 주요특징 배열 : 국가명과수도명저장 피드백 : 색상변경, 동영상재생 플레이 20쌍중에 4 쌍무작위로선택 글자 : 국가명과수도명 => 그림으로대치 7 사전준비항목

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 5 장. 고급표현을위한 CSS3 활용 1 목차 5.1 박스모델설정하기 5.2 레이아웃설정하기 5.3 다양한효과설정하기 5.4 움직임설정하기 2 5.1 박스모델설정하기 5.1.1 영역설정을위한박스모델 5.1.2 박스모델유형의지정 3 영역설정을위한박스모델 배경영역 , , : 해당하는줄만큼배경 ,

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 10. DOM 과이벤트처리, 입력검 증 문서객체모델 (DOM) DOM 은 HTML 문서의계층적인구조를트리 (tree) 로표현 DOM 과 BOM HTML 문서를객체로표현한것을 DOM 웹브라우저를객체로표현한것을 BOM(Browser Object Model) HTML 요소찾기 동적인웹페이지를작성하려면원하는요소를찾아야한다. id 로찾기 태그이름으로찾기

More information

HTML5

HTML5 짝맞추기게임 게임규칙 짝맞추기게임 카드가뒤집혀있으면플레이어는한번에카드두개를클릭해서일치하는카드찾기게임 만약두개의카드가일치하면이두카드를제거 그렇지않으면다시두카드를뒤집어원위치시킴 플레이어가일치하는카드를전부찾으면프로그램종료하고게임걸린시간표시 2 게임의시작예 3 4 5 게임의결과표시

More information

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF CHAPTER 2 (interaction) Ext JS., HTML, onready, MessageBox get.. Ext JS HTML CSS Ext JS.1. Ext JS. Ext.Msg: : Ext Ext.get: DOM 22 CHAPTER 2 (config). Ext JS.... var test = new TestFunction( 'three', 'fixed',

More information

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

var answer = confirm( 확인이나취소를누르세요.); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write( 확인을눌렀습니다.); else { document.write( 취소를눌렀습니다.); 자바스크립트 (JavaScript) - HTML 은사용자에게인터페이스 (interface) 를제공하는언어 - 자바스크립트는서버로데이터를전송하지않고서할수있는데이터처리를수행한다. - 자바스크립트는 HTML 나 JSP 에서작성할수있고 ( 내부스크립트 ), 별도의파일로도작성이가능하다 ( 외 부스크립트 ). - 내부스크립트 - 외부스크립트

More information

1989 Tim Berners-Lee invents the Web with HTML 1991 First Web Browser Released HTML Tags Specification Released 1994 First World Wide Web Conference H

1989 Tim Berners-Lee invents the Web with HTML 1991 First Web Browser Released HTML Tags Specification Released 1994 First World Wide Web Conference H 2011.09.28 Open Community Technical Seminar @NIA Developing Web Application with HTML5 1 2 3 4 5 History&Milestone of HTML5 HTML5 MarkUp CSS3 JavaScript API Compatibility online handout tinyurl.com/html5d

More information

e-비즈니스 전략 수립

e-비즈니스 전략 수립 CSS3 속성 HTML5 웹프로그래밍입문 ( 개정판 ) Contents 학습목표 CSS3가지원하는스타일속성과스타일값을활용할수있습니다. CSS3를사용해레이아웃을잡을수있습니다. 내용 CSS3 단위 박스속성 display 속성 배경속성 글자속성 위치속성 float 속성 그림자속성 그레이디언트 2/85 1. CSS3 단위 키워드단위 W3C에서미리정의한단어 키워드를입력하면키워드에해당하는스타일이자동으로적용

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 ONE page html 이란? 원페이지는최근의홈페이지제작트렌드로한페이지에상단에서하단으로의마우스스크롤링을통해서컨텐츠를보여주는스타일의홈페이지입니다. USER 의시선을분산시키지않고위쪽에서아래쪽으로마우스스크롤링을통해서홈페이지의컨텐츠를보여주게됩니다. 반응형으로제작되어스마트폰, 아이패드, 태블릿,PC, 노트북등다양한디바이스에서자동으로최적화됩니다. ONE page 웹사이트사례

More information

AMP는 어떻게 빠른 성능을 내나.key

AMP는 어떻게 빠른 성능을 내나.key AMP는 어떻게 빠른 성능을 내나? AU개발 김태훈 kishu@navercorp.com AMP 란무엇인가? AMP 방식으로 HTML을 만들고 AMP JS를 로딩하고 AMP 컴포넌트만 사용하면 웹페이지의 빠른 렌더링을 보장 + 구글 검색 결과에서 즉시 로딩(빠르고 멋있게) AMPs are just Web Pages! AMPs are just Web Pages!

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 5. CSS 박스모델과응용 박스모델 HTML 요소들을박스 ( 사각형 ) 형태로그리는것 박스는배치, 색상, 경계등의속성을가진다. 박스모델의속성 배경색과배경이미지 HTML 요소에배경색과배경이미지가설정되어있는경우에, 패딩은투명하므로배경이미지와배경색이보이게된다 ( 그림출처 : Jon Hicks) 경계선스타일

More information

Week8-Extra

Week8-Extra Week 08 Extra HTML & CSS Joonhwan Lee human-computer interaction + design lab. HTML CSS HTML, HTML 5 1. HTML HTML HTML HTML (elements) (attributes), (arguments). HTML (tag), DTD (Document Type Definition).!4

More information

HTML5

HTML5 행맨 류관희 충북대학교 2 3 4 5 사전준비 단어목록읽기 단어빈칸보여주기 인터페이스를통해알파벳선택하면알파벳사라지기 단어에선택한알파벳이있으면표시하기 없으면선이나타원으로사람형태그리기 게임종료조건 : 모든맞추는경우 모두틀린경우 ( 행맨 ) 6 단어목록배열에저장 words.js var words = [ "muon", "blight","kerfuffle","qat"

More information

HTML5

HTML5 미로 류관희 미로만들고이동하는프로그래밍기법 플레이어가직접미로만들어저장 벽의충돌검사 미로프로그램 캔버스 ( 객체, 미로의벽 ) 토큰 ( 오각형 ) 과벽의충돌검사 미로의벽그리기 마우스이용 토큰의이동 ( 화살표를이용 ) 2 1 차버전미로 모든기능을하나의파일 2 차버전미로 미로제작하는코드파일 플레이어가라디오버튼으로미로를선택할수있는코드파일 3 미로구조제작 화살표키로토큰움직이기

More information

HTML5-³¹Àå¿ë.PDF

HTML5-³¹Àå¿ë.PDF CHAPTER 2 Canvas 요소로그림그리기 HTML5 의 Canvas 요소는많은사람들이주목하고있는기능중하나로서그래픽을화면에표시할때사용된다 HTML5에서 Canvas 요소의생성은아래처럼아주간단하다 이코드가 Canvas 요소를생성하는데필요한전부이다 그렇다면이요소안에그림을그려넣기위해서는어떻게해야할까?

More information

- 이벤트의처리 <input type= button id= button1 value= 확인 /> <input type= button id= button2 value= 확인 /> 자바스크립트인경우 : document.getelementbyid( button1 ).oncl

- 이벤트의처리 <input type= button id= button1 value= 확인 /> <input type= button id= button2 value= 확인 /> 자바스크립트인경우 : document.getelementbyid( button1 ).oncl 제이쿼리 (JQuery) - 제이쿼리는자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리이다. - 따라서, 제이쿼리를사용하기위해서는자바스크립트라이브러리를사용해야한다. - 제이쿼리사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) - 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호를말함. - 사용예 )

More information

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 03 장. 테두리여백지정하는속성 이번장에서는테이블, 레이어, 폼양식등의더예쁘게꾸미기위해서 CSS 를이용하여 HTML 요소의테두리속성을바꾸어보자. 이장에서다룰내용 1 2 3 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 01. 테두리를제어하는스타일시트 속성값설명 border-width border-left-width

More information

C H A P T E R 2

C H A P T E R 2 C H A P T E R 2 Foundations of Ajax Chapter 2 1 32 var xmlhttp; function createxmlhttprequest() { if(window.activexobject) { xmlhttp = new ActiveXObject( Micr else if(window.xmlhttprequest) { xmlhttp =

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 09 장 문서객체모델 1. 문서객체모델관련용어 2. 웹페이지생성순서 3. 문서객체선택 4. 문서객체조작 5. 이벤트 문서객체와문서객체모델의개념을이해한다. 문서객체를선택하고조작할수있다. 이벤트의종류를알아보고문서객체에이벤트를연결해본다. 1 문서객체모델관련용어 문서객체모델 (DOM) Document Object Model 웹브라우저가 HTML 파일을분석하고표시하는방법

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 12 장. 인터페이스관련 API 목차 12.1 위치정보사용하기 12.2 드래그앤드롭사용하기 12.3 오디오및비디오제어하기 2 12.1 위치정보사용하기 12.1.1 지오로케이션 API의개요 12.1.2 단발성위치요청하기 12.1.3 반복적위치요청하기 3 위치정보 (geolocation) 위치정보 GPS 가내장된모바일기기에서정확한위치파악가능

More information

PowerPoint Presentation

PowerPoint Presentation Canvas and SVG(Scalable Vector Graphics) 류관희 충북대학교 HTML5 Canvas? (1/2) The HTML5 Canvas is an Immediate Mode bit-mapped area of the screen that can be manipulated with JavaScript and CSS. The HTML5

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 14. HTML5 웹스토리지, 파일 API, 웹소켓 웹스토리지 웹스토리지 (web storage) 는클라이언트컴퓨터에데이터를저장하는메카니즘 웹스토리지는쿠키보다안전하고속도도빠르다. 약 5MB 정도까지저장이가능하다. 데이터는키 / 값 (key/value) 의쌍으로저장 localstorage 와 sessionstorage localstorage 객체

More information

Ÿ column-rule 속성은단사이의구분선을표현하기위한속성으로 column-rule-color, column-rule-style, column-rule-width 속성을한번에지정할수있다. 1.4 단의확장 Ÿ column-span 속성은다단을구성할때해당요소가얼마나많은단

Ÿ column-rule 속성은단사이의구분선을표현하기위한속성으로 column-rule-color, column-rule-style, column-rule-width 속성을한번에지정할수있다. 1.4 단의확장 Ÿ column-span 속성은다단을구성할때해당요소가얼마나많은단 1. 다단레이아웃 1.1 다단문서의개수및폭지정 Ÿ column-count 속성은다단을구성할때단의개수를지정하는속성이다. Ÿ column-width 속성은단의폭을지정하는속성이다. Ÿ column-width와 column-count 속성은동시에 auto 속성으로지정할수없다. Ÿ columns 속성은단의개수와폭을한번에지정하기속성이다. Ÿ 다단관련속성의사용은벤더프리픽스가필요하다.

More information

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES HTML 연동가이드 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone Fax Co

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES HTML 연동가이드 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone Fax Co SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES 2012.02.18 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone 02-2108-8030 Fax 02-2108-8031 www.softbase.co.kr Copyright 2010 SOFTBase Inc. All rights reserved 목차 1 장 : HTML 연동개요...

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 6. CSS 레이아웃과애니메이션 레이아웃이란? 웹페이지에서 HTML 요소의위치, 크기등을결정하는것 집안에서의가구배치와비슷하다. 블록요소와인라인요소 블록 (block) 요소 - 화면의한줄을전부차지한다. 인라인 (inline) 요소 - 한줄에차례대로배치된다. 현재줄에서필요한만큼의너비만을차지한다. 블록요소 한줄을전부차지 , , ,

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 제 5 장생성자와접근제어 1. 객체지향기법을이해한다. 2. 클래스를작성할수있다. 3. 클래스에서객체를생성할수있다. 4. 생성자를이용하여객체를초기화할수 있다. 5. 접근자와설정자를사용할수있다. 이번장에서만들어볼프로그램 생성자 생성자 (constructor) 는초기화를담당하는함수 생성자가필요한이유 #include using namespace

More information

Building Mobile AR Web Applications in HTML5 - Google IO 2012

Building Mobile AR Web Applications in HTML5 - Google IO 2012 Building Mobile AR Web Applications in HTML5 HTML5 -, KIST -, UST HCI & Robotics Agenda Insight: AR Web Browser S.M.AR.T: AR CMS HTML5 HTML5 AR - Hello world! - Transform - - AR Events 3/33 - - - (Simplicity)

More information

<4D F736F F F696E74202D20C1A63233C0E520B1D7B7A1C7C820C7C1B7CEB1D7B7A1B9D628B0ADC0C729205BC8A3C8AF20B8F0B5E55D>

<4D F736F F F696E74202D20C1A63233C0E520B1D7B7A1C7C820C7C1B7CEB1D7B7A1B9D628B0ADC0C729205BC8A3C8AF20B8F0B5E55D> Power Java 제 23 장그래픽프로그래밍 이번장에서학습할내용 자바에서의그래픽 기초사항 기초도형그리기 색상 폰트 Java 2D Java 2D를이용한그리기 Java 2D 를이용한채우기 도형회전과평행이동 자바를이용하여서화면에그림을그려봅시다. 자바그래픽데모 자바그래픽의두가지방법 자바그래픽 AWT Java 2D AWT를사용하면기본적인도형들을쉽게그릴수있다. 어디서나잘실행된다.

More information

Lab1

Lab1 Lab 1: HTML CSS 2015 Fall human-computer interaction + design lab. Joonhwan Lee HTML Web Server (World Wide Web: WWW)? (., FTP ). web 3 웹 구조의 이해 웹페이지 웹페이지는 HTML 이라는 언어로 만들어진 일종의 프로그램 웹페이지는 텍스트, 이미지, 동영상,

More information

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part1. JavaScript / Ch10. 문서객체모델 2014년 1학기 Professor Seung-Hoon Choi 10 문서객체모델 문서객체모델 (Document Object Model, DOM) 웹브라우저가 HTML 페이지를인식하는방식 document

More information

Microsoft PowerPoint 세션.ppt

Microsoft PowerPoint 세션.ppt 웹프로그래밍 () 2006 년봄학기 문양세강원대학교컴퓨터과학과 세션변수 (Session Variable) (1/2) 쇼핑몰장바구니 장바구니에서는사용자가페이지를이동하더라도장바구니의구매물품리스트의내용을유지하고있어야함 PHP 에서사용하는일반적인변수는스크립트의수행이끝나면모두없어지기때문에페이지이동시변수의값을유지할수없음 이러한문제점을해결하기위해서 PHP 에서는세션 (session)

More information

Javascript

Javascript 1. 이벤트와이벤트핸들러의이해 이벤트 (Event) 는웹브라우저에서발생하는다양한사건을말합니다. 예를들면, 버튼을마우스로을했다거나브라우저를닫았다거나 Enter 키를눌렀다거나등등아주다양한사건들이있습니다. 그렇다면이벤트핸들러 (Event Handler) 는무엇일까요? 이다양한이벤트들을핸들링 ( 처리 ) 해주는것입니다. 예를들면, 어떤버튼을했을때메시지창이뜨게하는등을말합니다.

More information

Lab10

Lab10 Lab 10: Map Visualization 2015 Fall human-computer interaction + design lab. Joonhwan Lee Map Visualization Shape Shape (.shp): ESRI shp http://sgis.kostat.go.kr/html/index.html 3 d3.js SVG, GeoJSON, TopoJSON

More information

Microsoft PowerPoint - logo_2-미해답.ppt [호환 모드]

Microsoft PowerPoint - logo_2-미해답.ppt [호환 모드] Chap.2 Logo 프로그래밍기초 - 터틀그래픽명령어 ( 기본, 고급 ) 학습목표 터틀의이동과선그리기에대해살펴본다. 터틀의회전에대해살펴본다. 터틀펜과화면제어에대해살펴본다. 2012. 5. 박남제 namjepark@jejunu.ac.kr < 이동하기 > - 앞으로이동하기 forward 100 터틀이 100 픽셀만큼앞으로이동 2 < 이동하기 > forward(fd)

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 9. 자바스크립트객체 객체 객체 (object) 는사물의속성과동작을묶어서표현하는기법 ( 예 ) 자동차는메이커, 모델, 색상, 마력과같은속성도있고출발하기, 정지하기등의동작도가지고있다. 객체의종류 객체의 2 가지종류 내장객체 (bulit-in object): 생성자가미리작성되어있다. 사용자정의객체 (custom object): 사용자가생성자를정의한다.

More information

슬라이드 1

슬라이드 1 프로세싱 광운대학교로봇학부박광현 프로세싱실행 2 C:\processing-3.2.1 폴더 창나타내기 실행 정지 3 폭 높이 600 400 도형그리기 배경칠하기 5 background(255, 255, 255); R G B background(255, 0, 0); background(255, 122, 0); 선그리기 6 background(255, 122, 0);

More information

01....b74........62

01....b74........62 4 5 CHAPTER 1 CHAPTER 2 CHAPTER 3 6 CHAPTER 4 CHAPTER 5 CHAPTER 6 7 1 CHAPTER 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

More information

¾Ë·¹¸£±âÁöħ¼�1-ÃÖÁ¾

¾Ë·¹¸£±âÁöħ¼�1-ÃÖÁ¾ Chapter 1 Chapter 1 Chapter 1 Chapter 2 Chapter 2 Chapter 2 Chapter 2 Chapter 2 Chapter 3 Chapter 3 Chapter 3 Chapter 3 Chapter 3 Chapter 3 Chapter 3 Chapter 3 Chapter 4 Chapter 4

More information

(291)본문7

(291)본문7 2 Chapter 46 47 Chapter 2. 48 49 Chapter 2. 50 51 Chapter 2. 52 53 54 55 Chapter 2. 56 57 Chapter 2. 58 59 Chapter 2. 60 61 62 63 Chapter 2. 64 65 Chapter 2. 66 67 Chapter 2. 68 69 Chapter 2. 70 71 Chapter

More information

PowerPoint Template

PowerPoint Template JavaScript 회원정보 입력양식만들기 HTML & JavaScript Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2 Form 객체 Form 객체 입력양식의틀이되는 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 태그의속성들의정보에관련된것

More information

슬라이드 1

슬라이드 1 웹프로그래밍 HTML, 자바스크립트, ASP 를중심으로 제 3 장고급 HTML 작성 목차 제 3 장고급 HTML 작성 2.1 기본태그 2.2 LINK 태그 2.3 Image 2.4 TABLE 2.5 FRAME 2.6 INPUT 양식 2 3 장고급 HTML 작성 멀티미디어파일다루기 스타일시트 레이어 3 3.1 멀티미디어 최근인터넷사용자가급증하면서기업 / 개인용홈페이지가급증하였고다양한홈페이지를만들기위해많은기술들이생겨나고있음

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 제 11 장상속 1. 상속의개념을이해한다. 2. 상속을이용하여자식클래스를작성할수있다. 3. 상속과접근지정자와의관계를이해한다. 4. 상속시생성자와소멸자가호출되는순서를이해한다. 이번장에서만들어볼프로그램 class Circle { int x, y; int radius;... class Rect { int x, y; int width, height;... 중복 상속의개요

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 03 모델변환과시점변환 01 기하변환 02 계층구조 Modeling 03 Camera 시점변환 기하변환 (Geometric Transformation) 1. 이동 (Translation) 2. 회전 (Rotation) 3. 크기조절 (Scale) 4. 전단 (Shear) 5. 복합변환 6. 반사변환 7. 구조변형변환 2 기하변환 (Geometric Transformation)

More information

SK Telecom Platform NATE

SK Telecom Platform NATE SK Telecom Platform NATE SK TELECOM NATE Browser VER 2.6 This Document is copyrighted by SK Telecom and may not be reproduced without permission SK Building, SeRinDong-99, JoongRoGu, 110-110, Seoul, Korea

More information

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part2. jquery Ch15. 문서객체조작 2014년 1학기 Professor Seung-Hoon Choi 15 문서객체조작 문서객체조작 자바스크립트만으로문서객체모델을다루려면복잡함 jquery를이용하면쉽게다룰수있다. 이책에서가장중요한부분 15.1 문서객체의클래스속성추가

More information

TFT 2015 04 02 03 3.57 3.98 3.36 3.68 4.06 5% 41% 3.45 3.26 0 1 2 3 4 5 47% 7.1% 13.6% 2.2% 29.3% 13.0% 10.9% 7% 0% 23.9% 24.3% 20.6% 7.5% 5.6% 23.4% 18.7% 15.8% 6.6% 7.7% 20.2% 18.6% 12.0% 19.2% 04 05

More information

Javascript

Javascript 1. HTML 이란? HTML 은 Hyper Text Mark Up Language 의약자로예약되어있는각종태그라는명령어를이용하여웹페이지를작성할때사용하는언어입니다. 2. HTML 의기본구조 < 태그 > 내용 < 태그속성 = 변수 > 내용

More information

Microsoft PowerPoint - web-part03-ch20-XMLHttpRequest기본.pptx

Microsoft PowerPoint - web-part03-ch20-XMLHttpRequest기본.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part3. Ajax Ch20. XMLHttpRequest 2014년 1학기 Professor Seung-Hoon Choi 20 XMLHttpRequest XMLHttpRequest 객체 자바스크립트로 Ajax를이용할때사용하는객체 간단하게 xhr 이라고도부름 서버

More information

WebGL 레슨 3 - 회전 운동

WebGL 레슨 3 - 회전 운동 Created by Firejune at 2011/04/20, Last modified 2016/09/11 WebGL 레슨 3 - 회전 운동 세 번째 WebGL 레슨에 오신 것을 환영합니다. 레슨 2에 이어 이번 레슨에서는 객체가 회전 운동을 할 수 있도록 합니다. 이번 학습은 NeHe OpenGL의 네 번째 튜토리얼을 바탕으로 합니다. 다음 동영상은 이번

More information

Overall Process

Overall Process CSS ( ) Overall Process Overall Process (Contents : Story Board or Design Source) (Structure : extensible HyperText Markup Language) (Style : Cascade Style Sheet) (Script : Document Object Model) (Contents

More information

untitled

untitled A Leader of Enterprise e-business Solution FORCS Co., LTD 1 OZ Application Getting Started (ver 5.1) 2 FORCS Co., LTD A Leader of Enterprise e-business Solution FORCS Co., LTD 3 OZ Application Getting

More information

12 강. 문자출력 Direct3D 에서는문자를출력하기위해서 LPD3DXFONT 객체를사용한다 LPD3DXFONT 객체생성과초기화 LPD3DXFONT 객체를생성하고초기화하는함수로 D3DXCreateFont() 가있다. HRESULT D3DXCreateFont

12 강. 문자출력 Direct3D 에서는문자를출력하기위해서 LPD3DXFONT 객체를사용한다 LPD3DXFONT 객체생성과초기화 LPD3DXFONT 객체를생성하고초기화하는함수로 D3DXCreateFont() 가있다. HRESULT D3DXCreateFont 12 강. 문자출력 Direct3D 에서는문자를출력하기위해서 LPD3DXFONT 객체를사용한다. 12.1 LPD3DXFONT 객체생성과초기화 LPD3DXFONT 객체를생성하고초기화하는함수로 D3DXCreateFont() 가있다. HRESULT D3DXCreateFont( in LPDIRECT3DDEVICE9 pdevice, in INT Height, in UINT

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 4. CSS 스타일시트기초 CSS 의개념 문서의구조 -> HTML 문서의스타일 ->? CSS 의역할 만약 CSS 가없다면 CSS CSS(Cascading Style Sheets): 문서의스타일을지정한다. CSS 의장점 거대하고복잡한사이트를관리할때에필요 모든페이지들이동일한 CSS 를공유 CSS 에서어떤요소의스타일을변경하면관련되는전체페이지의내용이한꺼번에변경

More information

<4D6963726F736F667420576F7264202D20495420C1A6BEC8BCAD20C0DBBCBAB0FA20C7C1B8AEC1A8C5D7C0CCBCC720B1E2B9FD2E646F63>

<4D6963726F736F667420576F7264202D20495420C1A6BEC8BCAD20C0DBBCBAB0FA20C7C1B8AEC1A8C5D7C0CCBCC720B1E2B9FD2E646F63> IT 제안서 작성과 프리젠테이션 기법 프리젠테이션은 현장에서 고객의 반응을 쉽게 파악할 수 있다는 장점이 있다. 하지만 프리젠테이션을 위해 자료를 준비하고 발표하는 작업은 그리 쉽지 않아 프리젠터는 부단한 노력이 필요하다. 이번 강좌에서는 제안서와 프리젠테이션의 차이점을 살펴보고 성공적인 프리젠테이션 절차와 방법을 알아본다. 고홍식 넷모어정보통신 교육센터 대표이사

More information

PART 1 CHAPTER 1 Chapter 1 Note 4 Part 1 5 Chapter 1 AcctNum = Table ("Customer").Cells("AccountNumber") AcctNum = Customer.AccountNumber Note 6 RecordSet RecordSet Part 1 Note 7 Chapter 1 01:

More information

<303020B8D3B8AEB8BB5FC2F7B7CA2832303136B3E2292E687770>

<303020B8D3B8AEB8BB5FC2F7B7CA2832303136B3E2292E687770> 어느덧 K-IFRS 의무적용 원년인 2011년을 지나 2016년을 맞이하였다. K-IFRS의 의무 적용은 우리나라 회계환경의 중요한 변화를 일으켰다. 개별재무제표 위주의 공시체계에서 연결재무제표 중심의 공시체계로의 전환, 금융상품, 퇴직급여 회계, 자산손상, 공정가치 평가 등 거의 모든 분야에 걸친 변화를 일으켰다고 봐도 과언이 아니다. 그동안 K-IFRS는

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 05 장 CSS3 선택자 1. 선택자개요 2. 기본선택자 3. 속성선택자 4. 후손선택자와자손선택자 5. 반응 / 상태 / 구조선택자 CSS 블록을생성할수있다. 선택자를이해하고적절한선택자를활용할수있다. 1 선택자개요 CSS3 선택자 특정한 HTML 태그를선택할때사용하는기능 선택한태그에원하는스타일이나스크립트적용가능 그림 5-1 CSS 블록 CSS 블록 style

More information

Microsoft PowerPoint - 09-Object Oriented Programming-3.pptx

Microsoft PowerPoint - 09-Object Oriented Programming-3.pptx Development of Fashion CAD System 9. Object Oriented Programming-3 Sungmin Kim SEOUL NATIONAL UNIVERSITY Introduction Topics Object Oriented Programming (OOP) 정의 복수의 pattern object 로 이루어지는 새로운 class Pattern

More information

tkinter를 이용한 계산기 구현

tkinter를 이용한 계산기 구현 tkinter 를이용한계산기구현 박창이 서울시립대학교통계학과 박창이 ( 서울시립대학교통계학과 ) tkinter 를이용한계산기구현 1 / 26 학습내용 그림판계산기설계연산가능한계산기 To do 박창이 ( 서울시립대학교통계학과 ) tkinter 를이용한계산기구현 2 / 26 그림판 I 크기 600 400 인캔버스에서화살표를이용하여녹색선으로스케치하며 u 키로화면지움

More information

untitled

untitled A Leader of Enterprise e-business Solution FORCS Co., LTD 1 OZ Application Getting Started 2 FORCS Co., LTD A Leader of Enterprise e-business Solution FORCS Co., LTD 3 OZ Application Getting Started 'OZ

More information

하둡을이용한파일분산시스템 보안관리체제구현

하둡을이용한파일분산시스템 보안관리체제구현 하둡을이용한파일분산시스템 보안관리체제구현 목 차 - 1 - - 2 - - 3 - - 4 - - 5 - - 6 - - 7 - - 8 - 1. 사용자가웹서버에로그인하여다양한서비스 ( 파일업 / 다운로드, 폴더생성 / 삭제 ) 를활용 2. 웹서버와연동된하둡서버에서업 / 다운로드된파일을분산저장. ( 자료송수신은 SSH 활용 ) - 9 - - 10 - - 11 -

More information

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher( 실행할페이지.jsp); 다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp"); dispatcher.forward(request, response); - 위의예에서와같이 RequestDispatcher

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 3. HTML 멀티미디어와입력요소 웹브라우저와멀티미디어 예전방법 : HTML 안에서는 나 태그를사용하여야했고웹브라우저에는플래시나 ActiveX 를설치 HTML5: 와 태그가추가 오디오 요소의속성 오디오파일형식 MP3 'MPEG-1 Audio Layer-3' 의약자로 MPEG

More information

Prototype 분석 - Element 오브젝트 메서드

Prototype 분석 - Element 오브젝트 메서드 Created by Firejune at 2006/09/05 Prototype 분석 - Element 오브젝트 메서드 이 문서는 Backstage of theater.js에서 발췌한 것 입니다. 프로토타입 라이브러리의 엘리먼트 오브젝트 메서드에 대한 내용을 다루는 일부분입니다. 사용성과 편리성에 포커스를 두지 않고 prototype.js 그대로를 분석하여 접근하고

More information

Absolute Blue 태양의 위세 앞에서도 당당한 여자의 자존 심을 닮은 컬러. 바람을 닮아 유연한, 물을 닮아 자유롭게, 거칠 것 없이 여름의 클라 이맥스에 올라서서 세상을 물들이는 소리 없는 지배자, 블루

Absolute Blue 태양의 위세 앞에서도 당당한 여자의 자존 심을 닮은 컬러. 바람을 닮아 유연한, 물을 닮아 자유롭게, 거칠 것 없이 여름의 클라 이맥스에 올라서서 세상을 물들이는 소리 없는 지배자, 블루 뷰티 멘토링 북 Summer 2014 _VOL.12 태양의 열기, 블루 속에 녹아 들다 아스팔트마저 녹일 듯한 과잉된 열기가 피어오르는 여름이라는 무대 위 블루가 등장하는 순간, 여름은 제 2막으로 돌입한다. 바라보기만 해도 청량함 속으로 빠져드는 블루의 절대적 매력. 블루와 함께 여자는 이 여름의 주인공이 된다. 격이 다른 히로인의 컬러 BLUE Absolute

More information

Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드]

Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드] Web Technology Stack HTML, CSS, JS Basics HTML Tutorial https://www.w3schools.com/html/default.asp CSS Tutorial https://www.w3schools.com/css/default.asp JS Tutorial 524730-1 2019 년봄학기 3/11/2019 박경신 https://www.w3schools.com/html/default.asp

More information

자바로

자바로 ! from Yongwoo s Park ZIP,,,,,,,??!?, 1, 1 1, 1 (Snow Ball), /,, 5,,,, 3, 3, 5, 7,,,,,,! ,, ZIP, ZIP, images/logojpg : images/imageszip :, backgroundjpg, shadowgif, fallgif, ballgif, sf1gif, sf2gif, sf3gif,

More information

PowerPoint Presentation

PowerPoint Presentation 웹과인터넷활용및실습 (Web & Internet) Suan Lee - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 1 04. CSS3 스타일속성 04. CSS3 Style Properties - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 2 CSS3 단위 1 CSS 는각각의스타일속성에다양한값을입력

More information

Week3

Week3 2015 Week 03 / _ Assignment 1 Flow Assignment 1 Hello Processing 1. Hello,,,, 2. Shape rect() ellipse() 3. Color stroke() fill() color selector background() 4 Hello Processing 4. Interaction setup() draw()

More information

Syrup Store O2O Marketing Platform/Solution

Syrup Store O2O Marketing Platform/Solution 모바일웹성능최적화동향및사례 : Syrup Store 앱 임상석 SK 플래닛 Syrup Store O2O Marketing Platform/Solution Syrup Store App for SMB HTML5 기반 안드로이드 /ios 앱개발삽질기 왜 HTML5! Front-end 개발자중심으로 Cross Platform 앱내부개발 타협불가최소품질 Native

More information

안전한 웨 애플리케이션을 위한 자바스크립트 보안

안전한 웨 애플리케이션을 위한 자바스크립트 보안 119 안전한웹애플리케이션을위한 Y.E 리앙지음 / 박미정옮김 자바스크립트보안 119 안전한웹애플리케이션을위한 Y.E 리앙지음 / 박미정옮김 자바스크립트보안 이도서는 JavaScript Security(PACKT publishing) 의번역서입니다 표지사진김민국이책의표지는김민국님이보내주신풍경사진을담았습니다. 리얼타임은독자의시선을담은풍경사진을책표지로보여주고자합니다.

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 10 장 jquery 라이브러리 1. jquery 라이브러리설정 2. 문서객체선택 3. 문서객체조작 4. 이벤트 5. 효과 HTML 페이지에 jquery 라이브러리를추가한다. jquery 라이브러리를사용해문서객체를조작할수있다. jquery 라이브러리를사용해문서객체에효과를부여한다. jquery 플러그인을활용한다. 기본예제 10-1 jquery 라이브러리설정하기

More information

<4D F736F F F696E74202D B3E22032C7D0B1E220C0A9B5B5BFECB0D4C0D3C7C1B7CEB1D7B7A1B9D620C1A638B0AD202D20C7C1B7B9C0D320BCD3B5B5C0C720C1B6C0FD>

<4D F736F F F696E74202D B3E22032C7D0B1E220C0A9B5B5BFECB0D4C0D3C7C1B7CEB1D7B7A1B9D620C1A638B0AD202D20C7C1B7B9C0D320BCD3B5B5C0C720C1B6C0FD> 2006 년 2 학기윈도우게임프로그래밍 제 8 강프레임속도의조절 이대현 한국산업기술대학교 오늘의학습내용 프레임속도의조절 30fps 맞추기 스프라이트프레임속도의조절 프레임속도 (Frame Rate) 프레임속도란? 얼마나빨리프레임 ( 일반적으로하나의완성된화면 ) 을만들어낼수있는지를나타내는척도 일반적으로초당프레임출력횟수를많이사용한다. FPS(Frame Per Sec)

More information

untitled

untitled CLEBO PM-10S / PM-10HT Megapixel Speed Dome Camera 2/39 3/39 4/39 5/39 6/39 7/39 8/39 ON ON 1 2 3 4 5 6 7 8 9/39 ON ON 1 2 3 4 10/39 ON ON 1 2 3 4 11/39 12/39 13/39 14/39 15/39 Meg gapixel Speed Dome Camera

More information

SproutCore에 홀딱 반했습니다.

SproutCore에 홀딱 반했습니다. Created by Firejune at 2009/10/30 SproutCore에 홀딱 반했습니다. 회사에서 첨여중인 프로젝트의 시제품(prototype)에 SproutCore 자바스크립트 프레임웍을 적용한 것을 시작으로, 아주 조금씩 조금씩 작동원리를 이해해 가면서 즐거운 나날을 보내고 있습니다. 그렇게 약 2개월 정도 작업이 진행되었고 큰 그림이 머리속에

More information

2005CG01.PDF

2005CG01.PDF Computer Graphics # 1 Contents CG Design CG Programming 2005-03-10 Computer Graphics 2 CG science, engineering, medicine, business, industry, government, art, entertainment, advertising, education and

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Html 은웹에서 text, images, movie 등다양한정보의요소를 담을수있는문서형식이다. 정보 (txt, imges) 전송 = 동일한어플리케이션 = 정보 (txt, imges) 정보 (txt, imges Movie, 동작 ) 정보 (txt, imges movie) 어플리케이션 웹브라우저 HTML5 는기존 HTML 에차별화된특징을가진 최신버전의웹표준언어.

More information

Front-Side 웹개발의이해 (CSS Basic) 1. CSS 란?

Front-Side 웹개발의이해 (CSS Basic) 1. CSS 란? CSS Basic 과정소개 과정목표 : CSS 의기본개념이해 1. CSS 란? 2. CSS 선택자 3. CSS 속성 1 Front-Side 웹개발의이해 (CSS Basic) 1. CSS 란? 1. CSS 란? - 스타일선언이위에서아래로순차적으로적용이되고, 마지막에선언된스타일이우선순위갖음 - 마크업언어 (HTML/XHTML) 가실제화면에표시되는방법을기술하는언어

More information

Ⅰ. Introduction 우리들을 둘러싸고 잇는 생활 환경속에는 무수히 많은 색들이 있습니다. 색은 구매의욕이나 기호, 식욕 등의 감각을 좌우하는 것은 물론 나뭇잎의 변색에서 초목의 건강상태를 알며 물질의 판단에 이르기까지 광범위하고도 큰 역할을 하고 있습니다. 하

Ⅰ. Introduction 우리들을 둘러싸고 잇는 생활 환경속에는 무수히 많은 색들이 있습니다. 색은 구매의욕이나 기호, 식욕 등의 감각을 좌우하는 것은 물론 나뭇잎의 변색에서 초목의 건강상태를 알며 물질의 판단에 이르기까지 광범위하고도 큰 역할을 하고 있습니다. 하 색 이론과 색채관리 Ⅰ. Introduction( 일반색채 이론) Ⅱ. 색의 표현 ⅰ) 색상 ⅱ) 명도 ⅲ) 채도 ⅳ) 색의 종류 ⅴ) 색의 삼원색 ⅵ) 색의 사원색 Ⅲ. 색의 전달 ⅰ) 변천과정 ⅱ) Color space Ⅳ. 색의 재현 ⅰ) 가법 혼합 ⅱ) 감법 혼합 ⅲ) C.C.M System Ⅴ. 색의 관리 ⅰ) 목적 ⅱ) 적용범위 ⅲ) 색차계 ⅳ)

More information

PowerPoint Presentation

PowerPoint Presentation Class - Property Jo, Heeseung 목차 section 1 클래스의일반구조 section 2 클래스선언 section 3 객체의생성 section 4 멤버변수 4-1 객체변수 4-2 클래스변수 4-3 종단 (final) 변수 4-4 멤버변수접근방법 section 5 멤버변수접근한정자 5-1 public 5-2 private 5-3 한정자없음

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 부록. 웹서버구축하기 1 목차 A.1 웹서버시스템 A.2 PHP 사용하기 A.3 데이터베이스연결하기 2 A.1 웹서버시스템 3 웹서버의구축 웹서버컴퓨터구축 웹서버소프트웨어설치및실행 아파치 (Apache) 웹서버가대표적 서버실행프로그램 HTML5 폼을전달받아처리 PHP, JSP, Python 등 데이터베이스시스템 서버측에데이터를저장및효율적관리

More information

슬라이드 1

슬라이드 1 Index 1. 광고상품요약 2. 공통가이드 3. 상품별제작시주의사항 4. 플래시배너액션가이드 5. DM제작가이드 6. 모바일광고제작가이드 7. Contact Us 1. 광고상품요약 상품명사이즈용량 CPM( 원 ) A.CTR 특이사항태그가능여부 CF 480*270 15 초이내 10,000 CTR 1.6% 동영상 wmv 파일 X I-Cover 1000*630

More information

데이터 시각화

데이터 시각화 데이터시각화 박창이 서울시립대학교통계학과 박창이 ( 서울시립대학교통계학과 ) 데이터시각화 1 / 22 학습내용 matplotlib 막대그래프히스토그램선그래프산점도참고 박창이 ( 서울시립대학교통계학과 ) 데이터시각화 2 / 22 matplotlib I 간단한막대그래프, 선그래프, 산점도등을그릴때유용 http://matplotlib.org 에서설치방법참고윈도우의경우명령프롬프트를관리자권한으로실행한후아래의코드실행

More information

Jwplayer 요즘 웹에서 동영상 재생을 목적으로 많이 쓰이는 jwplayer의 설치와 사용하기 입니다. jwplayer홈페이지 : http://www.longtailvideo.com 위의 홈페이지에 가시면 JWplayer를 다운 받으실 수 있습니다. 현재 5.1버전

Jwplayer 요즘 웹에서 동영상 재생을 목적으로 많이 쓰이는 jwplayer의 설치와 사용하기 입니다. jwplayer홈페이지 : http://www.longtailvideo.com 위의 홈페이지에 가시면 JWplayer를 다운 받으실 수 있습니다. 현재 5.1버전 Jwplayer Guide Jwplayer 요즘 웹에서 동영상 재생을 목적으로 많이 쓰이는 jwplayer의 설치와 사용하기 입니다. jwplayer홈페이지 : http://www.longtailvideo.com 위의 홈페이지에 가시면 JWplayer를 다운 받으실 수 있습니다. 현재 5.1버전까지 나왔으며 편리함을 위해서 아래를 링크를 걸어둡니다 [다운로드]

More information

untitled

untitled A Leader of Enterprise e-business Solution FORCS Co., LTD 1 OZ Application Designer Getting Started 2 FORCS Co., LTD A Leader of Enterprise e-business Solution FORCS Co., LTD 3 OZ Application Designer

More information

TViX_Kor.doc

TViX_Kor.doc FF PLAY MENU STOP OK REW STEREO LEFT COAXIAL AUDIO POWER COMPOSITE COMPONENT Pb S-VIDEO COMPONENT Pr USB PORT COMPONENT Y OPTICAL AUDIO STEREO RIGHT POWER LED HDD LED TViX PLAY REMOTE RECEIVER POWER ON

More information

untitled

untitled A Leader of Enterprise e-business Solution FORCS Co., LTD 1 OZ Application Designer Getting Started 2 FORCS Co., LTD A Leader of Enterprise e-business Solution FORCS Co., LTD 3 OZ Application Designer

More information

Microsoft PowerPoint - Java7.pptx

Microsoft PowerPoint - Java7.pptx HPC & OT Lab. 1 HPC & OT Lab. 2 실습 7 주차 Jin-Ho, Jang M.S. Hanyang Univ. HPC&OT Lab. jinhoyo@nate.com HPC & OT Lab. 3 Component Structure 객체 (object) 생성개념을이해한다. 외부클래스에대한접근방법을이해한다. 접근제어자 (public & private)

More information