PowerPoint 프레젠테이션

Size: px
Start display at page:

Download "PowerPoint 프레젠테이션"

Transcription

1 HTML5 웹프로그래밍입문 11 장. 캔버스

2 목차 11.1 캔버스이해하기 11.2 캔버스기본 API 사용하기 11.3 캔버스고급기능사용하기 2

3 11.1 캔버스이해하기 캔버스의특징 캔버스시작하기 3

4 HTML5 캔버스 자바스크립트를이용해서웹문서상에그림그리는기능 HTML5 이전 직접이미지파일을 <img> 태그를이용해서문서상에포함 자바애플릿이용 플래시이용 HTML5 캔버스 자바스크립트만을이용해서그림을그릴수있다 별도의플러그인이나프로그램설치없이가능 이미지나그림을합성, 변환조작도가능 4

5 캔버스의특징 캔버스좌표계 : 사각평면의 2 차원좌표계 이차원 (2D) 이미지표현 => x, y 2개의축 왼쪽상단모서리가원점 (0, 0) (0, 0) x 축 픽셀 (pixel) 좌표계상의각각의정사각형네모칸 이미지를구성하는점이며색상을가진다. y 축 (30, 20) 비트맥그래픽 (Bitmap graphics) 픽셀만으로이미지를표현하고저장하는형태 캔버스의도형이나그림, 글씨등을 2차원비트맵으로저장 이미그려진도형이나그림을확대하는등은작업은불가능 5

6 캔버스시작하기 캔버스요소 : <canvas> 태그이용, width, height 속성으로캔버스크기지정, DOM 접근을위해 id 지정 컨텍스트 (context) 객체 캔버스에내용을채우기위한객체 <canvas> 요소객체에접근한후 getcontext("2d") 메소드실행 <body> <canvas id="mycanvas" width="300" height="200"></canvas> <script type="text/javascript"> var canvas = document.getelementbyid("mycanvas"); 캔버스요소의정의 var context = canvas.getcontext("2d"); context.moveto(50, 50); 캔버스컨택스트가져오기 context.lineto(200, 50); </script> 그림을그리는자바스크립트코드 </body> 6

7 11.2 캔버스기본 API 사용하기 기본도형그리기 기본도형꾸미기 이미지와글자그리기 7

8 캔버스기본도형그리기 캔버스기본 API 컨텍스트객체의메소드를호출함로써그림이그려짐 캔버스컨텍스트의선그리기메소드 선긋기, 경로, 곡선등 현재위치에서다음지점까지선을연결하는방식 현재위치이동 : moveto(x,y) 메소드 선을그린경우에는마지막지점으로현재위치이동 캔버스컨텍스트메소드 context.moveto(x, y) context.lineto(x, y) context.rect(x, y, width, height); 기능및설명선의시작지점을 (x, y) 로이동현재위치에서 (x, y) 까지선그리기왼쪽위모서리가 (x, y) 지점이고, 가로와세로변의크기가 width, height인사각형그리기현재지정된색상과모양으로선을그린다. stroke() 메소드를실행하지않으면선이안그려진다. 8

9 직선, 사각형그리기예제 var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); context.moveto(50, 50); context.lineto(200, 50); context.lineto(200, 100); context.lineto(100, 100); context.lineto(50, 150); context.lineto(150, 180); (50, 50) (200, 50) (100, 100) (200, 100) (50, 150) (150, 180) var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); context.rect(50, 50, 100, 100); context.rect(20, 20, 180, 180); context.rect(120, 120, 50, 50); (20, 20) (50, 50) (120, 120) (150, 150) (170, 170) 9 (200, 200)

10 원호그리기예제 context.arc(x, y, r, startangle, endangle, anticlockwise) (x, y) 를원점으로하고반지름 r인원호. 시작각도와끝각도를지정 anticlockwise 값을 false로설정하면시계방향 ( 기본값 ) context.beginpath(); context.arc(30, 100, 20, 0, 1.5*Math.PI); // Math.PI 상수를이용해각도지정 beginpath(); 가없으면선이연속된다. context.beginpath(); context.arc(110, 100, 40, 1*Math.PI, 1.5*Math.PI, true);// 반시계방향원호 context.closepath(); // 경로시작점까지직선으로연결하며경로를종료한다. context.beginpath(); context.arc(240, 100, 60, 0, 2*Math.PI); // 360 도원호를그려원그리기 10

11 곡선그리기예제 context.quadraticcurveto(cx, cy, x, y); 하나의제어점 시작점은현재위치, (cx, cy) 가제어점, 끝점은 (x, y) context.beziercurveto(cx1, cy1, cx2, cy2, x, y); 시작점은현재, 두개제어점은 (cx1, cy1) 과 (cx2, xy2), 끝점 (x, y) context.moveto(50, 200); context.quadraticcurveto(100, 10, 200, 200); context.moveto(300, 200); (100, 10) context.beziercurveto(300, 100, 600, 100, 450, 200); 제어점 제어점1 (300, 100) 제어점2 (550, 100) (50, 100) (200, 100) 시작점끝점 Quadratic 곡선 (300, 200) 시작점 Bezier 곡선 (450, 200) 끝점 11

12 경로그리기 연속된선그리기를통한경로그리기 context.beginpath() 경로의시작설정 context.closepath() 경로지정을종료 처음경로시작지점으로선을연결하여경로를완성 12

13 선꾸미기예제 linewidth 선의두께 ( 픽셀개수 ) strokestyle 선의색상 예 ) "blue" 혹은 "#0000ff" 등 linecap 선의양쪽끝모양 "butt", "round", "square" context.beginpath(); context.moveto(10, 20); context.lineto(100,20); context.linewidth = 20; context.strokestyle = "blue"; context.linecap = "butt"; context.beginpath(); context.moveto(10, 60); context.lineto(100, 60); context.strokestyle = "red"; context.linecap = "round"; context.beginpath(); context.moveto(10, 100); context.lineto(100, 100); context.strokestyle = "green"; context.linecap = "square"; 13

14 도형꾸미기예제 linejoin 선이꺽이는모서리모양 "miter", "round", "bevel" fillstyle 도형의내부를색칠할색상값 context.fill(); 현재 fillstyle 색상으로도형채우기 이전 fill() 메소드이후의모든도형 context.beginpath(); context.rect(20, 20, 50, 80); context.linewidth = 20; context.strokestyle = "black"; context.linejoin = "miter"; context.fillstyle = "grey"; context.fill(); context.beginpath(); context.rect(110, 20, 50, 80); context.strokestyle = "black"; context.linejoin = "round"; context.fillstyle = "pink"; context.fill(); context.beginpath(); context.rect(200, 20, 50, 80); context.strokestyle = "black"; context.linejoin = "bevel"; context.fillstyle = "yellow"; context.fill(); 14

15 이미지그리기 기존에이미지를포함하려면 <img> 태그이용 캔버스에이미지그리기 Image 객체생성 : Image() 생성자이용 drawimage() 메소드 캔버스컨텍스트에서이미지그리기 는메소드 사이즈조정, 크롭 (crop) 등의기능도가능 15

16 이미지그리기예제 기존에이미지를포함하려면 <img> 태그이용 캔버스에이미지그리기 Image 객체생성 : Image() 생성자이용 drawimage() 메소드 캔버스컨텍스트에서이미지그리기 var canvas = document.getelementbyid("mycanvas"); var context2d = canvas.getcontext("2d"); var imgobj = new Image(); imgobj.src = "clownfish.jpg"; imgobj.onload = function() { // (50, 50) 지점에원래크기그대로이미지그리기 context2d.drawimage(imgobj, 50, 50); // 크기조정하기 : (600, 50) 지점에 250 x 100 크기로이미지그리기 context2d.drawimage(imgobj, 600, 50, 250, 100); 이미지사이즈조정 // 크기조정하기 : (900, 50) 지점에 200 x 200 크기로이미지그리기 context2d.drawimage(imgobj, 900, 50, 200, 200); 16

17 이미지그리기예제 Image crop 원본이미지에서자르고, 캔버스에그린다... // 이미지자르기후크기조정 : // 1) 원본이미지 (150, 100) 지점에서 150 x 150 크기의이미지를자른다. // 2) Canvas 의 (600, 300) 지점에 100 x 100 크기로그리기 context2d.drawimage(imgobj, 150, 100, 150, 150, 600, 300, 100, 100); } // 이미지자르기후크기조정 : // 1) 원본이미지 (250, 100) 지점에서 250 x 150 크기의이미지를자른다. // 2) Canvas 의 (750, 300) 지점에 125 x 75 크기로그리기 context2d.drawimage(imgobj, 250, 100, 250, 150, 750, 300, 125, 75); 17 이미지크롭 이미지사이즈조정

18 캔버스에글자그리기 비트맵방식으로캔버스에텍스트그리기 텍스트를그려넣기전에폰트, 크기, 정렬방법등을결정 삽입된글자를수정하거나크기를조정하는것은불가능 글자그리기메소드 context.font : 글자체지정. 이탤릭체, 크기, 폰트등한번에지정 context.textalign : 텍스트정렬. "left", "right", "center", "start", "end" context.fillstyle : 글자의색상, 예 ) "blue" 혹은 "#0000ff" 등 context.filltext() : 지정된위치에글자를그린다 글자외곽선그리기 context.strokestyle : 글자의외곽선색상 context.linewidth : 외곽선의선두께 context.stroketext(text, x, y) : (x, y) 위치에 text 외곽선을그린다 18

19 글자그려넣기예제 context.rect(0, 0, 400, 300); var text1 = "HTML5 Text Drawing!"; var text2 = "Left aligned text"; var text3 = "Center aligned text"; var text4 = "Right aligned text"; context.font = "italic 16pt Times New Roman"; context.fillstyle = "blue"; context.filltext(text1, 200, 50); context.font = "12pt Tahoma"; context.fillstyle = "red"; context.textalign = "left"; context.filltext(text2, 200, 100); context.font = "bold 24pt Courier New"; context.strokestyle = "black"; context.textalign = "center"; context.linewidth = 1; context.stroketext(text3, 200, 150); context.linewidth = 2; context.stroketext("linewidth=2", 200, 200); context.font = "bold 16pt Batang"; context.fillstyle = "green"; context.textalign = "right"; context.filltext(text4, 200, 250); 19

20 11.3 캔버스고급기능사용하기 그리기효과 변환효과 기타고급기능 20

21 그리기효과 합성 (composition) 효과 그림자효과 : shadow shadowcolor, shadowblur, shadowoffsetx, shadowoffsety 투명도조절 : globalalpha 0과 1 사이의실수값, 0이완전투명 지정한도형모양으로잘라내기 : clip clip() 메소드가바로이전에정의된경로로도형자르기 21

22 그리기효과예제 context.beginpath(); context.rect(40, 10, 60, 100); context.closepath(); context.clip(); 클립효과사용시유의사항 잘라내고자하는그림을그리기이전에 clip() 메소드를실행 clip() 메소드실행이전에그려진그림은자르기효과가적용안됨 context.beginpath(); context.rect(20, 20, 60, 60); context.fillstyle = "green"; context.shadowcolor = "blue"; context.shadowblur = 30; context.shadowoffsetx = 10; context.shadowoffsety = 20; context.fill(); context.beginpath(); context.arc(80, 30, 30, 0, 2*Math.PI); context.fillstyle = "red"; context.globalalpha = 0.5; context.shadowcolor = "transparent"; context.fill(); (a) clip() 메소드를실행하지않은경우 (b) clip() 메소드를실행한경우 22

23 변환효과 기본변환 (transformation) 그림을그려넣을때위치이동, 크기변환, 회전등의기능을수행 translate(x, y); 이동변환, (x, y) 만큼이동 scale(x, y); 크기변환, 가로세로방향의배율 (x, y) rotate( 회전각도 ); 회전변환, 회전각도는 radian 값, 회전중심점은왼쪽위모서리 23

24 기본변환예제 var canvas = document.getelementbyid("mycanvas"); var context2d = canvas.getcontext("2d"); var imgobj = new Image(); imgobj.src = "clownfish.jpg"; imgobj.onload = function() { // original drawing context2d.drawimage(imgobj, 50, 50); // 이동변환 context2d.translate(800, 50); // 이동 context2d.drawimage(imgobj, 50, 50); // 크기변환 context2d.scale(1.2, 0.33); // 가로 1.2, 세로 1/3 배스케일 context2d.drawimage(imgobj, 0, 1500); } // 회전변환 context2d.rotate(45); context2d.drawimage(imgobj, 1000, 1000); 24

25 상하 / 좌우대칭변환 scale() 메소드의인자값을조정하여구현 // 좌우대칭 context.scale( 1,1); // 상하대칭 context.scale(1, 1); 현재까지지정된변환이나사용자정의변환행렬을초기화 settransform() 메소드이용 아무런변환을지정하지않은기본상태로초기화 context.settransform(1, 0, 0, 1, 0, 0); 25

26 데이터 URL 로저장하기 그림을 PNG(Portable Network Graphics) 등형식으로저장 캔버스의 todataurl() 메소드이용 그림을 todataurl() 메소드를이용해서 PNG 형태의데이터로변환 이를캔버스요소의 src 속성으로지정하면파일로저장이가능 유의사항 var dataurl = canvas.todataurl(); canvasdom.src = dataurl; todataurl() 은캔버스컨텍스트가아닌캔버스요소객체의메소드 캔버스비트맵초기화 가장간편한방법은 clearrect(x, y, width, height) 메소드이용 (x, y) 위치를기준으로 width, height 의크기의비트맵을초기화 26

27 데이터 URL 저장예제 <canvas id="mycanvas" width="400" height="200"></canvas>... <img id="canvasimage" /> <script>... context.rect(0, 0, 400, 200); context.fillstyle = "grey"; context.fill(); var text1 = "HTML5 Text Drawing!"; context.font = "24pt Tahoma"; context.fillstyle = "red"; context.filltext(text1, 50, 50); 캔버스이미지 ( 왼쪽 ) 과데이터 URL 방식으로저장한 PNG 이미지 ( 오른쪽 ) context.linewidth = 1; context.font = "32pt San Serif"; context.strokestyle = "blue"; context.stroketext("linewidth=1", 100, 150); // Canvas 이미지를 data URL 로저장한다. 기본형식은 PNG 포맷이다. var dataurl = canvas.todataurl(); // dataurl 을 "canvasimage" 엘리먼트의 src 속성으로지정한다. document.getelementbyid("canvasimage").src = dataurl; 27

28 마우스로그림그리기예제 캔버스상에마우스이벤트를활용해그림그리기 마우스버튼을누른후이동위치를따라연속으로직선을그림 mousemove 이벤트가발생할때마다 lineto() 메소드호출 <body onmousedown="start();" onmousemove="draw();" onmouseup="stop();"> <canvas id="mycanvas" width="600" height="600" style="border style: solid;"></canvas> <script type="text/javascript"> ( 중간생략 ) var stopped = true; function start() { e = window.event; context.moveto(e.clientx 10, e.clienty 10); stopped = false; } function stop() { stopped = true; } function draw() { if (!stopped) { e = window.event; context.lineto(e.clientx 10, e.clienty 10); } } </script> </body> 28

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

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

More information

쉽게 풀어쓴 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

Ÿ 캔버스의크기와드로잉표면의크기 <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

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

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

More information

HTML5-³¹Àå¿ë.PDF

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

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

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

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

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

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

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

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

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

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

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

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 Template

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

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

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

e-비즈니스 전략 수립

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

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 프레젠테이션

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

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

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

Javascript

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

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

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

Javascript

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

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

[ 그림 7-1] 프로젝트 res 폴더 이미지뷰 [ 예제 7-1] 이미지뷰 1 <LinearLayout 2 ~~~~ 중간생략 ~~~~ 3 android:orientation="vertical" > 4 <ImageView

[ 그림 7-1] 프로젝트 res 폴더 이미지뷰 [ 예제 7-1] 이미지뷰 1 <LinearLayout 2 ~~~~ 중간생략 ~~~~ 3 android:orientation=vertical > 4 <ImageView 7 차시이미지처리 1 학습목표 이미지뷰를사용하는방법을배운다. 비트맵을사용하는방법을배운다. 2 확인해볼까? 3 이미지뷰와이미지버튼 1) 학습하기 [ 그림 7-1] 프로젝트 res 폴더 이미지뷰 [ 예제 7-1] 이미지뷰 1 4

More information

PowerPoint 프레젠테이션

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

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

PowerPoint Presentation

PowerPoint Presentation WordPress 를이용한웹사이트만들기 2015 년 한지웅 WordPress 를이용한웹사이트만들기 Day 1 Day 2 Day 3 Day 4 Day 5 1. 웹사이트제작기초 HTLM 기본 CSS 기본 WordPress 개론 ( 웹사이트구축툴 ) 2. 웹호스팅 / 웹사이트구축 웹호스팅업체선택 cpanel 설정 WordPress 설치 3. WordPress 기초활용

More information

쉽게 풀어쓴 C 프로그래밍

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

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

OOO Paint

OOO Paint Webtoon Paint OSP Stage 2040 Team 2 200911371 김민철 200911381 김진현 200911417 정명권 REF. Activity 2033. Define Domain Model Activity 2041. Design Real Use Case Use Case Actors Purpose Overview Type R1.1 파일불러오기

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

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

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 F696E74202D20C1A63236C0E520BED6C7C3B8B428B0ADC0C729205BC8A3C8AF20B8F0B5E55D>

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

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

HTML5

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

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

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

PowerPoint 프레젠테이션

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

More information

기초제도14강

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

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 10 장. 이벤트처리와동적 웹문서 목차 10.1 이벤트처리하기 10.2 동적웹문서만들기 10.3 다양한방법으로폼다루기 2 10.1 이벤트처리하기 10.1.1 이벤트처리개요 10.1.2 이벤트의정의와종류 10.1.3 이벤트핸들링및이벤트등록 10.1.4 폼다루기 3 이벤트처리개요 이벤트 사용자가웹브라우저를사용하는중에발생시키는키보드, 마우스등의입력

More information

LIDAR와 영상 Data Fusion에 의한 건물 자동추출

LIDAR와 영상 Data Fusion에 의한 건물 자동추출 i ii iii iv v vi vii 1 2 3 4 Image Processing Image Pyramid Edge Detection Epipolar Image Image Matching LIDAR + Photo Cross correlation Least Squares Epipolar Line Matching Low Level High Level Space

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

140109_다본다 레전드 매뉴얼

140109_다본다 레전드 매뉴얼 DBL-1000H SD 카드 / SD 카드 분리 방법 제품 사용 12 13 16~19 20 21 4G 8G 16G 32G 4G 8G 16G 32G 모드버튼 이벤트버튼 RED LED BLUE LED 시큐리티 (보안)LED 1. 함께 동봉된 메모리카드를 기기의 방향에 맞게 삽입 합니다. 2. 기기 상단부 거치대에 양면 테잎 보호 비닐을 제거해 주세요.

More information

HTML5

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

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

Microsoft PowerPoint 세션.ppt

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

More information

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

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

More information

<4D6963726F736F667420576F7264202D20495420C1A6BEC8BCAD20C0DBBCBAB0FA20C7C1B8AEC1A8C5D7C0CCBCC720B1E2B9FD2E646F63>

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

More information

PowerPoint Presentation

PowerPoint Presentation 객체지향프로그래밍 인터페이스, 람다식, 패키지 ( 실습 ) 손시운 ssw5176@kangwon.ac.kr 예제 1. 홈네트워킹 public interface RemoteControl { public void turnon(); // 가전제품을켠다. public void turnoff(); // 가전제품을끈다. 인터페이스를구현 public class Television

More information

HTML5 웹프로그래밍 입문-개정판

HTML5 웹프로그래밍 입문-개정판 HTML5 웹프로그래밍입문 8 장. 자바스크립트 프로그래밍기초 목차 8.1 자바스크립트시작하기 8.2 자바스크립트기본문법 8.3 자바스크립트제어문및반복문 8.4 자바스크립트함수 2 8.1 자바스크립트시작하기 8.1.1 자바스크립트개요와특징 8.1.2 자바스크립트작성하기 8.1.3 자바스크립트실행및디버깅 3 자바스크립트개요 개요및특징 동적인웹문서, 웹응용프로그램을위한사용자인터페이스개발

More information

슬라이드 1

슬라이드 1 한국산업기술대학교 제 5 강스케일링및회전 이대현교수 학습안내 학습목표 3D 오브젝트의확대, 축소및회전방법을이해한다. 학습내용 3D 오브젝트의확대및축소 (Scaling) 3D 오브젝트의회전 (Rotation) 변홖공갂 (Transform Space) SceneNode 의크기변홖 (Scale) void setscale ( Real x, Real y, Real z)

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

<4D F736F F F696E74202D20C1A63038C0E520C5ACB7A1BDBABFCD20B0B4C3BC4928B0ADC0C729205BC8A3C8AF20B8F0B5E55D>

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

More information

PowerPoint 프레젠테이션

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

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

Javascript.pages

Javascript.pages JQuery jquery part1 JavaScript : e-mail:leseraphina@naver.com http://www.webhard.co.kr I.? 2 ......,,. : : html5 ; ; .

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 3 장. 링크와멀티미디어 1 목차 3.1 링크달기 3.2 이미지사용하기 3.3 오디오와비디오다루기 3.4 객체포함하기 2 3.1 링크달기 3.1.1 하이퍼텍스트와링크 3.1.2 문서간이동 3.1.3 문서내특정위치로이동 3 하이퍼텍스트 / 하이퍼미디어 HTML(HyperText Markup Language) 하이퍼텍스트의마크업언어 HTML

More information

NATE CP 가이드 1. WML 페이지에서줄바꿈문제 개요 WML 페이지에서줄바꿈은명시적으로 <br/> 태그를사용하여야한다. 설명그림 2 의의도로제작된페이지에서 Card Styles 텍스트와 Select 박스사이에명시적인 <br/> 태그가없어, 그림 1 과같이줄바꿈이되

NATE CP 가이드 1. WML 페이지에서줄바꿈문제 개요 WML 페이지에서줄바꿈은명시적으로 <br/> 태그를사용하여야한다. 설명그림 2 의의도로제작된페이지에서 Card Styles 텍스트와 Select 박스사이에명시적인 <br/> 태그가없어, 그림 1 과같이줄바꿈이되 NATE CP 가이드 1. WML 페이지에서줄바꿈문제 WML 페이지에서줄바꿈은명시적으로 태그를사용하여야한다. 그림 2 의의도로제작된페이지에서 Card Styles 텍스트와 Select 박스사이에명시적인 태그가없어, 그림 1 과같이줄바꿈이되지않고한줄로보여짐. [ 그림 1] 비정상 [ 그림 2] 정상

More information

제8장 자바 GUI 프로그래밍 II

제8장 자바 GUI 프로그래밍 II 제8장 MVC Model 8.1 MVC 모델 (1/7) MVC (Model, View, Controller) 모델 스윙은 MVC 모델에기초를두고있다. MVC란 Xerox의연구소에서 Smalltalk 언어를바탕으로사용자인터페이스를개발하기위한방법 MVC는 3개의구성요소로구성 Model : 응용프로그램의자료를표현하기위한모델 View : 자료를시각적으로 (GUI 방식으로

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

기본도형과작도 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

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

8장.그래픽 프로그래밍

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

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

SIGIL 완벽입문

SIGIL 완벽입문 누구나 만드는 전자책 SIGIL 을 이용해 전자책을 만들기 EPUB 전자책이 가지는 단점 EPUB이라는 포맷과 제일 많이 비교되는 포맷은 PDF라는 포맷 입니다. EPUB이 나오기 전까지 전 세계에서 가장 많이 사용되던 전자책 포맷이고, 아직도 많이 사 용되기 때문이기도 한며, 또한 PDF는 종이책 출력을 위해서도 사용되기 때문에 종이책 VS

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

디지털영상처리3

디지털영상처리3 비트맵개요 BMP 파일의이해실제 BMP 파일의분석 BMP 파일을화면에출력 } 비트맵 (bitmap) 윈도우즈에서영상을표현하기위해사용되는윈도우즈 GDI(Graphic Device Interface) 오브젝트의하나 } 벡터그래픽 (vector graphics) 점, 선, 면등의기본적인그리기도구를이용하여그림을그리는방식 } 윈도우즈 GDI(Graphic Device

More information

경우 1) 80GB( 원본 ) => 2TB( 복사본 ), 원본 80GB 는 MBR 로디스크초기화하고 NTFS 로포맷한경우 복사본 HDD 도 MBR 로디스크초기화되고 80GB 만큼포맷되고나머지영역 (80GB~ 나머지부분 ) 은할당되지않음 으로나온다. A. Window P

경우 1) 80GB( 원본 ) => 2TB( 복사본 ), 원본 80GB 는 MBR 로디스크초기화하고 NTFS 로포맷한경우 복사본 HDD 도 MBR 로디스크초기화되고 80GB 만큼포맷되고나머지영역 (80GB~ 나머지부분 ) 은할당되지않음 으로나온다. A. Window P Duplicator 는기본적으로원본하드디스크를빠르게복사본하드디스크에복사하는기능을하는것입니다.. 복사본 하드디스크가원본하드디스크와똑같게하는것을목적으로하는것이어서저용량에서고용량으로복사시몇 가지문제점이발생할수있습니다. 하드디스크는사용하려면, 디스크초기화를한후에포맷을해야사용가능합니다. Windows PC는 MBR과 GPT 2 개중에 1개로초기화합니다. -Windows

More information

Microsoft PowerPoint - 6-PythonGUI-sprite

Microsoft PowerPoint - 6-PythonGUI-sprite (Computer Science with Python and Pygame, Ch.14 introduction to Sprites) 순천향대학교컴퓨터공학과이상정 순천향대학교컴퓨터공학과 1 학습내용 스프라이트클래스 그룹클래스 스프라이트충돌 블록수집게임예 게임레벨증가및점수표시 스프라이트이동 순천향대학교컴퓨터공학과 2 (1) 스프라이트 (sprite) 큰그래픽장면의부분으로사용되는단일

More information

Microsoft PowerPoint - java1-lab5-ImageProcessorTestOOP.pptx

Microsoft PowerPoint - java1-lab5-ImageProcessorTestOOP.pptx 2018 학년도 1 학기 JAVA 프로그래밍 II 514760-1 2018 년봄학기 5/10/2018 박경신 Lab#1 (ImageTest) Lab#1 은영상파일 (Image) 을읽어서정보를출력 Java Tutorials Lesson: Working with Images https://docs.oracle.com/javase/tutorial/2d/images/index.html

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

..........(......).hwp

..........(......).hwp START START 질문을 통해 우선순위를 결정 의사결정자가 질문에 답함 모형데이터 입력 목표계획법 자료 목표계획법 모형에 의한 해의 도출과 득실/확률 분석 END 목표계획법 산출결과 결과를 의사 결정자에게 제공 의사결정자가 결과를 검토하여 만족여부를 대답 의사결정자에게 만족하는가? Yes END No 목표계획법 수정 자료 개선을 위한 선택의 여지가 있는지

More information

PowerPoint 프레젠테이션

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

More information

4장기본프로그래밍2

4장기본프로그래밍2 4-2 마우스 (Mouse) 마우스이벤트 Click 이벤트 마우스버튼이눌렸다가떼어질때발생 DblClick 이벤트 마우스버튼이두번눌렸다가떼어질때발생 MouseDown 이벤트 마우스버튼이눌렸을때발생 MouseUp 이벤트 마우스버튼이떼어질때발생 MouseMove 이벤트 마우스가움직일때발생 DragOver 이벤트 마우스버튼을누른상태에서끌기를했을때발생 DragDrop

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

1

1 1 2 3 4 5 6 b b t P A S M T U s 7 m P P 8 t P A S M T U s 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Chapter 1 29 1 2 3 4 18 17 16 15 5 6 7 8 9 14 13 12 11 10 1 2 3 4 5 9 10 11 12 13 14 15

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

Design Issues

Design Issues 11 COMPUTER PROGRAMMING INHERIATANCE CONTENTS OVERVIEW OF INHERITANCE INHERITANCE OF MEMBER VARIABLE RESERVED WORD SUPER METHOD INHERITANCE and OVERRIDING INHERITANCE and CONSTRUCTOR 2 Overview of Inheritance

More information

JU-TF43

JU-TF43 Intelligent serial 4.3 TFT LCD Module JUTF43 S/W User Guide 1 JUTF43... 3 2 부팅환경... 4 2.1 부팅환경설정... 4 2.1.1 Normal mode... 4 2.1.2 USB Mass-Storage mode... 4 2.1.3 Firmware Update mode... 5 2.2 Splash

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

쉽게 풀어쓴 C 프로그래밍

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

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

웹개발을위한 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

04_오픈지엘API.key

04_오픈지엘API.key 4. API. API. API..,.. 1 ,, ISO/IEC JTC1/SC24, Working Group ISO " (Architecture) " (API, Application Program Interface) " (Metafile and Interface) " (Language Binding) " (Validation Testing and Registration)"

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

리포트_23.PDF

리포트_23.PDF Working Paper No 23 e-business Integrator From Strategy to Technology To remove the gap between e-biz strategy and implementation (eeyus@e-bizgroupcom) Creative Design 2001 04 24 e-business Integrator

More information

1. 자바프로그램기초 및개발환경 2 장 & 3 장. 자바개발도구 충남대학교 컴퓨터공학과

1. 자바프로그램기초 및개발환경 2 장 & 3 장. 자바개발도구 충남대학교 컴퓨터공학과 1. 자바프로그램기초 및개발환경 2 장 & 3 장. 자바개발도구 충남대학교 컴퓨터공학과 학습내용 1. Java Development Kit(JDK) 2. Java API 3. 자바프로그래밍개발도구 (Eclipse) 4. 자바프로그래밍기초 2 자바를사용하려면무엇이필요한가? 자바프로그래밍개발도구 JDK (Java Development Kit) 다운로드위치 : http://www.oracle.com/technetwork/java/javas

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

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 SYSTEM TEST & STATIC ANALYSIS 2013 SPRING SOFTWARE VERIFICATION TEAM 1 200711460 이상열 200711470 정재호 201111344 김재엽 201211350 박주광 CONTENTS System Test Customer s View Reference 2013-06-07 2 Functional Analysis

More information

Microsoft Word - src.doc

Microsoft Word - src.doc IPTV 서비스탐색및콘텐츠가이드 RI 시스템운용매뉴얼 목차 1. 서버설정방법... 5 1.1. 서비스탐색서버설정... 5 1.2. 컨텐츠가이드서버설정... 6 2. 서버운용방법... 7 2.1. 서비스탐색서버운용... 7 2.1.1. 서비스가이드서버실행... 7 2.1.2. 서비스가이드정보확인... 8 2.1.3. 서비스가이드정보추가... 9 2.1.4. 서비스가이드정보삭제...

More information