PowerPoint Presentation

Size: px
Start display at page:

Download "PowerPoint Presentation"

Transcription

1 Canvas and SVG(Scalable Vector Graphics) 류관희 충북대학교

2 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 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, characters, and adding images. OpenVG & Canvas - 2D Graphics 2

3 HTML5 Canvas? (2/2) Features 2D Context Save, Restore : push or pop graphics state stack Transformation Global alpha Shapes : Fill and Stroke Path Canvas State : Fill and Stroke Style, Matrix, Clipping region Image Text Hardware Accelerated Canvas Element OpenVG & Canvas - 2D Graphics 3

4 Flash vs Canvas Finished Essential guide To Flash Games in March Steve Jobs refused Flash on the ios just days later. Easy Tools: a web browser, text editor and JavaScript was all that was required. The HTML5 Canvas allowed for a bitmapped graphics, much Flash s bitmapped canvas. Our specific Type Of Game Development translates well (tile sheets, bitmaps) OpenVG & Canvas - 2D Graphics 4

5 Retained mode vs Immediate Fig1. Retained Mode Fig2. Immediate Mode OpenVG & Canvas - 2D Graphics 5

6 HTML5 Canvas Support OpenVG & Canvas - 2D Graphics 6

7 HTML5 Canvas properties & methods width height id <canvas id= MyFirstCanvas width= 600 heght= 200 > This text is displayed if your browser does not support HTML5 Canvas. </canvas> OpenVG & Canvas - 2D Graphics 7

8 Colors, Styles, and Shadows Property fillstyle strokestyle shadowcolor shadowblur shadowoffsetx shadowoffsety Description Sets or returns the color, gradient, or pattern used to fill the drawing Sets or returns the color, gradient, or pattern used for strokes Sets or returns the color to use for shadows Sets or returns the blur level for shadows Sets or returns the horizontal distance of the shadow from the shape Sets or returns the vertical distance of the shadow from the shape Method createlineargradient() createpattern() createradialgradient() addcolorstop() Description Creates a linear gradient (to use on canvas content) Repeats a specified element in the specified direction Creates a radial/circular gradient (to use on canvas content) Specifies the colors and stop positions in a gradient object OpenVG & Canvas - 2D Graphics 8

9 Rectangles Method rect() fillrect() strokerect() clearrect() Description Creates a rectangle Draws a "filled" rectangle Draws a rectangle (no fill) Clears the specified pixels within a given rectangle OpenVG & Canvas - 2D Graphics 9

10 Line Styles Property linecap linejoin linewidth miterlimit Description Sets or returns the style of the end caps for a line Sets or returns the type of corner created, when two lines meet Sets or returns the current line width Sets or returns the maximum miter length OpenVG & Canvas - 2D Graphics 10

11 Paths Method fill() stroke() beginpath() moveto() closepath() lineto() clip() quadraticcurveto() beziercurveto() arc() arcto() ispointinpath() Description Fills the current drawing (path) Actually draws the path you have defined Begins a path, or resets the current path Moves the path to the specified point in the canvas, without creating a line Creates a path from the current point back to the starting point Adds a new point and creates a line from that point to the last specified point in the canvas Clips a region of any shape and size from the original canvas Creates a quadratic Bézier curve Creates a cubic Bézier curve Creates an arc/curve (used to create circles, or parts of circles) Creates an arc/curve between two tangents Returns true if the specified point is in the current path, otherwise false OpenVG & Canvas - 2D Graphics 11

12 Transformations Method scale() rotate() translate() transform() settransform() Description Scales the current drawing bigger or smaller Rotates the current drawing Remaps the (0,0) position on the canvas Replaces the current transformation matrix for the drawing Resets the current transform to the identity matrix. Then runs transform() OpenVG & Canvas - 2D Graphics 12

13 Text Property font textalign textbaseline Description Sets or returns the current font properties for text content Sets or returns the current alignment for text content Sets or returns the current text baseline used when drawing text Method filltext() stroketext() measuretext() Description Draws "filled" text on the canvas Draws text on the canvas (no fill) Returns an object that contains the width of the specified text OpenVG & Canvas - 2D Graphics 13

14 Images Method drawimage() Description Draws an image, canvas, or video onto the canvas Property width height data Description Returns the width of an ImageData object Returns the height of an ImageData object Returns an object that contains image data of a specified ImageData object Method createimagedata() getimagedata() putimagedata() Description Creates a new, blank ImageData object Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas Puts the image data (from a specified ImageData object) back onto the canvas OpenVG & Canvas - 2D Graphics 14

15 Compositing & Others Property globalalpha globalcompositeoperation Description Sets or returns the current alpha or transparency value of the drawing Sets or returns how a new image are drawn onto an existing image Method save() restore() createevent() getcontext() todataurl() Description Saves the state of the current context Returns previously saved path state and attributes OpenVG & Canvas - 2D Graphics 15

16 Example : Two overlapped rectanges <script> var canvas = document.queryselector("canvas"); var context = canvas.getcontext('2d'); context.fillstyle = 'red'; context.fillrect(0,0,800,600); context.fillstyle = 'rgba(255,255,0,0.5)'; context.fillrect(400,200,800,600); </script> OpenVG & Canvas - 2D Graphics 16

17 Example : Curve <script> var canvas = document.queryselector("canvas"); var context = canvas.getcontext('2d');. // geometry context.save(); context.beginpath(); context.moveto(20,130); context.quadraticcurveto(20,20,130,20); context.strokestyle = colors.path; context.stroke(); context.restore();. </script> OpenVG & Canvas - 2D Graphics 17

18 Example : Stroke <script> var canvas = document.queryselector("canvas"); var context = canvas.getcontext('2d');. // thick line context.linewidth = 20.0; // join style context.beginpath(); context.linejoin = 'bevel'; context.linejoin = 'round'; context.linejoin = 'miter'; context.moveto(20,130); context.lineto(50,50); context.lineto(80,130); context.stroke();. // cap style context.beginpath(); context.linecap = 'butt'; context.linecap = 'round'; context.linecap = 'square'; context.moveto(50,130); context.lineto(50,50); context.stroke();. </script> OpenVG & Canvas - 2D Graphics 18

19 Example : Image <script> var canvas = document.getelementbyid('canvas'), context = canvas.getcontext('2d'), image = new Image(); image.src = '../../shared/images/countrypath.jpg'; image.onload = function(e) { context.drawimage(image, 0, 0); }; </script> OpenVG & Canvas - 2D Graphics 19

20 Canvas Demo OpenVG & Canvas - 2D Graphics 20

21 SVG (Scalable Vector Graphics) SVG SVG Characteristic SVG History Tutorial Rectangle <rect>, Circle <circle>, Ellipse <ellipse>, Line <line> Polygon <polygon>, Polyline <polyline> Path <path> Gradient, Text Stroking Etc Exporting 애니메이션효과예제.. 원형차트그리기 SVG 를사용한그래픽라이브러리소개

22 SVG (Scalable Vector Graphics) :: XML 형식의그래픽을정의하고웹을위한벡터기반의그래픽을정의하기위해사용됨. 확대하거나크기를변화시켜도그래픽이손상되지않음. 다양한해상도와픽셀밀도에대응이가능함. 애니메이션과미디어쿼리지원등을포함하고있음.

23 SVG 의특징 XML 기반 :: CSS(Cascading Style Sheets), XSL(XML Style Language) 를지원 ( 스타일시트를통한커스터마이징이가능 / XML 기반의다른문서와통합가능 ) 멀티플랫폼 (Multi - Platform) :: 시스템, 운영체제에장애를받지않음. (PC, Mobile, android, ios 등에서모두지원됨 ) 상호작용 (Interactive Graphics) :: 키보드, 마우스입력에대한응답이가능하고 Interactive 그래프등을비교적쉽게구현가능 데이터연동 (Data-Driven Graphics) :: 데이터베이스연동이가능 ( 복잡한데이터의가시화가필요한지리정보, 실시간정보가시화등에효과적 ) 개인화 (Personalized Graphics)::

24 SVG History 1998 :: Adobe, Sun, Netscape 에서함께벡터그래픽을위한웹문서표준으로 PGML(Precision Graphics Markup Language) 제안 ( 이전에 Microsystem, MacroMedia 에서 VML 을제안해으나그에대응하여 PGML 을제안 ) W3C(World Wide Web Consortium) :: PGML 과 VML 기반의새로운벡터그래픽포맷제정을결정함. VML(vector markup language), PGML(Precision Graphics Markup Language)

25 SVG History 1998 년 08 월 :: SVG Working Group Adobe, Macromedia, IBM, Corel, Apple, HP, Microsoft, AutoDesk, Netscape, CSIRO, Kodak 1999 년 02 월 :: 초안발표 2001 년 09 월 SVG 1.0 권고 2003 년 01 월 :: SVG 1.1 권고 (W3C 권고안으로발표 ) Mobile SVG Profile 인 SVG Tiny 와 SVG Basic 2008 년 12 월 :: SVGT 1.2 권고

26 SVG Tutorial Tutorial ( Basic Shape :: Rectangle <rect>, Circle <circle>, Ellipse <ellipse>, Line <line> Polygon <polygon>, Polyline <polyline> Path <path> Text Stroking Etc 애니메이션효과예제.. 원형차트그리기 SVG 를사용한그래픽라이브러리소개

27 HTML Form <Head> JavaScript CSS <script> 내용 </script> <style> 내용 </style> <Body> SVG <svg> 내용 </svg> canvas 정적인 html

28 Rectangle <rect>

29 Rectangle <rect> 얼마나둥글게만들것인가 rx = x 축방향 ry = y 축방향

30 Circle <circle> cx, cy = 중심점 r = 반지름

31 Ellipse <ellipse> rx = x 축반지름 ry = y 축반지름

32 Line & Polyline < line > < polyline > Source :: <svg height="210" width="500"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> </svg> <polyline points="20,20 40,25 60,40 80, , ,180" style="fill:none;stroke:black;stroke-width:3" /> <polyline points="0,40 40,40 40,80 80,80 80, , ,160" style="fill:white;stroke:red;stroke-width:4" />

33 Polyline fill : white or none fill : blue 시작점, 끝점기준 Source :: <polyline points= "0,40 40,40 40,80 80,80 80, , ,160" style="fill:white; stroke:red; stroke-width:4" /> => fill: blue;

34 Path Path property <svg height="210" width="400"> <path d="m150 0 L L Z"/> </svg> 도형이닫혀있음 1. 시작 point 2. 다음 point 3. 다음 point

35 Path <svg height="400" width="450"> <path id="lineab" d="m L " stroke="red" stroke-width="3" fill="none" /> <path id="linebc" d="m L " stroke="red" stroke-width="3" fill="none" /> <path d="m L 150 0" stroke="green" stroke-width="3" fill="none" /> <path d="m q " stroke="blue" stroke-width="5" fill="none" /> <g stroke="black" stroke-width="3" fill="black"> <circle id="pointa" cx="100" cy="350" r="3" /> <circle id="pointb" cx="250" cy="50" r="3" /> <circle id="pointc" cx="400" cy="350" r="3" /> </g> <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle"> <text x="100" y="350" dx="-30">a</text> <text x="250" y="50" dy="-10">b</text> <text x="400" y="350" dx="30">c</text> </g> </svg>

36 Path 대문자 : 절대좌표소문자 : 상대좌표 Path command :: M = moveto L = lineto H = horizontal lineto V = vertical lineto Z = closepath M(x,y) :: 시작점 L (x,y) :: 기준점에서좌표까지직선 H :: 다음포인트까지수평선 V :: 다음포인트까지수직선 Z :: path를닫는다. ( 마지막 point에서 M point로직선 )

37 Path Curve Curve command :: Q = quadratic Bézier curve T = smooth quadratic Bézier curveto C = Cubic bezier curveto S = smooth curveto A = elliptical Arc => 2 차 Bezier curve Q(x1,y1 x,y) :: 기준점에서 x,y 까지곡선을그려준다.(x1,y1 은 control point) T(x,y) :: 베지어커브에이어서커브를그릴때사용함. => 3 차 Bezier curve C(x2,y2 x1,y1 x,y) :: Q 에서조절점이하나추가 S(x1,y1 x,y) :: 조절점은앞선커브에대칭되는위치에놓이게된다. A(rx,ry x-axis-rotation large-arch-flag, sweepflag x,y) ::

38 Bezier curve(2 차 ) Source :: <path d="m Q " fill="none" stroke="black"/> <path d="m Q T350 30" fill="none" stroke="black"/> Q(x1,y1 x,y) :: 기준점에서 x,y 까지곡선을그려준다. T(x,y) :: 연속해서커브를그릴때사용함.

39 Bezier curve(3 차 ) Source :: <path d="m Q " fill="none" stroke="black"/> <path d="m Q T350 30" fill="none" stroke="black"/> Q(x1,y1 x,y) :: 기준점에서 x,y 까지곡선을그려준다. T(x,y) :: 연속해서커브를그릴때사용함.

40 Elliptical Arc A(rx,ry x-axis-rotation large-arch-flag, sweepflag x,y) :: rx, ry :: x, y 방향타원의반지름 x-axis-rotation : x 축주변으로얼마나구부러지는지 (rx 와 ry 의값이다를경우에만효과있음 ) Large-arch-flag : 커브의크기 (0 1) (1 이면크게 ) Sweepflag : 커브의방향 (0 1) (1 이면바깥?) x, y : 종료지점

41 Elliptical Arc parameter

42 Gradient Linear Source :: <defs> <ObjectBoundingBox> <userspaceonuse> <lineargradient id ="Exam1" x1="0%" y1="30%" x2="30%" y2="100%"gradientunits=?????????????? "> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </lineargradient> </defs>

43 Gradient Radial Source :: <defs> <ObjectBoundingBox> <userspaceonuse> <radialgradient id ="Exam1" x1="0%" y1="0%" x2="100%" y2="100%"gradientunits=?????????????????"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs>

44 Text Source :: Basic Text form <text x="0" y="15"> I love SVG! => 시작위치, Text message </text> <text x="0" y="15" fill="red"> I love SVG! => 시작위치, fill, Text message </text> Source :: Transform <text x="0" y="15" fill="red transform="rotate(30 20, 40)">I love SVG</text> => transform="rotate(angle) translate(tx, ty) => rotate( angle x, y ) // text를 20, 40 이동시켜서기울기 30의텍스트출력

45 Text( tspan, link) 속성설명 x="<coordinate>" y="<coordinate>" dx="<length>" dy="<length>" rotate="<angle>" 텍스트의 x 절대좌표값텍스트의 y 절대좌표값텍스트의 x 상대좌표값텍스트의 y 상대좌표값회전각도를지정한다 tspan :: <text x="10" y="20" style="fill:red;">several lines: <tspan x="10" y= 20">First line.</tspan> <tspan x="10" y="70">second line.</tspan> </text> Source :: hyperlink <a xlink:href=" target="_blank"> <text x="0" y="15" fill="red">i love SVG!</text> </a> <!-- <a> 지정된 text에 link를걸어준다. -->

46 Text_Path 웹상의 SVG 를수정 1. Circle 2. Radial Gradient 3. Path 4. Text_Path

47 Stroke width linecap dasharray 그래픽오브젝트의윤곽을지정하는것 Stroke-width= <length> Stroke-linecap= butt round square stroke-dasharray= 선, 공백, 선, 공백.

48 SVG Animation 동적인웹환경에적합한형태 시간에따라변화 SVG Animation 의 5 가지요소 animate : 스칼라값을가진속성을시간에따라다른값이할당되도록한다. set : 비수치값을가진속성을애니메이션하는데사용된다. animatemotion : 요소를이동패스에따라움직이게한다. animatecolor : 시간에따라컬러값을변경한다. animatetransform : SVG 변환속성을시간에따라변경한다.

49 Exporting D3 로작성된 Image 를파일로저장하기 Bitmap Image 로저장 Print_scrin 으로화면을캡쳐한다. PDF 문서로저장 PDF 로인쇄하는기능이있는프로그램사용 맥은별도의프로그램필요없음 ( 운영체제지원 ) SVG 문서로저장 SVG 코드를 Text_Editor 에복사 =>.svg 로저장

50 References - Canvas Web sites Books HTML5: Guidelines for Web Developers by Klaus Förster and Bernd Öggl HTML5 Canvas by Steve Fulton, Jeff Fulton OpenVG & Canvas - 2D Graphics 50

51 참고자료 책 ( 충북대도서관 ) 모바일컨텐츠제작을위한 SVG 프로그래밍 웹 SVG Tool javascript 그래픽라이브러리소개 Pie chart

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

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

More information

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

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

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

SVG

SVG 웹벡터그래픽 Web Vector Graphics 최윤석 Namo Interactive Inc. clotho45@namo.com 1 목차 SVG 소개 SVG 현황및활용예소개 다른포맷과의비교 향후발전방향 2 3 SVG 소개 SVG History W3C 표준 Vector Graphic Format Graphic S/W : Adobe Systems, Macromedia,

More information

쉽게 풀어쓴 C 프로그래밍

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

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

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

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

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

HTML5-³¹Àå¿ë.PDF

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

More information

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

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

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 How to produce ChemML and MathML 조윤상 ( 과편협기획운영위원 ) 1 Applications of XML Applications of XML RDF (Resource Description Framework) : 자원의정보를표현하기위한규격, 구문및구조에대한공통적인규칙을지원. RSS (Rich Site Summary) : 뉴스나블로그사이트에서주로사용하는콘텐츠표현방식.

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는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을 동 향 제 23 권 5호 통권 504호 HTML5가 웹 환경에 미치는 영향 이 은 민 * 16) 1. 개 요 구글(Google)은 2010년 5월 구글 I/O 개발자 컨퍼런스에서 HTML5를 통해 플러 그인의 사용이 줄어들고 프로그램 다운로드 및 설치가 필요 없는 브라우저 기반 웹 플랫폼 환경이 점차 구현되고 있다고 강조했다. 그리고 애플(Apple)은 2010년

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

일반인을 위한 전자책 제작 방법

일반인을 위한 전자책 제작 방법 국립중앙도서관 디지털 정보활용능력 교육 이펍(ePub) 제작 입문 2015. 6. 강사 : 최 현 이북스펍 대표 (http://ebookspub.co.kr) - 1 - - 강의 내용 - 1. epub 이란 무엇인가 1.1. 전자책 출판 프로세스 이해 1.2. 전자책의 다양한 형태와 제작방식 1.2. epub 개념 이해 및 제작툴 종류 2. epub 제작툴 소개

More information

01-OOPConcepts(2).PDF

01-OOPConcepts(2).PDF Object-Oriented Programming Concepts Tel: 02-824-5768 E-mail: hhcho@selabsoongsilackr? OOP (Object) (Encapsulation) (Message) (Class) (Inheritance) (Polymorphism) (Abstract Class) (Interface) 2 1 + = (Dependency)

More information

[ReadyToCameral]RUF¹öÆÛ(CSTA02-29).hwp

[ReadyToCameral]RUF¹öÆÛ(CSTA02-29).hwp RUF * (A Simple and Efficient Antialiasing Method with the RUF buffer) (, Byung-Uck Kim) (Yonsei Univ. Depth of Computer Science) (, Woo-Chan Park) (Yonsei Univ. Depth of Computer Science) (, Sung-Bong

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

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

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

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

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

8.1 모바일환경에서 2D 그래픽스기술 모바일 2D 그래픽스의개념 모바일 2D 그래픽스의활용분야

8.1 모바일환경에서 2D 그래픽스기술 모바일 2D 그래픽스의개념 모바일 2D 그래픽스의활용분야 제 8 장. 2D 그래픽스기술의활용 8.1 모바일환경에서 2D 그래픽스기술 8.1.1 모바일 2D 그래픽스의개념 8.1.2 모바일 2D 그래픽스의활용분야 8.1.1 모바일 2D 그래픽스의개념 하드웨어환경의발전과디스플레이화면 2 세대 2.5 세대초기 3 세대 3 세대 2 세대초창기환경 적은량의문자데이터만표시, 흑백, 화면해상도는보통 65 101 2.5 세대 WAP

More information

00.1

00.1 HOSPA Chipboard screws with countersunk head Material: Drive: Cross recess PZ galvanized yellow chromatized nickel plated burnished Partly threaded, galvanized or yellow chromatized dk k L d m Head Ø dk

More information

LCD Display

LCD Display LCD Display SyncMaster 460DRn, 460DR VCR DVD DTV HDMI DVI to HDMI LAN USB (MDC: Multiple Display Control) PC. PC RS-232C. PC (Serial port) (Serial port) RS-232C.. > > Multiple Display

More information

1

1 7차시. 이즐리와 택시도를 활용한 인포그래픽 제작 1. 이즐리 사이트에 대해 알아보고 사용자 메뉴 익히기 01. 이즐리(www.easel.ly) 사이트 접속하기 인포그래픽 제작을 위한 이즐리 사이트는 무료로 제공되는 템플릿을 이용하여 간편하게 인포그래 픽을 만들 수 있는 사이트입니 이즐리는 유료, 무료 구분이 없는 장점이 있으며 다른 인포그래픽 제작 사이트보다

More information

Chapter3

Chapter3 Introduction to Computer Graphics Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 3 Rev. by SYO This presentation 2004, MacAvon Media Productions 2009-03-12 Multimedia 1 Visual Representation

More information

Macaron Cooker Manual 1.0.key

Macaron Cooker Manual 1.0.key MACARON COOKER GUIDE BOOK Ver. 1.0 OVERVIEW APPLICATION OVERVIEW 1 5 2 3 4 6 1 2 3 4 5 6 1. SELECT LAYOUT TIP 2. Add Page / Delete Page 3. Import PDF 4. Image 5. Swipe 5-1. Swipe & Skip 5-2. Swipe & Rotate

More information

TRIBON 실무 DRAFT 편 조선전용 CAD에 대한 기초적인 사용 방법 기술 기술지원팀

TRIBON 실무 DRAFT 편 조선전용 CAD에 대한 기초적인 사용 방법 기술 기술지원팀 TRIBON 실무 DRAFT 편 조선전용 CAD에 대한 기초적인 사용 방법 기술 기술지원팀 1. 1-1) TRIBON 1-2) 2D DRAFTING OVERVIEW 1-3) Equipment Pipes Cables Systems Stiffeners Blocks Assemblies Panels Brackets DRAWINGS TRIBON Model Model

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

서현수

서현수 Introduction to TIZEN SDK UI Builder S-Core 서현수 2015.10.28 CONTENTS TIZEN APP 이란? TIZEN SDK UI Builder 소개 TIZEN APP 개발방법 UI Builder 기능 UI Builder 사용방법 실전, TIZEN APP 개발시작하기 마침 TIZEN APP? TIZEN APP 이란? Mobile,

More information

APOGEE Insight_KR_Base_3P11

APOGEE Insight_KR_Base_3P11 Technical Specification Sheet Document No. 149-332P25 September, 2010 Insight 3.11 Base Workstation 그림 1. Insight Base 메인메뉴 Insight Base Insight Insight Base, Insight Base Insight Base Insight Windows

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

Microsoft PowerPoint - HS6000 Full HD Subtitle Generator Module Presentation

Microsoft PowerPoint - HS6000 Full HD Subtitle Generator Module Presentation HS6000 Full HD Subtitle Generator Module High-performance Network DVR Solution Preliminary Product Overview (Without notice, following described technical spec. can be changed) AddPac Technology 2010,

More information

untitled

untitled EZ-TFT700(T) : EZ-TFT700(T) : Rev.000 Rev No. Page 2007/08/03 Rev.000 Rev.000. 2007/12/12 Rev.001 1.6 Allstech,,. EZ-TFT700(T). Allstech EZ-TFT700(T),,. EZ-TFT700(T) Allstech. < > EZ-TFT Information(13h)

More information

untitled

untitled 전방향카메라와자율이동로봇 2006. 12. 7. 특허청전기전자심사본부유비쿼터스심사팀 장기정 전방향카메라와자율이동로봇 1 Omnidirectional Cameras 전방향카메라와자율이동로봇 2 With Fisheye Lens 전방향카메라와자율이동로봇 3 With Multiple Cameras 전방향카메라와자율이동로봇 4 With Mirrors 전방향카메라와자율이동로봇

More information

(JBE Vol. 21, No. 1, January 2016) (Regular Paper) 21 1, (JBE Vol. 21, No. 1, January 2016) ISSN 228

(JBE Vol. 21, No. 1, January 2016) (Regular Paper) 21 1, (JBE Vol. 21, No. 1, January 2016)   ISSN 228 (JBE Vol. 1, No. 1, January 016) (Regular Paper) 1 1, 016 1 (JBE Vol. 1, No. 1, January 016) http://dx.doi.org/10.5909/jbe.016.1.1.60 ISSN 87-9137 (Online) ISSN 16-7953 (Print) a), a) An Efficient Method

More information

Contents 1장:Symphony Documents 사용자 가이드 8 2장:Symphony Presentations 사용자 가이드 15 3장:Symphony Spreadsheets 사용자 가이드 23 Chapter 1. Symphony Documents 사용자 가이드01 Symphony Documents 사용자 가이드 IBM Lotus Symphony

More information

untitled

untitled Push... 2 Push... 4 Push... 5 Push... 13 Push... 15 1 FORCS Co., LTD A Leader of Enterprise e-business Solution Push (Daemon ), Push Push Observer. Push., Observer. Session. Thread Thread. Observer ID.

More information

Domino Designer Portal Development tools Rational Application Developer WebSphere Portlet Factory Workplace Designer Workplace Forms Designer

Domino Designer Portal Development tools Rational Application Developer WebSphere Portlet Factory Workplace Designer Workplace Forms Designer Domino, Portal & Workplace WPLC FTSS Domino Designer Portal Development tools Rational Application Developer WebSphere Portlet Factory Workplace Designer Workplace Forms Designer ? Lotus Notes Clients

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

CAD 화면상에 동그란 원형 도형이 생성되었습니다. 화면상에 나타난 원형은 반지름 500인 도형입니다. 하지만 반지름이 500이라는 것은 작도자만 알고 있는 사실입니다. 반지름이 500이라는 것을 클라이언트와 작업자들에게 알려주기 위 해서는 반드시 치수가 필요하겠죠?

CAD 화면상에 동그란 원형 도형이 생성되었습니다. 화면상에 나타난 원형은 반지름 500인 도형입니다. 하지만 반지름이 500이라는 것은 작도자만 알고 있는 사실입니다. 반지름이 500이라는 것을 클라이언트와 작업자들에게 알려주기 위 해서는 반드시 치수가 필요하겠죠? 실무 인테리어를 위한 CAD 프로그램 활용 인테리어 도면 작도에 꼭 필요한 명령어 60개 Ⅷ 이번 호에서는 DIMRADIUS, DIMANGULAR, DIMTEDIT, DIMSTYLE, QLEADER, 5개의 명령어를 익히도록 하겠다. 라경모 온라인 설계 서비스 업체 '도면창고' 대 표를 지낸 바 있으며, 현재 나인슈타인 을 설립해 대표 를맡고있다. E-Mail

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

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

2011년 10월 초판 c 2011 Sony Corporation. All rights reserved. 서면 허가 없이 전체 또는 일부를 복제하는 것을 금합니다. 기능 및 규격은 통보 없이 변경될 수 있습니다. Sony와 Sony 로고는 Sony의 상표입니다. G L

2011년 10월 초판 c 2011 Sony Corporation. All rights reserved. 서면 허가 없이 전체 또는 일부를 복제하는 것을 금합니다. 기능 및 규격은 통보 없이 변경될 수 있습니다. Sony와 Sony 로고는 Sony의 상표입니다. G L HXR-NX3D1용 3D 워크플로 가이드북 2011년 10월 초판 c 2011 Sony Corporation. All rights reserved. 서면 허가 없이 전체 또는 일부를 복제하는 것을 금합니다. 기능 및 규격은 통보 없이 변경될 수 있습니다. Sony와 Sony 로고는 Sony의 상표입니다. G Lens, Exmor, InfoLITHIUM, Memory

More information

H3050(aap)

H3050(aap) USB Windows 7/ Vista 2 Windows XP English 1 2 3 4 Installation A. Headset B. Transmitter C. USB charging cable D. 3.5mm to USB audio cable - Before using the headset needs to be fully charged. -Connect

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

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

Orcad Capture 9.x

Orcad Capture 9.x OrCAD Capture Workbook (Ver 10.xx) 0 Capture 1 2 3 Capture for window 4.opj ( OrCAD Project file) Design file Programe link file..dsn (OrCAD Design file) Design file..olb (OrCAD Library file) file..upd

More information

목차 제 1 장 inexio Touch Driver소개... 3 1.1 소개 및 주요 기능... 3 1.2 제품사양... 4 제 2 장 설치 및 실행... 5 2.1 설치 시 주의사항... 5 2.2 설치 권고 사양... 5 2.3 프로그램 설치... 6 2.4 하드웨

목차 제 1 장 inexio Touch Driver소개... 3 1.1 소개 및 주요 기능... 3 1.2 제품사양... 4 제 2 장 설치 및 실행... 5 2.1 설치 시 주의사항... 5 2.2 설치 권고 사양... 5 2.3 프로그램 설치... 6 2.4 하드웨 최종 수정일: 2010.01.15 inexio 적외선 터치스크린 사용 설명서 [Notes] 본 매뉴얼의 정보는 예고 없이 변경될 수 있으며 사용된 이미지가 실제와 다를 수 있습니다. 1 목차 제 1 장 inexio Touch Driver소개... 3 1.1 소개 및 주요 기능... 3 1.2 제품사양... 4 제 2 장 설치 및 실행... 5 2.1 설치 시

More information

Social Network

Social Network Social Network Service, Social Network Service Social Network Social Network Service from Digital Marketing Internet Media : SNS Market report A social network service is a social software specially focused

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

63-69±è´ë¿µ

63-69±è´ë¿µ Study on the Shadow Effect of 3D Visualization for Medical Images ased on the Texture Mapping D.Y. Kim, D.S. Kim, D.K. Shin, D.Y. Kim 1 Dept. of iomedical Engineering, Yonsei University = bstract = The

More information

395-402Ȳ¼º¼ö

395-402Ȳ¼º¼ö 395 Fig. 1. Flow diagram showing selection of options for adequate screen recording on the CamStudio 396 Fig. 2 Flow diagram showing the menu buttons on the CamStudio and the process of recording after

More information

PowerPoint 프레젠테이션

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

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

public key private key Encryption Algorithm Decryption Algorithm 1

public key private key Encryption Algorithm Decryption Algorithm 1 public key private key Encryption Algorithm Decryption Algorithm 1 One-Way Function ( ) A function which is easy to compute in one direction, but difficult to invert - given x, y = f(x) is easy - given

More information

OP_Journalism

OP_Journalism 1 non-linear consumption 2 Whatever will change television will do so by re-defining the core product not just the tools we use to consume it. by Horace Dediu, Asymco 3 re-defining the core product not

More information

Microsoft PowerPoint - 27.pptx

Microsoft PowerPoint - 27.pptx 이산수학 () n-항관계 (n-ary Relations) 2011년봄학기 강원대학교컴퓨터과학전공문양세 n-ary Relations (n-항관계 ) An n-ary relation R on sets A 1,,A n, written R:A 1,,A n, is a subset R A 1 A n. (A 1,,A n 에대한 n- 항관계 R 은 A 1 A n 의부분집합이다.)

More information

HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API

HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API WAC 2.0 & Hybrid Web App 권정혁 ( @xguru ) 1 HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API Mobile Web App needs Device APIs Camera Filesystem Acclerometer Web Browser Contacts Messaging

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

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

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

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

What Is CSS? Stands for Cascading Style Sheets. Is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Styles define h

What Is CSS? Stands for Cascading Style Sheets. Is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Styles define h What is CSS? Bok, Jong Soon jongsoon.bok@gmail.com www.javaexpert.co.kr What Is CSS? Stands for Cascading Style Sheets. Is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

More information

좋은 사진 찍는 방법

좋은 사진 찍는 방법 Based on Photo Zone by Klaus Schroiff (Klaus@photozone.de) Translation & Edit by Jihoon Jason Wang (DS2SJT / jasonw@korea.com) - Prologue.. And.. special thanks to Klaus Jason Jihoon Wang (jasonw@korea.com)

More information

Microsoft PowerPoint - 3ÀÏ°_º¯¼ö¿Í »ó¼ö.ppt

Microsoft PowerPoint - 3ÀÏ°_º¯¼ö¿Í »ó¼ö.ppt 변수와상수 1 변수란무엇인가? 변수 : 정보 (data) 를저장하는컴퓨터내의특정위치 ( 임시저장공간 ) 메모리, register 메모리주소 101 번지 102 번지 변수의크기에따라 주로 byte 단위 메모리 2 기본적인변수형및변수의크기 변수의크기 해당컴퓨터에서는항상일정 컴퓨터마다다를수있음 short

More information

프로덕트 아이덴티티의 유형별 특성에 관한 연구

프로덕트 아이덴티티의 유형별 특성에 관한 연구 A Study on specific characteristic pattern of Product Identity - - - - (Smart & So ft) (Balance of Reason and Feeling). - - - - - - - - - - - - - (Originality),

More information

Mentor_PCB설계입문

Mentor_PCB설계입문 Mentor MCM, PCB 1999, 03, 13 (daedoo@eeinfokaistackr), (kkuumm00@orgionet) KAIST EE Terahertz Media & System Laboratory MCM, PCB (mentor) : da & Summary librarian jakup & package jakup & layout jakup &

More information

접근성과 웹 The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, the inventor

접근성과 웹 The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, the inventor 웹 접근성 : 최근 동향 신정식 jshin@i18nl10n.com 2006-06-29 웹 접근성 : 최근 동향 2 / 30 신정식 접근성과 웹 The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee,

More information

Dialog Box 실행파일을 Web에 포함시키는 방법

Dialog Box 실행파일을 Web에 포함시키는 방법 DialogBox Web 1 Dialog Box Web 1 MFC ActiveX ControlWizard workspace 2 insert, ID 3 class 4 CDialogCtrl Class 5 classwizard OnCreate Create 6 ActiveX OCX 7 html 1 MFC ActiveX ControlWizard workspace New

More information

K7VT2_QIG_v3

K7VT2_QIG_v3 1......... 2 3..\ 4 5 [R] : Enter Raid setup utility 6 Press[A]keytocreateRAID RAID Type: JBOD RAID 0 RAID 1: 2 7 " RAID 0 Auto Create Manual Create: 2 RAID 0 Block Size: 16K 32K

More information

VOL.76.2008/2 Technical SmartPlant Materials - Document Management SmartPlant Materials에서 기본적인 Document를 관리하고자 할 때 필요한 세팅, 파일 업로드 방법 그리고 Path Type인 Ph

VOL.76.2008/2 Technical SmartPlant Materials - Document Management SmartPlant Materials에서 기본적인 Document를 관리하고자 할 때 필요한 세팅, 파일 업로드 방법 그리고 Path Type인 Ph 인터그래프코리아(주)뉴스레터 통권 제76회 비매품 News Letters Information Systems for the plant Lifecycle Proccess Power & Marine Intergraph 2008 Contents Intergraph 2008 SmartPlant Materials Customer Status 인터그래프(주) 파트너사

More information

DocsPin_Korean.pages

DocsPin_Korean.pages Unity Localize Script Service, Page 1 Unity Localize Script Service Introduction Application Game. Unity. Google Drive Unity.. Application Game. -? ( ) -? -?.. 준비사항 Google Drive. Google Drive.,.. - Google

More information

Stage 2 First Phonics

Stage 2 First Phonics ORT Stage 2 First Phonics The Big Egg What could the big egg be? What are the characters doing? What do you think the story will be about? (큰 달걀은 무엇일까요? 등장인물들은 지금 무엇을 하고 있는 걸까요? 책은 어떤 내용일 것 같나요?) 대해 칭찬해

More information

디지털영상처리3

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

More information

Microsoft PowerPoint - ch03ysk2012.ppt [호환 모드]

Microsoft PowerPoint - ch03ysk2012.ppt [호환 모드] 전자회로 Ch3 iode Models and Circuits 김영석 충북대학교전자정보대학 2012.3.1 Email: kimys@cbu.ac.kr k Ch3-1 Ch3 iode Models and Circuits 3.1 Ideal iode 3.2 PN Junction as a iode 3.4 Large Signal and Small-Signal Operation

More information

슬라이드 1

슬라이드 1 4. Mobile Service Technology Mobile Computing Lecture 2012. 10. 5 안병익 (biahn99@gmail.com) 강의블로그 : Mobilecom.tistory.com 2 Mobile Service in Korea 3 Mobile Service Mobility 4 Mobile Service in Korea 5 Mobile

More information

2

2 2 3 . 4 * ** ** 5 2 5 Scan 1 3 Preview Nikon 6 4 6 7 8 9 10 22) 11 12 13 14 15 16 17 18 19 20 21 . 22 23 24 Layout Tools ( 33) Crop ( 36) Analog Gain ( 69) Digital ICE 4 Advanced ( 61) Scan Image Enhancer

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

4 CD Construct Special Model VI 2 nd Order Model VI 2 Note: Hands-on 1, 2 RC 1 RLC mass-spring-damper 2 2 ζ ω n (rad/sec) 2 ( ζ < 1), 1 (ζ = 1), ( ) 1

4 CD Construct Special Model VI 2 nd Order Model VI 2 Note: Hands-on 1, 2 RC 1 RLC mass-spring-damper 2 2 ζ ω n (rad/sec) 2 ( ζ < 1), 1 (ζ = 1), ( ) 1 : LabVIEW Control Design, Simulation, & System Identification LabVIEW Control Design Toolkit, Simulation Module, System Identification Toolkit 2 (RLC Spring-Mass-Damper) Control Design toolkit LabVIEW

More information

슬라이드 1

슬라이드 1 디지털이미지와컴퓨터그래픽스 2010.03.25 첨단영상대학원박경주교수, kjpark@cau.ac.kr, 02-820-5823 http://cau.ac.kr/~kjpark, http://graphics.cau.ac.kr/ Topics 박경주교수 (kjpark@cau.ac.kr) 디지털이미지 모델링 모션그래픽스연구실 (http://graphics.cau.ac.kr/)

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

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

컴퓨터과학과 교육목표 컴퓨터과학과의 컴퓨터과학 프로그램은 해당분야 에서 학문적 기술을 창의적으로 연구하고 산업적 기술을 주도적으로 개발하는 우수한 인력을 양성 함과 동시에 직업적 도덕적 책임의식을 갖는 IT인 육성을 교육목표로 한다. 1. 전공 기본 지식을 체계적으로

컴퓨터과학과 교육목표 컴퓨터과학과의 컴퓨터과학 프로그램은 해당분야 에서 학문적 기술을 창의적으로 연구하고 산업적 기술을 주도적으로 개발하는 우수한 인력을 양성 함과 동시에 직업적 도덕적 책임의식을 갖는 IT인 육성을 교육목표로 한다. 1. 전공 기본 지식을 체계적으로 2015년 상명대학교 ICT융합대학 컴퓨터과학과 졸업 프로젝트 전시회 2015 Computer Science Graduate Exhibition 2015 Computer Science Graduate Exhibition 1 컴퓨터과학과 교육목표 컴퓨터과학과의 컴퓨터과학 프로그램은 해당분야 에서 학문적 기술을 창의적으로 연구하고 산업적 기술을 주도적으로 개발하는

More information

Voice Portal using Oracle 9i AS Wireless

Voice Portal using Oracle 9i AS Wireless Voice Portal Platform using Oracle9iAS Wireless 20020829 Oracle Technology Day 1 Contents Introduction Voice Portal Voice Web Voice XML Voice Portal Platform using Oracle9iAS Wireless Voice Portal Video

More information

C# Programming Guide - Types

C# Programming Guide - Types C# Programming Guide - Types 최도경 lifeisforu@wemade.com 이문서는 MSDN 의 Types 를요약하고보충한것입니다. http://msdn.microsoft.com/enus/library/ms173104(v=vs.100).aspx Types, Variables, and Values C# 은 type 에민감한언어이다. 모든

More information

Smart Power Scope Release Informations.pages

Smart Power Scope Release Informations.pages v2.3.7 (2017.09.07) 1. Galaxy S8 2. SS100, SS200 v2.7.6 (2017.09.07) 1. SS100, SS200 v1.0.7 (2017.09.07) [SHM-SS200 Firmware] 1. UART Command v1.3.9 (2017.09.07) [SHM-SS100 Firmware] 1. UART Command SH모바일

More information

step 1-1

step 1-1 Written by Dr. In Ku Kim-Marshall STEP BY STEP Korean 1 through 15 Action Verbs Table of Contents Unit 1 The Korean Alphabet, hangeul Unit 2 Korean Sentences with 15 Action Verbs Introduction Review Exercises

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

슬라이드 1

슬라이드 1 / 유닉스시스템개요 / 파일 / 프로세스 01 File Descriptor file file descriptor file type unix 에서의파일은단지바이트들의나열임 operating system 은파일에어떤포맷도부과하지않음 파일의내용은바이트단위로주소를줄수있음 file descriptor 는 0 이나양수임 file 은 open 이나 creat 로 file

More information

Solaris Express Developer Edition

Solaris Express Developer Edition Solaris Express Developer Edition : 2008 1 Solaris TM Express Developer Edition Solaris OS. Sun / Solaris, Java, Web 2.0,,. Developer Solaris Express Developer Edition System Requirements. 768MB. SPARC

More information

K_R9000PRO_101.pdf

K_R9000PRO_101.pdf GV-R9000 PRO Radeon 9000 PRO Upgrade your Life REV 101 GV-R9000 PRO - 2-2002 11 1 12 ATi Radeon 9000 PRO GPU 64MB DDR SDRAM 275MHz DirectX 81 SMARTSHADER ATI SMOOTHVISION 3D HYDRAVISION ATI CATLYST DVI-I

More information

(Microsoft PowerPoint \277\243\305\315\307\301\266\363\300\314\301\356 \260\374\301\241\300\307 HTML5)

(Microsoft PowerPoint \277\243\305\315\307\301\266\363\300\314\301\356 \260\374\301\241\300\307 HTML5) - W3C 가개발중인차세대 HTML 표준, HTML5 - 엔터프라이즈관점의 HTML5 2 HTML5 관련최근주요업계동향은? HTML5 vs (Flash vs Silverlight) 3 4 5

More information

4 5 4. Hi-MO 애프터케어 시스템 편 5. 오비맥주 카스 카스 후레쉬 테이블 맥주는 천연식품이다 편 처음 스타일 그대로, 부탁 케어~ Hi-MO 애프터케어 시스템 지속적인 모발 관리로 끝까지 스타일이 유지되도록 독보적이다! 근데 그거 아세요? 맥주도 인공첨가물이

4 5 4. Hi-MO 애프터케어 시스템 편 5. 오비맥주 카스 카스 후레쉬 테이블 맥주는 천연식품이다 편 처음 스타일 그대로, 부탁 케어~ Hi-MO 애프터케어 시스템 지속적인 모발 관리로 끝까지 스타일이 유지되도록 독보적이다! 근데 그거 아세요? 맥주도 인공첨가물이 1 2 On-air 3 1. 이베이코리아 G마켓 용평리조트 슈퍼브랜드딜 편 2. 아모레퍼시픽 헤라 루즈 홀릭 리퀴드 편 인쇄 광고 올해도 겨울이 왔어요. 당신에게 꼭 해주고 싶은 말이 있어요. G마켓에선 용평리조트 스페셜 패키지가 2만 6900원! 역시 G마켓이죠? G마켓과 함께하는 용평리조트 스페셜 패키지. G마켓의 슈퍼브랜드딜은 계속된다. 모바일 쇼핑 히어로

More information

example code are examined in this stage The low pressure pressurizer reactor trip module of the Plant Protection System was programmed as subject for

example code are examined in this stage The low pressure pressurizer reactor trip module of the Plant Protection System was programmed as subject for 2003 Development of the Software Generation Method using Model Driven Software Engineering Tool,,,,, Hoon-Seon Chang, Jae-Cheon Jung, Jae-Hack Kim Hee-Hwan Han, Do-Yeon Kim, Young-Woo Chang Wang Sik, Moon

More information

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일 Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 Introduce Me!!! Job Jeju National University Student Ubuntu Korean Jeju Community Owner E-Mail: ned3y2k@hanmail.net Blog: http://ned3y2k.wo.tc Facebook: http://www.facebook.com/gyeongdae

More information

MATLAB and Numerical Analysis

MATLAB and Numerical Analysis School of Mechanical Engineering Pusan National University dongwoonkim@pusan.ac.kr Review 무명함수 >> fun = @(x,y) x^2 + y^2; % ff xx, yy = xx 2 + yy 2 >> fun(3,4) >> ans = 25 시작 x=x+1 If문 >> if a == b >>

More information