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

Size: px
Start display at page:

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

Transcription

1 1. 기본내용 1.1 캔버스 Ÿ canvas 요소는웹페이지에서자바스크립트를통해즉시그림을그리는데사용되며단순한그림표현을넘어여러효과와함께텍스트및애니메이션표현이가능하다. Ÿ 그림을그리기위해서는 <canvas> 를사용해서그림영역을지정하고, 자바스크립트를사용해서실제그림을그린다. 1.2 캔버스좌표시스템 Ÿ 캔버스의좌표시스템은 2D 컨텍스트로, 왼쪽상단모서리에있는평면직교표면을 (0,0) 으로시작해서오른쪽으로 X 좌표값이, 아래쪽으로 Y 좌표값이증가하는구조이다. 1.3 그림영역지정 Ÿ canvas 요소에가로및세로크기를지정하지않으면, 브라우저는자동으로가로 300 픽셀, 세로 150픽셀크기의캔버스를생성한다. width 속성과 height 속성을이용하여캔버스의크기를변경할수있다. 예제 <!DOCTYPE html><html><head></head> <body> <canvas id="canvas" width="700" height="400" style="border:solid 1px #ff0000"> 이브라우저는canvas를지원하지않습니다.</canvas> </body></html> - 1 -

2 Ÿ 캔버스의크기와드로잉표면의크기 <canvas> 요소의 width/height 속성사용하여변경하면캔버스크기를드로잉표면의크기로자동변경한다. CSS를사용해서캔버스크기를지정하는경우는드로잉표면의크기는변경할수없기때문에캔버스와드로잉표면의불일치로인하여예기치않은결과를발생시킬수있음에주의해야한다. Ÿ 브라우저화면의크기를기준으로캔버스크기를변경하는경우는윈도우객체의 innerwidth 및 innerheight 값을이용한다. 1.4 캔버스컨텍스트 Ÿ 컨텍스트는모든그래픽능력을제공한다. 캔버스는컨텍스트를위한컨테이너로서의역할만하고실제로캔버스에그리는등의기능들은모두컨텍스트를통하여처리한다. 1.5 캔버스상태의저장및복원 Ÿ 드로잉상태를저장하고복원하기위한 context.save() context.restore() 메소드를제공한다. Ÿ 드로잉상태는현재의변환행렬, 현재의클리핑영역으로구성되어있다. 예제 - 2 -

3 <!DOCTYPE html><html><head> function save_restore() { var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); / * 드로잉상태를 3 개저장 * / var colors = new Array ( "red", "blue", "green"); var alphas = new Array (0.2, 0.5, 0.8); for (var i = 0; i < 3; i++) { context.fillstyle = colors[i]; context.globalalpha = alphas[i]; context.save(); / * 저장된드로잉상태를복원하여원 3개를그린다 * / for (var i = 0; i < 3; i++) { context.restore(); context.arc((i+1) * 120, 120, 100, 0, Math.PI * 2, false); context.fill(); </head> <body onload="save_restore();"> <canvas id="mycanvas" width="500" height="250" style="border: 10px inset #aaa"> 캔버스에사각형그리기연습 </canvas></body> </html> 1.6 드로잉작업을위한기본형태 Ÿ 브라우저에그림을그리기위해서는캔버스요소를사용하여그림을그리고자하는영역을정의하고실제그림을그리는것은자바스크립트를사용하여그린다

4 Ÿ canvas 요소에폭과높이를지정하고, 자바스크립트에서사용할아이디값을지정한다. Ÿ canvas 요소의아이디를문서의 getelementbyid( 아이디 ) 메서드를호출하여 canvas 객체를생성하고 getcontext( 2d ) 메서드를호출하여그리기컨텍스트를생성한다. 예제 <!DOCTYPE html><html><head> <style> canvas { margin: 10px; padding 10px; border: 10px inset #aaa </style> function drawtext () { var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); context.font = "24pt 굴림체 "; context.fillstyle = "maroon"; context.filltext(" 그림을그립시다 ", canvas.width/2-130, canvas.height/2 + 15); </head> <body onload="drawtext();"> <canvas id="mycanvas" width="300" height="200"> 이브라우저는 canvas 요소를지원하지않습니다. </canvas> </body></html> - 4 -

5 2. 사각형그리기 2.1 사각형그리기 Ÿ 시작점 (x, y) 을제공하고, 다른 2 개는사각형의폭 (W) 및높이 (H) 를제공한다. 2.2 사각형그리기관련메서드 Ÿ context.fillrect (x, y, w, h) 메서드는색이채워진사각형영역을그린다. 현재의채우기스타일 fillstyle 속성을사용하여지정한사각형영역의캔버스에채워진사각형을그린다. Ÿ context.strokerect (x, y, w, h) 메서드는테두리만있는사각형영역을그린다. Ÿ context.clearrect (x, y, w, h) 메서드는지정한사각형영역을지운다. 현재클리핑영역과교차하는지정한사각형영역에있는모든픽셀을투명한검은색으로채운다. 예제사각형그리기 <!DOCTYPE html><html><head> function rect() { var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); context.linejoin = "round"; context.linewidth = 20; context.strokestyle = "blue"; context.fillstyle = "green"; context.strokerect(50, 100, 200, 200); context.fillrect(300, 100, 200, 200); context.fillrect(550, 100, 200, 200); context.clearrect(600, 150, 100, 100); </head> <body onload="rect();"> <canvas id="mycanvas" width="800" height="400" style="border: 10px inset #aaa"> - 5 -

6 캔버스에사각형그리기연습 </canvas> </body> </html> 3. 선그리기 3.1 패스와서브패스 Ÿ 캔버스에서는각도형들을이루는선들의집합을패스 (Path) 라고하고각각의선을서브패스라고한다. Ÿ 컨텍스트의메서드를이용하여선이나도형을그리고자할때는 beginpath() 함수를호출하여패스를초기화한다. 그리고다양한메서드를사용하여패스를지정하고선이나도형을그린다. 마지막으로지정한패스를닫고선이나도형을출력해야한다. Ÿ beginpath() 메서드는현재패스를초기화한다. 이전까지그렸던패스를모두초기화하고새로운패스를그린다는의미이다. Ÿ closepath() 메서드는현재패스를닫는다. 패스그리는것을종료한다는의미이다. Ÿ lineto(x, y) 메서드는직선을연결한다. 이전위치에서의점과현재서브패스에주어진점을추가하여선을그린다. Ÿ moveto(x, y) 메서드는주어진점으로시작하는새로운서브패스를만든다. Ÿ stroke() 메서드는현재패스또는주어진패스의서브패스를현재의선스타일로그린다. Ÿ fill() 메서드는현재패스또는주어진패스의서브패스를현재의채우기스타일로채운다. Ÿ rect(x, y, w, h) 메서드는사각형을그린다. 3.2 선그리기 Ÿ 시작점을지정하기위해서는 moveto() 메서드를사용한다. 그리고다음위치까지의점을지정하여선을그리기위해서는 lineto() 메서드를사용한다. 그리고 stroke() 메서드를사용해서선을출력한다

7 예제선그리기 <!DOCTYPE html><html><head> function Line() { var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); context.moveto(20, 20); context.lineto(150, 150); context.lineto(150, 20); context.lineto(280, 150); </head> <body onload="line();"> <canvas id="mycanvas" width="800" height="400" style="border: 10px inset #aaa"> 캔버스에사각형그리기연습 </canvas> </body></html> 3.3 선의경계와픽셀경계 Ÿ 일반적으로픽셀을다루는컴퓨터그래픽시스템에서는픽셀의위치를정수단위로처리하기때문에픽셀의경계또한정수단위로이루어진다. 그리고캔버스컨텍스트에서는선을그릴때두께를지정할수있기때문에선의중간에서상하 / 좌우 0.5 픽셀만큼씩그리려고한다. 따라서왼쪽그림과같이 1.5에서상하 0.5 픽셀만큼확장하고, 2.5에서상하 0.5픽셀만큼확장하기때문에결국에는 2픽셀크기만큼선이그려진다. 그러나오른쪽그림에서는상하 0.5 픽셀만큼씩확장하면정수단위의픽셀만큼씩확장하면정수단위의픽셀경계가되기때문에 1픽셀만큼만그려지는것을볼수있다. 정확한픽셀두께만큼의선을그리려면펙셀사이의실수값위치를지정해야함을잊지말자

8 3.4 다각형그리기 Ÿ 선그리기메서드에서 closepath() 메서드를사용하면다각형을그릴수있다. Ÿ closepath() 메서드는선이마지막으로종료된지점과최초의지점을자동을연결한다. 예제선그리기 <!DOCTYPE html><html><head> function polygon() { var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); context.moveto(150, 10); context.lineto(80, 350); context.lineto(350, 350); context.lineto(280, 10); context.closepath(); </head> <body onload="polygon();"> <canvas id="mycanvas" width="600" height="400" style="border: 10px inset #aaa"> 캔버스에그리기연습 </canvas> </body> </html> 정다각형을그리는알고리즘 Ÿ 정다각형은모든각도와모든측면이동일하다. 또한모든꼭지점은원안에위치한다는것을확인할수있다. Ÿ 입력 : 좌표 (x, y), 반지름 (R), 면의수 (N), 시작각도 (startangle) - 8 -

9 Ÿ 원의반지름 (R) 과면의수 (N) 를계산한다. (3 각형은 3 면, 4 각형은 4 면, 5 각형은 5 면 ) if ( N < 3) return; Ÿ 원의중심으로부터정다각형의각측면에의한각도 (360/N) 계산한다. Ÿ var degree = (Math.PI*2)/N; context.save(); context.translate(x,y); context.rotate(startangle); 첫번째꼭지점의위치를 (R, 0) 으로지정 context.moveto(r, 0); Ÿ 면의수 (N) 만큼루프를통해서꼭지점이위치하는각도계산한다. 각꼭지점들끼리의드로잉을수행한다. for (var i=0; i<n; i++) context.lineto(r*math.cos(degree*i), R*Math.sin(degree*i)); context.closepath(); context.restore(); 3.5 점선그리기 Ÿ context.setlinedash(segments) 는현재점선의패턴을설정한다. segments 값은점선의패턴으로선이그려지는부분과그려지지않는부분이반복되는배열이된다. Ÿ segment = context.getlinedash( ) 는현재점선의패턴을반환한다. Ÿ context.linedashoffset [=value] 점선모양의패턴과동일한단위에서의위상오프셋을반환한다. 선의모양의점선패턴으로변경한다. Ÿ setlinedash() 에서 segments 인자의사용방법은다음그림과같다

10 예제점선그리기 <!DOCTYPE html><html><head> function LineDash() { var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); // 사각형그리기 context.setlinedash([5,2]); context.rect(30,15,100,100); // 삼각형그리기 context.setlinedash([1,2]); context.moveto(145,115); context.lineto(195,15); context.lineto(245,115); context.closepath(); // 다각형그리기 context.fillstyle = 'lightblue'; context.setlinedash([15]); context.moveto(260,115); context.lineto(275,95); context.lineto(305,15); context.lineto(345,65); context.lineto(345,115); context.closepath();

11 context.fill(); </head> <body onload="linedash();"> <canvas id="mycanvas" width="400" height="150" style="border: 10px inset #aaa"> 캔버스에점선그리기연습 </canvas> </body> </html> 3.6 선스타일지정 Ÿ 선의색상을지정하고자할때는 strokestyle 속성을사용한다. context.strokestyle [=value] Ÿ 선의두께를지정할때는 linewidth 속성을사용한다. context.linewidth [=value] Ÿ 선의연결부분의스타일지정할때는 linejoin 속성을사용한다. context.linejoin [= bevel round miter( 기본 ) ] Ÿ 선의끝부분의스타일을지정할때는 linecap 속성을사용한다. context.linecap [= butt( 기본 ) round square ] 예제선스타일지정 <!DOCTYPE html><html><head> function LineJoin() { var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); var linestart = 50, lineend = 200, ystart = 50; context.linewidth = "25"; // bevel corner

12 context.strokestyle = "Red"; context.linejoin = "bevel"; // 선의연결부분스타일을지정. context.moveto(linestart, ystart); context.lineto(lineend, ystart); context.lineto(lineend, ystart + 150); // round corner. context.strokestyle = "blue"; context.linejoin = "round"; // 선의연결부분스타일지정 context.moveto(linestart + 200, ystart); context.lineto(lineend + 200, ystart); context.lineto(lineend + 200, ystart + 150); // miter. context.strokestyle = "green"; context.linejoin = "miter"; // 선의연결부분스타일을지정 context.moveto(linestart + 400, ystart); context.lineto(lineend + 400, ystart); context.lineto(lineend + 400, ystart + 150); </head> <body onload="linejoin();"> <canvas id="mycanvas" width="650" height="250" style="border: 10px inset #aaa"> 캔버스연습하기 </canvas> </body> </html> Ÿ 선의연결부분의스타일이 miter인경우 miter 길이의비율을지정하고자할때는 miterlimit 속성을사용한다. 선의 miter 연결부분의한계비율 = (miter 길이 ) / ( 선두께의 1/2 크기 ) context.miterlimit [= value]

13 예제 miterlimit 속성 <!DOCTYPE html><html><head></head> <body><canvas id="mycanvas" width="200" height="200" style="border: 10px inset #aaa"> 캔버스연습하기 </canvas> var canvas = document.getelementbyid('mycanvas'); var context = canvas.getcontext('2d'); // 첫번째연결선을그린다. context.linewidth = 20; context.miterlimit = 3.0; context.strokestyle = "lightblue"; context.moveto(30, 140); context.lineto(50, 80); context.lineto(70, 140); // 보조선을선중간에그린다 context.linewidth = 1; context.strokestyle = "red"; context.moveto(30, 140); context.lineto(50, 80); context.lineto(70, 140); // 두번째연결선을그린다. context.linewidth = 20; context.miterlimit = 10.0; context.strokestyle = "lightblue"; context.moveto(130, 140); context.lineto(150, 80); context.lineto(170, 140); // 보조선을선중간에그린다 context.linewidth = 1; context.strokestyle = "red"; context.moveto(130, 140); context.lineto(150, 80); context.lineto(170, 140);

14 </body> </html>

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 11. 자바스크립트와캔버스로게임 만들기 캔버스 캔버스는 요소로생성 캔버스는 HTML 페이지상에서사각형태의영역 실제그림은자바스크립트를통하여코드로그려야한다. 컨텍스트객체 컨텍스트 (context) 객체 : 자바스크립트에서물감과붓의역할을한다. var canvas = document.getelementbyid("mycanvas"); var

More information

예제 <!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

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

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

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

More information

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

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

More information

쉽게 풀어쓴 C 프로그래밍

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

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

HTML5-³¹Àå¿ë.PDF

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

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

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

슬라이드 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

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

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

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

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

Microsoft PowerPoint - web-part02-ch16-이벤트.pptx

Microsoft PowerPoint - web-part02-ch16-이벤트.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part2. jquery Ch16. 이벤트 2014년 1학기 Professor Seung-Hoon Choi 16 이벤트 jquery 에서는 자바스크립트보다더쉽게이벤트를연결할수있음 예 $(document).ready(function(event) { } ) 16.1

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

쉽게 풀어쓴 C 프로그래밍

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

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 System Software Experiment 1 Lecture 5 - Array Spring 2019 Hwansoo Han (hhan@skku.edu) Advanced Research on Compilers and Systems, ARCS LAB Sungkyunkwan University http://arcs.skku.edu/ 1 배열 (Array) 동일한타입의데이터가여러개저장되어있는저장장소

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

Microsoft PowerPoint 세션.ppt

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

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

Microsoft PowerPoint - web-part01-ch09-브라우저객체모델.pptx

Microsoft PowerPoint - web-part01-ch09-브라우저객체모델.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part1. JavaScript / Ch09. 브라우저객체모델 2014년 1학기 Professor Seung-Hoon Choi 9 브라우저객체모델 브라우저객체모델 (Browser Object Model, BOM) 웹브라우저와관련된객체들의집합 window, location,

More information

Structure and Interpretation of Computer Programs: Assignment 3 Seung-Hoon Na October 4, George (아래 3개의 문제에 대한 구현이 모두 포함된 george.rkt파일을 제출하시오.

Structure and Interpretation of Computer Programs: Assignment 3 Seung-Hoon Na October 4, George (아래 3개의 문제에 대한 구현이 모두 포함된 george.rkt파일을 제출하시오. Structure and Interpretation of Computer Programs: Assignment 3 Seung-Hoon Na October 4, 2018 1 George (아래 3개의 문제에 대한 구현이 모두 포함된 george.rkt파일을 제출하시오. 실행후 Problem 1.3에 대한 Display결과가 나와야 함) George 그림은 다음과

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

; struct point p[10] = {{1, 2, {5, -3, {-3, 5, {-6, -2, {2, 2, {-3, -3, {-9, 2, {7, 8, {-6, 4, {8, -5; for (i = 0; i < 10; i++){ if (p[i].x > 0 && p[i

; struct point p[10] = {{1, 2, {5, -3, {-3, 5, {-6, -2, {2, 2, {-3, -3, {-9, 2, {7, 8, {-6, 4, {8, -5; for (i = 0; i < 10; i++){ if (p[i].x > 0 && p[i ; struct point p; printf("0이아닌점의좌표를입력하시오 : "); scanf("%d %d", &p.x, &p.y); if (p.x > 0 && p.y > 0) printf("1사분면에있다.\n"); if (p.x < 0 && p.y > 0) printf("2사분면에있다.\n"); if (p.x < 0 && p.y < 0) printf("3사분면에있다.\n");

More information

Open GL

Open GL Graphics Basic Windows & OpenGL Programming 컴퓨터그래픽스연구실 OpenGL 관련참고사이트 OpenGL 공식사이트 http://www.opengl.org/ Khronos Group http://www.khronos.org/ Nehe Productions http://nehe.gamedev.net/ OpenGL 파일설정 압축을푼후다음경로로파일을복사

More information

Microsoft PowerPoint 웹 연동 기술.pptx

Microsoft PowerPoint 웹 연동 기술.pptx 웹프로그래밍및실습 ( g & Practice) 문양세강원대학교 IT 대학컴퓨터과학전공 URL 분석 (1/2) URL (Uniform Resource Locator) 프로토콜, 호스트, 포트, 경로, 비밀번호, User 등의정보를포함 예. http://kim:3759@www.hostname.com:80/doc/index.html URL 을속성별로분리하고자할경우

More information

e-비즈니스 전략 수립

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

More information

HTML5

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

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

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

기본도형과작도 1 강 - 연습문제 1. 오른쪽그림과같이직선l 위에점,, 가있을때, 옳지않은것은? 1 = 2 = 3 = 직선l 4 = 5 = l 2. 오른쪽그림에서 = = 이다. 다음( ) 안에알맞은수를쓰시오. 1 =( 2 =( 3 =( 4 =( ) ) ) ) 3. 한평

기본도형과작도 1 강 - 연습문제 1. 오른쪽그림과같이직선l 위에점,, 가있을때, 옳지않은것은? 1 = 2 = 3 = 직선l 4 = 5 = l 2. 오른쪽그림에서 = = 이다. 다음( ) 안에알맞은수를쓰시오. 1 =( 2 =( 3 =( 4 =( ) ) ) ) 3. 한평 기본도형과작도 1 강 - 점, 선, 면 사이버스쿨우프선생 www.cyberschool.co.kr 도형의기본요소 1. 점 : 크기가없다. 0 차원, 있는것처럼점을찍는다. 2. 선 : 점이움직인자취( 흔적), 1차원 3. 면 : 선이움직인자취, 2차원 교점 : ( 선 + 선), ( 선 + 면) 이만나는점 교선 : ( 면 + 면) 이만나는선 [ 예제 1] 삼각뿔에서교점과교선의수는?

More information

벡터(0.6)-----.hwp

벡터(0.6)-----.hwp 만점을위한 수학전문가남언우 - 벡터 1강 _ 분점의위치벡터 2강 _ 벡터의일차결합 3강 _ 벡터의연산 4강 _ 내적의도형적의미 5강 _ 좌표를잡아라 6강 _ 내적의활용 7강 _ 공간도형의방정식 8강 _ 구의방정식 9강 _2014년수능최고난도문제 좌표공간에 orbi.kr 1 강 _ 분점의위치벡터 01. 1) 두점 A B 이있다. 평면 에있는점 P 에대하여 PA

More information

미쓰리 파워포인트

미쓰리 파워포인트 computer & internet 07. FRAME TAG FRAME? 프레임이란? : 웹페이지를수직이나수평으로여러개영역으로나누어다른웹문서가들어갈수있도록구성할수있음. 이때나누어진각각의창을프레임이라고함. 2 FRAME 문서의구조 HTML 문서에서 태그기능을 프레임문서구조에서는 이대신함 일반웹페이지구조 ..

More information

Microsoft PowerPoint - 05geometry.ppt

Microsoft PowerPoint - 05geometry.ppt Graphic Applications 3ds MAX 의기초도형들 Geometry 3 rd Week, 2007 3 차원의세계 축 (Axis) X, Y, Z 축 중심점 (Origin) 축들이모이는점 전역축 (World Coordinate Axis) 절대좌표 지역축 (Local Coordinate Axis) 오브젝트마다가지고있는축 Y Z X X 다양한축을축을사용한작업작업가능

More information

xlogo 1.0 beta version < 기본중의기본 > 1. 키워드 ( 명령어 ) 는변수명으로사용될수없다. 2. 키워드는대소문자를구분하지않고사용할수있다. 3. 변수명은대소문자를구분한다. 4. 변수를명시적으로정의하는과정필요없이값을대입하는순간변수정의되고, 대입한값의성

xlogo 1.0 beta version < 기본중의기본 > 1. 키워드 ( 명령어 ) 는변수명으로사용될수없다. 2. 키워드는대소문자를구분하지않고사용할수있다. 3. 변수명은대소문자를구분한다. 4. 변수를명시적으로정의하는과정필요없이값을대입하는순간변수정의되고, 대입한값의성 xlogo 1.0 beta version < 기본중의기본 > 1. 키워드 ( 명령어 ) 는변수명으로사용될수없다. 2. 키워드는대소문자를구분하지않고사용할수있다. 3. 변수명은대소문자를구분한다. 4. 변수를명시적으로정의하는과정필요없이값을대입하는순간변수정의되고, 대입한값의성질에따라변수타입이결정된다. 5. 명령어구분이명확한경우에는 ; 를사용하지않아도된다. 6. 키워드는여러별칭이있을수있으며별칭을사용하여도된다.

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

More information

JAVA 프로그래밍실습 실습 1) 실습목표 - 메소드개념이해하기 - 매개변수이해하기 - 새메소드만들기 - Math 클래스의기존메소드이용하기 ( ) 문제 - 직사각형모양의땅이있다. 이땅의둘레, 면적과대각

JAVA 프로그래밍실습 실습 1) 실습목표 - 메소드개념이해하기 - 매개변수이해하기 - 새메소드만들기 - Math 클래스의기존메소드이용하기 (   ) 문제 - 직사각형모양의땅이있다. 이땅의둘레, 면적과대각 JAVA 프로그래밍실습 실습 1) 실습목표 - 메소드개념이해하기 - 매개변수이해하기 - 새메소드만들기 - Math 클래스의기존메소드이용하기 ( http://java.sun.com/javase/6/docs/api ) 문제 - 직사각형모양의땅이있다. 이땅의둘레, 면적과대각선의길이를계산하는메소드들을작성하라. 직사각형의가로와세로의길이는주어진다. 대각선의길이는 Math클래스의적절한메소드를이용하여구하라.

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

WebGL 레슨 3 - 회전 운동

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

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

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

Javascript

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

More information

도형의닮음 1 강 - 닮은도형과닮음중심 사이버스쿨우프선생 닮음도형 : 일정한비율로확대또는축소하였을때닮음모양의도형 기호 : ABCD A'B'C'D' [ 예제 1 ] 그림에서와같이두닮은도형 ABCD 와 A'B'C'D' 에서대응점, 대

도형의닮음 1 강 - 닮은도형과닮음중심 사이버스쿨우프선생   닮음도형 : 일정한비율로확대또는축소하였을때닮음모양의도형 기호 : ABCD A'B'C'D' [ 예제 1 ] 그림에서와같이두닮은도형 ABCD 와 A'B'C'D' 에서대응점, 대 도형의닮음 1 강 - 닮은도형과닮음중심 사이버스쿨우프선생 www.cyberschool.co.kr 닮음도형 : 일정한비율로확대또는축소하였을때닮음모양의도형 기호 : '''' [ 예제 1 ] 그림에서와같이두닮은도형 와 '''' 에서대응점, 대응변을말하여라. ' ' ' ' [ 풀이] 대응점 : 와 ', 와 ', 와 ', 와 ' 대응변 : 와 '', 와 '', 와 '',

More information

HTML5

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

More information

PowerPoint 프레젠테이션

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

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

chap 5: Trees

chap 5: Trees 5. Threaded Binary Tree 기본개념 n 개의노드를갖는이진트리에는 2n 개의링크가존재 2n 개의링크중에 n + 1 개의링크값은 null Null 링크를다른노드에대한포인터로대체 Threads Thread 의이용 ptr left_child = NULL 일경우, ptr left_child 를 ptr 의 inorder predecessor 를가리키도록변경

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

기초제도14강

기초제도14강 14 로기본도형그리기 (2) 학습목표 시스템으로직선그리기및문자쓰기를할수있다. 시스템으로여러가지기본도형을그릴수있다. 1. 도면양식요소그리기 ⑴ 직선그리기 (LINE 또는 ) : 가장기본적인도면요소인직선을그리는명령어이다. 1 좌표를이용한선그리기 좌표의종류 입력방법 표시방법 절대좌표 원점 (0, 0) 으로부터의좌표값을입력 (X, Y) 상대좌표 현지점에서의상대적증분거리를입력

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

혼자서일을다하는 JSP. 이젠일을 Servlet 과나눠서한다. JSP와서블릿의표현적인차이 - JSP는 <html> 내에서자바를사용할수있는수단을제공한다. - 서블릿은자바내에서 <html> 을작성할수있는수단을제공한다. - JSP나서블릿으로만웹페이지를작성하면자바와다양한코드가

혼자서일을다하는 JSP. 이젠일을 Servlet 과나눠서한다. JSP와서블릿의표현적인차이 - JSP는 <html> 내에서자바를사용할수있는수단을제공한다. - 서블릿은자바내에서 <html> 을작성할수있는수단을제공한다. - JSP나서블릿으로만웹페이지를작성하면자바와다양한코드가 혼자서일을다하는 JSP. 이젠일을 Servlet 과나눠서한다. JSP와서블릿의표현적인차이 - JSP는 내에서자바를사용할수있는수단을제공한다. - 서블릿은자바내에서 을작성할수있는수단을제공한다. - JSP나서블릿으로만웹페이지를작성하면자바와다양한코드가웹페이지내에뒤섞여있어서웹페이지의화면설계가점점어려워진다. - 서블릿이먼저등장하였으나, 자바내에

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

제 53 회서울특별시과학전람회 예선대회작품설명서 본선대회작품설명서 쓰나미의피해를최소화시키는건물과 건물배치에대한탐구 출품번호 S-504 출품분야학생부출품부문지구과학 학교명학년 ( 직위 ) 성명

제 53 회서울특별시과학전람회 예선대회작품설명서 본선대회작품설명서 쓰나미의피해를최소화시키는건물과 건물배치에대한탐구 출품번호 S-504 출품분야학생부출품부문지구과학 학교명학년 ( 직위 ) 성명 제 53 회서울특별시과학전람회 예선대회작품설명서 본선대회작품설명서 쓰나미의피해를최소화시키는건물과 건물배치에대한탐구 출품번호 S-504 출품분야학생부출품부문지구과학 2012. 5. 14. 학교명학년 ( 직위 ) 성명 - 1 - 그림 1 쓰나미의발생과정 그림 2 실제쓰나미의사진 ρ - 2 - 그림 3 땅을파는모습그림 4 완성된수조의모습 - 3 - 그림 5 삼각기둥그림

More information

Prototype에서 jQuery로 옮겨타기

Prototype에서 jQuery로 옮겨타기 Created by Firejune at 2008/11/10, Last modified 2016/09/11 Prototype에서 jquery로 옮겨타기 jquery는 겸손한(unobtrusive) 자바스크립트를 위한 자바스크립트 라이브러리다. jquery는 태생적으로 BDD(Behavior driven development) 방법론을 지향하고 CSS 셀렉터를

More information

쉽게 풀어쓴 C 프로그래밍

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

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

gnu-lee-oop-kor-lec06-3-chap7

gnu-lee-oop-kor-lec06-3-chap7 어서와 Java 는처음이지! 제 7 장상속 Super 키워드 상속과생성자 상속과다형성 서브클래스의객체가생성될때, 서브클래스의생성자만호출될까? 아니면수퍼클래스의생성자도호출되는가? class Base{ public Base(String msg) { System.out.println("Base() 생성자 "); ; class Derived extends Base

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

PowerPoint 프레젠테이션

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

More information

PowerPoint Presentation

PowerPoint Presentation public class SumTest { public static void main(string a1[]) { int a, b, sum; a = Integer.parseInt(a1[0]); b = Integer.parseInt(a1[1]); sum = a + b ; // 두수를더하는부분입니다 System.out.println(" 두수의합은 " + sum +

More information

2장 변수와 프로시저 작성하기

2장  변수와 프로시저 작성하기 Chapter. RequestDispatcher 활용 요청재지정이란? RequestDispatcher 활용 요청재지정구현예제 Chapter.9 : RequestDispatcher 활용 1. 요청재지정이란? 클라이언트로부터요청받은 Servlet 프로그램이응답을하지않고다른자원에수행흐름을넘겨다른자원의처리결과를대신응답하는것또는다른자원의수행결과를포함하여응답하는것을요청재지정이라고한다.

More information

<4D F736F F F696E74202D20C1A63038C0E520C5ACB7A1BDBABFCD20B0B4C3BC4928B0ADC0C729205BC8A3C8AF20B8F0B5E55D>

<4D F736F F F696E74202D20C1A63038C0E520C5ACB7A1BDBABFCD20B0B4C3BC4928B0ADC0C729205BC8A3C8AF20B8F0B5E55D> Power Java 제 8 장클래스와객체 I 이번장에서학습할내용 클래스와객체 객체의일생직접 메소드클래스를 필드작성해 UML 봅시다. QUIZ 1. 객체는 속성과 동작을가지고있다. 2. 자동차가객체라면클래스는 설계도이다. 먼저앞장에서학습한클래스와객체의개념을복습해봅시다. 클래스의구성 클래스 (class) 는객체의설계도라할수있다. 클래스는필드와메소드로이루어진다.

More information

Microsoft PowerPoint - ch07 - 포인터 pm0415

Microsoft PowerPoint - ch07 - 포인터 pm0415 2015-1 프로그래밍언어 7. 포인터 (Pointer), 동적메모리할당 2015 년 4 월 4 일 교수김영탁 영남대학교공과대학정보통신공학과 (Tel : +82-53-810-2497; Fax : +82-53-810-4742 http://antl.yu.ac.kr/; E-mail : ytkim@yu.ac.kr) Outline 포인터 (pointer) 란? 간접참조연산자

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

<4D F736F F F696E74202D20C1A63236C0E520BED6C7C3B8B428B0ADC0C729205BC8A3C8AF20B8F0B5E55D>

<4D F736F F F696E74202D20C1A63236C0E520BED6C7C3B8B428B0ADC0C729205BC8A3C8AF20B8F0B5E55D> Power Java 제 26 장애플릿 이번장에서학습할내용 애플릿소개 애플릿작성및소개 애플릿의생명주기 애플릿에서의그래픽컴포넌트의소개 Applet API의이용 웹브라우저상에서실행되는작은프로그램인애플릿에대하여학습합니다. 애플릿이란? 애플릿은웹페이지같은 HTML 문서안에내장되어실행되는자바프로그램이다. 애플릿을실행시키는두가지방법 1. 웹브라우저를이용하는방법 2. Appletviewer를이용하는방법

More information

PowerPoint Presentation

PowerPoint Presentation 객체지향프로그래밍 클래스, 객체, 메소드 ( 실습 ) 손시운 ssw5176@kangwon.ac.kr 예제 1. 필드만있는클래스 텔레비젼 2 예제 1. 필드만있는클래스 3 예제 2. 여러개의객체생성하기 4 5 예제 3. 메소드가추가된클래스 public class Television { int channel; // 채널번호 int volume; // 볼륨 boolean

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

웹개발을위한 ComponentOne 사용법 (2) 권대건 부산대학교컴퓨터공학과 Abstract 최근웹개발이활성화되면서전문가를위한여러가지 Tool 웹애플리케이션형태로제공하는경우가늘고있다. ComponentOne 은.NET 기반의 UI C

웹개발을위한 ComponentOne 사용법 (2) 권대건 부산대학교컴퓨터공학과 Abstract 최근웹개발이활성화되면서전문가를위한여러가지 Tool 웹애플리케이션형태로제공하는경우가늘고있다. ComponentOne 은.NET 기반의 UI C 웹개발을위한 ComponentOne 사용법 (2) 권대건 부산대학교컴퓨터공학과 duskan@pusan.ac.kr Abstract 최근웹개발이활성화되면서전문가를위한여러가지 Tool 웹애플리케이션형태로제공하는경우가늘고있다. ComponentOne 은.NET 기반의 UI Component 로.NET 기반의다양한사용자인터페이스를제공한다. 그중에서도특히 Chart 에대하여

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

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

<4D F736F F F696E74202D204347C3E2BCAEBCF6BEF D325FC4C4C7BBC5CDB1D7B7A1C7C8BDBA20B1E2BABBBFE4BCD22E >

<4D F736F F F696E74202D204347C3E2BCAEBCF6BEF D325FC4C4C7BBC5CDB1D7B7A1C7C8BDBA20B1E2BABBBFE4BCD22E > 목차 1 점그리기 2 선그리기 3 다각형그리기 이병래교수 / 방송대컴퓨터과학과 점그리기 OpenGL - 꼭짓점지정 점 glverte* 함수 하나의좌표로표현되는기하요소 void glverte*( 좌표 ); 3 차원그래픽스에서는기본적으로,, z의세좌표축으로표현되는 3차원직교좌표계를사용하여점의좌표를표현함 와 축으로표현되는 2차원평면은 z축의값이 0인 3차원좌표로볼수있음

More information

8장.그래픽 프로그래밍

8장.그래픽 프로그래밍 윈도우프레임 도형그리기색과폰트이미지그리기그리기응용 2 윈도우프레임 제목표시줄을갖는윈도우를의미 생성과정 1 JFrame 객체생성 2 프레임의크기설정 3 프레임의제목설정 4 기본닫힘연산지정 5 프레임이보이도록만듦. 3 윈도우프레임예제 [ 예제 8.1 - EmptyFrameViewer.java] import javax.swing.*; public class EmptyFrameViewer

More information

이 장에서 사용되는 MATLAB 명령어들은 비교적 복잡하므로 MATLAB 창에서 명령어를 직접 입력하지 않고 확장자가 m 인 text 파일을 작성하여 실행을 한다

이 장에서 사용되는 MATLAB 명령어들은 비교적 복잡하므로 MATLAB 창에서 명령어를 직접 입력하지 않고 확장자가 m 인 text 파일을 작성하여 실행을 한다 이장에서사용되는 MATLAB 명령어들은비교적복잡하므로 MATLAB 창에서명령어를직접입력하지않고확장자가 m 인 text 파일을작성하여실행을한다. 즉, test.m 과같은 text 파일을만들어서 MATLAB 프로그램을작성한후실행을한다. 이와같이하면길고복잡한 MATLAB 프로그램을작성하여실행할수있고, 오류가발생하거나수정이필요한경우손쉽게수정하여실행할수있는장점이있으며,

More information

데이터 시각화

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

More information

Microsoft PowerPoint - ÀÚ¹Ù08Àå-1.ppt

Microsoft PowerPoint - ÀÚ¹Ù08Àå-1.ppt AWT 컴포넌트 (1) 1. AWT 패키지 2. AWT 프로그램과이벤트 3. Component 클래스 4. 컴포넌트색칠하기 AWT GUI 를만들기위한 API 윈도우프로그래밍을위한클래스와도구를포함 Graphical User Interface 그래픽요소를통해프로그램과대화하는방식 그래픽요소를 GUI 컴포넌트라함 윈도우프로그램만들기 간단한 AWT 프로그램 import

More information

Chap 6: Graphs

Chap 6: Graphs 그래프표현법 인접행렬 (Adjacency Matrix) 인접리스트 (Adjacency List) 인접다중리스트 (Adjacency Multilist) 6 장. 그래프 (Page ) 인접행렬 (Adjacency Matrix) n 개의 vertex 를갖는그래프 G 의인접행렬의구성 A[n][n] (u, v) E(G) 이면, A[u][v] = Otherwise, A[u][v]

More information

목차 포인터의개요 배열과포인터 포인터의구조 실무응용예제 C 2

목차 포인터의개요 배열과포인터 포인터의구조 실무응용예제 C 2 제 8 장. 포인터 목차 포인터의개요 배열과포인터 포인터의구조 실무응용예제 C 2 포인터의개요 포인터란? 주소를변수로다루기위한주소변수 메모리의기억공간을변수로써사용하는것 포인터변수란데이터변수가저장되는주소의값을 변수로취급하기위한변수 C 3 포인터의개요 포인터변수및초기화 * 변수데이터의데이터형과같은데이터형을포인터 변수의데이터형으로선언 일반변수와포인터변수를구별하기위해

More information

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks XSS s XSS, s, May 25, 2010 XSS s 1 2 s 3 XSS s MySpace 사건. Samy (JS.Spacehero) 프로필 페이지에 자바스크립트 삽입. 스크립트 동작방식 방문자를 친구로 추가. 방문자의 프로필에 자바스크립트를 복사. 1시간 만에 백만 명이 친구등록. s XSS s 위험도가 낮은 xss 취약점을 다른 취약점과 연계하여

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

UI TASK & KEY EVENT

UI TASK & KEY EVENT 2007. 2. 5 PLATFORM TEAM 정용학 차례 CONTAINER & WIDGET SPECIAL WIDGET 질의응답및토의 2 Container LCD에보여지는화면한개 1개이상의 Widget을가짐 3 Container 초기화과정 ui_init UMP_F_CONTAINERMGR_Initialize UMP_H_CONTAINERMGR_Initialize

More information

제11장 프로세스와 쓰레드

제11장 프로세스와 쓰레드 제9장자바쓰레드 9.1 Thread 기초 (1/5) 프로그램 명령어들의연속 (a sequence of instruction) 프로세스 / Thread 실행중인프로그램 (program in execution) 프로세스생성과실행을위한함수들 자바 Thread 2 9.1 Thread 기초 (2/5) 프로세스단위작업의문제점 프로세스생성시오버헤드 컨텍스트스위치오버헤드

More information

(8) getpi() 함수는정적함수이므로 main() 에서호출할수있다. (9) class Circle private double radius; static final double PI= ; // PI 이름으로 로초기화된정적상수 public

(8) getpi() 함수는정적함수이므로 main() 에서호출할수있다. (9) class Circle private double radius; static final double PI= ; // PI 이름으로 로초기화된정적상수 public Chapter 9 Lab 문제정답 1. public class Circle private double radius; static final double PI=3.141592; // PI 이름으로 3.141592 로초기화된정적상수 (1) public Circle(double r) radius = r; (2) public double getradius() return

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

HTML5

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

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

슬라이드 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

Microsoft PowerPoint - 05장(함수) [호환 모드]

Microsoft PowerPoint - 05장(함수) [호환 모드] 이장에서다룰내용 1 함수의기본 2 함수의입출력방법 함수 함수는입력을넣으면출력이나오는마술상자다. 3 4 재귀함수 Inline 함수 01_ 함수의기본 01_ 함수의기본 함수란 함수를사용할때의장점 반복적으로실행해야할내용을함수로만들어필요할때마다호출해사용할수있다. 프로그램이모듈화 ( 블록화 ) 되므로읽기쉽고, 디버그와편집이쉽다. 프로그램의기능과구조을한눈에알아보기쉽다.

More information

단국대학교멀티미디어공학그래픽스프로그래밍중간고사 (2011 년봄학기 ) 2011 년 4 월 26 일학과학번이름 중간고사 담당교수 : 단국대학교멀티미디어공학전공박경신 l 답은반드시답안지에기술할것. 공간이부족할경우반드시답안지몇쪽의뒤에있다고명기한후기술할것. 그외의경우의답안지뒤

단국대학교멀티미디어공학그래픽스프로그래밍중간고사 (2011 년봄학기 ) 2011 년 4 월 26 일학과학번이름 중간고사 담당교수 : 단국대학교멀티미디어공학전공박경신 l 답은반드시답안지에기술할것. 공간이부족할경우반드시답안지몇쪽의뒤에있다고명기한후기술할것. 그외의경우의답안지뒤 중간고사 담당교수 : 단국대학교멀티미디어공학전공박경신 l 답은반드시답안지에기술할것. 공간이부족할경우반드시답안지몇쪽의뒤에있다고명기한후기술할것. 그외의경우의답안지뒤쪽이나연습지에기술한내용은답안으로인정안함. 답에는반드시네모를쳐서확실히표시할것. l 답안지에학과, 학번, 이름외에본인의암호를기입하면성적공고시학번대신암호를사용할것임. 1. 맞으면 true, 틀리면 false를적으시오.

More information

KNK_C_05_Pointers_Arrays_structures_summary_v02

KNK_C_05_Pointers_Arrays_structures_summary_v02 Pointers and Arrays Structures adopted from KNK C Programming : A Modern Approach 요약 2 Pointers and Arrays 3 배열의주소 #include int main(){ int c[] = {1, 2, 3, 4}; printf("c\t%p\n", c); printf("&c\t%p\n",

More information

PowerPoint Presentation

PowerPoint Presentation Package Class 3 Heeseung Jo 목차 section 1 패키지개요와패키지의사용 section 2 java.lang 패키지의개요 section 3 Object 클래스 section 4 포장 (Wrapper) 클래스 section 5 문자열의개요 section 6 String 클래스 section 7 StringBuffer 클래스 section

More information

(Microsoft PowerPoint - 07\300\345.ppt [\310\243\310\257 \270\360\265\345])

(Microsoft PowerPoint - 07\300\345.ppt [\310\243\310\257 \270\360\265\345]) 클래스의응용 클래스를자유자재로사용하자. 이장에서다룰내용 1 객체의치환 2 함수와클래스의상관관계 01_ 객체의치환 객체도변수와마찬가지로치환이가능하다. 기본예제 [7-1] 객체도일반변수와마찬가지로대입이가능하다. 기본예제 [7-2] 객체의치환시에는조심해야할점이있다. 복사생성자의필요성에대하여알아보자. [ 기본예제 7-1] 클래스의치환 01 #include

More information

학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2

학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2 학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2 6.1 함수프로시저 6.2 서브프로시저 6.3 매개변수의전달방식 6.4 함수를이용한프로그래밍 3 프로시저 (Procedure) 프로시저 (Procedure) 란무엇인가? 논리적으로묶여있는하나의처리단위 내장프로시저 이벤트프로시저, 속성프로시저, 메서드, 비주얼베이직내장함수등

More information

ACTIONSCRIPT™ 3.0 프로그래밍

ACTIONSCRIPT™ 3.0 프로그래밍 제 14 장 드로잉 API 사용 14 가져온이미지및아트웍도중요하지만드로잉 API 기능을사용하면 ActionScript 에서선과도형을그릴수있으므로컴퓨터에서빈캔바스처럼응용프로그램을시작하여원하는이미지를만들수있습니다. 그래픽을직접작성할수있는기능은응용프로그램의무한한가능성을열어줍니다. 이장에서다루는기술을통해드로잉프로그램을생성하거나움직이는대화형아트를만들고사용자인터페이스요소를프로그래밍방식으로작성할수있습니다.

More information

실험 5

실험 5 실험. OP Amp 의기초회로 Inverting Amplifier OP amp 를이용한아래와같은 inverting amplifier 회로를고려해본다. ( 그림 ) Inverting amplifier 위의회로에서 OP amp의 입력단자는 + 입력단자와동일한그라운드전압, 즉 0V를유지한다. 또한 OP amp 입력단자로흘러들어가는전류는 0 이므로, 저항에흐르는전류는다음과같다.

More information

Microsoft PowerPoint - chap06-1Array.ppt

Microsoft PowerPoint - chap06-1Array.ppt 2010-1 학기프로그래밍입문 (1) chapter 06-1 참고자료 배열 박종혁 Tel: 970-6702 Email: jhpark1@snut.ac.kr 한빛미디어 출처 : 뇌를자극하는 C프로그래밍, 한빛미디어 -1- 배열의선언과사용 같은형태의자료형이많이필요할때배열을사용하면효과적이다. 배열의선언 배열의사용 배열과반복문 배열의초기화 유연성있게배열다루기 한빛미디어

More information

PowerPoint 프레젠테이션

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

More information

1 peaieslvfp3 1. 두점사이의거리 수직선위의두점사이의거리를구할수있다. 좌표평면위의두점사이의거리를구할수있다. 수직선위의두점사이의거리 todrkrgo qhqtlek 오른쪽그림은충무로역을중심으로한서울시지하철 3`호선노선도의일부분이다. 충무로역을` 0, 을지로 3`

1 peaieslvfp3 1. 두점사이의거리 수직선위의두점사이의거리를구할수있다. 좌표평면위의두점사이의거리를구할수있다. 수직선위의두점사이의거리 todrkrgo qhqtlek 오른쪽그림은충무로역을중심으로한서울시지하철 3`호선노선도의일부분이다. 충무로역을` 0, 을지로 3` peaieslvfp. 두점사이의거리 수직선위의두점사이의거리를구할수있다. 좌표평면위의두점사이의거리를구할수있다. 수직선위의두점사이의거리 todrkrgo qhqtlek 오른쪽그림은충무로역을중심으로한서울시지하철 `호선노선도의일부분이다. 충무로역을` 0, 을지로 `가역을 ``로나타낼때, 다음물음에답하여라. 독립문 경복궁 안국종로 가을지로 가충무로동대입구약수금호옥수압구정잠원신사

More information