diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:48:24 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:48:24 +0100 |
| commit | ee778d6eea54935fd05022e0ba8c49456003381a (patch) | |
| tree | 151a4cef804d8823cc8fc753b8edc693b7078241 /files/ko/web/html | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-ee778d6eea54935fd05022e0ba8c49456003381a.tar.gz translated-content-ee778d6eea54935fd05022e0ba8c49456003381a.tar.bz2 translated-content-ee778d6eea54935fd05022e0ba8c49456003381a.zip | |
unslug ko: move
Diffstat (limited to 'files/ko/web/html')
22 files changed, 0 insertions, 4550 deletions
diff --git a/files/ko/web/html/canvas/index.html b/files/ko/web/html/canvas/index.html deleted file mode 100644 index bbe466e58d..0000000000 --- a/files/ko/web/html/canvas/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Canvas API -slug: Web/HTML/Canvas -tags: - - API - - Canvas - - JavaScript - - 개요 - - 레퍼런스 -translation_of: Web/API/Canvas_API ---- -<div>{{CanvasSidebar}}</div> - -<p><strong>Canvas API</strong>는 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript">JavaScript</a>와 <a href="https://developer.mozilla.org/ko/docs/Web/HTML">HTML </a>{{HtmlElement("canvas")}} 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용됩니다.</p> - -<p>Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. <a href="https://developer.mozilla.org/ko/docs/Web/WebGL">WebGL API</a> 또한 <code><canvas></code> 엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그립니다.</p> - -<h2 id="기본_예시">기본 예시</h2> - -<p>canvas에 초록색 사각형을 그리는 간단한 예시입니다.</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<p>{{domxref("Document.getElementById()")}} 메소드는 HTML <code><canvas></code> 엘리먼트에 대한 참조를 얻습니다. 그 다음, {{domxref("HTMLCanvasElement.getContext()")}} 메소드는 엘리먼트의 컨텍스트(렌더링될 그리기의 대상)를 얻습니다.</p> - -<p>실제 그리기는 {{domxref("CanvasRenderingContext2D")}} 인터페이스를 사용해 수행됩니다. {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 프로퍼티는 사각형을 초록색으로 만듭니다. {{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} 메소드는 좌측 상단 코너를 (10, 10) 위치에 놓으며, 너비를 150, 높이를 100으로 지정합니다.</p> - -<pre class="brush: js">const canvas = document.getElementById('canvas'); -const ctx = canvas.getContext('2d'); - -ctx.fillStyle = 'green'; -ctx.fillRect(10, 10, 150, 100); -</pre> - -<h3 id="결과">결과</h3> - -<p>{{ EmbedLiveSample('기본_예시', 700, 180) }}</p> - -<h2 id="레퍼런스">레퍼런스</h2> - -<div class="index"> -<ul> - <li>{{domxref("HTMLCanvasElement")}}</li> - <li>{{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasGradient")}}</li> - <li>{{domxref("CanvasImageSource")}}</li> - <li>{{domxref("CanvasPattern")}}</li> - <li>{{domxref("ImageBitmap")}}</li> - <li>{{domxref("ImageData")}}</li> - <li>{{domxref("RenderingContext")}}</li> - <li>{{domxref("TextMetrics")}}</li> - <li>{{domxref("OffscreenCanvas")}} {{experimental_inline}}</li> - <li>{{domxref("Path2D")}} {{experimental_inline}}</li> - <li>{{domxref("ImageBitmapRenderingContext")}} {{experimental_inline}}</li> -</ul> -</div> - -<div class="blockIndicator note"> -<p><strong>노트:</strong> <code>WebGLRenderingContext</code>에 관련된 인터페이스는 <a href="/ko/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> 하위에 참조되어있습니다.</p> -</div> - -<p>{{domxref("CanvasCaptureMediaStream")}}은 관련된 인터페이스입니다.</p> - -<h2 id="가이드_및_튜토리얼">가이드 및 튜토리얼</h2> - -<dl> - <dt><a href="/ko/docs/Web/API/Canvas_API/Tutorial">Canvas 튜토리얼</a></dt> - <dd>Canvas API의 기본적인 사용과 고급 기능 모두를 다루는 이해하기 쉬운 튜토리얼.</dd> - <dt><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas 깊이 살펴보기</a></dt> - <dd>Canvas API 및 WebGL의 실습, 자세한 소개.</dd> - <dt><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas 핸드북</a></dt> - <dd>Canvas API에 대한 유용한 레퍼런스.</dd> - <dt><a href="/ko/docs/Web/API/Canvas_API/A_basic_ray-caster">데모: A basic ray-caster</a></dt> - <dd>Canvas를 사용한 ray-tracing 애니메이션 데모.</dd> - <dt><a href="/ko/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Canvas를 사용하여 비디오 조작</a></dt> - <dd>{{HTMLElement("video")}}와 {{HTMLElement("canvas")}}를 조합하여 실시간으로 비디오 데이터를 조작.</dd> -</dl> - -<h2 id="라이브러리">라이브러리</h2> - -<p>Canvas API는 굉장히 강력하지만, 사용하는 것이 항상 간단하지 않습니다. 아래에 나열된 라이브러리들은 캔버스 기반 프로젝트를 더 빠르고 더 쉽게 생성할 수 있게 해줍니다.</p> - -<ul> - <li><a href="http://www.createjs.com/easeljs">EaselJS</a>는 게임, 생성 예술 및 기타 고도의 그래픽 경험을 쉽게 생성할 수 있게 해주는 오픈소스 캔버스 라이브러리입니다.</li> - <li><a href="http://fabricjs.com">Fabric.js</a>는 SVG 파싱 기능을 갖춘 오픈소스 캔버스 라이브러리입니다.</li> - <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a>는 캔버스 기반 데이터 열지도를 생성하기위한 오픈소스 라이브러리입니다.</li> - <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a>은 인터렉티브한 데이터 시각화를 생성합니다.</li> - <li><a href="https://konvajs.github.io/">Konva.js</a>는 데스크탑 및 모바일 애플리케이션을 위한 2D 캔버스 라이브러리입니다.</li> - <li><a href="https://p5js.org/">p5.js</a>는 예술가, 디자이너, 교육자 및 입문자를 위한 캔버스 그리기 기능의 모든 세트를 포함하고 있습니다.</li> - <li><a href="http://paperjs.org/">Paper.js</a>는 HTML5 Canvas 위에서 실행되는 오픈소스 벡터 그래픽 스크립팅 프레임워크입니다.</li> - <li><a href="https://phaser.io/">Phaser</a>는 Canvas 및 WebGL 기반의 브라우저 게임을 위한 빠르고, 자유롭고, 재미있는 오픈소스 프레임워크입니다.</li> - <li><a href="http://processingjs.org">Processing.js</a>는 Processing 시각화 언어의 포트입니다.</li> - <li><a href="https://ptsjs.org">Pts.js</a>는 canvas 및 SVG를 사용한 창의적인 코딩 및 시각화를 위한 라이브러리입니다.</li> - <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a>는 Canvas를 위한 애니메이션 키 프레임 API입니다.</li> - <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a>는 2D 캔버스 엘리먼트를 생성하고 조작하기위한 오픈소스 JavaScript 라이브러리입니다.</li> - <li><a href="http://zimjs.com">ZIM</a> 프레임워크는 canvas에서의 창의적인 코딩을 위한 편의성, 컴포넌트 및 컨트롤을 제공하는 프레임워크입니다. 접근성 및 다채로운 튜토리얼을 포함합니다.</li> -</ul> - -<div class="blockIndicator note"> -<p><strong>노트:</strong> WebGL을 사용하는 2D 및 3D를 위한 <a href="/ko/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL API</a>를 확인하세요.</p> -</div> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">명세</th> - <th scope="col">상태</th> - <th scope="col">코멘트</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>Mozilla 애플리케이션은 Gecko 1.8(<a href="/ko/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>)을 시작으로 <code><canvas></code>에 대한 지원을 받았습니다. OS X Dashboard 및 Safari를 위해 Apple이 소개한 것이 캔버스 엘리먼트의 기원입니다. Internet Explorer는 9버전부터 <code><canvas></code>를 지원하며, 이전 버전의 IE에서는 Google의 <a href="https://github.com/arv/explorercanvas">Explorer Canvas</a> 프로젝트의 스크립트를 추가하여 <code><canvas></code>에 대한 지원을 효과적으로 추가할 수 있습니다. Google Chrome 및 Opera 9 또한 <code><canvas></code>를 지원합니다.</p> - -<h2 id="함께_보기">함께 보기</h2> - -<ul> - <li><a href="/ko/docs/Web/WebGL">WebGL</a></li> -</ul> diff --git a/files/ko/web/html/canvas/manipulating_video_using_canvas/index.html b/files/ko/web/html/canvas/manipulating_video_using_canvas/index.html deleted file mode 100644 index 7851f86154..0000000000 --- a/files/ko/web/html/canvas/manipulating_video_using_canvas/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: 캔버스(canvas)를 이용한 비디오 조작하기 -slug: Web/HTML/Canvas/Manipulating_video_using_canvas -tags: - - Canvas - - Video - - 비디오 - - 캔버스 -translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas ---- -<div>{{CanvasSidebar}}</div> - -<div class="summary"> -<p>비디오에서 다양한 시각적 효과를 보여주기 위해,<code> <a class="internal" href="/ko/docs/Web/HTML/Element/canvas" title="Ko/Canvas">캔버스</a></code>와 <code><a class="internal" href="/ko/docs/Web/HTML/Element/video" title="Ko/HTML/Element/Video">비디오</a></code>의 기능을 결합하여 실시간으로 비디오 데이터를 조작할 수 있습니다. 이 튜토리얼에서는 자바스크립트 코드로 어떻게 크로마 키잉(chroma-keying, 또한 "녹색 스크린 효과, green screen effect")을 구현할 수 있는지 보여줍니다. </p> -</div> - -<p><a class="external" href="/samples/video/chroma-key/index.xhtml" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/video/chroma-key/index.xhtml">라이브 예제 보기</a></p> - -<h2 id="문서(document)_내용">문서(document) 내용</h2> - -<p>이 내용을 보여주기 위한 XHTML 문서는 아래와 같습니다.</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <style> - body { - background: black; - color:#CCCCCC; - } - #c2 { - background-image: url(foo.png); - background-repeat: no-repeat; - } - div { - float: left; - border :1px solid #444444; - padding:10px; - margin: 10px; - background:#3B3B3B; - } - </style> - <script type="text/javascript" src="main.js"></script> - </head> - - <body onload="processor.doLoad()"> - <div> - <video id="video" src="video.ogv" controls="true"/> - </div> - <div> - <canvas id="c1" width="160" height="96"></canvas> - <canvas id="c2" width="160" height="96"></canvas> - </div> - </body> -</html> -</pre> - -<p>여기에서 중요한 요소는:</p> - -<ol> - <li>이 문서에는 ID가 c1, c2인 두 개의 <a class="internal" href="/ko/docs/Web/HTML/Element/canvas" title="Ko/Canvas"><code>캔버스</code></a>가 있습니다. 캔버스 c1은 비디오 원본의 현재 프레임을 보여주기 위해 사용되고, c2는 크로마 키잉 효과를 수행한 결과를 보여줍니다. c2에서 비디오의 녹색 배경을 대체할 정지 이미지를 미리 로드합니다.</li> - <li>자바스크립트 코드는 main.js에서 가져옵니다. 이 스크립트는 자바스크립트 1.8 기능을 사용했기 때문에 스크립트를 가져오는 22번째 줄에서 버전이 명시됩니다(원문: this script uses JavaScript 1.8 features, so that version is specified in line 22 when importing the script).</li> - <li>문서가 로드되면, processor.doLoad() 메서드가 실행됩니다.</li> -</ol> - -<h2 id="자바스크립트_코드">자바스크립트 코드</h2> - -<p>main.js에 있는 자바스크립트 코드는 3개의 메서드로 구성됩니다.</p> - -<h3 id="크로마_키잉_플레이어_초기화">크로마 키잉 플레이어 초기화</h3> - -<p><code>doLoad()</code> 메서드는 문서가 최초에 로드될 때 호출됩니다. 이 메서드가 하는 일은 크로마 키잉 처리에서 쓰일 변수를 준비하고, 이벤트 리스너를 등록함으로써 사용자가 비디오 재생을 시작할 때 감지할 수 있도록 해줍니다. </p> - -<pre class="brush: js"> var processor; - - processor.doLoad = function doLoad() { - this.video = document.getElementById('video'); - this.c1 = document.getElementById('c1'); - this.ctx1 = this.c1.getContext('2d'); - this.c2 = document.getElementById('c2'); - this.ctx2 = this.c2.getContext('2d'); - let self = this; - this.video.addEventListener('play', function() { - self.width = self.video.videoWidth / 2; - self.height = self.video.videoHeight / 2; - self.timerCallback(); - }, false); - }, -</pre> - -<p>이코드는 XHTML에서 중요한 요소인 비디오와 캔버스의 참조를 가져옵니다. 두 개의 캔버스에 대한 그래픽 컨텍스트의 참조도 가져옵니다. 이 참조들은 뒤에서 크로마 키잉 효과를 구현할 때 사용됩니다.</p> - -<p>그리고 <code>addEventListener()</code>는 비디오가 재생을 시작하기 위해 호출되기 때문에 사용자가 재생 버튼을 누를 때 알림을 받습니다. 재생이 시작되면 이 코드는 비디오의 가로, 세로를 이등분 한 값을 가져오고(크로마 키잉 효과를 수행할 때 이등분 함), <code>timerCallback()</code> 메서드를 호출하여 비디오를 보고 시각적 효과를 계산하기 시작합니다.</p> - -<h3 id="타이머_콜백">타이머 콜백</h3> - -<p>타이머 콜백은 비디오가 재생되기 시작("재생" 이벤트가 발생)할 때 호출되는데, 매 프레임마다 키잉 효과를 주기 위해 주기적으로 호출 될 수 있도록 설정해 주어야 합니다.</p> - -<pre class="brush: js"> processor.timerCallback = function timerCallback() { - if (this.video.paused || this.video.ended) { - return; - } - this.computeFrame(); - let self = this; - setTimeout(function() { - self.timerCallback(); - }, 0); - }, -</pre> - -<p>콜백에서 하는 첫 번 째 일은 비디오가 재생되고 있는지 확인하는 것인데, 만약 그렇지 않다면 콜백은 아무 일도 하지 않고 즉시 반환됩니다.</p> - -<p>그 후에 현재 비디오 프레임에서 크로마 키잉 효과를 주기 위한 <code>computeFrame()</code> 메서드를 호출합니다.</p> - -<p>콜백에서 마지막으로 하는 일은 <code>setTimeout()</code>을 호출하여 가능한 한 빨리 <code>timerCallback()</code> 메서드를 다시 호출할 수 있도록 하는 것입니다. 실제로는, 비디오 프레임 속도에 대한 기반 지식으로 호출할 수 있도록 합니다. </p> - -<h3 id="비디오_프레임_데이터_조작">비디오 프레임 데이터 조작</h3> - -<p>아래의 <code>computeFrame()</code> 메서드는 프레임 데이터를 가져와서 크로마 키잉 효과를 수행하는 역할을 합니다. </p> - -<pre class="brush: js"> processor.computeFrame = function computeFrame() { - this.ctx1.drawImage(this.video, 0, 0, this.width, this.height); - let frame = this.ctx1.getImageData(0, 0, this.width, this.height); - let l = frame.data.length / 4; - - for (let i = 0; i < l; i++) { - let r = frame.data[i * 4 + 0]; - let g = frame.data[i * 4 + 1]; - let b = frame.data[i * 4 + 2]; - if (g > 100 && r > 100 && b < 43) - frame.data[i * 4 + 3] = 0; - } - this.ctx2.putImageData(frame, 0, 0); - return; - } -</pre> - -<p>위 과정이 계속 호출 되면, 아래와 같이 비디오 요소에 가장 최근 프레임의 비디오 데이터가 표출됩니다.</p> - -<p><img alt="video.png" class="default internal" src="/@api/deki/files/3282/=video.png" style="height: 192px; width: 320px;"></p> - -<p>2번째 줄에서, 첫 번째 캔버스의 그래픽 컨텍스트 ctx1에 비디오 프레임이 복사 되는데, 원본의 절반 크기로 프레임을 그리기 위해 이전에 저장한 가로, 세로 값으로 지정합니다. 컨텍스트의 <code>drawImage()</code> 메서드에 비디오 요소를 전달하기만 하면 현재 비디오 프레임을 그릴 수 있습니다. 결과는 아래와 같습니다: </p> - -<p><img alt="sourcectx.png" class="default internal" src="/@api/deki/files/3284/=sourcectx.png" style="height: 96px; width: 160px;"></p> - -<p>3번째 줄에서는 첫 번째 컨텍스트의 <code>getImageData()</code> 메서드를 호출해서 현재 비디오 프레임의 원시 그래픽 데이터 복사본을 가져옵니다. 이것은 조작할 수 있는 원시 32비트 픽셀 이미지 데이터를 제공합니다. 4번째 줄에서는 프레임의 이미지 데이터 전체 크기를 4로 나누어 이미지의 픽셀 수를 계산합니다.</p> - -<p>6번째 줄에서 시작하는 <code>for</code> 문은 프레임의 픽셀을 스캔하여, 빨간색, 녹색, 파란색 값을 추출하여 사전에 정의된 숫자와 비교합니다. 이 숫자는 <code>foo.png</code>에서 가져온 배경 이미지로 대체될 녹색 스크린 영역을 감지합니다.</p> - -<p>녹색 스크린이라고 간주된 매개변수 내의 프레임 이미지 데이터의 모든 픽셀은 투명해질 수 있도록 알파값이 0으로 대체됩니다. 결과적으로 최종 이미지는 100% 투명해진 녹색 스크린 영역을 갖게 되고, 13번째 줄에서 대상 컨텍스트에 고정된 배경 위로 올려져 그려집니다.</p> - -<p>결과 이미지는 아래와 같습니다:</p> - -<p><img alt="output.png" class="default internal" src="/@api/deki/files/3283/=output.png" style="height: 96px; width: 161px;"></p> - -<p>이 과정은 비디오가 재생될 때마다 반복되므로, 매 프레임마다 처리되어 크로마 키잉 효과가 나타나는 것입니다.</p> - -<p><a class="external" href="/samples/video/chroma-key/index.xhtml" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/video/chroma-key/index.xhtml">라이브 예제 보기</a></p> - -<h2 id="더_보기">더 보기</h2> - -<ul> - <li><a class="internal" href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">오디오와 비디오 사용하기</a></li> -</ul> diff --git a/files/ko/web/html/canvas/tutorial/advanced_animations/index.html b/files/ko/web/html/canvas/tutorial/advanced_animations/index.html deleted file mode 100644 index 1779e63b2c..0000000000 --- a/files/ko/web/html/canvas/tutorial/advanced_animations/index.html +++ /dev/null @@ -1,376 +0,0 @@ ---- -title: 발전된 애니메이션 -slug: Web/HTML/Canvas/Tutorial/Advanced_animations -translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations ---- -<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div> - -<div class="summary"> -<p>마지막 챕터에서 우리는 몇가지 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">간단한 애니메이션들</a>을 만들었고 이제 이것들을 어떻게 움직이게 하는지 안다. 이 챕터에서 우리는 각각의 모션들을 자세히 살펴보고 애니메이션을 더 발전시키기 위해 몇가지 물리 동작을 추가할 것이다.</p> -</div> - -<h2 id="공_그리기">공 그리기</h2> - -<p>우리는 애니메이션 공부를 위해 공을 사용할 것이다. 먼저 캔버스에 공을 그려보자. 다음 코드를 통해 준비해보자.</p> - -<pre class="brush: html notranslate"><canvas id="canvas" width="600" height="300"></canvas> -</pre> - -<p>언제나처럼, 우리는 context를 먼저 그려야 한다. 공을 그리기 위해 우리는 캔버스에 그림을 그리기 위한 프로퍼티와 <code>draw()</code> 메소드를 가진 <code>ball</code> 오브젝트를 생성할 것이다.</p> - -<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); - -var ball = { - x: 100, - y: 100, - radius: 25, - color: 'blue', - draw: function() { - ctx.beginPath(); - ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); - ctx.closePath(); - ctx.fillStyle = this.color; - ctx.fill(); - } -}; - -ball.draw();</pre> - -<p>특이할 건 없다. 이공은 사실상 간단한 원이고 그리는 방법은 다음{{domxref("CanvasRenderingContext2D.arc()", "arc()")}} 메소드에서 참고할 수 있다.</p> - -<h2 id="속도_추가하기">속도 추가하기</h2> - -<p>우리한테는 이제 공이 있다. 이제 이 튜토리얼 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">마지막 챕터</a>에서 배웠던 것과 같은 기본 애니메이션을 추가할 준비가 되었다. 다시 한 번, 애니메이션 컨트롤은 {{domxref("window.requestAnimationFrame()")}}가 도와주 것이다. 공은 위치에 속도 벡터를 추가하여 움직일 수 있게 된다. 각각의 프레임에, 우리는{{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}}를 캔버스에 주어 오래된 원을 이전 프래임에서 지운다.</p> - -<pre class="brush: js; highlight:[8,9,24,25] notranslate">var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); -var raf; - -var ball = { - x: 100, - y: 100, - vx: 5, - vy: 2, - radius: 25, - color: 'blue', - draw: function() { - ctx.beginPath(); - ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); - ctx.closePath(); - ctx.fillStyle = this.color; - ctx.fill(); - } -}; - -function draw() { - ctx.clearRect(0,0, canvas.width, canvas.height); - ball.draw(); - ball.x += ball.vx; - ball.y += ball.vy; - raf = window.requestAnimationFrame(draw); -} - -canvas.addEventListener('mouseover', function(e) { - raf = window.requestAnimationFrame(draw); -}); - -canvas.addEventListener('mouseout', function(e) { - window.cancelAnimationFrame(raf); -}); - -ball.draw(); -</pre> - -<h2 id="경계">경계</h2> - -<p>경게 충돌 테스트의 필요 없이 우리가 만든 공은 캔버스 밖으로 빠르게 빠져나갈 것입니다. 우리는 공의 <code>x</code> 와 <code>y</code> 위치가 캔버스 차원을 빠져나갔는지 체크해서 방향과 속도를 바꿔주어야 합니다. 그러기 위해서 우리는 <code>draw</code> 메소드에 다음 확인사항을 추가할 것입니다.:</p> - -<pre class="brush: js notranslate">if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { - ball.vy = -ball.vy; -} -if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { - ball.vx = -ball.vx; -}</pre> - -<h3 id="First_demo">First demo</h3> - -<p>이제 동작을 확인해 봅시다. 시작하려먼 마우스를 캔버스 안으로 움직여 주세요.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> - -<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); -var raf; - -var ball = { - x: 100, - y: 100, - vx: 5, - vy: 2, - radius: 25, - color: 'blue', - draw: function() { - ctx.beginPath(); - ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); - ctx.closePath(); - ctx.fillStyle = this.color; - ctx.fill(); - } -}; - -function draw() { - ctx.clearRect(0,0, canvas.width, canvas.height); - ball.draw(); - ball.x += ball.vx; - ball.y += ball.vy; - - if (ball.y + ball.vy > canvas.height || - ball.y + ball.vy < 0) { - ball.vy = -ball.vy; - } - if (ball.x + ball.vx > canvas.width || - ball.x + ball.vx < 0) { - ball.vx = -ball.vx; - } - - raf = window.requestAnimationFrame(draw); -} - -canvas.addEventListener('mouseover', function(e) { - raf = window.requestAnimationFrame(draw); -}); - -canvas.addEventListener('mouseout', function(e) { - window.cancelAnimationFrame(raf); -}); - -ball.draw();</pre> -</div> - -<p>{{EmbedLiveSample("First_demo", "610", "310")}}</p> - -<h2 id="가속">가속</h2> - -<p>움직임을 좀 더 리얼하게 만들기 위해, 우리는 속도를 다음과 같이 줄 겁니다. 예를들어:</p> - -<pre class="brush: js notranslate">ball.vy *= .99; -ball.vy += .25;</pre> - -<p>이것은 각 프레임의 세로 속도를 줄여주어, 공이 결국 바닥에서 튀게 만듭니다.</p> - -<div class="hidden"> -<h6 id="Second_demo">Second demo</h6> - -<pre class="brush: html notranslate"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> - -<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); -var raf; - -var ball = { - x: 100, - y: 100, - vx: 5, - vy: 2, - radius: 25, - color: 'blue', - draw: function() { - ctx.beginPath(); - ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); - ctx.closePath(); - ctx.fillStyle = this.color; - ctx.fill(); - } -}; - -function draw() { - ctx.clearRect(0,0, canvas.width, canvas.height); - ball.draw(); - ball.x += ball.vx; - ball.y += ball.vy; - ball.vy *= .99; - ball.vy += .25; - - if (ball.y + ball.vy > canvas.height || - ball.y + ball.vy < 0) { - ball.vy = -ball.vy; - } - if (ball.x + ball.vx > canvas.width || - ball.x + ball.vx < 0) { - ball.vx = -ball.vx; - } - - raf = window.requestAnimationFrame(draw); -} - -canvas.addEventListener('mouseover', function(e) { - raf = window.requestAnimationFrame(draw); -}); - -canvas.addEventListener('mouseout', function(e) { - window.cancelAnimationFrame(raf); -}); - -ball.draw();</pre> -</div> - -<p>{{EmbedLiveSample("Second_demo", "610", "310")}}</p> - -<h2 id="후행_효과">후행 효과</h2> - -<p>지금까지 우리는 {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}메소드를 사용해서 이전 프레임을 지웠다. 만약 당신이 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}르 사용하여 약간 투명도를 준다면, 쉽게 후행 효과(Trailing effect)를 만들 수 있을 것이다.</p> - -<pre class="brush: js notranslate">ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; -ctx.fillRect(0, 0, canvas.width, canvas.height);</pre> - -<div class="hidden"> -<h6 id="Third_demo">Third demo</h6> - -<pre class="brush: html notranslate"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> - -<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); -var raf; - -var ball = { - x: 100, - y: 100, - vx: 5, - vy: 2, - radius: 25, - color: 'blue', - draw: function() { - ctx.beginPath(); - ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); - ctx.closePath(); - ctx.fillStyle = this.color; - ctx.fill(); - } -}; - -function draw() { - ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; - ctx.fillRect(0, 0, canvas.width, canvas.height); - ball.draw(); - ball.x += ball.vx; - ball.y += ball.vy; - ball.vy *= .99; - ball.vy += .25; - - if (ball.y + ball.vy > canvas.height || - ball.y + ball.vy < 0) { - ball.vy = -ball.vy; - } - if (ball.x + ball.vx > canvas.width || - ball.x + ball.vx < 0) { - ball.vx = -ball.vx; - } - - raf = window.requestAnimationFrame(draw); -} - -canvas.addEventListener('mouseover', function(e) { - raf = window.requestAnimationFrame(draw); -}); - -canvas.addEventListener('mouseout', function(e) { - window.cancelAnimationFrame(raf); -}); - -ball.draw();</pre> -</div> - -<p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p> - -<h2 id="마우스_컨트롤_추가하기">마우스 컨트롤 추가하기</h2> - -<p>공을 컨트롤 하기 위해, 우리는 <code><a href="/en-US/docs/Web/Reference/Events/mousemove">mousemove</a></code> 이벤트를 사용하여 마우스를 따라오게 할 것이다. <code><a href="/en-US/docs/Web/Events/click">click</a></code> 이벤트를 통해 공을 놓으면 다시 공이 튀도록 할 것이다.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> -</div> - -<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); -var raf; -var running = false; - -var ball = { - x: 100, - y: 100, - vx: 5, - vy: 1, - radius: 25, - color: 'blue', - draw: function() { - ctx.beginPath(); - ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); - ctx.closePath(); - ctx.fillStyle = this.color; - ctx.fill(); - } -}; - -function clear() { - ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; - ctx.fillRect(0,0,canvas.width,canvas.height); -} - -function draw() { - clear(); - ball.draw(); - ball.x += ball.vx; - ball.y += ball.vy; - - if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { - ball.vy = -ball.vy; - } - if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { - ball.vx = -ball.vx; - } - - raf = window.requestAnimationFrame(draw); -} - -canvas.addEventListener('mousemove', function(e) { - if (!running) { - clear(); - ball.x = e.clientX; - ball.y = e.clientY; - ball.draw(); - } -}); - -canvas.addEventListener('click', function(e) { - if (!running) { - raf = window.requestAnimationFrame(draw); - running = true; - } -}); - -canvas.addEventListener('mouseout', function(e) { - window.cancelAnimationFrame(raf); - running = false; -}); - -ball.draw(); -</pre> - -<p>마우스로 공을 움직이고, 클릭을 통해 놓아보자.</p> - -<p>{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}</p> - -<h2 id="Breakout">Breakout</h2> - -<p>이 짧은 챕터는 발전된 애니메이션을 만들기 위한 조금의 기술을 설명했다. 여기에 더 많은 것들이 있다! 노나 벽돌을 추가해서 이 튜토리얼을 <a href="http://en.wikipedia.org/wiki/Breakout_%28video_game%29">Breakout</a> 으로 발전시키는 건 어떨까? <a href="/en-US/docs/Games">Game development</a>에서 게임에 관련된 글들을 찾아보자.</p> - -<h2 id="더보기">더보기</h2> - -<ul> - <li>{{domxref("window.requestAnimationFrame()")}}</li> - <li><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></li> -</ul> - -<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</p> diff --git a/files/ko/web/html/canvas/tutorial/applying_styles_and_colors/index.html b/files/ko/web/html/canvas/tutorial/applying_styles_and_colors/index.html deleted file mode 100644 index df094acb71..0000000000 --- a/files/ko/web/html/canvas/tutorial/applying_styles_and_colors/index.html +++ /dev/null @@ -1,732 +0,0 @@ ---- -title: 스타일과 색 적용하기 -slug: Web/HTML/Canvas/Tutorial/Applying_styles_and_colors -tags: - - HTML5 - - 그래픽 - - 캔버스 -translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors ---- -<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div> - -<div class="summary"> -<p><a href="/ko/docs/Web/HTML/Canvas/Tutorial/Drawing_shapes">도형 그리기</a> 장에서는 기본 선과 채우기 스타일만 사용했습니다. 여기서 우리는 그리기를 조금 더 매력적으로 만들 수있는 캔버스 옵션을 살펴볼 것입니다. 그리기에 다른 색상, 선 스타일, 그라디언트, 패턴 및 그림자를 추가하는 방법을 배우게됩니다.</p> -</div> - -<h2 id="Colors" name="Colors">색상</h2> - -<p>지금까지는 그리기 메소드만 살펴봤습니다. 도형에 색을 적용하고자 하면, <code>fillStyle</code>과 <code>strokeStyle</code> 두 가지 중요한 속성을 사용할 수 있습니다.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}</dt> - <dd>도형을 채우는 색을 설정합니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}</dt> - <dd>도형의 윤곽선 색을 설정합니다.</dd> -</dl> - -<p>여기서의 <code>color</code>는 CSS의 {{cssxref("<color>")}}, 그라디언트 객체, 패턴 객체를 뜻합니다. 그라디언트 객체와 패턴 객체는 페이지 아래에서 설명합니다. 윤곽선과 채움 색의 초기 설정값은 검은색입니다. (CSS 색상 값 <code>#000000</code>)</p> - -<div class="note"> -<p><strong>참고:</strong> <code>strokeStyle</code> 또는 <code>fillStyle</code> 속성을 설정하면, 새로 설정된 값이 앞으로 그려질 도형의 기본 값이 됩니다. 각 도형에 다른 색을 적용하려면 <code>fillStyle</code> 또는 <code>strokeStyle</code> 속성을 다시 적용해야 합니다.</p> -</div> - -<p>색의 올바른 값은 CSS3 사양에 나오는 {{cssxref("<color>")}} 값입니다. 아래에 나오는 색은 모두 한가지 색을 다르게 표현한 것입니다.</p> - -<pre class="brush: js">// fillStyle에 적용되는 색은 모두 '오렌지' - -ctx.fillStyle = "orange"; -ctx.fillStyle = "#FFA500"; -ctx.fillStyle = "rgb(255, 165, 0)"; -ctx.fillStyle = "rgba(255, 165, 0, 1)"; -</pre> - -<h3 id="A_fillStyle_example" name="A_fillStyle_example"><code>fillStyle</code> 예제</h3> - -<p>이 예제에서 <code>for</code> 반복문을 두 번 사용하여 사각형 격자를 그릴 것입니다. 결과는 스크린샷과 같을 것입니다. 결과가 그리 대단한 것은 아닙니다. 각 사각형의 RGB 색상값에서 붉은색과 녹색 값만을 변수 <code>i</code>와 <code>j</code>를 사용하여 변경합니다. 파란색 채널은 고정된 값입니다. 채널 값들을 변경함으로써, 모든 종류의 팔레트를 생성할 수 있습니다. 단계를 늘리면 Photoshop에서 사용하는 색상 팔레트와 비슷한 모양을 얻을 수 있습니다.</p> - -<pre class="brush: js;highlight[5,6]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - for (var i = 0; i < 6; i++){ - for (var j = 0; j < 6; j++){ - ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' + - Math.floor(255 - 42.5 * j) + ', 0)'; - ctx.fillRect(j*25,i*25,25,25); - } - } -}</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<p>결과는 아래와 같습니다.</p> - -<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p> - -<h3 id="A_strokeStyle_example" name="A_strokeStyle_example"><code>strokeStyle</code> 예제</h3> - -<p>이번 예제는 위에 나온 예제와 비슷하지만, <code>strokeStyle</code> 속성을 사용하여 윤곽선의 색을 바꿉니다. 사각형 대신, 원을 그리는 <code>arc()</code> 메소드를 사용합니다.</p> - -<pre class="brush: js;highlight[5,6]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - for (var i = 0; i < 6; i++) { - for (var j = 0; j < 6; j++) { - ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' + - Math.floor(255 - 42.5 * j) + ')'; - ctx.beginPath(); - ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true); - ctx.stroke(); - } - } -}</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<p>결과는 아래와 같습니다.</p> - -<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p> - -<h2 id="Transparency" name="Transparency">투명도</h2> - -<p>캔버스에는 불투명한 도형을 그릴 수도 있고, 반투명한 도형도 그릴 수도 있습니다. <code>globalAlpha</code> 값을 설정하거나 윤곽선 또는 채움 스타일에 반투명 색을 적용하면 됩니다.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}</dt> - <dd>투명도 값이 설정되면 이후 캔버스에 그려지는 모든 도형들의 투명도가 바뀝니다. 설정하는 값은 0.0(완전히 투명)과 1.0(완전히 불투명) 사이에 있어야 하며, 초기 설정값은 1.0(완전히 투명)입니다.</dd> -</dl> - -<p><code>globalAlpha</code>는 모두 같은 투명도로 캔버스에 많은 도형을 그릴 때 유용합니다. 하지만, 보통은 각각의 도형마다 투명도를 설정하는 것이 더 유용할 것입니다.</p> - -<p><code>strokeStyle</code>과 <code>fillStyle</code> 값에 CSS rgba 색상값을 적용할 수 있으므로, 투명한 색을 적용하려면 아래와 같은 표기법을 사용할 수 있습니다.</p> - -<pre class="brush: js">// 외곽선과 채움 스타일에 투명 적용 - -ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)'; -ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; -</pre> - -<p><code>rgba()</code> 함수는 <code>rgb()</code> 함수와 비슷하지만, 인자가 하나 더 있습니다. 마지막 인자는 투명도 값을 설정하는 인자입니다. 올바른 범위는 0.0(완전히 투명)에서 1.0(완전히 불투명)입니다.</p> - -<h3 id="A_globalAlpha_example" name="A_globalAlpha_example"><code>globalAlpha</code> 예제</h3> - -<p>이 예제에서, 네 가지 다른 색을 가진 사각형을 배경에 그릴 것입니다. 그 위에, 반투명한 원을 여러 개 그릴 것입니다. <code>globalAlpha</code> 값을 <code>0.2</code>로 설정하면 이후 그려질 도형은 이 값을 사용합니다. <code>for</code> 반복문을 사용하여 점점 큰 반지름의 원을 그립니다. 최종 결과물은 원형 그레이디언트가 됩니다. 원이 겹쳐지면서 점점 불투명해지는 것을 볼 수 있으며, 최종적으로 한 가운데에 있는 원에서는 뒷 배경이 거의 보이지 않게 됩니다.</p> - -<pre class="brush: js;highlight[15]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - // 배경을 그린다 - ctx.fillStyle = '#FD0'; - ctx.fillRect(0, 0, 75, 75); - ctx.fillStyle = '#6C0'; - ctx.fillRect(75, 0, 75, 75); - ctx.fillStyle = '#09F'; - ctx.fillRect(0, 75, 75, 75); - ctx.fillStyle = '#F30'; - ctx.fillRect(75, 75, 75, 75); - ctx.fillStyle = '#FFF'; - - // 투명값을 설정한다 - ctx.globalAlpha = 0.2; - - // 반투명한 원을 그린다 - for (var i = 0; i < 7; i++){ - ctx.beginPath(); - ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true); - ctx.fill(); - } -}</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p> - -<h3 id="An_example_using_rgba()" name="An_example_using_rgba()"><code>rgba()</code>를 사용한 예제</h3> - -<p>두번째 예제에서는 위의 예제와 비슷한 일을 하지만, 겹쳐진 원을 그리는 대신, 불투명도가 증가하는 작은 사각형을 그릴 것입니다. 각각의 도형마다 윤곽선이나 채움 스타일을 따로따로 설정할 수 있기 때문에, <code>rgba()</code>를 사용할 때는 조금 더 제어가 쉽고 융통성도 있습니다.</p> - -<pre class="brush: js;highlight[16]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - // 배경을 그린다 - ctx.fillStyle = 'rgb(255,221,0)'; - ctx.fillRect(0,0,150,37.5); - ctx.fillStyle = 'rgb(102,204,0)'; - ctx.fillRect(0,37.5,150,37.5); - ctx.fillStyle = 'rgb(0,153,255)'; - ctx.fillRect(0,75,150,37.5); - ctx.fillStyle = 'rgb(255,51,0)'; - ctx.fillRect(0,112.5,150,37.5); - - // 반투명한 사각형을 그린다 - for (var i=0;i<10;i++){ - ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')'; - for (var j=0;j<4;j++){ - ctx.fillRect(5+i*14,5+j*37.5,14,27.5) - } - } -}</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p> - -<h2 id="Line_styles" name="Line_styles">선 모양</h2> - -<p>선의 스타일을 바꾸는 방법이 몇가지 있습니다.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}</dt> - <dd>이후 그려질 선의 두께를 설정합니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}</dt> - <dd>선의 끝 모양을 설정합니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}</dt> - <dd>선들이 만나는 "모서리"의 모양을 설정합니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt> - <dd>두 선이 예각으로 만날 때 접합점의 두께를 제어할 수 있도록, 연결부위의 크기를 제한하는 값을 설정합니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt> - <dd>음수가 아닌 짝수를 포함하는 현재 선의 대시 패턴 배열을 반환합니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt> - <dd>현재 선의 대시 패턴을 설정합니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</dt> - <dd>선의 대시 배열이 어디서 시작될지 지정합니다.</dd> -</dl> - -<p>아래 예제들을 보면 어떻게 동작하는지 이해할 수 있을 것입니다.</p> - -<h3 id="A_lineWidth_example" name="A_lineWidth_example"><code>lineWidth</code> 예제</h3> - -<p>현재 선의 두께를 설정합니다. 설정값은 반드시 양수이어야 하며, 초기 설정값은 1.0 단위입니다.</p> - -<p>선의 두께는 지정된 경로의 가운데에 있는 획의 두께입니다. 이 말의 뜻은, 경로의 좌우로, 설정된 두께 반 만큼의 폭 영역이 그려진다는 것입니다. 캔버스 좌표는 픽셀을 직접 참조하지 않으므로, 선명한 수평 및 수직선을 얻기 위해 특별히 주의를 기울여야 합니다.</p> - -<p>아래에 나오는 예제에서는, 선의 두께가 점점 증가하는 10개의 직선이 그려집니다. 가장 왼쪽의 선은 1.0 단위 폭입니다. 그러나, 경로의 위치 때문에 가장 왼쪽과 다른 모든 홀수 폭 두께 선은 선명하게 보이지 않습니다.</p> - -<pre class="brush: js;highlight[4]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - for (var i = 0; i < 10; i++){ - ctx.lineWidth = 1 + i; - ctx.beginPath(); - ctx.moveTo(5 + i * 14, 5); - ctx.lineTo(5 + i * 14, 140); - ctx.stroke(); - } -} -</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p> - -<p>선명한 선을 얻으려면 경로에 획을 어떻게 그려지는지 이해해야 합니다. 아래의 이미지를 보면, 격자는 캔버스의 좌표 격자를 나타냅니다. 격자선 사이에 있는 사각형은 실제 픽셀과 딱 맞아 떨어집니다. 아래에 있는 첫번째 이미지를 보면, (2,1)에서 (5,5)로 사각형이 채워져 있습니다. 사각형의 전체 영역(연한 붉은 색)은 픽셀 경계선 사이에 딱 맞아 떨어지기 때문에 채워진 사각형은 선명한 가장자리를 갖습니다.</p> - -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p> - -<p>만일 (3,1)에서 (3,5)로 그리는 직선의 두께가 1.0이라면, 두번째 이미지와 같은 상황이 됩니다. 채워진 실제 영역 (진한 파란색)은 패스의 양쪽에있는 픽셀의 절반까지만 확장됩니다. 이것은 1 픽셀을 채우는 것이 아니므로 근사값으로 화면에 그려지게 됩니다. 그래서 양옆의 영역(연한 파란색과 짙은 파란 색)으로, 실제 설정한 색과는 다른 흐릿한 색으로 채워지는 것입니다. 이전 예제에서 보듯이 선 두께가 <code>1.0</code>인 선에서 일어난 일입니다.</p> - -<p>이렇게 되는 것을 막으려면, 경로를 아주 정밀하게 생성해야 합니다. 선의 두께가 1.0이면 경로의 양쪽으로 0.5 단위만큼이라는 것을 알고 있으니, (3.5,1)에서 (3.5,5)로 그리는 경로를 생성하는 세번째 이미지의 결과는 완벽히 정밀하게 1 픽셀 두께의 수직선이 됩니다.</p> - -<div class="note"> -<p><strong>참고:</strong> 위에 나온 수직선 그리기 예제를 살펴보면, Y 위치는 정수로 된 격자선 위치를 참조하고 있습니다. 그렇지 않았다면, 끝점에서 픽셀의 반을 차지한 상태로 보였을 것입니다. (초기값이 <code>butt</code>인 <code>lineCap</code> 스타일의 설정값에 따라 다르게 보입니다. 홀수 두께 선들의 좌표를 0.5 픽셀씩 조정하여 다시 계산하고 싶을지도 모릅니다. <code>lineCap</code> 스타일을 <code>square</code>로 설정함으로써, 끝점에서 선의 외곽 경계선은 픽셀에 딱 맞게 자동적으로 확장될 것입니다.)</p> - -<p>경로의 시작 지점과 종료 지점의 끝점만이 영향을 받는다는 것에 주목하세요. 만약 <code>closePath()</code>로 경로가 닫힌다면, 시작 지점과 종료 지점은 없는 것입니다. 그 대신, 경로 안에 있는 모든 끝점들은, 초기 설정값이 <code>miter</code>인 <code>lineJoin</code> 스타일의 설정값을 사용하여 이전 부분 및 다음 부분과 이어지는데, 교차되는 점들로 이어진 부분들의 외곽 경계선을 자동적으로 확장하는 효과가 생깁니다. 그렇기 때문에 만약 이들 이어진 부분들이 수직 또는 수평이라면, 그려지는 선들은 각 끝점의 중심에 놓인 픽셀을 가득 채우게 될 것입니다. 이들 선 스타일에 대한 예제는 아래에 나옵니다.</p> -</div> - -<p>짝수 두께의 선들은 반으로 나누어도 각각의 반은 정수의 양만큼이기 때문에 픽셀을 조정할 필요가 없습니다.</p> - -<p>비트맵이 아닌 벡터 2D 그래픽으로 작업할 때, 작업을 시작할 때는 약간 힘들겠지만, 격자와 경로의 위치에 주의를 기울인다면, 크기를 키우거나 줄이거나 또는 어떠한 변형을 하더라도 그리려는 이미지는 똑바로 보일 것입니다. 1.0 두께의 수직선은 2배로 크기를 키웠을 때, 정확히 2 픽셀 두께의 선이 되며, 올바른 위치에 나타날 것입니다.</p> - -<h3 id="A_lineCap_example" name="A_lineCap_example"><code>lineCap</code> 예제</h3> - -<p><code>lineCap</code> 속성은 그리려는 모든 선의 끝점 모양을 결정합니다. <code>butt</code>, <code>round</code>, <code>square</code>라는 세 가지 값을 가지며, 초기 설정값은 <code>butt</code>입니다.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/236/Canvas_linecap.png" style="float: right; height: 190px; width: 190px;"></p> - -<dl> - <dt><code>butt</code></dt> - <dd>선의 끝이 좌표에 딱맞게 잘립니다.</dd> - <dt><code>round</code></dt> - <dd>선의 끝이 동그랗습니다.</dd> - <dt><code>square</code></dt> - <dd>선 끝에, 선 두께 반만큼의 사각형 영역이 더해집니다.</dd> -</dl> - -<p>이 예제에서는, 각기 다른 <code>lineCap</code> 속성 값을 가진 선 세개가 그려집니다. 또한 각 선들의 차이점을 정확히 보이기 위한 안내선이 추가로 그려집니다. 세개의 선 모두, 이 안내선 위에 시작과 종료 좌표가 있습니다.</p> - -<p>맨 왼쪽에 있는 선은 초기 설정값인 <code>butt</code>을 사용합니다. 안내선에 딱 맞게 선이 시작되고 끝이 납니다. 가운데에 있는 선은 <code>round</code>를 사용합니다. 선 두께의 반을 반지름으로 하는 반원이 끝에 붙습니다. 맨 오른쪽에 있는 선은 <code>square</code>를 사용합니다. 선 두께 만큼의 너비와 선 두께 반 만큼의 높이를 가진 네모 상자가 끝에 붙습니다.</p> - -<pre class="brush: js;highlight[18]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - var lineCap = ['butt','round','square']; - - // 안내선을 그린다 - ctx.strokeStyle = '#09f'; - ctx.beginPath(); - ctx.moveTo(10, 10); - ctx.lineTo(140, 10); - ctx.moveTo(10, 140); - ctx.lineTo(140, 140); - ctx.stroke(); - - // 선을 그린다 - ctx.strokeStyle = 'black'; - for (var i=0;i<lineCap.length;i++){ - ctx.lineWidth = 15; - ctx.lineCap = lineCap[i]; - ctx.beginPath(); - ctx.moveTo(25 + i * 50, 10); - ctx.lineTo(25 + i * 50,140); - ctx.stroke(); - } -} -</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p> - -<h3 id="A_lineJoin_example" name="A_lineJoin_example"><code>lineJoin</code> 예제</h3> - -<p><code>lineJoin</code> 속성은, 도형을 이루는 선이나 호나 곡선들이 연결되는 지점의 모양을 결정합니다. 끝점과 제어점이 정확히 같은 위치인, 길이가 0인 부분들은 제외된다.</p> - -<p>이 속성에는 세 가지 값이 있는데, <code>round</code>, <code>bevel</code>, <code>miter</code>이며, 초기 설정값은 <code>miter</code>입니다. 두 부분들이 같은 방향으로 연결되어 있는 경우에는, <code>lineJoin</code>을 설정해도 아무런 효과가 나타나지 않습니다.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p> - -<dl> - <dt><code>round</code></dt> - <dd>도형의 모서리를, 연결되는 부분들의 공통 끝점을 중심으로 하는 원 모양으로 만듭니다. 이때 원의 반지름은 선의 두께와 같습니다.</dd> - <dt><code>bevel</code></dt> - <dd>도형의 모서리를, 연결되는 부분들의 공통 끝점에서 세모 모양으로 만듭니다.</dd> - <dt><code>miter</code></dt> - <dd>도형의 모서리를, 두 부분의 바깥쪽 테두리 선을 각각 연장하여 교차된 점으로 생긴 마름모꼴 모양으로 만듭니다. <code>miterLimit</code> 속성값에 따라 모양이 달라집니다.</dd> -</dl> - -<p>아래 예제에서 세 개의 경로를 그릴 것입니다. 세 경로는 각각 다른 <code>lineJoin</code> 속성값을 가집니다.</p> - -<pre class="brush: js;highlight[6]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - var lineJoin = ['round', 'bevel', 'miter']; - ctx.lineWidth = 10; - for (var i=0;i<lineJoin.length;i++){ - ctx.lineJoin = lineJoin[i]; - ctx.beginPath(); - ctx.moveTo(-5, 5 + i * 40); - ctx.lineTo(35, 45 + i * 40); - ctx.lineTo(75, 5 + i * 40); - ctx.lineTo(115, 45 + i * 40); - ctx.lineTo(155, 5 + i * 40); - ctx.stroke(); - } -} -</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p> - -<h3 id="A_demo_of_the_miterLimit_property" name="A_demo_of_the_miterLimit_property"><code>miterLimit</code> 속성 예제</h3> - -<p>위의 예제에서 볼 수 있듯이, 속성값을 <code>miter</code>로 하여 두 선이 연결되면, 연결되는 두 선의 바깥쪽 테두리는 연장선이 만나는 지점까지 확장됩니다. 연결된 두 선이 이루는 각도가 크면, 확장되는 영역이 크지 않지만, 각도가 작아짐(끝이 뾰족해짐)에 따라서 이 영역이 기하급수적으로 커질 수도 있습니다.</p> - -<p><code>miterLimit</code> 속성은 끝점이 만나는 지점과 테두리 연장선이 만나는 지점이 얼마나 떨어져 있을지를 결정합니다. 두 선이 이 값을 넘게 되면, <code>lineJoin</code> 속성의 <code>bevel</code> 값 모양이 적용됩니다. <code>miterLimit</code> 속성값(HTML {{HTMLElement("canvas")}}에서, 초기 설정값은 10.0)에 의해, 현재 좌표 방식 안에서, 선의 두께에 따라, 어느 정도까지 뾰족해질 수 있는지가 계산됩니다. 그래서 <code>miterLimit</code>은 현재 디스플레이 비율이나 경로의 변형 같은 것으로 각각 설정될 수 있습니다. 그렇게 하여 선의 모서리에만 영향을 줍니다.</p> - -<p>더 자세히 얘기하자면, 뾰족함 제한(miter limit)은, 선 두께의 반과 확장되는 길이(HTML 캔버스에서, 선이 연결되는 바깥쪽 끝부분과, 경로에서 연결되는 두 부분의 공통 끝점 사이로 측정합니다.)의 최대 허용 비율입니다. 이것은 두 부분의 외곽선이 만나는 안쪽 점과 바깥쪽 점 사이 거리와, 선 두께의 최대 허용 비율과 같습니다. miter 값 모양이 아닌 bevel 값 모양으로 연결되는 지점의 최소 안쪽 각 반 만큼의 값과 같은 것입니다.</p> - -<ul> - <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li> - <li>초기 설정값이 10.0인 뾰족함 제한(miter limit)값은 약 11도보다 낮은 예각인 곳을 bevel 값 모양으로 만듭니다.</li> - <li>뾰족함 제한 값이 √2 ≈ 1.4142136(반올림)과 같다면 연결되는 곳이 둔각이거나 직각인 곳을 제외한 모든 곳을 bevel 값 모양으로 만듭니다.</li> - <li>뾰족함 제한 값이 1.0과 같다면 모든 곳을 bevel 값 모양으로 만듭니다.</li> - <li>뾰족함 제한 값에는 1.0보다 작은 값이 올 수 없습니다.</li> -</ul> - -<p>다음 예제에서는 <code>miterLimit</code> 값을 바꾸고 그 결과가 어떤지 바로 확인할 수 있습니다. 파란색 선은 지그재그 무늬 안에서 선들의 시작 지점과 종료 지점을 나타냅니다.</p> - -<p>이 예제에서 <code>miterLimit</code> 값을 4.2보다 낮게 설정하면, 모든 연결 지점은 bevel 값 모양이 되어 파란색 선에 붙을 것입니다. <code>miterLimit</code> 값이 10보다 높다면, 거의 모든 연결 지점들이 파란색 선 바깥쪽에 있을 것입니다. 왼쪽으로 갈수록 파란색 선에서 더 많이 튀어나오는데, 왼쪽으로 갈수록 연결되는 각이 더 작아지기 때문입니다. 값을 5로 설정하면, 반은 bevel 값 모양으로, 반은 miter 값 모양이 됩니다.</p> - -<pre class="brush: js;highlight[18]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - // 캔버스를 비운다 - ctx.clearRect(0,0,150,150); - - // 안내선을 그린다 - ctx.strokeStyle = '#09f'; - ctx.lineWidth = 2; - ctx.strokeRect(-5,50,160,50); - - // 선 스타일을 설정한다 - ctx.strokeStyle = '#000'; - ctx.lineWidth = 10; - - // 입력 값을 검사한다 - if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) { - ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value); - } else { - alert('Value must be a positive number'); - } - - // 선을 그린다 - ctx.beginPath(); - ctx.moveTo(0,100); - for (i=0;i<24;i++){ - var dy = i%2==0 ? 25 : -25 ; - ctx.lineTo(Math.pow(i,1.5)*2,75+dy); - } - ctx.stroke(); - return false; -} -</pre> - -<div class="hidden"> -<pre class="brush: html"><table> - <tr> - <td><canvas id="canvas" width="150" height="150"></canvas></td> - <td>Change the <code>miterLimit</code> by entering a new value below and clicking the redraw button.<br><br> - <form onsubmit="return draw();"> - <label>Miter limit</label> - <input type="text" size="3" id="miterLimit"/> - <input type="submit" value="Redraw"/> - </form> - </td> - </tr> -</table></pre> - -<pre class="brush: js">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit; -draw();</pre> -</div> - -<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p> - -<p> </p> - -<h3 id="대시라인_사용하기">대시라인 사용하기</h3> - -<p><code>setLineDash</code> 메소드와 <code>lineDashOffset</code> 속성은 선의 대시 패턴을 지정합니다. <code>setLineDash</code> 메소드는 거리를 지정하는 숫자 목록을 받아 선과 틈을 교대로 그리며 <code>lineDashOffset</code> 속성은 패턴을 시작할 위치를 오프셋으로 설정합니다.</p> - -<p>이 예제에서 우리는 행진하는 개미 효과를 만들고 있습니다. 컴퓨터 그래픽 프로그램의 선택 도구에서 흔히 볼 수있는 애니메이션 기술입니다. 테두리를 애니메이션화하여 사용자가 선택 테두리와 이미지 배경을 구별하는 데 도움이됩니다. 이 튜토리얼의 뒷부분에서 이 작업 및 다른 <a href="/ko/docs/docs/Web/API/Canvas_API/Tutorial/Basic_animations">기본 애니메이션</a>을 수행하는 방법을 배울 수 있습니다.</p> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="110" height="110"></canvas> -</pre> -</div> - -<pre class="brush: js;highlight[6]">var ctx = document.getElementById('canvas').getContext('2d'); -var offset = 0; - -function draw() { - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.setLineDash([4, 2]); - ctx.lineDashOffset = -offset; - ctx.strokeRect(10, 10, 100, 100); -} - -function march() { - offset++; - if (offset > 16) { - offset = 0; - } - draw(); - setTimeout(march, 20); -} - -march();</pre> - -<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}</p> - -<h2 id="Gradients" name="Gradients">그라디언트(Gradient)</h2> - -<p>다른 그래픽 프로그램들과 마찬가지로, 선형 및 원형의 그레이디언트를 사용할 수 있습니다. 다음 메소드 중 하나를 사용하여 {{domxref("CanvasGradient")}} 객체를 생성합니다. 그런 다음 이 객체를 <code>fillStyle</code> 또는 <code>strokeStyle</code> 속성에 할당 할 수 있습니다.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt> - <dd>시작점 좌표를 (<code>x1</code>, <code>y1</code>)로 하고, 종료점 좌표를 (<code>x2</code>, <code>y2</code>)로 하는 선형 그라디언트 오브젝트를 생성합니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}</dt> - <dd>반지름이 <code>r1</code>이고 좌표 (<code>x1</code>, <code>y1</code>)을 중심으로 하는 원과, 반지름이 <code>r2</code>이고 좌표 (<code>x2</code>, <code>y2</code>)를 중심으로 하는 원을 사용하여 그라디언트가 생성됩니다.</dd> -</dl> - -<p>예를 들면 다음과 같습니다.</p> - -<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); -var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100); -</pre> - -<p><code>CanvasGradient</code> 객체를 만들었다면, <code>addColorStop()</code> 메소드를 사용하여, 오브젝트에 색을 적용할 수 있습니다.</p> - -<dl> - <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt> - <dd><code>gradient</code> 오브젝트에 새로운 색 중단점(color stop)을 생성합니다. <code>position</code>은 0.0에서 1.0 사이의 숫자이고 그라디언트에서 색상의 상대적인 위치를 정의합니다. <code>color</code> 인자는 CSS {{cssxref("<color>")}}를 나타내는 문자열이어야하고, 그라디언트가 (전환효과로) 진행되면서 도달한 지점의 색상을 의미합니다.</dd> -</dl> - -<p>색 중단점은 원하는 만큼 마음대로 추가할 수 있습니다. 흰 색에서 검은 색으로 변하는 선형 그레이디언트를 만들려면 아래와 같이 합니다.</p> - -<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); -lineargradient.addColorStop(0, 'white'); -lineargradient.addColorStop(1, 'black'); -</pre> - -<h3 id="A_createLinearGradient_example" name="A_createLinearGradient_example"><code>createLinearGradient</code> 예제</h3> - -<p>이 예제에서 그레이디언트 두 개를 만들 것입니다. 예제에서 볼 수 있듯이, <code>strokeStyle</code>과 <code>fillStyle</code> 속성 모두 <code>canvasGradient</code> 오브젝트를 속성 값으로 가질 수 있습니다.</p> - -<pre class="brush: js;highlight[5,11]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - // 그레이디언트를 생성한다 - var lingrad = ctx.createLinearGradient(0, 0, 0, 150); - lingrad.addColorStop(0, '#00ABEB'); - lingrad.addColorStop(0.5, '#fff'); - lingrad.addColorStop(0.5, '#26C000'); - lingrad.addColorStop(1, '#fff'); - - var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95); - lingrad2.addColorStop(0.5, '#000'); - lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)'); - - // 외곽선과 채움 스타일에 그레이디언트를 적용한다 - ctx.fillStyle = lingrad; - ctx.strokeStyle = lingrad2; - - // 도형을 그린다 - ctx.fillRect(10, 10, 130, 130); - ctx.strokeRect(50, 50, 50, 50); - -} -</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<p>첫번째 그라디언트는 배경 그라디언트입니다. 보시다시피 같은 위치에 두 가지 색상을 지정했습니다. 매우 선명한 색상 전환을 만들기 위해 이 작업을 수행합니다(이 경우 흰색에서 녹색으로). 일반적으로 색상 중단점을 정의하는 순서는 중요하지 않지만, 이 특별한 경우에는 의미가 있습니다.</p> - -<p>두 번째 그래디언트에서는 시작 색상 (위치 0.0)을 지정하지 않았는데, 자동으로 다음 색상 중단점의 색상으로 가정하기 때문에 반드시 필요하지는 않기 때문입니다. 따라서 위치 0.5에 검은색을 지정하면 시작부터 중단점까지 자동으로 검정색 그라이언트를 만듭니다.</p> - -<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p> - -<h3 id="A_createRadialGradient_example" name="A_createRadialGradient_example"><code>createRadialGradient</code> 예제</h3> - -<p>이 예제에서는 원형 그레이디언트를 4개 만들 것입니다. 포토샵같은 프로그램에서 원형 그레이디언트를 만들 때는 하나의 점을 중심으로 그레이디언트를 만드는데, 캔버스의 원형 그레이디언트에서는 시작과 종료 지점 두군데를 제어할 수 있기 때문에, 기존의 프로그램에서 볼 수 있는 원형 그레이디언트보다는 더 복잡한 효과를 만들어 낼 수 있습니다.</p> - -<pre class="brush: js;highlight[5,10,15,20]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - // 그라디언트를 생성한다 - var radgrad = ctx.createRadialGradient(45,45,10,52,50,30); - radgrad.addColorStop(0, '#A7D30C'); - radgrad.addColorStop(0.9, '#019F62'); - radgrad.addColorStop(1, 'rgba(1,159,98,0)'); - - var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50); - radgrad2.addColorStop(0, '#FF5F98'); - radgrad2.addColorStop(0.75, '#FF0188'); - radgrad2.addColorStop(1, 'rgba(255,1,136,0)'); - - var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40); - radgrad3.addColorStop(0, '#00C9FF'); - radgrad3.addColorStop(0.8, '#00B5E2'); - radgrad3.addColorStop(1, 'rgba(0,201,255,0)'); - - var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90); - radgrad4.addColorStop(0, '#F4F201'); - radgrad4.addColorStop(0.8, '#E4C700'); - radgrad4.addColorStop(1, 'rgba(228,199,0,0)'); - - // 도형을 그린다 - ctx.fillStyle = radgrad4; - ctx.fillRect(0,0,150,150); - ctx.fillStyle = radgrad3; - ctx.fillRect(0,0,150,150); - ctx.fillStyle = radgrad2; - ctx.fillRect(0,0,150,150); - ctx.fillStyle = radgrad; - ctx.fillRect(0,0,150,150); -} -</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<p>이 예제에서는 원형 그레이디언트에 사용되는 두 원의 중심을 달리하여 입체적인 공처럼 보이게 했습니다. 안쪽 원과 바깥쪽 원은 겹치지 않게 하는 것이 좋습니다. 왜냐하면 예상하기 힘든 이상한 결과가 나타날 수 있기 때문입니다.</p> - -<p>그레이디언트의 마지막 색 적용 지점에서는 투명도를 적용하였습니다. 투명도가 적용된 지점에서 이전 지점까지의 색 변화를 보기 좋게 만들려면, 두 지점에 똑같은 색을 적용하면 되는데, 이 예제에서는 색의 값을 다른 방식으로 입력하여 헷갈릴 수도 있습니다. 첫번째 그레이디언트에 사용된 <code>#019F62</code>와 <code>rgba(1,159,98,1)</code>은 같은 색입니다.</p> - -<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p> - -<h2 id="Patterns" name="Patterns">패턴(Patterns)</h2> - -<p>이전 페이지의 예제 중 하나에서 일련의 루프를 사용하여 이미지 패턴을 만들었습니다. 그러나 훨씬 간단한 메소드 인 createPattern () 메소드가 있습니다.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt> - <dd>새 캔버스 패턴 객체를 만들어 반환합니다. <code>image</code>는 {{domxref("CanvasImageSource")}}(즉, {{domxref("HTMLImageElement")}}, 다른 캔버스, {{HTMLElement("video")}} 요소 등등)입니다. <code>type</code>은 이미지 사용 방법을 나타내는 문자열입니다.</dd> -</dl> - -<p><code>type</code>은 패턴을 만들기 위해 이미지를 사용하는 방법을 지정하며, 다음 문자열 값 중 하나 여야합니다.</p> - -<dl> - <dt><code>repeat</code></dt> - <dd>수직 및 수평 방향으로 이미지를 이어 붙입니다.</dd> - <dt><code>repeat-x</code></dt> - <dd>수평 방향으로만 이미지를 이어 붙입니다.</dd> - <dt><code>repeat-y</code></dt> - <dd>수직 방향으로만 이미지를 이어 붙입니다.</dd> - <dt><code>no-repeat</code></dt> - <dd>이미지를 이어 붙이지 않습니다. 이미지는 한번만 사용됩니다.</dd> -</dl> - -<p>이 메소드를 사용하여 위에서 본 그라디언트 메소드와 매우 유사한 {{domxref ( "CanvasPattern")}} 객체를 생성합니다. 패턴을 생성하면 <code>fillStyle</code> 또는 <code>strokeStyle</code> 속성에 패턴을 할당 할 수 있습니다. 예를 들면 다음과 같습니다.</p> - -<pre class="brush: js">var img = new Image(); -img.src = 'someimage.png'; -var ptrn = ctx.createPattern(img, 'repeat'); -</pre> - -<div class="note"> -<p><strong>참고:</strong> <code>drawImage ()</code> 메서드와 마찬가지로 이 메소드를 호출하기 전에 이미지가 로드되었는지 확인해야합니다. 그렇지 않으면 패턴이 잘못 그려 질 수 있습니다.</p> -</div> - -<h3 id="A_createPattern_example" name="A_createPattern_example"><code>createPattern</code> 예제</h3> - -<p>이 마지막 예제에서, <code>fillStyle</code> 속성에 적용할 패턴을 만들 것입니다. 한 가지 눈여겨 볼 것은, 이미지 <code>onload</code> 핸들러 사용한다는 것입니다. 이미지를 패턴에 적용하기 전에 불러오기가 완료되었는지 확인하는 것입니다.</p> - -<pre class="brush: js;highlight[10]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - // 패턴으로 사용할 이미지 오브젝트를 생성한다 - var img = new Image(); - img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; - img.onload = function() { - - // 패턴을 생성한다 - var ptrn = ctx.createPattern(img,'repeat'); - ctx.fillStyle = ptrn; - ctx.fillRect(0,0,150,150); - - } -} -</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> - -<pre class="brush: js">draw();</pre> - -<p>The result looks like this:</p> -</div> - -<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p> - -<h2 id="그림자">그림자</h2> - -<p>그림자 사용에는 네 개의 속성이 있습니다.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt> - <dd>그림자가 객체에서 연장되어야하는 수평 거리를 나타냅니다. 이 값은 변환 행렬의 영향을 받지 않습니다. 기본값은 0입니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}</dt> - <dd>그림자가 객체에서 연장되어야하는 수직 거리를 나타냅니다. 이 값은 변환 행렬의 영향을 받지 않습니다. 기본값은 0입니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}</dt> - <dd>흐림(blur) 효과의 크기를 나타냅니다. 이 값은 픽셀 수와 일치하지 않으며 현재 변환 행렬의 영향을 받지 않습니다. 기본값은 0입니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}</dt> - <dd>그림자 효과의 색상을 나타내는 표준 CSS 색상 값. 기본적으로 완전 검은색입니다.</dd> -</dl> - -<p><code>shadowOffsetX</code> 및 <code>shadowOffsetY</code> 속성은 그림자가 X 및 Y 방향으로 객체에서 얼마나 멀리 떨어져야하는지 나타냅니다. 이 값은 현재 변환 행렬의 영향을받지 않습니다. 음수값을 사용하면 그림자가 위로 또는 왼쪽으로 확장되고 양수값을 사용하면 그림자가 아래로 또는 오른쪽으로 확장됩니다. 기본값은 모두 0입니다.</p> - -<p><code>shadowBlur</code> 속성은 흐림 효과의 크기를 나타냅니다. 이 값은 픽셀 수와 일치하지 않으며 현재 변환 행렬의 영향을받지 않습니다. 기본값은 0입니다.</p> - -<p><code>shadowColor</code> 속성은 그림자 효과의 색상을 나타내는 표준 CSS 색상 값입니다. 기본값은 완전 검은색입니다.</p> - -<div class="note"> -<p><strong>알아둘 것:</strong> 음영은 <code>source-over</code> <a href="/ko/docs/docs/Web/API/Canvas_API/Tutorial/Compositing">합성 작업</a>에만 사용됩니다.</p> -</div> - -<h3 id="그림자_있는_글자_예제">그림자 있는 글자 예제</h3> - -<p>이 예제에서는 그림자가 있는 글자를 그립니다.</p> - -<pre class="brush: js;highlight[4,5,6,7]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - ctx.shadowOffsetX = 2; - ctx.shadowOffsetY = 2; - ctx.shadowBlur = 2; - ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; - - ctx.font = "20px Times New Roman"; - ctx.fillStyle = "Black"; - ctx.fillText("Sample String", 5, 30); -} -</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="80"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p> - -<p>다음 장에서 <a href="/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_text">텍스트 그리기</a>에 대한 <code>font</code> 속성과 <code>fillText</code> 메소드를 살펴 보겠습니다.</p> - -<h2 id="캔버스_채우기_규칙">캔버스 채우기 규칙</h2> - -<p><code>fill</code> (혹은 {{domxref("CanvasRenderingContext2D.clip", "clip")}} 및 {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}})을 사용할 때 한 점이 경로 안쪽 또는 바깥에 있는지 그리고 따라서 채워지는지 여부를 결정하기 위한 채우기 규칙 알고리즘을 선택적으로 제공 할 수 있습니다. 경로가 교차하거나 중첩 된 경우에 유용합니다.<br> - <br> - 다음 두가지 값을 사용할 수 있습니다:</p> - -<ul> - <li><code><strong>"nonzero</strong></code>": <a href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding rule</a> 알고리즘. 기본값.</li> - <li><code><strong>"evenodd"</strong></code>: <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd winding rule</a> 알고리즘.</li> -</ul> - -<p>In this example we are using the <code>evenodd</code> rule.</p> - -<pre class="brush: js;highlight[6]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - ctx.beginPath(); - ctx.arc(50, 50, 30, 0, Math.PI * 2, true); - ctx.arc(50, 50, 15, 0, Math.PI * 2, true); - ctx.fill('evenodd'); -}</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="100" height="100"></canvas></pre> - -<pre class="brush: js"><code>draw();</code></pre> -</div> - -<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p> - -<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</p> diff --git a/files/ko/web/html/canvas/tutorial/basic_animations/index.html b/files/ko/web/html/canvas/tutorial/basic_animations/index.html deleted file mode 100644 index 457d658172..0000000000 --- a/files/ko/web/html/canvas/tutorial/basic_animations/index.html +++ /dev/null @@ -1,310 +0,0 @@ ---- -title: 기본 애니메이션 -slug: Web/HTML/Canvas/Tutorial/Basic_animations -tags: - - HTML5 - - 그래픽 - - 캔버스 -translation_of: Web/API/Canvas_API/Tutorial/Basic_animations ---- -<p>{{HTMLElement("canvas")}} 요소는 자바스크립트로 제어하는 것이므로, 애니메이션도 쉽게 만들 수 있습니다. 복잡한 애니메이션을 만드는 것은 추가 작업이 더 필요하고, 앞으로 그에 대한 페이지도 머지 않아 추가되기를 기대합니다.</p> -<p>도형은 한번 만들어 놓으면 그 모습 그대로 있다는 것이 애니메이션을 만들 때의 가장 큰 제약일 것입니다. 그 도형을 움직이고자 하면 그 도형뿐만이 아니라 그 도형이 그려지기 전에 그려진 모든 것을 다시 그려야 합니다. 복잡한 장면을 다시 그리는 것은 시간도 많이 걸리며, 코드를 실행하는 컴퓨터의 능력에 따라 달라집니다.</p> -<h2 id="Basic_animation_steps" name="Basic_animation_steps">기본 애니메이션 단계</h2> -<p>한 장면을 그리려면 아래와 같은 단계를 밟습니다.</p> -<ol> - <li><strong>캔버스를 비웁니다.</strong><br> - 그리려는 도형이 (배경 이미지를 만들 때처럼) 캔버스를 가득 채우는 것이 아니라면, 이전에 그려진 모든 도형을 지울 필요가 있습니다. 가장 쉬운 방법은 <code>clearRect()</code> 메소드를 사용하는 것입니다.</li> - <li><strong>캔버스 상태를 저장합니다.</strong><br> - 캔버스 상태에 영향을 주는 (스타일 변경, 모양 변형 등의) 설정값을 바꾸려고 하고, 바뀐 값을 각 장면마다 사용하려고 한다면, 원래 상태를 저장할 필요가 있습니다.</li> - <li><strong>애니메이션할 도형을 그립니다.</strong><br> - 실제 장면을 그리는 단계입니다.</li> - <li><strong>캔버스 상태를 복원합니다.</strong><br> - 새로운 장면을 그리기 전에 저장된 상태를 복원합니다.</li> -</ol> -<h2 id="Controlling_an_animation" name="Controlling_an_animation">애니메이션 제어하기</h2> -<p>캔버스 메소드를 사용하거나 사용자 함수를 사용하여 캔버스에 도형들을 그립니다. 보통의 경우에서는, 코드 실행이 완료되면 캔버스에 나타나는 결과만을 보게 됩니다. 예를 들어, <code>for</code> 반복문 안에서 애니메이션을 실행하는 것은 불가능합니다.</p> -<p>그래서 정해진 시간마다 그리기 함수를 실행하는 방법이 필요한 것입니다. 아래와 같이 애니메이션을 제어하는 두 가지 방법이 있습니다.</p> -<h3 id="예정된_변경">예정된 변경</h3> -<p>정해진 시간마다 특정 함수를 부를 때 사용할 수 있는 {{domxref("window.setInterval()")}}과 {{domxref("window.setTimeout()")}} 함수가 있습니다.</p> -<div class="note"> - <p>알아둘 것: 현재는 애니메이션을 만드는 방법으로 {{domxref("window.requestAnimationFrame()")}} 메소드를 추천합니다. 이에 대한 튜토리얼은 곧 업데이트할 것입니다.</p> -</div> -<dl> - <dt> - <code>setInterval(<em>function</em>, <em>delay</em>)</code></dt> - <dd> - <code>delay</code> 밀리세컨드(1,000분의 1초)마다 <code>function</code> 함수 반복 실행을 시작합니다.</dd> - <dt> - <code>setTimeout(<em>function</em>, <em>delay</em>)</code></dt> - <dd> - <code>delay</code> 밀리세컨드(1,000분의 1초) 경과후, <code>function</code> 함수를 실행합니다.</dd> -</dl> -<p>사용자의 제어를 <strong>필요로 하지 않는</strong> 반복 실행에는 <code>setInterval()</code> 함수가 알맞을 것입니다.</p> -<h3 id="사용자_상호_작용_변경">사용자 상호 작용 변경</h3> -<p>애니메이션을 제어하는 두번째 방법은 사용자 입력입니다. 게임을 만들려고 한다면, 애니메이션을 제어하기 위해 키보드나 마우스 이벤트를 사용할 수 있을 것입니다. {{domxref("EventListener")}}를 설정하여, 사용자와 상호 작용하여 애니메이션 함수를 실행합니다.</p> -<p>사용자 상호 작용이 <strong>필요하다면</strong>, 우리가 만든 <a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons">애니메이션용 프레임웍(framework)</a>의 <a href="/en-US/docs/DOM/window.setInterval#A_little_framework" title="/en-US/docs/DOM/window.setInterval#A_little_framework">최소 기능 버전</a> 또는 <a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons">최대 기능 버전</a>을 사용할 수 있을 것입니다.</p> -<pre>var myAnimation = new MiniDaemon(null, animateShape, 500, Infinity);</pre> -<p>또는</p> -<pre>var myAnimation = new Daemon(null, animateShape, 500, Infinity);</pre> -<p>아래 예제에서는, 애니메이션을 제어하기 위해 {{domxref("window.setInterval()")}}을 사용할 것입니다. 페이지 제일 아래쪽에 {{domxref("window.setTimeout()")}}을 사용한 예제 링크도 있습니다.</p> -<h4 id="태양계_애니메이션">태양계 애니메이션</h4> -<p>이 예제에서는 달이 지구를 돌고 지구가 태양을 도는 애니메이션을 만듭니다.</p> -<pre class="brush: js">var sun = new Image(); -var moon = new Image(); -var earth = new Image(); -function init(){ - sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png'; - moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png'; - earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png'; - setInterval(draw,100); -} - -function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - ctx.globalCompositeOperation = 'destination-over'; - ctx.clearRect(0,0,300,300); // 캔버스를 비운다 - - ctx.fillStyle = 'rgba(0,0,0,0.4)'; - ctx.strokeStyle = 'rgba(0,153,255,0.4)'; - ctx.save(); - ctx.translate(150,150); - - // 지구 - var time = new Date(); - ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() ); - ctx.translate(105,0); - ctx.fillRect(0,-12,50,24); // Shadow - ctx.drawImage(earth,-12,-12); - - // 달 - ctx.save(); - ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() ); - ctx.translate(0,28.5); - ctx.drawImage(moon,-3.5,-3.5); - ctx.restore(); - - ctx.restore(); - - ctx.beginPath(); - ctx.arc(150,150,105,0,Math.PI*2,false); // 지구 궤도 - ctx.stroke(); - - ctx.drawImage(sun,0,0,300,300); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="300" height="300"></canvas></pre> - <pre class="brush: js">init();</pre> -</div> -<p>{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}</p> -<h4 id="시계_애니메이션">시계 애니메이션</h4> -<p>이 예제에서는, 현재 시각을 보여주는 움직이는 시계를 만듭니다.</p> -<pre class="brush: js">function init(){ - clock(); - setInterval(clock,1000); -} - -function clock(){ - var now = new Date(); - var ctx = document.getElementById('canvas').getContext('2d'); - ctx.save(); - ctx.clearRect(0,0,150,150); - ctx.translate(75,75); - ctx.scale(0.4,0.4); - ctx.rotate(-Math.PI/2); - ctx.strokeStyle = "black"; - ctx.fillStyle = "white"; - ctx.lineWidth = 8; - ctx.lineCap = "round"; - - // 시계판 - 시 - ctx.save(); - for (var i=0;i<12;i++){ - ctx.beginPath(); - ctx.rotate(Math.PI/6); - ctx.moveTo(100,0); - ctx.lineTo(120,0); - ctx.stroke(); - } - ctx.restore(); - - // 시계판 - 분 - ctx.save(); - ctx.lineWidth = 5; - for (i=0;i<60;i++){ - if (i%5!=0) { - ctx.beginPath(); - ctx.moveTo(117,0); - ctx.lineTo(120,0); - ctx.stroke(); - } - ctx.rotate(Math.PI/30); - } - ctx.restore(); - - var sec = now.getSeconds(); - var min = now.getMinutes(); - var hr = now.getHours(); - hr = hr>=12 ? hr-12 : hr; - - ctx.fillStyle = "black"; - - // 시간 표시 - 시 - ctx.save(); - ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec ) - ctx.lineWidth = 14; - ctx.beginPath(); - ctx.moveTo(-20,0); - ctx.lineTo(80,0); - ctx.stroke(); - ctx.restore(); - - // 시간 표시 - 분 - ctx.save(); - ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec ) - ctx.lineWidth = 10; - ctx.beginPath(); - ctx.moveTo(-28,0); - ctx.lineTo(112,0); - ctx.stroke(); - ctx.restore(); - - // 시간 표시 - 초 - ctx.save(); - ctx.rotate(sec * Math.PI/30); - ctx.strokeStyle = "#D40000"; - ctx.fillStyle = "#D40000"; - ctx.lineWidth = 6; - ctx.beginPath(); - ctx.moveTo(-30,0); - ctx.lineTo(83,0); - ctx.stroke(); - ctx.beginPath(); - ctx.arc(0,0,10,0,Math.PI*2,true); - ctx.fill(); - ctx.beginPath(); - ctx.arc(95,0,10,0,Math.PI*2,true); - ctx.stroke(); - ctx.fillStyle = "rgba(0,0,0,0)"; - ctx.arc(0,0,3,0,Math.PI*2,true); - ctx.fill(); - ctx.restore(); - - ctx.beginPath(); - ctx.lineWidth = 14; - ctx.strokeStyle = '#325FA2'; - ctx.arc(0,0,142,0,Math.PI*2,true); - ctx.stroke(); - - ctx.restore(); -}</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> - <pre class="brush: js">init();</pre> -</div> -<p>{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}</p> -<h4 id="움직이는_파노라마_사진">움직이는 파노라마 사진</h4> -<p>이 예제에서는, 움직이는 파노라마 사진을 만듭니다. 사용할 그림은 위키피디어(Wikipedia)에서 구한 <a href="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg" title="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg">요세미티 국립공원</a>입니다. 캔버스보다 큰 그림을 사용할 수도 있습니다.</p> -<pre class="brush: js">var img = new Image(); - -// 변수 -// 스크롤될 이미지, 방향, 속도를 바꾸려면 변수값을 바꾼다. - -img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg'; -var CanvasXSize = 800; -var CanvasYSize = 200; -var speed = 30; // 값이 작을 수록 빨라진다 -var scale = 1.05; -var y = -4.5; // 수직 옵셋 - -// 주요 프로그램 - -var dx = 0.75; -var imgW; -var imgH; -var x = 0; -var clearX; -var clearY; -var ctx; - -img.onload = function() { - imgW = img.width*scale; - imgH = img.height*scale; - if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // 캔버스보다 큰 이미지 - if (imgW > CanvasXSize) { clearX = imgW; } // 캔버스보다 큰 이미지 - else { clearX = CanvasXSize; } - if (imgH > CanvasYSize) { clearY = imgH; } // 캔버스보다 큰 이미지 - else { clearY = CanvasYSize; } - // 캔버스 요소 얻기 - ctx = document.getElementById('canvas').getContext('2d'); - // 새로 그리기 속도 설정 - return setInterval(draw, speed); -} - -function draw() { - // 캔버스를 비운다 - ctx.clearRect(0,0,clearX,clearY); - // 이미지가 캔버스보다 작거나 같다면 (If image is <= Canvas Size) - if (imgW <= CanvasXSize) { - // 재설정, 처음부터 시작 - if (x > (CanvasXSize)) { x = 0; } - // 추가 이미지 그리기 - if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); } - } - // 이미지가 캔버스보다 크다면 (If image is > Canvas Size) - else { - // 재설정, 처음부터 시작 - if (x > (CanvasXSize)) { x = CanvasXSize-imgW; } - // 추가 이미지 그리기 - if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); } - } - // 이미지 그리기 - ctx.drawImage(img,x,y,imgW,imgH); - // 움직임 정도 - x += dx; -} -</pre> -<p>예제에 사용된 {{HTMLElement("canvas")}}의 크기는 아래와 같다. 캔버스의 너비가 변수 <code>CanvasXSize</code>값과 같고, 캔버스의 높이는 변수 <code>CanvasYSize</code>값과 같다는 것에 주목하라.</p> -<pre class="brush: html"><canvas id="canvas" width="800" height="200"></canvas></pre> -<p><strong>Live sample</strong></p> -<p>{{EmbedLiveSample("A_looping_panorama", "830", "230")}}</p> -<h2 id="Other_examples" name="Other_examples">또 다른 예제들</h2> -<dl> - <dt> - <a class="external" href="http://www.gartic.net/" title="http://www.gartic.net/">Gartic</a></dt> - <dd> - 다중 사용자 지원 그리기 놀이.</dd> - <dt> - <a class="external" href="http://www.abrahamjoffe.com.au/ben/canvascape/">Canvascape</a></dt> - <dd> - 3D 어드벤처 게임 (1인칭 슈팅).</dd> - <dt> - <a href="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster" title="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster">A basic ray-caster</a></dt> - <dd> - 키보드를 사용한 애니메이션 제어 방법에 대한 좋은 예제.</dd> - <dt> - <a class="external" href="http://andrewwooldridge.com/canvas/canvasgame001/canvasgame002.html">canvas adventure</a></dt> - <dd> - 키보드 제어를 사용하는 또다른 좋은 예제.</dd> - <dt> - <a class="external" href="http://www.blobsallad.se/">An interactive Blob</a></dt> - <dd> - 물방울 갖고 놀기.</dd> - <dt> - <a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Flying through a starfield</a></dt> - <dd> - 별, 동그라미, 네모가 떠다니는 우주를 누벼라.</dd> - <dt> - <a class="external" href="http://igrapher.com/" title="http://igrapher.com/">iGrapher</a></dt> - <dd> - 주식 시장 자료 차트 예제.</dd> -</dl> -<h2 id="이것도_보세요">이것도 보세요</h2> -<ul> - <li><a href="/en-US/docs/JavaScript/Timers" title="/en-US/docs/JavaScript/Timers">JavaScript timers</a></li> - <li><a href="/en-US/docs/DOM/window.setInterval#A_little_framework" title="/en-US/docs/DOM/window.setInterval#A_little_framework"><code>setInterval</code> – A little framework</a></li> - <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons">JavaScript Daemons Management</a></li> - <li><a href="/en-US/docs/DOM/HTMLCanvasElement" title="/en-US/docs/DOM/HTMLCanvasElement">HTMLCanvasElement</a></li> -</ul> -<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Compositing", "Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas")}}</p> diff --git a/files/ko/web/html/canvas/tutorial/basic_usage/index.html b/files/ko/web/html/canvas/tutorial/basic_usage/index.html deleted file mode 100644 index f455563e87..0000000000 --- a/files/ko/web/html/canvas/tutorial/basic_usage/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: 캔버스(Canvas) 기본 사용법 -slug: Web/HTML/Canvas/Tutorial/Basic_usage -translation_of: Web/API/Canvas_API/Tutorial/Basic_usage ---- -<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div> - -<div class="summary"> -<p>{{HTMLElement ( "canvas")}} {{Glossary ( "HTML")}} 엘리먼트를 살펴보는 것으로 이 튜토리얼을 시작해 보겠습니다. 이 페이지의 끝에서 캔버스 2D 컨텍스트를 설정하는 방법을 알게되고, 여러분의 브라우저에서 첫 번째 예제를 그리게 될 것입니다.</p> -</div> - -<h2 id="<canvas>_요소"><code><canvas></code> 요소</h2> - -<pre class="brush: html"><canvas id="tutorial" width="150" height="150"></canvas> -</pre> - -<p>{{HTMLElement ( "canvas")}}는 처음에는 src 및 alt 속성이 없다는 점만 제외하면 {{HTMLElement ( "img")}} 요소처럼 보입니다. 실제로 <code><canvas></code> 요소에는 {{htmlattrxref ( "width", "canvas")}}와 {{htmlattrxref ( "height", "canvas")}}의 두 속성만 있습니다. 이것들은 모두 선택사항이며 {{Glossary ( "DOM")}} <a href="ko/docs/Web/API/HTMLCanvasElement">프로퍼티</a>를 사용하여 설정할 수도 있습니다. width 및 height 속성을 지정하지 않으면 캔버스의 처음 너비는 <strong>300 픽셀</strong>이고 높이는 <strong>150 픽셀</strong>입니다. 요소는 {{Glossary ( "CSS")}}에 의해 임의로 크기를 정할 수 있지만 렌더링하는 동안 이미지는 레이아웃 크기에 맞게 크기가 조정됩니다. CSS 크기 지정이 초기 캔버스의 비율을 고려하지 않으면 왜곡되어 나타납니다 .</p> - -<div class="note"> -<p><strong>노트:</strong> 만약 렌더링이 왜곡된 것처럼 보이는 경우 CSS를 사용하지 않고 <code><canvas></code> 속성에서 <code>width</code> 및 <code>height</code> 속성을 명시적으로 지정하십시오.</p> -</div> - -<p> </p> - -<p><a href="/en-US/docs/Web/HTML/Global_attributes/id"><code>id</code></a> 속성(어트리뷰트)는 <code><canvas></code> 요소에 국한되지 않는 글로벌HTML 속성 (<a href="/en-US/docs/Web/HTML/Global_attributes">global HTML attributes</a> )중 하나로, 모든 HTML 요소에 적용 ( <code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code> 등등)될 수 있습니다. 대체로 항상 <code>id</code> 속성을 사용해 주는것이 좋은데, 이는 스크립트 내에서 구분을 쉽게 해 줄 수 있기 때문입니다.</p> - -<p><code><canvas></code>요소는 일반적인 이미지 ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…) 처럼 스타일을 적용시킬 수 있습니다. 하지만 이 방법은 실제 캔버스 위에 그리는 것에는 영향을 끼치지 않습니다. 이 방법이 어떻게 사용되는지는 <a href="/ko/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">해당 챕터</a>에서 확인 할 수 있습니다. 캔버스에 스타일링이 따로 지정 되있지 않았다면, 캔버스 스타일은 투명으로 설정되어있습니다.</p> - -<div id="section_2"> -<h3 id="대체_콘텐츠">대체 콘텐츠</h3> - -<p><code><canvas></code> 요소는 {{HTMLElement("video")}}, {{HTMLElement("audio")}} 혹은 {{HTMLElement("picture")}}처럼 {{HTMLElement("img")}}와는 달리, 인터넷 익스플로러 9 이하의 버전이나 텍스트기반 브라우저 등과 같은, 캔버스를 지원하지 않는 오래된 브라우저들을 위한 대체 컨텐츠를 정의하기 쉽습니다. 여러분은 그러한 브라우저들을 위한 대체 컨텐츠를 제공해야 합니다.</p> - -<p>대체 컨텐츠를 제공하는 것은 매우 간단합니다. <code><canvas></code>태그 안에 대체 컨텐츠를 삽입합니다. <code><canvas></code>태그 를 지원하지 않는 브라우저는 컨테이너를 무시하고 컨테이너 내부의 대체 콘텐츠를 렌더링 합니다. <code><canvas></code>를 지원하는 브라우저는 컨테이너 내부의 내용을 무시하고 캔버스를 정상적으로 렌더링합니다.</p> - -<p>예를 들어, 캔버스 내용에 대한 텍스트 설명을 제공하거나 동적으로 렌더링 된 내용의 정적 이미지를 제공 할 수 있습니다. 이것은 다음과 같이 보일 수있습니다:</p> - -<pre class="brush: html"><canvas id="stockGraph" width="150" height="150"> - current stock price: $3.15 +0.15 -</canvas> - -<canvas id="clock" width="150" height="150"> - <img src="images/clock.png" width="150" height="150" alt=""/> -</canvas> -</pre> - -<p>사용자에게 캔버스를 지원하는 다른 브라우저를 사용하도록 하는 것은 캔버스를 해석하지 못하는 사용자에게 전혀 도움이 되지 않습니다. 유용한 대체 텍스트나 하위 DOM을 제공하는 것이 <a href="/ko/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">캔버스에 더 쉽게 접근할수 있도록</a> 도움이 될 것입니다.</p> - -<h3 id="<canvas>_태그_필수"><code></canvas></code> 태그 필수</h3> - -<p>대체 컨텐츠가 제공되는 방식때문에, {{HTMLElement("img")}} 요소와 달리, {{HTMLElement("canvas")}} 요소는 닫는 태그(<code></canvas></code>)가 필요합니다. 닫는 태그가 없다면, 문서의 나머지 부분이 대체 컨텐츠로 간주되고 보이지 않을 것입니다.</p> - -<p>대체 컨텐츠가 필요하지 않다면, 단순히 <code><canvas id="foo" ...></canvas></code>가 모든 미지원 브라우저에서 완전하게 호환됩니다.</p> - -<h2 id="렌더링_컨텍스트">렌더링 컨텍스트</h2> - -<p>{{HTMLElement("canvas")}} 엘리먼트는 고정 크기의 드로잉 영역을 생성하고 하나 이상의 <strong>렌더링 컨텍스(rendering contexts)</strong>를 노출하여, 출력할 컨텐츠를 생성하고 다루게 됩니다. 본 튜토리얼에서는, 2D 렌더링 컨텍스트를 집중적으로 다룹니다. 다른 컨텍스트는 다른 렌더링 타입을 제공합니다. 예를 들어, <a href="https://developer.mozilla.org/ko/docs/Web/WebGL">WebGL</a>은 <a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a> 을 기반으로 하는 3D 컨텍스트를 사용합니다.</p> - -<p>캔버스는 처음에 비어있습니다. 무언가를 표시하기 위해서, 어떤 스크립트가 랜더링 컨텍스트에 접근하여 그리도록 할 필요가 있습니다. {{HTMLElement("canvas")}} 요소는 {{domxref("HTMLCanvasElement.getContext", "getContext()")}} 메서드를 이용해서, 랜더링 컨텍스트와 (렌더링 컨텍스트의) 그리기 함수들을 사용할 수 있습니다. getContext() 메서드는 렌더링 컨텍스트 타입을 지정하는 하나의 파라메터를 가집니다. 본 튜토리얼에서 다루고 있는 2D 그래픽의 경우, {{domxref("CanvasRenderingContext2D")}}을 얻기위해 <code>"2d"</code>로 지정합니다.</p> - -<pre class="brush: js">var canvas = document.getElementById('tutorial'); -var ctx = canvas.getContext('2d'); -</pre> - -<p>첫 번째 줄의 스크립트는 {{domxref ( "document.getElementById()")}} 메서드를 호출하여 {{HTMLElement ( "canvas")}} 요소를 표시할 DOM을 검색합니다. 요소가 있으면 <code>getContext()</code> 메서드를 사용하여 드로잉 컨텍스트에 액세스 할 수 있습니다.</p> - -<div id="section_5"> -<h2 id="지원여부_검사">지원여부 검사</h2> - -<p>대체 콘텐츠는 {{HTMLElement ( "canvas")}}를 지원하지 않는 브라우저에 표시됩니다. 스크립트 역시 간단하게 <code>getContext()</code> 메소드의 존재 여부를 테스트함으로써 프로그래밍 방식으로 지원하는지를 확인할 수 있습니다. 위의 코드 예제는 다음과 같이 될 수 있습니다:</p> - -<pre class="brush: js">var canvas = document.getElementById('tutorial'); - -if (canvas.getContext){ - var ctx = canvas.getContext('2d'); - // drawing code here -} else { - // canvas-unsupported code here -} -</pre> -</div> -</div> - -<h2 id="템플릿_뼈대">템플릿 뼈대</h2> - -<p>다음은 이후의 예제들에서 시작점으로 사용될 수 있는 가장 최소한의 템플릿입니다.</p> - -<div class="note"> -<p><strong>알아두기:</strong> HTML 내에 스크립트(script)를 사용하는것은 좋은 연습 방법이 아닙니다. 다음의 예시에서는 간결하게 나타내기 위해 사용 한 것입니다.</p> -</div> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"/> - <title>Canvas tutorial</title> - <script type="text/javascript"> - function draw(){ - var canvas = document.getElementById('tutorial'); - if (canvas.getContext){ - var ctx = canvas.getContext('2d'); - } - } - </script> - <style type="text/css"> - canvas { border: 1px solid black; } - </style> - </head> - <body onload="draw();"> - <canvas id="tutorial" width="150" height="150"></canvas> - </body> -</html> -</pre> - -<p>위 스크립트에 <code>draw()</code> 함수 문서가 호출되었는데, 이는 문서가 {{event("load")}} 이벤트를 수신하여 페이지 로딩이 완료될 때 한번 실행됩니다. 이 함수 혹은 이와 유사한 함수는, 페이지가 처음 로딩되는 한, {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}}, 혹은 또 다른 이벤트 핸들러 등을 이용하여 호출될 수 있습니다.</p> - -<p>다음은 템플릿이 실제로 어떻게 실행되는지를 보여줍니다. 보이는 바와 같이, 초기에 blank 로 보여집니다.</p> - -<p>{{EmbedLiveSample("A_skeleton_template", 160, 160)}}</p> - -<h2 id="기본_예제">기본 예제</h2> - -<p>먼저 두 개의 직사각형을 그린 간단한 예제를 보도록하겠습니다. 그 중 하나는 투명도(alpha transparency)를가집니다. 나중에 이 예제가 어떻게 작동하는지 자세히 살펴 보겠습니다.</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"/> - <script type="application/javascript"> - function draw() { - var canvas = document.getElementById("canvas"); - if (canvas.getContext) { - var ctx = canvas.getContext("2d"); - - ctx.fillStyle = "rgb(200,0,0)"; - ctx.fillRect (10, 10, 50, 50); - - ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; - ctx.fillRect (30, 30, 50, 50); - } - } - </script> - </head> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - </body> -</html> -</pre> - -<p>이 예제는 다음과 같습니다.</p> - -<p>{{EmbedLiveSample("A_simple_example", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p> - -<p>{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</p> diff --git a/files/ko/web/html/canvas/tutorial/compositing/example/index.html b/files/ko/web/html/canvas/tutorial/compositing/example/index.html deleted file mode 100644 index e3d74f5220..0000000000 --- a/files/ko/web/html/canvas/tutorial/compositing/example/index.html +++ /dev/null @@ -1,293 +0,0 @@ ---- -title: 도형 합성 예제 -slug: Web/HTML/Canvas/Tutorial/Compositing/Example -tags: - - HTML5 - - 그래픽 - - 예제 - - 캔버스 -translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example ---- -<div>{{CanvasSidebar}}</div> - -<p>이 샘플 프로그램에서는 여러 가지 <a href="/en-US/docs/Web/API/CanvasRenderingContext2D.globalCompositeOperation">도형 합성 방법</a>을 보여줍니다. 출력은 다음과 같습니다:</p> - -<p>{{ EmbedLiveSample('도형_합성_예제', '100%', '7250', '', 'Web/HTML/Canvas/Tutorial/Compositing/Example') }}</p> - -<h2 id="도형_합성_예제">도형 합성 예제</h2> - -<p>다음 코드에서는 프로그램의 나머지 부분에서 사용할 전역 값을 설정합니다.</p> - -<pre class="brush: js">var canvas1 = document.createElement("canvas"); -var canvas2 = document.createElement("canvas"); -var gco = [ 'source-over','source-in','source-out','source-atop', - 'destination-over','destination-in','destination-out','destination-atop', - 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', - 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', - 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' - ].reverse(); -var gcoText = [ -'기본 설정으로, 새로운 도형이 원래 도형 위에 그려집니다.', -'새로운 도형이 원래 도형과 겹치는 부분에만 그려지며, 나머지는 투명하게 설정됩니다.', -'새로운 도형이 원래 도형과 겹치지 않는 부분에만 그려집니다.', -'새로운 도형이 원래 도형과 겹치는 부분에만 그려집니다.', -'새로운 도형이 원래 도형 아래에 그려집니다.', -'원래 도형 중 새로운 도형과 겹치는 부분이 유지되며, 나머지는 투명하게 설정됩니다.', -'원래 도형 중 새로운 도형과 겹치지 않는 부분이 유지됩니다.', -'원래 도형 중 새로운 도형과 겹치는 부분만 유지됩니다. 새로운 도형은 원래 도형 아래에 그려집니다.', -'두 도형이 겹치는 곳의 색상이 두 색상값을 합한 값으로 결정됩니다.', -'새로운 도형만 그려집니다.', -'두 도형이 겹치는 곳이 투명하게 변하며, 나머지는 평범하게 그려집니다.', -'위쪽 레이어의 픽셀값이 아래쪽 레이어의 해당하는 픽셀값과 곱해지며, 결과적으로 어두운 이미지가 생성됩니다.', -'픽셀값을 뒤집고 곱한 다음 도로 뒤집습니다. 결과적으로 밝은 이미지가 생성됩니다(multiply의 반대).', -'multiply와 screen의 조합입니다. 아래쪽 레이어의 어두운 부분은 더 어두워지고, 밝은 부분은 더 밝아집니다.', -'두 레이어 중 어두운 픽셀값을 취합니다.', -'두 레이어 중 밝은 픽셀값을 취합니다.', -'아래쪽 레이어의 픽셀값을 위쪽 레이어의 뒤집힌 픽셀값으로 나눕니다.', -'아래쪽 레이어의 뒤집힌 픽셀값을 위쪽 레이어의 픽셀값으로 나누고, 그 값을 도로 뒤집습니다.', -'overlay와 같이 multiply와 screen의 조합이지만, 위아래 레이어의 순서가 바뀐 상태입니다.', -'조금 더 부드러운 hard-light입니다. 완전한 검은색/흰색에서 무조건 완전한 검은색/흰색이 나오지 않습니다.', -'한쪽 레이어의 픽셀값에서 다른 쪽 레이어의 픽셀값을 뺍니다. 빼는 순서는 결과값이 양수가 나오는 순서입니다.', -'difference와 비슷하지만 대비가 덜합니다.', -'아래쪽 레이어의 채도(chroma)와 명도(luma)를 보존하고 위쪽 레이어의 색상(hue)을 적용합니다.', -'아래쪽 레이어의 색상과 명도를 보존하고 위쪽 레이어의 채도를 적용합니다.', -'아래쪽 레이어의 명도를 보존하고 위쪽 레이어의 색상과 채도를 적용합니다.', -'아래쪽 레이어의 색상과 채도를 보존하고 위쪽 레이어의 명도를 적용합니다.' - ].reverse(); -var width = 320; -var height = 340; -</pre> - -<h3 id="메인_프로그램">메인 프로그램</h3> - -<p>페이지를 불러오고 나면 다음 코드에서 예제를 준비하고 실행합니다:</p> - -<pre class="brush: js">window.onload = function() { - // lum in sRGB - var lum = { - r: 0.33, - g: 0.33, - b: 0.33 - }; - // 캔버스 크기 변경 - canvas1.width = width; - canvas1.height = height; - canvas2.width = width; - canvas2.height = height; - lightMix() - colorSphere(); - runComposite(); - return; -}; -</pre> - -<p>또한 다음 코드의 <code>runComposite()</code>가 여러 가지 작업을 처리하며, 어려운 부분은 보조 함수를 사용합니다.</p> - -<pre class="brush: js">function createCanvas() { - var canvas = document.createElement("canvas"); - canvas.style.background = "url("+op_8x8.data+")"; - canvas.style.border = "1px solid #000"; - canvas.style.margin = "5px"; - canvas.width = width/2; - canvas.height = height/2; - return canvas; -} - -function runComposite() { - var dl = document.createElement("dl"); - document.body.appendChild(dl); - while(gco.length) { - var pop = gco.pop(); - var dt = document.createElement("dt"); - dt.textContent = pop; - dl.appendChild(dt); - var dd = document.createElement("dd"); - var p = document.createElement("p"); - p.textContent = gcoText.pop(); - dd.appendChild(p); - - var canvasToDrawOn = createCanvas(); - var canvasToDrawFrom = createCanvas(); - var canvasToDrawResult = createCanvas(); - - var ctx = canvasToDrawResult.getContext('2d'); - ctx.clearRect(0, 0, width, height) - ctx.save(); - ctx.drawImage(canvas1, 0, 0, width/2, height/2); - ctx.globalCompositeOperation = pop; - ctx.drawImage(canvas2, 0, 0, width/2, height/2); - ctx.globalCompositeOperation = "source-over"; - ctx.fillStyle = "rgba(0,0,0,0.8)"; - ctx.fillRect(0, height/2 - 20, width/2, 20); - ctx.fillStyle = "#FFF"; - ctx.font = "14px arial"; - ctx.fillText(pop, 5, height/2 - 5); - ctx.restore(); - - var ctx = canvasToDrawOn.getContext('2d'); - ctx.clearRect(0, 0, width, height) - ctx.save(); - ctx.drawImage(canvas1, 0, 0, width/2, height/2); - ctx.fillStyle = "rgba(0,0,0,0.8)"; - ctx.fillRect(0, height/2 - 20, width/2, 20); - ctx.fillStyle = "#FFF"; - ctx.font = "14px arial"; - ctx.fillText('기존 도형', 5, height/2 - 5); - ctx.restore(); - - var ctx = canvasToDrawFrom.getContext('2d'); - ctx.clearRect(0, 0, width, height) - ctx.save(); - ctx.drawImage(canvas2, 0, 0, width/2, height/2); - ctx.fillStyle = "rgba(0,0,0,0.8)"; - ctx.fillRect(0, height/2 - 20, width/2, 20); - ctx.fillStyle = "#FFF"; - ctx.font = "14px arial"; - ctx.fillText('새로운 도형', 5, height/2 - 5); - ctx.restore(); - - dd.appendChild(canvasToDrawOn); - dd.appendChild(canvasToDrawFrom); - dd.appendChild(canvasToDrawResult); - - dl.appendChild(dd); - } -}; -</pre> - -<h3 id="보조_함수">보조 함수</h3> - -<p>이 프로그램에서는 몇몇 보조 함수를 사용합니다.</p> - -<pre class="brush: js">var lightMix = function() { - var ctx = canvas2.getContext("2d"); - ctx.save(); - ctx.globalCompositeOperation = "lighter"; - ctx.beginPath(); - ctx.fillStyle = "rgba(255,0,0,1)"; - ctx.arc(100, 200, 100, Math.PI*2, 0, false); - ctx.fill() - ctx.beginPath(); - ctx.fillStyle = "rgba(0,0,255,1)"; - ctx.arc(220, 200, 100, Math.PI*2, 0, false); - ctx.fill() - ctx.beginPath(); - ctx.fillStyle = "rgba(0,255,0,1)"; - ctx.arc(160, 100, 100, Math.PI*2, 0, false); - ctx.fill(); - ctx.restore(); - ctx.beginPath(); - ctx.fillStyle = "#f00"; - ctx.fillRect(0,0,30,30) - ctx.fill(); -}; -</pre> - -<pre class="brush: js">var colorSphere = function(element) { - var ctx = canvas1.getContext("2d"); - var width = 360; - var halfWidth = width / 2; - var rotate = (1 / 360) * Math.PI * 2; // per degree - var offset = 0; // scrollbar offset - var oleft = -20; - var otop = -20; - for (var n = 0; n <= 359; n ++) { - var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth); - var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); - gradient.addColorStop(0, "rgba(0,0,0,0)"); - gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)"); - gradient.addColorStop(1, "rgba(255,255,255,1)"); - ctx.beginPath(); - ctx.moveTo(oleft + halfWidth, otop); - ctx.lineTo(oleft + halfWidth, otop + halfWidth); - ctx.lineTo(oleft + halfWidth + 6, otop); - ctx.fillStyle = gradient; - ctx.fill(); - ctx.translate(oleft + halfWidth, otop + halfWidth); - ctx.rotate(rotate); - ctx.translate(-(oleft + halfWidth), -(otop + halfWidth)); - } - ctx.beginPath(); - ctx.fillStyle = "#00f"; - ctx.fillRect(15,15,30,30) - ctx.fill(); - return ctx.canvas; -}; -</pre> - -<pre class="brush: js">// HSV (1978) = H: Hue / S: Saturation / V: Value -Color = {}; -Color.HSV_RGB = function (o) { - var H = o.H / 360, - S = o.S / 100, - V = o.V / 100, - R, G, B; - var A, B, C, D; - if (S == 0) { - R = G = B = Math.round(V * 255); - } else { - if (H >= 1) H = 0; - H = 6 * H; - D = H - Math.floor(H); - A = Math.round(255 * V * (1 - S)); - B = Math.round(255 * V * (1 - (S * D))); - C = Math.round(255 * V * (1 - (S * (1 - D)))); - V = Math.round(255 * V); - switch (Math.floor(H)) { - case 0: - R = V; - G = C; - B = A; - break; - case 1: - R = B; - G = V; - B = A; - break; - case 2: - R = A; - G = V; - B = C; - break; - case 3: - R = A; - G = B; - B = V; - break; - case 4: - R = C; - G = A; - B = V; - break; - case 5: - R = V; - G = A; - B = B; - break; - } - } - return { - R: R, - G: G, - B: B - }; -}; - -var createInterlace = function (size, color1, color2) { - var proto = document.createElement("canvas").getContext("2d"); - proto.canvas.width = size * 2; - proto.canvas.height = size * 2; - proto.fillStyle = color1; // top-left - proto.fillRect(0, 0, size, size); - proto.fillStyle = color2; // top-right - proto.fillRect(size, 0, size, size); - proto.fillStyle = color2; // bottom-left - proto.fillRect(0, size, size, size); - proto.fillStyle = color1; // bottom-right - proto.fillRect(size, size, size, size); - var pattern = proto.createPattern(proto.canvas, "repeat"); - pattern.data = proto.canvas.toDataURL(); - return pattern; -}; - -var op_8x8 = createInterlace(8, "#FFF", "#eee");</pre> diff --git a/files/ko/web/html/canvas/tutorial/compositing/index.html b/files/ko/web/html/canvas/tutorial/compositing/index.html deleted file mode 100644 index 108c493d9d..0000000000 --- a/files/ko/web/html/canvas/tutorial/compositing/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: 도형 합성 -slug: Web/HTML/Canvas/Tutorial/Compositing -tags: - - HTML5 - - 그래픽 - - 캔버스 -translation_of: Web/API/Canvas_API/Tutorial/Compositing ---- -<p>이전 페이지들에서 나온 모든 예제에서, 새로 그리는 도형은 언제나 이미 그려진 도형의 위에 그려졌습니다. 대부분의 상황에서는 이렇게 하는 것이 적절하지만, 도형을 합성하기 위한 순서를 제한하게 되는데, <code>globalCompositeOperation</code> 속성을 설정함으로써 이러한 상태를 바꿀 수 있습니다.</p> - -<h2 id="globalCompositeOperation" name="globalCompositeOperation"><code>globalCompositeOperation</code></h2> - -<p>기존 도형 뒤에 새로운 도형을 그릴 수 있을 뿐만 아니라, 도형의 일정 영역을 가려 보이지 않게 하거나 캔버스의 특정 부분을 지우는 (<code>clearRect()</code> 메소드는 사각형의 영역만을 지우지만, 이같은 제한도 없다.) 등의 효과를 얻을 수도 있습니다.</p> - -<dl> - <dt><code>globalCompositeOperation = <em>type</em></code></dt> - <dd>새로운 도형을 그릴 때, 도형 합성 방법을 설정합니다. type은 다음 26종류의 합성 방법 중에서 선택할 수 있습니다.</dd> -</dl> - -<p>다음 예제의 코드를 확인하려면 <a href="/ko/docs/Web/HTML/Canvas/Tutorial/Compositing/Example">도형 합성 예제</a>를 확인해 주세요.</p> - -<p>{{ EmbedLiveSample('도형_합성_예제', 750, 6750, '', 'Web/HTML/Canvas/Tutorial/Compositing/Example') }}</p> - -<h2 id="Clipping_paths" name="Clipping_paths">잘라내기 경로(Clipping path)</h2> - -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;"> 잘라내기 경로는 다른 캔버스 도형과 비슷하지만, 다른 도형에서 원하지 않는 부분을 가리는 가면과 같은 역할을 합니다. 오른쪽에 있는 그림을 보면 어떤 역할을 하는지 알 수 있을 것입니다. 붉은 별 모양이 잘라내기 경로입니다. 이 경로 밖에 있는 모든 것은 캔버스에 그려지지 않을 것입니다.</p> - -<p>잘라내기 경로와 위에서 살펴본 <code>globalCompositeOperation</code> 속성을 비교해 보면, <code>source-in</code>과 <code>source-atop</code>에서 비슷한 효과가 보입니다. 이들과 잘라내기 경로와의 가장 중요한 차이점은, 잘라내기 경로 자체는 캔버스에 전혀 그려지지 않는다는 것입니다. 잘라내기 경로는 제한된 영역 안에서 여러 가지 도형을 그리는 데에 적합합니다.</p> - -<p><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Drawing_paths" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Drawing_paths">캔버스에 도형 그리기</a>에서는 <code>stroke()</code>과 <code>fill()</code> 메소드만을 설명했었는데, <code>clip()</code>이라는 세 번째 메소드도 있습니다.</p> - -<dl> - <dt><code>clip()</code></dt> - <dd>현재 그려지는 경로를 현재 잘라내기 경로로 만듭니다.</dd> -</dl> - -<p>경로를 닫기 위해 <code>closePath()</code> 대신 <code>clip()</code>을 사용하고, 경로를 채우거나 윤곽선을 만드는 대신 잘라내기 경로로 만들 수 있습니다.</p> - -<p>{{HTMLElement("canvas")}} 요소의 초기 설정값으로써, 캔버스는 캔버스와 똑같은 크기의 잘라내기 경로를 가집니다. 크기가 똑같기 때문에 잘라내기 효과는 나타나지 않습니다.</p> - -<h3 id="A_clip_example" name="A_clip_example"><code>clip</code> 예제</h3> - -<p>다음 예제에서는 특정 영역의 별들만 보이도록 동그란 모양의 잘라내기 경로를 사용할 것입니다.</p> - -<pre class="brush: js">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - ctx.fillRect(0,0,150,150); - ctx.translate(75,75); - - // 동그란 모양의 잘라내기 경로를 생성한다 - ctx.beginPath(); - ctx.arc(0,0,60,0,Math.PI*2,true); - ctx.clip(); - - // 배경을 그린다 - var lingrad = ctx.createLinearGradient(0,-75,0,75); - lingrad.addColorStop(0, '#232256'); - lingrad.addColorStop(1, '#143778'); - - ctx.fillStyle = lingrad; - ctx.fillRect(-75,-75,150,150); - - // 별을 그린다 - for (var j=1;j<50;j++){ - ctx.save(); - ctx.fillStyle = '#fff'; - ctx.translate(75-Math.floor(Math.random()*150), - 75-Math.floor(Math.random()*150)); - drawStar(ctx,Math.floor(Math.random()*4)+2); - ctx.restore(); - } - -} - -function drawStar(ctx,r){ - ctx.save(); - ctx.beginPath() - ctx.moveTo(r,0); - for (var i=0;i<9;i++){ - ctx.rotate(Math.PI/5); - if(i%2 == 0) { - ctx.lineTo((r/0.525731)*0.200811,0); - } else { - ctx.lineTo(r,0); - } - } - ctx.closePath(); - ctx.fill(); - ctx.restore(); -} -</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<p>코드의 위쪽 몇 줄에서는 배경으로 캔버스 크기와 같은 검은색 네모를 그리고, 가운데로 원점을 옮깁니다. 그런 다음 호를 그리고 <code>clip()</code>을 사용하여 동그란 모양의 잘라내기 경로를 생성합니다. 캔버스 상태를 저장할 때 잘라내기 경로도 같이 저장됩니다. 이전의 잘라내기 경로를 보존하려면, 새로운 잘라내기 경로를 만들기 전에 캔버스 상태를 저장하면 됩니다.</p> - -<p>잘라내기 경로를 만든 후에 그려지는 모든 것들은, 그 경로의 안쪽에서만 보입니다. 이는 그 다음에 그려지는 선형 그라디언트에서 확실히 볼 수 있습니다. 이렇게 하고 나서, <code>drawStar()</code> 함수를 사용하여 위치와 크기가 모두 다른 50개의 별을 그립니다. 이 별들은 잘라내기 경로 안쪽에만 나타납니다.</p> - -<p>{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}</p> - -<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Transformations", "Web/Guide/HTML/Canvas_tutorial/Basic_animations")}}</p> diff --git a/files/ko/web/html/canvas/tutorial/drawing_shapes/index.html b/files/ko/web/html/canvas/tutorial/drawing_shapes/index.html deleted file mode 100644 index 09df4b829d..0000000000 --- a/files/ko/web/html/canvas/tutorial/drawing_shapes/index.html +++ /dev/null @@ -1,577 +0,0 @@ ---- -title: 캔버스(canvas)를 이용한 도형 그리기 -slug: Web/HTML/Canvas/Tutorial/Drawing_shapes -tags: - - Canvas - - 그래픽 - - 중급 - - 캔버스 - - 튜토리얼 -translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes ---- -<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> - -<div class="summary"> -<p>앞서 캔버스 환경 설정(<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage">canvas environment</a>)을 완료 하였다면, 이제 어떻게 캔버스에 그릴수 있는지에 대하여 자세하게 알아봅시다. 이 글을 끝내고 난 후, 여러분은 어떻게 사각형, 삼각형, 선, 아치, 곡선 등 의 기본적인 도형을 그릴수 있는지 익히실 수 있을 것 입니다. 캔버스 위에 물체를 그릴 때에는 path를 사용하는것이 필수적이므로 우리는 이것이 어떻게 사용되는지 볼 것입니다.</p> -</div> - -<h2 id="그리드">그리드</h2> - -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">드로잉을 시작 하기에 앞서, 캔버스 그리드 혹은 좌표공간 (<strong>coordinate space) </strong>에 대하여 이야기 해보겠습니다. 이전 페이지에서 이야기 했던 HTML 골격(skeleton)는 가로 세로 각각 150 픽셀의 캔버스 요소를 가지고 있습니다. 오른쪽에 보시면, 캔버스와 기본 그리드가 놓인것을 보실 수 있습니다. 기본적으로 그리드의 1단위는 캔버스의 1픽셀과 같습니다. 이 그리드의 원점은 좌측상단의 (0,0) 입니다. 모든 요소들은 이 원점을 기준으로 위치됩니다. 그렇기 때문에, 파란 사각형의 좌측상단은 왼쪽에서 x 픽셀, 위에서 y 픽셀 떨어진 것이라 볼 수 있고, 이 사각형의 좌표는 (x,y)가 됩니다. 이 튜토리얼 후반부에서 어떻게 원점을 이동하며, 그리드를 회전하고 같은 비율로 확대/축소할 수 있는지 살펴볼 것이지만, 지금은 기본에 충실하도록 합시다.</p> - -<h2 id="직사각형_그리기">직사각형 그리기</h2> - -<p>{{Glossary("SVG")}} 와는 다르게, {{HTMLElement("canvas")}}는 오직 하나의 원시적인 도형만을 제공합니다. 바로 <u>직사각형</u> 입니다. 다른 모든 도형들은 무조건 하나 혹은 하나 이상의 path 와 여러 점으로 이어진 선으로 만들어집니다. 다행히도, 우리는 여러 path drawing 함수(function)들을 통해 아주 어려운 도형들도 그릴수 있습니다.</p> - -<p>첫번째로, 직사각형을 봅시다. 캔버스 위에 직사각형을 그리는데에는 세가지 함수(function)가 있습니다:</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}</dt> - <dd>색칠된 직사각형을 그립니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}</dt> - <dd>직사각형 윤곽선을 그립니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}</dt> - <dd>특정 부분을 지우는 직사각형이며, 이 지워진 부분은 완전히 투명해집니다.</dd> -</dl> - -<p>각각의 세 함수는 모두 같은 변수를 가집니다. <code>x</code>와 <code>y</code>는 캔버스의 좌측상단에서 사각형의 (원점으로부터 상대적인) 위치를 뜻하며, <code>width</code> 와 <code>height</code>는 사각형의 크기를 뜻하게 됩니다.</p> - -<p>전 페이지에서 보여드렸던 <code>draw()</code> 함수(function)를 이용하여 위의 세가지 함수를 아래의 예제에 적용해 보았습니다.</p> - -<h3 id="직사각형_도형_예제">직사각형 도형 예제</h3> - -<div class="hidden"> -<pre class="brush: html"><html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - </body> -</html> -</pre> -</div> - -<pre class="brush: js">function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext) { - var ctx = canvas.getContext('2d'); - - ctx.fillRect(25, 25, 100, 100); - ctx.clearRect(45, 45, 60, 60); - ctx.strokeRect(50, 50, 50, 50); - } -}</pre> - -<p>위 예제의 결과는 다음과 같습니다.</p> - -<p>{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p> - -<p><code>fillRect()</code> 함수는 가로 세로 100 픽셀 사이즈의 검정 사각형을 그립니다. 이후 <code>clearRect()</code> 함수가 60x60 픽셀의 사각형 크기로 도형 중앙을 지우게 되고, <code>strokeRect()</code>은 이 빈 사각형 공간 안에 50x50 픽셀 사이즈의 윤곽선만 있는 사각형을 만들게 됩니다.</p> - -<p>다음 페이지에서, 우리는 <code>clearRect()</code>를 대신하는 두개의 함수에 대해 살펴보고, 만들어진 도형의 색이나 <font face="Open Sans, Arial, sans-serif">윤곽선의 스타일을 </font>바꾸는 방법들에 대하여 알아보도록 하겠습니다.</p> - -<p>우리가 다음 섹션에서 보게될 path 함수와 다르게 세개의 직사각형 함수는 캔버스에 바로 그릴 수 있습니다.</p> - -<h2 id="경로_그리기">경로 그리기</h2> - -<p><em>경로(path)</em>는 직사각형 이외의 유일한 원시적인(primitive) 도형입니다. 경로는 점들의 집합이며, 선의 한 부분으로 연결되어 여러가지 도형, 곡선을 이루고 두께와 색을 나타내게 됩니다. 경로나 하위 경로(sub-path)는 닫힐 수 있습니다. 경로를 이용하여 도형을 만들 때에는 몇가지 추가적인 단계를 거쳐야 합니다:</p> - -<ol> - <li>경로를 생성합니다.</li> - <li><a href="/ko/docs/Web/API/CanvasRenderingContext2D#Paths">그리기 명령어</a>를 사용하여 경로상에 그립니다.</li> - <li>경로가 한번 만들어졌다면, 경로를 렌더링 하기 위해서 윤곽선을 그리거나 도형 내부를 채울수 있습니다.</li> -</ol> - -<p>다음은 위의 단계들을 실행하기 위해 사용되는 함수입니다:</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt> - <dd>새로운 경로를 만듭니다. 경로가 생성됬다면, 이후 그리기 명령들은 경로를 구성하고 만드는데 사용하게 됩니다.</dd> - <dt>Path 메소드 (<a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">Path methods</a>)</dt> - <dd>물체를 구성할 때 필요한 여러 경로를 설정하는데 사용하는 함수입니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt> - <dd>현재 하위 경로의 시작 부분과 연결된 직선을 추가합니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</dt> - <dd>윤곽선을 이용하여 도형을 그립니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.fill", "fill()")}}</dt> - <dd>경로의 내부를 채워서 내부가 채워진 도형을 그립니다.</dd> -</dl> - -<p>경로를 만들기 위한 첫번째 단계는 <code>beginPath()</code> 메소드를 사용하는 것 입니다. 내부적으로, 경로는 도형을 이루는 하위경로(선, 아치 등)들의 집합으로 이루어져있습니다. 이 메소드가 호출될 때 마다, 하위 경로의 모음은 초기화되며, 우리는 새로운 도형을 그릴 수 있게 됩니다.</p> - -<div class="note"><strong>참고:</strong> 현재 열린 path가 비어있는 경우 ( <code>beginPath()</code> 메소드를 사용한 직 후, 혹은캔버스를 새로 생성한 직후), 첫 경로 생성 명령은 실제 동작에 상관 없이 <code>moveTo()</code>로 여겨지게 됩니다. 그렇기 때문에 경로를 초기화한 직후에는 항상 명확하게 시작 위치를 설정해 두는것이 좋습니다.</div> - -<p>두번째 단계는 실제로 경로가 그려지는 위치를 설정하는 메소드를 호출하는 것 입니다. 이 내용에 대해서는 곧 보실수 있습니다.</p> - -<p>세번째 단계는 선택사항으로 <code>closePath()</code> 메소드를 호출하는 것 입니다. 이 메소드는 현재 점 위치와 시작점 위치를 직선으로 이어서 도형을 닫습니다. 이미 도형이 닫혔거나 한 점만 존재한다면, 이 메소드는 아무것도 하지 않습니다.</p> - -<div class="note"><strong>참고:</strong> <code>fill()</code> 메소드 호출 시, 열린 도형은 자동으로 닫히게 되므로 <code>closePath()</code>메소드를 호출하지 않아도 됩니다. 이것은 <code>stroke()</code> 메소드에는 <strong>적용되지 않습니다</strong>.</div> - -<h3 id="삼각형_그리기">삼각형 그리기</h3> - -<p>예를 들어, 삼각형을 그리기 위한 코드는 다음과 같습니다:</p> - -<div class="hidden"> -<pre class="brush: html"><html> - <body onload="draw();"> - <canvas id="canvas" width="100" height="100"></canvas> - </body> -</html> -</pre> -</div> - -<pre class="brush: js">function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext) { - var ctx = canvas.getContext('2d'); - - ctx.beginPath(); - ctx.moveTo(75, 50); - ctx.lineTo(100, 75); - ctx.lineTo(100, 25); - ctx.fill(); - } -} -</pre> - -<p>위 코드의 실행 결과는 다음과 같습니다:</p> - -<p>{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</p> - -<h3 id="펜(pen)_이동하기">펜(pen) 이동하기</h3> - -<p>가장 유용한 함수중에 실제로 어떤 것도 그리지 않지만 위에서 언급한 경로의 일부가 되는 <code>moveTo()</code> 함수가 있습니다. 이는 펜이나 연필을 종이위에서 들어 옆으로 옮기는것이라고 보시면 됩니다.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}</dt> - <dd>펜을 x와 y 로 지정된 좌표로 옮깁니다.</dd> -</dl> - -<p>캔버스가 초기화 되었거나 <code>beginPath()</code> 메소드가 호출되었을 때, 특정 시작점 설정을 위해 <code>moveTo()</code> 함수를 사용하는것이 좋습니다. 또한 <code>moveTo()</code> 함수는 연결되지 않은 경로를 그리는데에도 사용 할 수 있습니다. 아래의 스마일 아이콘을 봅시다.</p> - -<p>코드 snippet을 사용해하여 직접 시도하여 보세요. 앞에서 보았던 <code>draw()</code> 함수(function)를 붙혀넣기 해 보세요.</p> - -<div class="hidden"> -<pre class="brush: html"><html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - </body> -</html> -</pre> -</div> - -<pre class="brush: js;highlight:[8,10,12]">function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext) { - var ctx = canvas.getContext('2d'); - - ctx.beginPath(); - ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle - ctx.moveTo(110, 75); - ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise) - ctx.moveTo(65, 65); - ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye - ctx.moveTo(95, 65); - ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye - ctx.stroke(); - } -} -</pre> - -<p>결과는 다음과 같습니다:</p> - -<p>{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p> - -<p> <code>moveTo()</code>를 사용한 코드라인을 지우면 연결된 선들을 확인 할 수 있습니다</p> - -<div class="note"> -<p><strong>참고:</strong> <code>arc()</code> function에 대하여 더 알아보고 싶다면 아래의 {{anch("Arcs")}} 를 확인하세요.</p> -</div> - -<h3 id="선">선</h3> - -<p>직선을 그리기 위해서는 <code>lineTo()</code> 메소드를 사용할 수 있습니다.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt> - <dd>현재의 드로잉 위치에서 x와 y로 지정된 위치까지 선을 그립니다.</dd> -</dl> - -<p>이 메소드는 선의 끝점의 좌표가 되는 x와 y의 두개의 인자가 필요합니다. 시작점은 이전에 그려진 경로에 의해 결정 되며, 이전 경로의 끝점이 다음 그려지는 경로의 시작점이 됩니다. 또한 시작점은 <code>moveTo()</code> 메소드를 통해 변경될 수 있습니다.</p> - -<p>아래의 예시는 하나의 두 삼각형 (윤곽선 삼각형, 색칠된 삼각형)을 그립니다.</p> - -<div class="hidden"> -<pre class="brush: html"><html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - </body> -</html> -</pre> -</div> - -<pre class="brush: js;highlight[9,10,16,17]">function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext) { - var ctx = canvas.getContext('2d'); - - // Filled triangle - ctx.beginPath(); - ctx.moveTo(25, 25); - ctx.lineTo(105, 25); - ctx.lineTo(25, 105); - ctx.fill(); - - // Stroked triangle - ctx.beginPath(); - ctx.moveTo(125, 125); - ctx.lineTo(125, 45); - ctx.lineTo(45, 125); - ctx.closePath(); - ctx.stroke(); - } -} -</pre> - -<p>새로운 경로를 지정하기 위해 <code>beginPath()</code> 메소드를 먼저 실행합니다. 그 다음 <code>moveTo()</code> 메소드를 가지고 시작점을 원하는 위치로 새롭게 지정 해 줍니다. 다음은, 두선을 그어 삼각형의 두 면을 그려줍니다.</p> - -<p>{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p> - -<p>여러분은 채워진 삼각형과 윤곽선 삼각형의 차이를 확인 하셨을 겁니다. 위에 언급했던 것 처럼, 경로가 채워지게 되면 그 도형은 자동으로 닫히게 되지만 윤곽선 삼각형에서는 그렇지 않기 때문입니다. 만약에 <code>closePath()</code> 메소드를 윤곽선 삼각형 코드에서 지운다면, 오직 두 선만 그려지게 되며 완벽한 삼각형으로 만들어지지 않습니다.</p> - -<h3 id="호(arc)">호(arc)</h3> - -<p>호나 원을 그리기위해서는 <code>arc()</code> 혹은 <code>arcTo()</code> 메소드를 사용합니다..</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}</dt> - <dd><em>(x, y)</em> 위치에 원점을 두면서, 반지름 r을 가지고, <em>startAngle</em> 에서 시작하여 <em>endAngle </em>에서 끝나며 주어진 <em>anticlockwise</em> 방향으로 향하는 (기본값은 시계방향 회전) 호를 그리게 됩니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}</dt> - <dd>주어진 제어점들과 반지름으로 호를 그리고, 이전 점과 직선으로 연결합니다.</dd> -</dl> - -<p><code>arc</code> 메소드의 여섯개의 매개변수에 대하여 좀 더 자세하게 알아봅시다: <code>x</code> 와 <code>y</code>는 호를 그릴 때 필요한 원점 좌표입니다. 반지름(<code>radius</code>) 은 말 그대로 호의 반지름을 뜻합니다. <code>startAngle</code> 및 <code>endAngle</code> 매개 변수는 원의 커브를 따라 호의 시작점과 끝점을 라디안 단위로 정의합니다. 이 변수들은 x축을 기준으로 계산됩니다. Boolean 값을 가지는 <code>anticlockwise</code> 변수는 <code>true</code>일 때 호를 반시계 방향으로 그리게 되며, 그렇지 않을 경우에는 시계 방향으로 그리게 됩니다.</p> - -<div class="note"> -<p><strong>참고</strong>: <code>arc</code> 함수에서 각도는 각이 아닌 라디안 값을 사용합니다. 각도를 라디안으로 바꾸려면 다음의 자바스크립트(JavaScript) 코드를 사용하실 수 있습니다: <code>radians = (Math.PI/180)*degrees</code>.</p> -</div> - -<p>다음의 예제는 우리가 이제껏 봐 왔던 예제들 보다 약간 더 복잡합니다. 이 예제는 12가지의 다양한 각도로 채워진 각기 다른 호를 그립니다.</p> - -<p>두개의 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> loops</a>은 루프를 통해 호(arc)들의 행과 열을 읽기 위해 사용되었습니다. <code>beginPath()</code>를 사용해 각 호의 새로운 경로를 만듭니다. 코드 내에서, 각각의 매개변수들을 명확하게 보여주기 위해 변수로 정의 하였지만, 실제로 사용할때 꼭 필요한 것은 아닙니다.</p> - -<p><code>x</code>와 <code>y</code> 좌표는 충분히 명확하게 표기되어야 합니다. <code>radius</code> 와 <code>startAngle</code>은 고정되어 있습니다. <code>endAngle</code>는 처음 180도 (반원) 에서 시작하고 이후 매번 90도씩 증가하다가 마지막 열에서 완벽한 원을 그립니다.</p> - -<p><code>clockwise</code> 매개 변수를 지정한 결과로 첫번째와 세번째 줄은 시계방향으로 원호들이 그려졌고 두번째와 네번째 줄에는 반시계방향의 원호들이 그려졌습니다. 마지막으로 <code>if</code> 문은 위 반쪽이 윤곽선으로, 아래 반쪽이 색으로 채워진 호들을 만들어 냅니다.</p> - -<div class="note"> -<p><strong>참고:</strong> 이 예제는 다른 예제들 보다 더 큰사이즈의 캔버스가 필요합니다: 150 x 200 픽셀</p> -</div> - -<div class="hidden"> -<pre class="brush: html"><html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="200"></canvas> - </body> -</html> -</pre> -</div> - -<pre class="brush: js;highlight[16]">function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext) { - var ctx = canvas.getContext('2d'); - - for (var i = 0; i < 4; i++) { - for (var j = 0; j < 3; j++) { - ctx.beginPath(); - var x = 25 + j * 50; // x coordinate - var y = 25 + i * 50; // y coordinate - var radius = 20; // Arc radius - var startAngle = 0; // Starting point on circle - var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle - var anticlockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise - - ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); - - if (i > 1) { - ctx.fill(); - } else { - ctx.stroke(); - } - } - } - } -} -</pre> - -<p>{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}</p> - -<h3 id="베지어(Bezier)_곡선과_이차(Quadratic_)곡선">베지어(Bezier) 곡선과 이차(Quadratic )곡선</h3> - -<p>다음 경로 타입은 베지어 곡선 (<a class="external" href="https://ko.wikipedia.org/wiki/%EB%B2%A0%EC%A7%80%EC%97%90_%EA%B3%A1%EC%84%A0" rel="external" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Bézier curves</a>)으로, 삼차(cubic)와 이차(quadric) 변수가 모두 가능합니다. 이 타입은 대게 복잡한 유기체적 형태 (organic shape)를 그리는데 사용됩니다.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}</dt> - <dd><code>cp1x</code> 및 <code>cp1y</code>로 지정된 제어점을 사용하여 현재 펜의 위치에서 <code>x</code>와 <code>y</code>로 지정된 끝점까지 이차 베지어 곡선을 그립니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}</dt> - <dd>(<code>cp1x</code>, <code>cp1y</code>) 및 (cp2x, cp2y)로 지정된 제어점을 사용하여 현재 펜 위치에서 <code>x</code> 및 <code>y</code>로 지정된 끝점까지 삼차 베지어 곡선을 그립니다.</dd> -</dl> - -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">오른쪽의 사진은 두 곡선의 차이를 가장 잘 설명해주고 있습니다. 이차 베지에 곡선은 시작점과 끝점 (파란색 점) 그리고 하나의 <strong>제어점</strong> (control point, 빨간 점으로 표시)을 가지고 있지만, 삼차 베지에 곡선은 두개의 제어점을 사용하고 있습니다.</p> - -<p>두 메소드에 모두 사용되는 <code>x</code>와 <code>y</code> 변수는 모두 끝점의 좌표를 나타냅니다. 첫번째 제어점은 <code>cp1x</code> 와 <code>cp1y</code> 좌표로, 두번째 제어점은 <code>cp2x</code> 와 <code>cp2y</code> 좌표로 표시되었습니다.</p> - -<p>이차 및 삼차 베지어 곡선을 사용하는 것은 매우 어려울 수 있습니다. Adobe Illustrator와 같은 벡터 드로잉 소프트웨어와는 달리, 우리는 현재 수행중인 작업에 대해 직접적인 시각적 피드백을 받을 수 없기 때문입니다. 이런 점은 복잡한 모양을 그리기 어렵도록 합니다. 다음 예제에서 우리는 간단한 유기체적 형태만 그리도록 하겠지만, 여러분이 연습과 시간을 투자 하신다면, 이후에 더욱 복잡한 도형을 그릴수 있게 될 것입니다.</p> - -<p>이 예제는 아주 어려운 점은 없습니다. 두 경우 모두 연속된 곡선이 그려지면서 최종 모양이 완성됩니다.</p> - -<h4 id="이차_베지에_곡선(Quadratic_Bezier_curves)">이차 베지에 곡선(Quadratic Bezier curves)</h4> - -<p>이 예제는 여러개의 이차 베지어 곡선을 이용해 말풍선을 만들어 냅니다.</p> - -<div class="hidden"> -<pre class="brush: html"><html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - </body> -</html> -</pre> -</div> - -<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext) { - var ctx = canvas.getContext('2d'); - - // Quadratric curves example - ctx.beginPath(); - ctx.moveTo(75, 25); - ctx.quadraticCurveTo(25, 25, 25, 62.5); - ctx.quadraticCurveTo(25, 100, 50, 100); - ctx.quadraticCurveTo(50, 120, 30, 125); - ctx.quadraticCurveTo(60, 120, 65, 100); - ctx.quadraticCurveTo(125, 100, 125, 62.5); - ctx.quadraticCurveTo(125, 25, 75, 25); - ctx.stroke(); - } -} -</pre> - -<p>{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p> - -<h4 id="삼차_베지어_곡선_(Cubic_Bezier_curves)">삼차 베지어 곡선 (Cubic Bezier curves)</h4> - -<p>이 예제는 삼차 곡선을 이용하여 하트를 그립니다.</p> - -<div class="hidden"> -<pre class="brush: html"><html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - </body> -</html> -</pre> -</div> - -<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext) { - var ctx = canvas.getContext('2d'); - - // Cubic curves example - ctx.beginPath(); - ctx.moveTo(75, 40); - ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); - ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5); - ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); - ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5); - ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25); - ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); - ctx.fill(); - } -} -</pre> - -<p>{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p> - -<h3 id="직사각형">직사각형</h3> - -<p>직사각형을 캔버스에 직접 그리는 {{anch("직사각형 그리기")}}에서 본 세 가지 메소드 외에 <code>rect()</code> 메소드도 있습니다. 이 메소드는 현재 열린 패스에 직사각형 경로를 추가합니다.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}</dt> - <dd>좌측상단이 (x, y)이고 폭과 높이가 <code>width</code>와 <code>height</code>인 직사각형을 그립니다.</dd> -</dl> - -<p>이 메소드가 실행되기 전에, (x,y) 매개변수를 가진 <code>moveTo()</code> 메소드가 자동으로 호출됩니다. 즉, 현재의 펜위치가 자동으로 기본 좌표로 초기화 됩니다.</p> - -<h3 id="조합하기">조합하기</h3> - -<p>이제까지 이 페이지의 예제들은 각각의 도형마다 하나의 path 함수를 가지고 있었습니다. 하지만 도형을 만드는데에 사용되는 경로의 종류와 개수는 제한이 없습니다. 그렇기 때문에 이 마지막 예제에서는 모든 경로 함수를 합쳐 여러 게임 캐릭터들을 그려보도록 하겠습니다.</p> - -<div class="hidden"> -<pre class="brush: html"><html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - </body> -</html> -</pre> -</div> - -<pre class="brush: js">function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext) { - var ctx = canvas.getContext('2d'); - - roundedRect(ctx, 12, 12, 150, 150, 15); - roundedRect(ctx, 19, 19, 150, 150, 9); - roundedRect(ctx, 53, 53, 49, 33, 10); - roundedRect(ctx, 53, 119, 49, 16, 6); - roundedRect(ctx, 135, 53, 49, 33, 10); - roundedRect(ctx, 135, 119, 25, 49, 10); - - ctx.beginPath(); - ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false); - ctx.lineTo(31, 37); - ctx.fill(); - - for (var i = 0; i < 8; i++) { - ctx.fillRect(51 + i * 16, 35, 4, 4); - } - - for (i = 0; i < 6; i++) { - ctx.fillRect(115, 51 + i * 16, 4, 4); - } - - for (i = 0; i < 8; i++) { - ctx.fillRect(51 + i * 16, 99, 4, 4); - } - - ctx.beginPath(); - ctx.moveTo(83, 116); - ctx.lineTo(83, 102); - ctx.bezierCurveTo(83, 94, 89, 88, 97, 88); - ctx.bezierCurveTo(105, 88, 111, 94, 111, 102); - ctx.lineTo(111, 116); - ctx.lineTo(106.333, 111.333); - ctx.lineTo(101.666, 116); - ctx.lineTo(97, 111.333); - ctx.lineTo(92.333, 116); - ctx.lineTo(87.666, 111.333); - ctx.lineTo(83, 116); - ctx.fill(); - - ctx.fillStyle = 'white'; - ctx.beginPath(); - ctx.moveTo(91, 96); - ctx.bezierCurveTo(88, 96, 87, 99, 87, 101); - ctx.bezierCurveTo(87, 103, 88, 106, 91, 106); - ctx.bezierCurveTo(94, 106, 95, 103, 95, 101); - ctx.bezierCurveTo(95, 99, 94, 96, 91, 96); - ctx.moveTo(103, 96); - ctx.bezierCurveTo(100, 96, 99, 99, 99, 101); - ctx.bezierCurveTo(99, 103, 100, 106, 103, 106); - ctx.bezierCurveTo(106, 106, 107, 103, 107, 101); - ctx.bezierCurveTo(107, 99, 106, 96, 103, 96); - ctx.fill(); - - ctx.fillStyle = 'black'; - ctx.beginPath(); - ctx.arc(101, 102, 2, 0, Math.PI * 2, true); - ctx.fill(); - - ctx.beginPath(); - ctx.arc(89, 102, 2, 0, Math.PI * 2, true); - ctx.fill(); - } -} - -// A utility function to draw a rectangle with rounded corners. - -function roundedRect(ctx, x, y, width, height, radius) { - ctx.beginPath(); - ctx.moveTo(x, y + radius); - ctx.lineTo(x, y + height - radius); - ctx.arcTo(x, y + height, x + radius, y + height, radius); - ctx.lineTo(x + width - radius, y + height); - ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius); - ctx.lineTo(x + width, y + radius); - ctx.arcTo(x + width, y, x + width - radius, y, radius); - ctx.lineTo(x + radius, y); - ctx.arcTo(x, y, x, y + radius, radius); - ctx.stroke(); -} -</pre> - -<p>결과 이미지는 다음과 같습니다:</p> - -<p>{{EmbedLiveSample("Making_combinations", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}</p> - -<p>이 예제는 보기보다 아주 간단하기 때문에 자세한 설명은 생략하겠습니다. 알아 두어야할 가장 중요한 부분은 <code>fillStyle</code> 코드와 사용된 유틸리티 함수 (<code>roundedRect()</code> 부분) 입니다. 유틸리티 함수를 사용하게 되면, 사용해야 할 코드의 양과 복잡함을 줄여주는데 도움을 줍니다.</p> - -<p>이 튜토리얼에서 나중에 <code>fillStyle</code>에 대하여 조금 더 자세하게 알아보도록 하겠지만, 지금은 경로의 채우는 색을 기본값(흑백)에서 바꾸었다가 다시 기본값으로 바꾸는 정도로만 사용하였습니다.</p> - -<h2 id="Path2D_오브젝트_(Path2D_objects)">Path2D 오브젝트 (Path2D objects)</h2> - -<p>마지막 예제에서 보았 듯이, 캔버스에 객체를 그리는 일련의 경로와 그리기 명령이 있을 수 있습니다. 코드를 단순화하고 성능을 향상시키기 위해 최근 버전의 브라우저에서 사용할 수있는 {{domxref("Path2D")}} 객체를 사용하여 이러한 드로잉 명령을 캐시하거나 기록 할 수 있습니다. 이로써 여러분은 경로를 빠르게 다시 실행 시킬 수 있습니다.</p> - -<p>어떻게 <code>Path2D</code> object를 생성 할 수 있는지 확인해 봅시다:</p> - -<dl> - <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt> - <dd><code><strong>Path2D()</strong></code> 생성자는 새로운 <code>Path2D</code> 객체를 반환합니다. 선택적으로 다른 경로를 인수로 받거나(복사본을 생성), SVG 경로 데이터로 구성된 문자열을 받아서 객체로 반환합니다.</dd> -</dl> - -<pre class="brush: js">new Path2D(); // empty path object -new Path2D(path); // copy from another Path2D object -new Path2D(d); // path from SVG path data</pre> - -<p><code>moveTo</code>, <code>rect</code>, <code>arc</code> 혹은 <code>quadraticCurveTo</code> 등과 같은 모든 경로 메소드 (<a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">path methods</a>)들은 <code>Path2D</code> 객체에서 사용 가능합니다.</p> - -<p><code>Path2D</code> API는 또한 <code>addPath</code> 메소드를 사용하여 경로를 결합하는 방법을 추가합니다. 예를 들자면, 여러 요소를 사용하는 오브젝트를 만들 때 유용하게 사용 될 수 있습니다.</p> - -<dl> - <dt>{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}</dt> - <dd>옵션으로 변환 행렬(transformation matrix)을 사용하여 현재 경로에 경로를 추가합니다.</dd> -</dl> - -<h3 id="Path2D_예제">Path2D 예제</h3> - -<p>이 예제에서는, 직사각형과 원을 만들어 볼 것입니다. 나중에 사용할 것을 고려하여, 두 도형 모두 <code>Path2D</code> object로 저장 될 것입니다. 새로운 버전의 <code>Path2D</code> API에서는 여러 메소드들이 지금 사용하고있는 path가 아닌 <code>Path2D</code> object를 옵션으로 선택하여 사용 할 수 있도록 업데이트 되었습니다. 아래의 예제에서 보시면, <code>stroke</code> 와 <code>fill</code> 메소드가 오브젝트를 캔버스 위에 그리도록 path 변수와 함께 사용되었습니다.</p> - -<div class="hidden"> -<pre class="brush: html"><html> - <body onload="draw();"> - <canvas id="canvas" width="130" height="100"></canvas> - </body> -</html> -</pre> -</div> - -<pre class="brush: js;highlight[6,9]">function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext) { - var ctx = canvas.getContext('2d'); - - var rectangle = new Path2D(); - rectangle.rect(10, 10, 50, 50); - - var circle = new Path2D(); - circle.moveTo(125, 35); - circle.arc(100, 35, 25, 0, 2 * Math.PI); - - ctx.stroke(rectangle); - ctx.fill(circle); - } -} -</pre> - -<p>{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p> - -<h3 id="SVG_paths_사용하기">SVG paths 사용하기</h3> - -<p>새로운 캔버스 path2D API 또다른 강력한 특징 중 하나는, 캔버스의 path를 초기화 하기 위해 <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">SVG path data</a>를 사용한다는 것입니다. 이는 path 데이터를 이동시키며, SVG와 canvas 에서 재사용 할 수 있도록 해줍니다. </p> - -<p>path는 (<code>M10 10</code>) 점으로 이동한 다음, 수평하게 오른쪽으로 으로 80 포인트 (<code>h 80</code>) 만큼 이동합니다. 이후 수직으로 80포인트 (v 80) 내려간 다음, 80 포인트 왼쪽으로 (<code>h -80</code>) 수평하게 이동하고 다시 시작점 (<code>z</code>)으로 돌아갑니다. 예시는 <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths">이곳</a>( <code>Path2D</code> constructor )에서 확인하실 수 있습니다.</p> - -<pre class="brush: js;">var p = new Path2D('M10 10 h 80 v 80 h -80 Z');</pre> - -<div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> diff --git a/files/ko/web/html/canvas/tutorial/finale/index.html b/files/ko/web/html/canvas/tutorial/finale/index.html deleted file mode 100644 index 1241680c5c..0000000000 --- a/files/ko/web/html/canvas/tutorial/finale/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Finale -slug: Web/HTML/Canvas/Tutorial/Finale -tags: - - 그래픽 - - 캔버스 - - 튜토리얼 -translation_of: Web/API/Canvas_API/Tutorial/Finale ---- -<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</div> - -<div class="summary"> -<p>축하합니다 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas </a>튜토리얼을 모두 끝마쳤습니다! 이 정보는 웹에서 더 나은 2D 그래픽을 만드는데 도움이 됩니다.</p> -</div> - -<h2 id="더_많은_예시와_튜토리얼">더 많은 예시와 튜토리얼</h2> - -<p>이 사이트에는 다양한 데모와 canvas에 대한 추가 설명이 있다.</p> - -<dl> - <dt><a href="https://codepen.io/search/pens?q=canvas">Codepen.io</a></dt> - <dd>프론트 엔드 개발자 playground 및 브라우저의 코드 편집기.</dd> - <dt><a href="http://www.html5canvastutorials.com/">HTML5 Canvas Tutorials</a></dt> - <dd>대부분 canvas API의 예시</dd> - <dt><a href="/en-US/docs/Games">Game development</a></dt> - <dd>게임은 가장 인기있는 컴퓨터 활동 중 하나이다. 어떤 표준 규격의 웹 브라우저에서도 실행할 수 있는 더 나은 게임을 개발할 수 있도록 하기 위한 신기술이 끊임없이 등장하고 있다.</dd> -</dl> - -<h2 id="기타_웹API">기타 웹API</h2> - -<p>이 API들는 canvas 및 그래픽으로 작업할 때 유용하다.</p> - -<dl> - <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> - <dd>3D를 포함한 복잡한 그래픽 렌더링을 위한 고급 API.</dd> - <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> - <dd>확장 가능한 Vector Graphics는 이미지를 벡터(선)과 형태의 집합으로 묘사하여 이미지를 그리는 크기에 상관없이 원활하게 확장할 수 있다.</dd> - <dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio</a></dt> - <dd>Web Audio API는 개발자들이 오디오 소스 선택, 오디오에 효과 추가, 오디오 시각화 생성, 공간 효과 적용(예: 패닝)등을 할 수 있도록 웹 상에서 오디오를 제어하기 위한 다양하고 좋은 시스템을 제공한다.</dd> -</dl> - -<h2 id="문의사항">문의사항</h2> - -<dl> - <dt><a href="http://stackoverflow.com/questions/tagged/canvas">Stack Overflow</a></dt> - <dd>"canvas"가 태그된 문의사항.</dd> - <dt><a href="/en-US/docs/MDN">Comments about this tutorial – the MDN documentation community</a></dt> - <dd>이 튜토리얼에 대해 의견이 있으시거나 저희에게 감사를 표하고 싶다면 언제든지 연락해주세요!</dd> -</dl> - -<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</p> diff --git a/files/ko/web/html/canvas/tutorial/hit_regions_and_accessibility/index.html b/files/ko/web/html/canvas/tutorial/hit_regions_and_accessibility/index.html deleted file mode 100644 index e720af3159..0000000000 --- a/files/ko/web/html/canvas/tutorial/hit_regions_and_accessibility/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: 히트(Hit) 영역과 접근성 -slug: Web/HTML/Canvas/Tutorial/Hit_regions_and_accessibility -translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility ---- -<div>{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div> - -<div class="summary">{{HTMLElement("canvas")}} 엘리먼트는 비트맵이며 그려진 객체에 대한 정보는 제공하지 않습니다. 캔버스 컨텐츠는 시멘틱 HTML과 같은 접근성 도구에 노출되지 않습니다. 일반적으로 접근성을 위한 웹 사이트 또는 앱에서는 캔버스를 사용하지 않는 것이 좋습니다. 본 가이드라인은 접근성이 향상된 캔버스를 만드는데 도움이 될 것입니다.</div> - -<h2 id="대체_컨텐츠">대체 컨텐츠</h2> - -<p><code><canvas> ... </ canvas></code> 태그 안의 내용은 캔버스 렌더링을 지원하지 않는 브라우저의 대체 컨텐츠로 사용할 수 있습니다. 또한 하위 DOM을 읽고 해석 할 수있는 보조 기술 사용자 (스크린 리더와 같은)에게도 매우 유용합니다. <a href="https://www.html5accessibility.com/tests/canvas.html">html5accessibility.com</a>의 좋은 예가 이를 수행 할 수있는 방법을 보여줍니다.</p> - -<pre class="brush: html"><canvas> - <h2>Shapes</h2> - <p>A rectangle with a black border. - In the background is a pink circle. - Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>. - Partially overlaying the circle is a green - <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a> - and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>, - both of which are semi-opaque, so the full circle can be seen underneath.</p> -</canvas> </pre> - -<p><a href="https://www.youtube.com/watch?v=ABeIFlqYiMQ">Steve Faulkner의 NVDA가 이 예제를 어떻게 읽는지를 보여주는 동영상</a>을 참고하시기 바랍니다.</p> - -<h2 id="ARIA_규칙">ARIA 규칙</h2> - -<p><a href="/ko/docs/Web/Accessibility/ARIA">ARIA</a>(Accessible Rich Internet Application)는 장애인이 사용자가 웹 콘텐츠 및 웹 응용 프로그램을보다 쉽게 사용할 수 있도록하는 방법을 정의합니다. ARIA 속성을 사용하여 캔버스 엘리먼트의 동작 및 용도를 설명 할 수 있습니다. 자세한 내용은 <a href="/ko/docs/Web/Accessibility/ARIA">ARIA</a> 및 <a href="/ko/docs/Web/Accessibility/ARIA/ARIA_Techniques">ARIA 기술</a>을 참조하십시오.</p> - -<pre class="brush: html"><canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas> -</pre> - -<h2 id="히트(Hit)_영역">히트(Hit) 영역</h2> - -<p>마우스 좌표가 캔버스의 특정 영역 내에 있는지 여부는 문제를 해결하는 데 공통적입니다. 히트 영역 API를 사용하면 캔버스 영역을 정의 할 수 있으며 캔버스에 대화형 컨텐츠를 접근성 도구에 표시 할 수 있습니다. 히트 영역 API는 여러분이 히트 감지를 쉽게 할 수 있도록 하며 DOM 엘리먼트에 이벤트를 전달할 수 있도록 합니다. API에는 다음 세 가지 메소드가 있습니다 (현재 웹 브라우저에서는 아직 실험 중이며 브라우저 호환성 테이블을 확인하십시오).</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt> - <dd>히트 영역을 캔버스에 추가합니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt> - <dd>캔버스에서 해당 <code>id</code>를 가진 히트 영역을 제거합니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt> - <dd>캔버스에서 모든 히트 영역을 제거합니다.</dd> -</dl> - -<p>경로에 히트 영역을 추가하고 {{domxref("MouseEvent.region")}} 속성을 확인하여 마우스가 영역을 히트하는지 테스트 할 수 있습니다.</p> - -<pre class="brush: html"><canvas id="canvas"></canvas> -<script> -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); - -ctx.beginPath(); -ctx.arc(70, 80, 10, 0, 2 * Math.PI, false); -ctx.fill(); -ctx.addHitRegion({id: 'circle'}); - -canvas.addEventListener('mousemove', function(event) { - if (event.region) { - alert('hit region: ' + event.region); - } -}); -</script></pre> - -<p><code>addHitRegion()</code> 메소드는 <code>control</code> 옵션을 이용하여 이벤트를 엘리먼트(즉, 캔버스의 자식으로)로 전달합니다.</p> - -<pre class="brush: js">ctx.addHitRegion({control: element});</pre> - -<p>예를 들어 {{HTMLElement("input")}} 엘리먼트로 전달하는 데 유용 할 수 있습니다. <a href="https://codepen.io/peterj35/pen/PEdLKx">codepen 데모</a>를 참조하십시오.</p> - -<h2 id="포커스_링(Focus_rings)">포커스 링(Focus rings)</h2> - -<p>키보드로 작업 할 때 포커스 링은 페이지 탐색에 도움이되는 편리한 표시기입니다. 캔버스 드로잉에 포커스 링을 그리려면 <code>drawFocusIfNeeded</code> 속성을 사용할 수 있습니다.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}</dt> - <dd>지정된 엘리먼트에 포커스가있는 경우,이 메소드는 현재 경로 주위에 포커스 링을 그립니다.</dd> -</dl> - -<p>또한 <code>scrollPathIntoView()</code> 메서드를 사용하여 포커스가있는 경우 엘리먼트를 화면에 표시 할 수 있습니다.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}</dt> - <dd>현재 경로 또는 지정된 경로를 뷰로 스크롤합니다.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas accessibility use cases</a></li> - <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas element accessibility issues</a></li> - <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li> - <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Best practices for interactive canvas elements</a></li> -</ul> - -<div>{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div> diff --git a/files/ko/web/html/canvas/tutorial/index.html b/files/ko/web/html/canvas/tutorial/index.html deleted file mode 100644 index 03077163aa..0000000000 --- a/files/ko/web/html/canvas/tutorial/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 캔버스 튜토리얼 -slug: Web/HTML/Canvas/Tutorial -tags: - - Canvas - - Graphic - - Guide - - HTML - - HTML5 - - Intermediate - - Web -translation_of: Web/API/Canvas_API/Tutorial ---- -<div>{{CanvasSidebar}}</div> - -<div><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></div> - -<div class="summary"> -<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a>는 <a href="/en-US/docs/HTML" title="HTML">HTML</a> 요소 중 하나로서, 스크립트(보통은 <a href="/en-US/docs/JavaScript" title="JavaScript">자바스크립트</a>)를 사용하여 그림을 그리는 데에 사용됩니다. 예를 들면, 그래프를 그리거나 사진을 합성하거나, 간단한(혹은 <a href="/en-US/docs/HTML/Canvas/A_Basic_RayCaster" title="A_Basic_RayCaster">복잡할 수도 있는</a>) 애니메이션을 만드는 데에 사용될 수 있습니다. 오른쪽에 보이는 이미지들은 앞으로 설명하게 될 <a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a>를 사용하여 만들 수 있는 것들의 일부입니다.</p> -</div> - -<p><span class="seoSummary">이 튜토리얼은 <code><canvas></code> 요소를 사용하여 2D 그래픽을 어떻게 그리는지 기초부터 설명합니다. 예제들을 통하여 캔버스로 할 수 있는 것이 무엇인지 알려주며, 바로 사용할 수 있도록 코드도 제공합니다.</span></p> - -<p><code><canvas></code>는 Apple의 Webkit에 처음 도입되어 Mac OS X 대시보드(Dashboard)에 사용되었고, 이후 다른 브라우저에도 구현되어 왔습니다. 현재 대부분의 주요 브라우저에서 지원됩니다.</p> - -<h2 id="Before_you_start" name="Before_you_start">시작하기 전 알아두어야 할 것</h2> - -<p><code><canvas></code> 요소를 사용하는 것이 어려운 일은 아니지만, <a href="/en-US/docs/HTML" title="HTML">HTML</a>과 <a href="/en-US/docs/JavaScript" title="JavaScript">자바스크립트</a>에 대한 기본 지식을 갖추고 있어야 합니다. 몇몇 오래된 브라우저는 <code><canvas></code> 요소를 지원하지 않지만, 최근 버전의 주요 브라우저들은 모두 지원하고 있습니다. 캔버스의 크기는 300px * 150px (너비 * 높이)가 초기 설정값이며, HTML <code>height</code>와 <code>width</code> 속성을 사용하여 바꿀 수 있습니다. 캔버스에 그림을 그리려면 자바스크립트 컨텍스트 오브젝트를 사용하며, 즉석에서 그림을 생성할 수 있습니다.</p> - -<h2 id="In_this_tutorial" name="In_this_tutorial">튜토리얼 내용</h2> - -<ul> - <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">캔버스(Canvas) 기본 사용법</a></li> - <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">캔버스에 도형 그리기</a></li> - <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">스타일과 색 적용하기</a></li> - <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_text">텍스트 그리기</a></li> - <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Using_images" title="Canvas_tutorial/Using_images">이미지 사용하기</a></li> - <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Transformations" title="Canvas_tutorial/Transformations">모양 변환</a></li> - <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Canvas_tutorial/Compositing">도형 합성</a></li> - <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">애니메이션 기본</a></li> - <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">애니메이션 고급</a></li> - <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">픽셀 다루기</a></li> - <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hit 영역과 accessibility</a></li> - <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">캔버스 최적화</a></li> - <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Finale">마무리</a></li> -</ul> - -<h2 id="See_also" name="See_also">같이 보기</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Canvas_API" title="HTML/Canvas">캔버스 주제 페이지</a></li> - <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe 일러스트레이터와 캔버스 플러그인</a></li> - <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5 캔버스 튜토리얼</a></li> -</ul> - -<div class="hidden"> -<h2 id="페이지_작성에_기여하신_분들에게_알리는_말씀">페이지 작성에 기여하신 분들에게 알리는 말씀</h2> - -<p>2013년 6월 17일에 일어난 기술적인 오류로 인해, 이 튜토리얼에 대한 그 동안의 내역이 사라졌습니다. 사라진 내역에는 이 페이지 작성에 기여한 모든 분들의 기록도 포함됩니다. 이에 대해 사과드리며, 여러분들의 용서를 구합니다. (이상은 영문 페이지의 내용이므로 이 페이지와는 상관 없음을 밝힙니다.)</p> -</div> - -<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div> diff --git a/files/ko/web/html/canvas/tutorial/optimizing_canvas/index.html b/files/ko/web/html/canvas/tutorial/optimizing_canvas/index.html deleted file mode 100644 index 460b5e893f..0000000000 --- a/files/ko/web/html/canvas/tutorial/optimizing_canvas/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: 캔버스 최적화 -slug: Web/HTML/Canvas/Tutorial/Optimizing_canvas -translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas ---- -<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div> - -<div class="summary"> -<p>{{HTMLElement("canvas")}} 엘리먼트는 웹에서 2D 그래픽을 렌더링하는 데 가장 널리 사용되는 도구 중 하나입니다. 그러나 웹 사이트와 앱이 Canvas API를 최대한으로 밀면 성능이 저하되기 시작합니다. 그러나 웹 사이트 및 앱이 Canvas API를 한계치까지 사용하면 성능이 저하되기 시작합니다. <span class="seoSummary">이 글에서는 그래픽이 잘 동작하도록 보장하기 위해 캔버스 엘리먼트의 사용을 최적화하기위한 제안 사항을 제공합니다.</span></p> -</div> - -<h2 id="성능_팁">성능 팁</h2> - -<p>다음은 캔버스 성능을 개선하기 위한 팁 모음입니다.</p> - -<h3 id="캔버스에_표시되지_않는_비슷한_원시_혹은_반복_객체를_미리_그려라">캔버스에 표시되지 않는 비슷한 원시 혹은 반복 객체를 미리 그려라</h3> - -<p>만약 당신이 캔버스에 애니메이션 프레임을 그리면서 반복적인 작업이 발견된다면, 눈에 보이지 않는 숨겨진 캔버스 요소를 새로 만들고 그 캔버스에 미리 그려 넣는 방법을 고려하세요. 그렇게 하면 필요한 순간에 숨긴 캔버스에 그려진 이미지를 다시 주 캔버스 이미지에 그려넣어, 불필요한 렌더링 반복 작업을 줄여 성능 향상을 꾀할 수 있습니다.</p> - -<pre class="brush: js">myCanvas.offscreenCanvas = document.createElement('canvas'); -myCanvas.offscreenCanvas.width = myCanvas.width; -myCanvas.offscreenCanvas.height = myCanvas.height; - -myCanvas.getContext('2d').drawImage(myCanvas.offScreenCanvas, 0, 0);</pre> - -<h3 id="부동_소수점_좌표를_피하고_대신_정수를_사용하라.">부동 소수점 좌표를 피하고 대신 정수를 사용하라.</h3> - -<p>정수값들 없이 캔버스 상의 객체를 렌더링할 때 부가적인 픽셀 렌더링이 발생합니다.</p> - -<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5); -</pre> - -<p>이렇게하면 앤티 앨리어싱(anti-aliasing) 효과를 만들기 위해 브라우저에서 추가 연산을 수행해야합니다. 예제에서 이를 방지하려면 {{jsxref("Math.floor()")}}를 사용하여 {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} 호출에 사용된 모든 좌표를 반올림해야합니다.</p> - -<h3 id="drawImage에서_이미지_크기를_조정하지_마라."><code>drawImage</code>에서 이미지 크기를 조정하지 마라.</h3> - -<p>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}에서 즉시 크기를 조정하지 말고 다양한 이미지 크기를 오프스크린(offscreen) 캔버스에 캐시하십시오.</p> - -<h3 id="복잡한_장면에_여러_개의_레이어_캔버스를_사용하라.">복잡한 장면에 여러 개의 레이어 캔버스를 사용하라.</h3> - -<p>어플리케이션에서 일부 객체는 자주 이동하거나 변경해야하지만 다른 객체는 상대적으로 고정 위치에 남아야 합니다. 이런 상황에서 대응 가능한 최적화는 여러 <code><canvas></code> 엘리먼트를 사용하여 항목을 겹쳐서 만드는 것입니다.</p> - -<p>예를 들어 상단에 UI, 중간에 게임 플레이 액션, 하단에 정적 배경이있는 게임이 있다고 가정 해 보겠습니다. 이 경우 게임을 세 개의 <code><canvas></code> 레이어로 나눌 수 있습니다. UI는 사용자 입력시에만 변경되며 게임 플레이 레이어는 모든 새 프레임마다 변경되며 배경은 일반적으로 변경되지 않습니다.</p> - -<pre class="brush: html"><div id="stage"> - <canvas id="ui-layer" width="480" height="320"></canvas> - <canvas id="game-layer" width="480" height="320"></canvas> - <canvas id="background-layer" width="480" height="320"></canvas> -</div> - -<style> - #stage { - width: 480px; - height: 320px; - position: relative; - border: 2px solid black; - } - - canvas { position: absolute; } - #ui-layer { z-index: 3; } - #game-layer { z-index: 2; } - #background-layer { z-index: 1; } -</style> -</pre> - -<h3 id="큰_배경_이미지는_일반_CSS를_사용하라.">큰 배경 이미지는 일반 CSS를 사용하라.</h3> - -<p>정적 배경 이미지가있는 경우 CSS {{cssxref("background")}} 속성을 사용하여 일반 {{HTMLElement("div")}} 요소에 그릴 수 있으며 캔버스 아래에 배치 할 수 있습니다. 이렇게하면 모든 틱 마다 배경을 캔버스에 렌더링 할 필요가 없어집니다.</p> - -<h3 id="CSS_변환transform을_사용하여_캔버스_크기_조정하라.">CSS 변환(transform)을 사용하여 캔버스 크기 조정하라.</h3> - -<p><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">CSS 변환(transform)</a>은 GPU를 사용하기 때문에 더 빠릅니다. 가장 좋은 경우는 캔버스를 스케일링하지 않거나, 큰 캔버스를 축소하기보다 작은 캔버스를 확대하는 것입니다.</p> - -<pre class="brush: js">var scaleX = window.innerWidth / canvas.width; -var scaleY = window.innerHeight / canvas.height; - -var scaleToFit = Math.min(scaleX, scaleY); -var scaleToCover = Math.max(scaleX, scaleY); - -stage.style.transformOrigin = '0 0'; //scale from top left -stage.style.transform = 'scale(' + scaleToFit + ')'; -</pre> - -<h3 id="투명도를_사용하지_마라.">투명도를 사용하지 마라.</h3> - -<p>응용 프로그램이 캔버스를 사용하고 투명 배경을 필요로하지 않는 경우 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext" title="The HTMLCanvasElement.getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported."><code>HTMLCanvasElement.getContext()</code></a>를 사용하여 드로잉 컨텍스트를 만들 때 alpha 옵션을 false로 설정합니다. 이 정보는 렌더링을 최적화하기 위해 브라우저에서 내부적으로 사용할 수 있습니다.</p> - -<pre class="brush: js">var ctx = canvas.getContext('2d', { alpha: false });</pre> - -<h3 id="추가_팁들">추가 팁들</h3> - -<ul> - <li>배치 캔버스를 함께 호출합니다. 예를 들어 여러 개의 개별 선 대신 다각형 선을 그립니다.</li> - <li>불필요한 캔버스 상태 변경을 피하십시오.</li> - <li>화면의 차이만 렌더링하고 완전히 새로운 상태로 렌더링하지 마십시오.</li> - <li>가능하면 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} 속성을 사용하지 마십시오.</li> - <li>가능하면 <a href="/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_text">텍스트 렌더링</a>을 피하십시오.</li> - <li>캔버스를 지우는 여러 가지 방법을 시도해보십시오 ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. 캔버스 크기 조정).</li> - <li>애니메이션에서는 {{domxref("window.setInterval()")}} 대신 {{domxref("window.requestAnimationFrame()")}}을 사용하십시오.</li> - <li>무거운 물리 연산 라이브러리를 주의하십시오.</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Improving HTML5 Canvas Performance – HTML5 Rocks</a></li> - <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optimizing your JavaScript game for Firefox OS – Mozilla Hacks</a></li> -</ul> - -<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p> diff --git a/files/ko/web/html/canvas/tutorial/using_images/index.html b/files/ko/web/html/canvas/tutorial/using_images/index.html deleted file mode 100644 index d9aae1c993..0000000000 --- a/files/ko/web/html/canvas/tutorial/using_images/index.html +++ /dev/null @@ -1,347 +0,0 @@ ---- -title: Using images -slug: Web/HTML/Canvas/Tutorial/Using_images -tags: - - Advanced - - Canvas - - Graphics - - HTML - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Using_images ---- -<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}</div> - -<div class="summary"> -<p>지금까지 우리는 Canvas를 가지고 스스로 <a href="/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">도형</a>을 만들고 그 도형에 <a href="/ko/docs/Web/HTML/Canvas/Tutorial/Applying_styles_and_colors">스타일 적용</a> 해 보았습니다. 이미지를 사용 하는 기능은 {{HTMLElement("canvas")}}의 가장 흥미로운 기능중 하나입니다. 이 기능은 게임의 그래픽 배경이나 혹은 다이나믹한 사진 도음들을 위해 사용 될 수 있습니다. PNG,GIF, JPEG등 브라우저에서 지원되는 포맷형태라면 어떠한 외부 이미지라도 사용 될 수 있습니다. 같은 페이지 소스에서 다른 Canvas요소로 만들어진 이미지 또한 사용할수 있습니다!</p> -</div> - -<p>이미지를 캔버스로 불러오는것은 기본적으로 두 단계를 필요로 합니다:</p> - -<ol> - <li>{{domxref("HTMLImageElement")}} object를 참조하거나 다른 캔버스 요소를 소스로 사용합니다. 이는 URL을 가지고 이미지를 사용 할 수 있습니다.</li> - <li><code>drawImage()</code> function을 사용하여 캔버스에 나타난 이미지 위에 그림을 그립니다.</li> -</ol> - -<p>이 과정이 어떻게 되는지 봅시다.</p> - -<h2 id="이미지_불러오기">이미지 불러오기</h2> - -<p>canvas API는 아래의 데이터 타입을 이미지 소스로 사용 할 수 있습니다:</p> - -<dl> - <dt>{{domxref("HTMLImageElement")}}</dt> - <dd>{{HTMLElement("img")}} element와 마찬가지로, <code>Image()</code> constructor를 통해 만들어진 이미지입니다.</dd> -</dl> - -<dl> - <dt>{{domxref("SVGImageElement")}}</dt> - <dd>{{SVGElement("image")}} element 를 사용해 불러온 이미지입니다.</dd> -</dl> - - - -<dl> - <dt>{{domxref("HTMLVideoElement")}}</dt> - <dd>HTML {{HTMLElement("video")}} 요소를 이미지 소스로 사용하여 비디오의 현재 프레임을 이미지로 불러옵니다.</dd> - <dt>{{domxref("HTMLCanvasElement")}}</dt> - <dd>다른 {{HTMLElement("canvas")}} 요소를 이미지 소스로 사용합니다.</dd> -</dl> - -<p>이렇게 얻은 소스들은 {{domxref("CanvasImageSource")}}.를 사용하여 불러 올 수 있습니다.</p> - -<p>다음은 캔버스에 놓인 이미지를 사용하는 여러가지 방법입니다.</p> - -<h3 id="같은_페이지의_이미지_사용하기">같은 페이지의 이미지 사용하기</h3> - -<p>우리는 다음을 사용하여 같은 페이지에 있는 캔버스나 이미지를 참고 할 수 있습니다.</p> - -<ul> - <li>{{domxref("document.images")}} 모음</li> - <li>{{domxref("document.getElementsByTagName()")}} 메소드</li> - <li>사용 하고자 하는 특정한 이미지의 ID를 알고 있다면, {{domxref("document.getElementById()")}} 를 사용하여 특정한 이미지를 참고할 수 있습니다.</li> -</ul> - -<h3 id="다른_도메인의_이미지_사용하기">다른 도메인의 이미지 사용하기</h3> - -<p>Using the {{htmlattrxref("crossorigin", "img")}} attribute of an {{HTMLElement("img")}} element (reflected by the {{domxref("HTMLImageElement.crossOrigin")}} property), you can request permission to load an image from another domain for use in your call to <code>drawImage()</code>. If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will <a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" rel="internal">taint the canvas</a>.</p> - -<h3 id="다른_캔버스_요소_canvas_elements_사용하기">다른 캔버스 요소 (canvas elements) 사용하기</h3> - -<p>Just as with normal images, we access other canvas elements using either the {{domxref("document.getElementsByTagName()")}} or {{domxref("document.getElementById()")}} method. Be sure you've drawn something to the source canvas before using it in your target canvas.</p> - -<p>One of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas.</p> - -<h3 id="처음부터_이미지_만들기">처음부터 이미지 만들기</h3> - -<p>Another option is to create new {{domxref("HTMLImageElement")}} objects in our script. To do this, you can use the convenient <code>Image()</code> constructor:</p> - -<pre class="brush: js notranslate">var img = new Image(); // Create new img element -img.src = 'myImage.png'; // Set source path -</pre> - -<p>When this script gets executed, the image starts loading.</p> - -<p>If you try to call <code>drawImage()</code> before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). So you need to be sure to use the load event so you don't try this before the image has loaded:</p> - -<pre class="brush: js notranslate">var img = new Image(); // Create new img element -img.addEventListener('load', function() { - // execute drawImage statements here -}, false); -img.src = 'myImage.png'; // Set source path -</pre> - -<p>If you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever. It's beyond the scope of this tutorial to look at image pre-loading tactics, but you should keep that in mind.</p> - -<h3 id="데이터를_사용하여_이미지_불러오기Embedding_an_image_via_data_URL">데이터를 사용하여 이미지 불러오기Embedding an image via data: URL</h3> - -<p>Another possible way to include images is via the <a class="external" href="/en-US/docs/Web/HTTP/data_URIs" rel="external" title="http://en.wikipedia.org/wiki/Data:_URL">data: url</a>. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.</p> - -<pre class="brush: js notranslate">var img = new Image(); // Create new img element -img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=='; -</pre> - -<p>One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>, and images, making it more portable to other locations.</p> - -<p>Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.</p> - -<h3 id="비디오_프레임_사용하기Using_frames_from_a_video">비디오 프레임 사용하기Using frames from a video</h3> - -<p>You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:</p> - -<pre class="brush: js notranslate">function getMyVideo() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext) { - var ctx = canvas.getContext('2d'); - - return document.getElementById('myvideo'); - } -} -</pre> - -<p>This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a <code>CanvasImageSource</code>.</p> - -<h2 id="이미지_그리기">이미지 그리기</h2> - -<p>Once we have a reference to our source image object we can use the <code>drawImage()</code> method to render it to the canvas. As we will see later the <code>drawImage()</code> method is overloaded and has several variants. In its most basic form it looks like this:</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}</dt> - <dd>Draws the <code>CanvasImageSource</code> specified by the <code>image</code> parameter at the coordinates (<code>x</code>, <code>y</code>).</dd> -</dl> - -<div class="note"> -<p>SVG images must specify a width and height in the root <svg> element.</p> -</div> - -<h3 id="예제_기본_선_그래프">예제: 기본 선 그래프</h3> - -<p>In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's <code>load</code> event handler to execute the drawing statements. The <code>drawImage()</code> method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><html> - <body onload="draw();"> - <canvas id="canvas" width="180" height="150"></canvas> - </body> -</html> -</pre> -</div> - -<pre class="brush: js;highlight[5] notranslate">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - var img = new Image(); - img.onload = function() { - ctx.drawImage(img, 0, 0); - ctx.beginPath(); - ctx.moveTo(30, 96); - ctx.lineTo(70, 66); - ctx.lineTo(103, 76); - ctx.lineTo(170, 15); - ctx.stroke(); - }; - img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; -}</pre> - -<p>The resulting graph looks like this:</p> - -<p>{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p> - -<h2 id="비례_크기_조정">비례 크기 조정</h2> - -<p>The second variant of the <code>drawImage()</code> method adds two new parameters and lets us place scaled images on the canvas.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}</dt> - <dd>This adds the <code>width</code> and <code>height</code> parameters, which indicate the size to which to scale the image when drawing it onto the canvas.</dd> -</dl> - -<h3 id="예제_이미지를_타일처럼_배치">예제: 이미지를 타일처럼 배치</h3> - -<p>In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first <code>for</code> loop iterates over the rows. The second <code>for</code> loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.</p> - -<div class="note"> -<p><strong>Note</strong>: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.</p> -</div> - -<div class="hidden"> -<pre class="brush: html notranslate"><html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - </body> -</html> -</pre> -</div> - -<pre class="brush: js notranslate">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - var img = new Image(); - img.onload = function() { - for (var i = 0; i < 4; i++) { - for (var j = 0; j < 3; j++) { - ctx.drawImage(img, j * 50, i * 38, 50, 38); - } - } - }; - img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; -}</pre> - -<p>The resulting canvas looks like this:</p> - -<p>{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p> - -<h2 id="이미지_자르기">이미지 자르기</h2> - -<p>The third and last variant of the <code>drawImage()</code> method has eight parameters in addition to the image source. It lets us cut out a section of the source image, then scale and draw it on our canvas.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}</dt> - <dd>Given an <code>image</code>, this function takes the area of the source image specified by the rectangle whose top-left corner is (<code>sx</code>, <code>sy</code>) and whose width and height are <code>sWidth</code> and <code>sHeight</code> and draws it into the canvas, placing it on the canvas at (<code>dx</code>, <code>dy</code>) and scaling it to the size specified by <code>dWidth</code> and <code>dHeight</code>.</dd> -</dl> - -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right; height: 290px; width: 300px;">To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.</p> - -<p>Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.</p> - -<h3 id="예제_이미지_프레임_넣기">예제: 이미지 프레임 넣기</h3> - -<p>In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.</p> - -<pre class="brush: html notranslate"><html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - <div style="display:none;"> - <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"> - <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"> - </div> - </body> -</html> -</pre> - -<pre class="brush: js notranslate">function draw() { - var canvas = document.getElementById('canvas'); - var ctx = canvas.getContext('2d'); - - // Draw slice - ctx.drawImage(document.getElementById('source'), - 33, 71, 104, 124, 21, 20, 87, 104); - - // Draw frame - ctx.drawImage(document.getElementById('frame'), 0, 0); -}</pre> - -<p>We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.</p> - -<p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p> - -<p>The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use <code>drawImage()</code> to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second <code>drawImage()</code> call.</p> - -<h2 id="아트_갤러리_예제">아트 갤러리 예제</h2> - -<p>In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}} element is inserted for each image and a frame is drawn around it.</p> - -<p>In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.</p> - -<p>The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. <code>insertBefore()</code> is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).</p> - -<pre class="brush: html notranslate"><html> - <body onload="draw();"> - <table> - <tr> - <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td> - <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td> - <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td> - <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td> - </tr> - <tr> - <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td> - <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td> - <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td> - <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td> - </tr> - </table> - <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"> - </body> -</html> -</pre> - -<p>And here's some CSS to make things look nice:</p> - -<pre class="brush: css notranslate">body { - background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A; - margin: 10px; -} - -img { - display: none; -} - -table { - margin: 0 auto; -} - -td { - padding: 15px; -} -</pre> - -<p>Tying it all together is the JavaScript to draw our framed images:</p> - -<pre class="brush: js notranslate">function draw() { - - // Loop through all images - for (var i = 0; i < document.images.length; i++) { - - // Don't add a canvas for the frame image - if (document.images[i].getAttribute('id') != 'frame') { - - // Create canvas element - canvas = document.createElement('canvas'); - canvas.setAttribute('width', 132); - canvas.setAttribute('height', 150); - - // Insert before the image - document.images[i].parentNode.insertBefore(canvas,document.images[i]); - - ctx = canvas.getContext('2d'); - - // Draw image to canvas - ctx.drawImage(document.images[i], 15, 20); - - // Add frame - ctx.drawImage(document.getElementById('frame'), 0, 0); - } - } -}</pre> - -<p>{{EmbedLiveSample("Art_gallery_example", 725, 400)}}</p> - -<h2 id="이미지_비율_습성scaling_behavior_제어하기">이미지 비율 습성(scaling behavior) 제어하기</h2> - -<p>As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property to control the use of image smoothing algorithms when scaling images within your context. By default, this is <code>true</code>, meaning images will be smoothed when scaled. You can disable this feature like this:</p> - -<pre class="brush: js notranslate">ctx.mozImageSmoothingEnabled = false; -ctx.webkitImageSmoothingEnabled = false; -ctx.msImageSmoothingEnabled = false; -ctx.imageSmoothingEnabled = false; -</pre> - -<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}</p> diff --git a/files/ko/web/html/canvas/tutorial/변형/index.html b/files/ko/web/html/canvas/tutorial/변형/index.html deleted file mode 100644 index b93747b581..0000000000 --- a/files/ko/web/html/canvas/tutorial/변형/index.html +++ /dev/null @@ -1,286 +0,0 @@ ---- -title: 변형 (transformations) -slug: Web/HTML/Canvas/Tutorial/변형 -tags: - - CSS - - HTML - - 이동 - - 축소 - - 캔버스 - - 크기변형 - - 트랜스폼 - - 확대 -translation_of: Web/API/Canvas_API/Tutorial/Transformations ---- -<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</div> - -<div class="summary">이 튜토리얼에 앞서 <a href="/ko/docs/Web/HTML/Canvas/Tutorial/Drawing_shapes">canvas 그리드</a>와 <strong>좌표 공간</strong>에 대해 알아 보았습니다. 지금까지는 기본적인 그리드를 사용해 요구에 맞추어 전체 canvas의 크기를 바꾸기만 했습니다. Transformation(변형)에는 그리드를 원점에서 다른 위치로 옮기고, 회전하며, 확대·축소까지 하는 더 강력한 방법들이 있습니다.</div> - -<h2 id="Saving_and_restoring_state" name="Saving_and_restoring_state">상태(state)의 저장과 복원</h2> - -<p>변형(transformation) 메소드을 살펴보기 전에 두 가지 다른 메소드를 보도록 하지요. 일단 여러분이 더 복잡한 그림(drawings)을 그리기 시작하면 반드시 있어야 하는 메소드들입니다.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.save", "save()")}}</dt> - <dd>canvas의 모든 상태를 저장합니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.restore", "restore()")}}</dt> - <dd>가장 최근에 저장된 canvas 상태를 복원합니다.</dd> -</dl> - -<p>Canvas 상태는 스택(stack)에 쌓입니다. <code>save()</code> 메소드가 호출될 때마다 현재 drawing 상태가 스택 위로 푸시됩니다. drawing 상태는 다음과 같이 이루어집니다.</p> - -<ul> - <li>이전부터 적용된 변형(가령, <code>translate</code>과 <code>rotate</code>와 <code>scale</code> 같은 – 아래의 내용을 보세요).</li> - <li>다음 속성(attributes)의 현재 값:<br> - {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li> - <li>현재의 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths">clipping path</a>, 이것은 다음 섹션에서 다루겠습니다.</li> -</ul> - -<p>여러분은 원하는 만큼 <code>save()</code> 메소드를 많이 호출할 수 있습니다. <code>restore()</code> 메소드를 호출할 때마다 마지막으로 저장된 상태가 스택에서 튀어나와 저장된 설정들을 모두 복원시킵니다.</p> - -<h3 id="A_save_and_restore_canvas_state_example" name="A_save_and_restore_canvas_state_example"><code>save</code>와 <code>restore</code> canvas 상태(state) 예제</h3> - -<p>사각형 세트를 연이어 그려서 drawing 상태를 가진 스택이 어떻게 기능하는지를 이 예제에서 설명하고자 합니다.</p> - -<pre class="brush: js; highlight:[5,10,15,18]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - ctx.fillRect(0, 0, 150, 150); // 기본 설정으로 사각형을 그리기 - ctx.save(); // 기본 상태를 저장하기 - - ctx.fillStyle = '#09F'; // 설정 변경하기 - ctx.fillRect(15, 15, 120, 120); // 새로운 설정으로 사각형 그리기 - - ctx.save(); // 현재 상태 저장하기 - ctx.fillStyle = '#FFF'; // 설정 변경하기 - ctx.globalAlpha = 0.5; - ctx.fillRect(30, 30, 90, 90); // 새로운 설정으로 사각형 그리기 - - ctx.restore(); // 이전 상태 복원하기 - ctx.fillRect(45, 45, 60, 60); // 복원된 설정으로 사각형 그리기 - - ctx.restore(); // 초기 상태를 복원하기 - ctx.fillRect(60, 60, 30, 30); // 복원된 설정으로 사각형 그리기 -}</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<p>첫 단계로 기본 설정으로 커다란 사각형을 그립니다. 그다음에는 이 상태를 저장하고 fill color를 바꿉니다. 그런 후에 두 번째이자 크기가 더 작은 파란 사각형을 그리고 그 상태를 저장합니다. 다시 한번 일부 drawing 설정을 바꾸고 세 번째 반투명한 흰 사각형을 그립니다. </p> - -<p>여기까지는 이전 섹션에서 했던 작업과 매우 유사합니다. 하지만 일단 첫 번째 <code>restore()</code> 문을 호출하면 스택에서 맨 위의 drawing 상태가 지워지고 설정이 복원됩니다. 만일 <code>save()</code>로 저장하지 않았다면, 이전 상태로 되돌리기 위해 fill color와 투명도를 일일이 바꿔주어야 했을 것입니다. 두 속성이라서 간단했을 테지만 그보다 더 많았으면 코드가 급속히 길어졌겠지요. </p> - -<p>두 번째 <code>restore()</code>문이 호출될 때, 초기 상태( 처음으로 <code>save</code>를 호출하기 전에 설정한 상태)가 복원되고 마지막 사각형은 한번 더 검게 그려집니다.</p> - -<p>{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}</p> - -<h2 id="Translating" name="Translating">이동(translating)</h2> - -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;">우리가 살펴볼 첫 번째 변형 메소드는 <code>translate()</code>입니다. 이 메소드는 그리드에서 canvas를 원점에서 다른 점으로 옮기는 데 사용됩니다. </p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}</dt> - <dd>그리드에서 canvas와 그 원점을 이동합니다. <code>x</code>는 이동시킬 수평 거리를 가리키고, <code>y</code>는 그리드에서 수직으로 얼마나 멀리 떨어지는지를 표시합니다. </dd> -</dl> - -<p>변형하기 전에 canvas 상태를 저장하는 것이 좋습니다. 대다수의 경우, 원래 상태로 되돌리려고 역이동(reverse translation)을 시키는 것보다 <code>restore</code> 메소드를 호출하는 것이 더욱 간편합니다. 게다가 루프(loop) 안에서 이동하는 거라면 canvas 상태를 저장하고 복원하지 마세요. canvas 모서리 밖에서 그려지는 바람에 drawing의 일부를 잃어버리게 될지 모릅니다. </p> - -<h3 id="A_translate_example" name="A_translate_example"><code>translate</code> 예제</h3> - -<p>이 예제에서 canvas 원점의 이동에 관한 좋은 점을 일부 보여드리겠습니다. <code>translate()</code> 메소드를 쓰지 않으면 모든 사각형은 같은 위치 (0, 0)에 그려집니다. 또한, <code>translate()</code> 메소드는 사각형을 <code>fillRect()</code> function에서 좌표를 일일이 적으며 바꾸지 않아도 어디에나 위치할 수 있게 해줍니다. 이렇게 하면 이해하고 사용하기가 좀 더 쉽습니다. </p> - -<p> <code>draw()</code> function에서 두 개의 루프(loops)를 이용해 <code>fillRect()</code> function을 아홉 번 호출합니다. 루프마다 canvas가 이동하고 사각형이 그려지며, canvas는 원래 상태로 되돌아 갑니다. <code>fillRect()</code>로의 호출이 <code>translate()</code>에 의지해 drawing 위치를 바꾸는데 어떻게 매번 같은 좌표를 사용하는지 눈여겨 보세요.</p> - -<pre class="brush: js; highlight:[7]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - for (var i = 0; i < 3; i++) { - for (var j = 0; j < 3; j++) { - ctx.save(); - ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)'; - ctx.translate(10 + j * 50, 10 + i * 50); - ctx.fillRect(0, 0, 25, 25); - ctx.restore(); - } - } -} -</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<p>{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}</p> - -<h2 id="Rotating" name="Rotating">회전(rotating)</h2> - -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;">두 번째 변형 메소드는 <code>rotate()</code>입니다. canvas를 현재의 원점 둘레로 회전하는 데 사용합니다.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}</dt> - <dd>canvas를 현재 원점을 기준으로 라디안의 <code>angle</code> 숫자만큼 시계방향으로 회전시킵니다.</dd> -</dl> - -<p>회전의 중심점은 언제나 canvas 원점입니다. 중심점을 바꾸려면 <code>translate()</code> 메소드를 써서 canvas를 이동해야 합니다.</p> - -<h3 id="A_rotate_example" name="A_rotate_example"><code>rotate</code> 예제</h3> - -<p>이 예제는 사각형을 canvas 원점에서 먼저 회전하고 그다음에 <code>translate()</code>의 도움을 받아 사각형 자체의 중심에서 회전하는 데 <code>rotate()</code>를 사용합니다.</p> - -<div class="note"> -<p><strong>주의</strong>: 각도의 단위는 도(degree)가 아닌 라디안(radian)입니다. 변환하려면 <code>radians = (Math.PI/180)*degrees</code>.를 사용합니다.</p> -</div> - -<pre class="brush: js; highlight:[9, 23]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - // 좌측 사각형, canvas 원점에서 회전하기 - ctx.save(); - // 파란 사각형 - ctx.fillStyle = '#0095DD'; - ctx.fillRect(30, 30, 100, 100); - ctx.rotate((Math.PI / 180) * 25); - // 회색 사각형 - ctx.fillStyle = '#4D4E53'; - ctx.fillRect(30, 30, 100, 100); - ctx.restore(); - - // 우측 사각형, 사각형 중심에서 회전하기 - // 파란 사각형 그리기 - ctx.fillStyle = '#0095DD'; - ctx.fillRect(150, 30, 100, 100); - - ctx.translate(200, 80); // 사각형 중심으로 이동하기 - // x = x + 0.5 * width - // y = y + 0.5 * height - ctx.rotate((Math.PI / 180) * 25); // 회전 - ctx.translate(-200, -80); // 예전 위치로 이동하기 - - // 회색 사각형 그리기 - ctx.fillStyle = '#4D4E53'; - ctx.fillRect(150, 30, 100, 100); -} -</pre> - -<p>사각형 자체의 중심 둘레로 회전하려면 사각형의 중심으로 canvas를 옮기세요. 그런 후에 canvas를 회전하고, 그 canvas를 0, 0로 되돌려 이동합니다. 그다음에 사각형을 그리세요.</p> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="300" height="200"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<p>{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}</p> - -<h2 id="Scaling" name="Scaling">확대·축소(scaling)</h2> - -<p>다음 변형 메소드는 확대·축소(scaling)입니다. canvas 그리드에서 단위(units)를 키우거나 줄이는 데 사용합니다. 이는 벡터 모양과 비트맵(bitmaps) 요소를 축소하거나 확대해서 그리는 데 사용될 수 있습니다.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}</dt> - <dd>canvas 단위를 수평으로 x만큼, 수직으로 y만큼 크기를 확대·축소합니다. 둘의 매개 변수는 실수입니다. 1.0보다 작은 값이면 단위의 크기를 축소하고, 1.0보다 큰 값이면 단위의 크기를 확대합니다. 값이 1.0이면 단위의 크기는 그대로입니다.</dd> -</dl> - -<p>음수를 이용해서 축을 대칭 시킬 수 있습니다(가령 <code>translate(0,canvas.height); scale(1,-1);</code>로 쓰는 것처럼 말이죠. 좌측 하단 모서리에 있는 원점을 이용한, 잘 알려진 카르테시안 좌표계(Cartesian coordinate)인 것이지요.</p> - -<p>기본적으로 canvas에서 하나의 단위는 정확히 1픽셀입니다. 예를 들어 0.5라는 확대·축소 비율을 적용한다면, 결과로 나오는 단위는 0.5 픽셀이 될 것이고, 고로 모양도 절반 크기로 그려질 것입니다. 이런 방식으로 크기 비율을 2.0으로 잡으면 단위 크기가 확대되어 하나의 단위는 이제 2픽셀이 되겠지요. 이 결과로 모양은 그만큼 2배로 커집니다.</p> - -<h3 id="A_scale_example" name="A_scale_example"><code>scale</code> 예제</h3> - -<p>마지막 예제로 다양한 확대·축소 비율을 이용해 모양을 그려보겠습니다.</p> - -<pre class="brush: js; highlight:[6,11]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - // 간단하지만 확대·축소 비율을 적용한 사각형 그리기 - ctx.save(); - ctx.scale(10, 3); - ctx.fillRect(1, 10, 10, 10); - ctx.restore(); - - // 수평으로 대칭하기 - ctx.scale(-1, 1); - ctx.font = '48px serif'; - ctx.fillText('MDN', -135, 120); -} - -</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<p>{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}</p> - -<h2 id="Transforms" name="Transforms">변형(transforms)</h2> - -<p>마지막으로, 다음의 변형(transform) 메소드들은 변환 행렬(transformation matrix)로 변경할 사항을 즉시 적용할 수 있습니다.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}</dt> - <dd>인수(arguments)에 표시된 행렬을 이용해 현재 변환 행렬을 곱합니다. 변환 행렬은 다음과 같이 작성됩니다. <br> - <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math></dd> -</dl> - -<dl> - <dd>만일 인수 중에 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>가 있다면, 변환 행렬은 예외 처리하는 메소드 대신에 반드시 infinite로 표시되어야 합니다.</dd> -</dl> - -<p>이 function의 매개 변수들은 다음과 같습니다.</p> - -<dl> - <dt><code>a (m11)</code></dt> - <dd>수평으로 확대·축소하기</dd> - <dt><em><code>b (m12)</code></em></dt> - <dd>수평으로 비스듬히 기울이기</dd> - <dt><code>c (m21)</code></dt> - <dd>수직으로 비스듬히 기울이기</dd> - <dt><code>d (m22)</code></dt> - <dd>수직으로 확대·축소하기</dd> - <dt><code>e (dx)</code></dt> - <dd>수평으로 이동하기</dd> - <dt><code>f (dy)</code></dt> - <dd>수직으로 이동하기</dd> - <dt>{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}</dt> - <dd>현재 변형 상태를 단위 행렬로 재설정하고 나서 동일한 인수로 <code>transform()</code> 메소드를 적용합니다. 이는 기본적으로 현재의 변형을 무효로 한 후에 명시된 변형으로 바뀌는데, 한번에 모든 게 진행됩니다.</dd> - <dt>{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}</dt> - <dd>현재 변형 상태를 단위 행렬로 재설정합니다. 이는 <code>ctx.setTransform(1, 0, 0, 1, 0, 0);</code> 호출과 같습니다.</dd> -</dl> - -<h3 id="transform과_setTransform_예제"><code>transform</code>과 <code>setTransform</code> 예제</h3> - -<pre class="brush: js; highlight:[12,15]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - var sin = Math.sin(Math.PI / 6); - var cos = Math.cos(Math.PI / 6); - ctx.translate(100, 100); - var c = 0; - for (var i = 0; i <= 12; i++) { - c = Math.floor(255 / 12 * i); - ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')'; - ctx.fillRect(0, 0, 100, 10); - ctx.transform(cos, sin, -sin, cos, 0, 0); - } - - ctx.setTransform(-1, 0, 0, 1, 100, 100); - ctx.fillStyle = 'rgba(255, 128, 255, 0.5)'; - ctx.fillRect(0, 50, 100, 100); -} -</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="200" height="250"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<p>{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}</p> - -<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</p> diff --git a/files/ko/web/html/element/command/index.html b/files/ko/web/html/element/command/index.html deleted file mode 100644 index 8353384f2a..0000000000 --- a/files/ko/web/html/element/command/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: <command> -slug: Web/HTML/Element/command -tags: - - HTML - - Obsolete - - Reference - - Web -translation_of: Web/HTML/Element/command ---- -<div>{{obsolete_header()}}</div> - -<p><span class="seoSummary">The <strong>HTML Command element</strong> (<strong><code><command></code></strong>) represents a command which the user can invoke. Commands are often used as part of a context menu or toolbar.</span> However, they can be used anywhere on the page.</p> - -<div class="note"> -<p>The <code><command></code> element is included in the W3C specification, but not in the WHATWG specification, and browser support is nonexistent. You should use the {{HTMLElement("menuitem")}} element instead, although that element is non-standard and only supported in Edge and Firefox.</p> -</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, metadata content.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td>None, it is an {{Glossary("empty element")}}.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>The <span>start tag</span> is mandatory, but, as it is a void element, the <span>use of an end tag</span> is forbidden.</td> - </tr> - <tr> - <th scope="row">Permitted parent elements</th> - <td>{{HTMLElement("colgroup")}} only, though it can be implicitly defined as its start tag is not mandatory. The {{HTMLElement("colgroup")}} must not have a {{HTMLElement("span")}} as child.</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLCommandElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes">Attributes</h2> - -<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<dl> - <dt>{{htmlattrdef("checked")}}</dt> - <dd>Indicates whether the command is selected. Must be omitted unless the <code>type</code> attribute is <code>checkbox </code>or <code>radio</code>.</dd> - <dt>{{htmlattrdef("disabled")}}</dt> - <dd>Iindicates that the command is not available.</dd> - <dt>{{htmlattrdef("icon")}}</dt> - <dd>Gives a picture which represents the command.</dd> - <dt>{{htmlattrdef("label")}}</dt> - <dd>The name of the command as shown to the user.</dd> - <dt>{{htmlattrdef("radiogroup")}}</dt> - <dd>This attribute gives the name of the group of commands, with a <code>type</code> of <code>radio</code>, that will be toggled when the command itself is toggled. This attribute must be omitted unless the <code>type</code> attribute is <code>radio</code>.</dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd>This attribute indicates the kind of command. This can be one of three values. - <ul> - <li> - <p><code>command</code> or empty which is the default state and indicates that this is a normal command.</p> - </li> - <li> - <p><code>checkbox</code> indicates that the command can be toggled using a checkbox.</p> - </li> - <li> - <p><code>radio</code> indicates that the command can be toggled using a radio button.</p> - </li> - </ul> - </dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<pre class="brush: html"><command type="command" label="Save" - icon="icons/save.png" onclick="save()"> -</pre> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#commands')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.command")}}</p> - -<p>{{ HTMLRef }}</p> diff --git a/files/ko/web/html/element/element/index.html b/files/ko/web/html/element/element/index.html deleted file mode 100644 index be045093a5..0000000000 --- a/files/ko/web/html/element/element/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: <element> -slug: Web/HTML/Element/element -translation_of: Web/HTML/Element/element ---- -<div>{{HTMLRef}}{{obsolete_header}}</div> - -<p><span class="seoSummary">The obsolete <strong>HTML <code><element></code> element</strong> was part of the <a href="/en-US/docs/Web/Web_Components">Web Components</a> specification; it was intended to be used to define new custom DOM elements.</span> It was removed in favor of a JavaScript-driven approach for creating new custom elements.</p> - -<div class="warning"> -<p><strong>Note:</strong> This element has been removed from the specification. See <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">this</a> for more information from the editor of the specification.</p> -</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content">Transparent content</a>.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td>???</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Permitted parent elements</th> - <td>???</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes" name="Attributes">Attributes</h2> - -<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<p>The <code><element></code> element was formerly in a draft specification of <a href="http://w3c.github.io/webcomponents/spec/custom/">Custom Elements</a> but it has been removed.</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.element")}}</p> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, and {{HTMLElement("template")}}</li> -</ul> diff --git a/files/ko/web/html/global_attributes/클래스/index.html b/files/ko/web/html/global_attributes/class/index.html index d0aa89b606..d0aa89b606 100644 --- a/files/ko/web/html/global_attributes/클래스/index.html +++ b/files/ko/web/html/global_attributes/class/index.html diff --git a/files/ko/web/html/global_attributes/dropzone/index.html b/files/ko/web/html/global_attributes/dropzone/index.html deleted file mode 100644 index 15d26aad15..0000000000 --- a/files/ko/web/html/global_attributes/dropzone/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: dropzone -slug: Web/HTML/Global_attributes/dropzone -tags: - - Deprecated - - Global attributes - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/dropzone ---- -<div>{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}</div> - -<p><strong><code>dropzone</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 열거형 속성으로 한 요소에 어떤 형식의 컨텐츠가 <a href="/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>를 이용해 드랍될 수 있는지를 나타냅니다. 이 속성은 다음의 값을 가질 수 있습니다:</p> - -<ul> - <li><code>copy</code>, 드랍할 때 드래그되는 요소의 사본이 생성됨을 나타냅니다.</li> - <li><code>move</code>, 드래그되는 요소가 새로운 위치로 이동할 것임을 나타냅니다.</li> - <li><code>link</code>, 드래그되는 데이터에 대한 링크가 생성될 것임을 나타냅니다.</li> -</ul> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("html.global_attributes.dropzone")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> -</ul> diff --git a/files/ko/web/html/html5/index.html b/files/ko/web/html/html5/index.html deleted file mode 100644 index 2d64ce56d6..0000000000 --- a/files/ko/web/html/html5/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: HTML5 -slug: Web/HTML/HTML5 -translation_of: Web/Guide/HTML/HTML5 ---- -<p><strong>HTML5</strong>는 HTML를 정의하는 표준화에 있어서의 최신 표준 명세입니다. <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML5 명세</a>는 아직도 표준 지정이 완료되지 않았고 변경이 계속 진행 중입니다. 하지만, Mozilla 및 다른 웹 브라우저 벤더는 이미 사양 중 많은 부분에 대한 구현을 시작하고 있습니다. 여기에 링크 하고 있는 문서에서는 <a class="external" href="http://www.mozilla.com/en-US/firefox/" title="http://www.mozilla.com/en-US/firefox/">Firefox</a> 및 <a href="/ko/List_of_Mozilla-Based_Applications" title="ko/List of Mozilla-Based Applications">다른 많은 제품</a>으로 사용되어 있는 Mozilla의 <a href="/ko/Gecko" title="ko/Gecko">Gecko</a> 엔진에 있어서 이미 기술 지원되어 있는 HTML5의 기능에 대해 설명하고 있습니다. 각각의 기능을 기술 지원하고 있는 Gecko 버전 및 다른 브라우저 엔진에 대해서는 지정된 페이지를 참조해 주십시오.</p> - -<p>(<a href="/ko/HTML/HTML5/HTML5_Thematic_Classification" title="ko/HTML/HTML5/HTML5 Thematic Classification">HTML5의 문서에 대한 다른 분류</a>도 참고하세요.)</p> - -<h2 id="HTML5_소개">HTML5 소개</h2> - -<dl> - <dt><a href="/ko/HTML/HTML5/Introduction_to_HTML5" title="ko/HTML/Introduction to HTML5"><strong>HTML5의 소개</strong></a></dt> - <dd>이 문서에서는 웹 디자인이나 웹 애플리케이션으로 HTML5 이용 방법을 소개합니다.</dd> -</dl> - -<h2 id="HTML5의_요소">HTML5의 요소</h2> - -<dl> - <dt><a href="/ko/HTML/HTML5/HTML5_Tags_List" title="ko/HTML/HTML5/HTML5 Tags List"><strong>HTML5 요소·태그의 목록</strong></a></dt> - <dd>현재 사양 초안에 근거한 HTML5 요소(태그)의 목록표입니다.</dd> - <dt><a href="/Ja/Using_HTML5_audio_and_video" title="ko/Using_audio_and_video_in_Firefox">오디오/비디오 사용하기</a></dt> - <dd>Firefox 3.5이상에서 HTML5의 {{ HTMLElement("audio") }} 요소와 {{ HTMLElement("video") }} 요소의 기술 지원이 추가되었습니다.</dd> - <dt><a href="/ko/HTML/Forms_in_HTML" title="ko/HTML/HTML5/Forms in HTML5">HTML5 웹 폼양식</a></dt> - <dd>HTML5에서는 웹 폼양식이 개선됩니다. {{ HTMLElement("input") }} 요소의 {{ htmlattrxref("type", "input") }} 속성에 새로운 값이나 새 요소인 {{ HTMLElement("output") }} 요소 등이 새롭게 추가되었습니다.</dd> - <dt><a href="/ko/Sections_and_outlines_of_an_HTML5_document" title="ko/Sections and Outlines of an HTML5 document">HTML5 섹션과 아웃라인</a></dt> - <dd>HTML5 에서는 아웃라인과 섹션에 관한 요소가 추가되었습니다.: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("hgroup") }}.</dd> - <dt>{{ HTMLElement("mark") }} 요소</dt> - <dd>mark 요소는 텍스트중에서의 특별한<em> 관련성</em>을 강조시키기 위해서 이용합니다.</dd> - <dt>{{ HTMLElement("figure") }} 및 {{ HTMLElement("figcaption") }} 요소</dt> - <dd>주로 사용된 문장과 느슨하게 연결된, 최종 캡션을 수반한 도식이나 그림을 추가할 수 있습니다.</dd> -</dl> - -<h3 id="Canvas_기술_지원">Canvas 기술 지원</h3> - -<dl> - <dt><a href="/ko/Canvas_tutorial" title="https://developer.mozilla.org/ko/Canvas_tutorial">Canvas 튜토리얼</a></dt> - <dd>새로운 요소인 {{ HTMLElement("canvas") }} 요소와 그것을 사용하여 Firefox에 그래프나 다른 객체를 재생 하는 방법에 대해 배웁니다.</dd> - <dt><a href="/ko/Drawing_text_using_a_canvas" title="ko/Drawing_text_using_a_canvas"><code>canvas</code> 요소의 HTML5 text API</a></dt> - <dd>{{ HTMLElement("canvas") }} 요소가 HTML5 text API를 기술 지원합니다.</dd> -</dl> - -<h2 id="웹_애플리케이션_기능">웹 애플리케이션 기능</h2> - -<dl> - <dt><a href="/ko/HTML/Using_the_application_cache" title="ko/Offline_resources_in_Firefox">Firefox 오프 라인 자원</a></dt> - <dd>Firefox는 HTML5의 오프 라인 자원 사양을 완전하게 구현 및 지원하고 있습니다. 대다수 브라우저의 몇 가지 레벨로 오프 라인 자원을 기술 지원하고 있습니다.</dd> - <dt><a href="/ko/Online_and_offline_events" title="ko/Online_and_offline_events">Online 이벤트와 Offline 이벤트</a></dt> - <dd>Firefox 3은 WHATWG의 online 및 offline 이벤트를 기술 지원하고 있습니다. 이러한 이벤트는 애플리케이션이나 확장 기능에 현재 인터넷 접속 상태의 연결 여부를 확인할 수 있습니다.</dd> - <dt><a href="/ko/DOM/Storage" title="ko/DOM/Storage">WHATWG 클라이언트 사이드 세션 스토리지 및 영구 스토리지 (DOM Storage)</a></dt> - <dd>클라이언트 사이드 세션 스토리지와 영구 스토리지에 의하고 웹 애플리케이션이 구조화 데이터를 클라이언트 측에 저장할 수 있도록 합니다.</dd> - <dt><a href="/ko/HTML/Content_Editable" title="ko/HTML/Content Editable"><code>contentEditable</code> 속성： 웹 사이트 및 위키 편집 용이성</a></dt> - <dd>HTML5 에서는 <code>contentEditable</code> 속성이 표준화 되었습니다. 이 기능에 대해 살펴봅니다.</dd> - <dt><a href="/ko/Using_files_from_web_applications" title="ko/Using_files_from_web_applications">로컬 파일 사용하기</a></dt> - <dd>새로운 HTML5 File API 지원이 Gecko에 추가되었습니다. 이 API는 웹 애플리케이션이 사용자가 선택한 로컬 파일에 접근 하는 것을 가능하게 합니다. 이것에는 <a href="/ko/HTML/Element/Input#attr-type" title="ko/HTML/Element/input#attr-type"><strong>type</strong></a> 속성의 값에 <code>file</code>를 지정한 <code>{{ HTMLElement("input") }}</code> 요소에 새롭게 추가된 <a href="/ko/HTML/Element/Input#attr-multiple" title="ko/HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 속성을 이용하는 것으로 복수 파일을 선택할 수 있게 되는 기술 지원가 포함되어 있습니다.</dd> -</dl> - -<h2 id="DOM_주요_기능">DOM 주요 기능</h2> - -<dl> - <dt><a href="/ko/DOM/document.getElementsByClassName" title="ko/DOM/document.getElementsByClassName">getElementsByClassName</a></dt> - <dd>Document 및 Element 노드에 있어서의 <code>getElementsByClassName</code> 메소드가 지원되어 있습니다. 이러한 메소드를 이용하는 것으로 지정한 클래스 또는 지정한 클래스의 목록를 가지는 요소를 찾아낼 수 있습니다.</dd> - <dt><a href="/Ja/DragDrop/Drag_and_Drop" title="ko/DragDrop/Drag_and_Drop">드래그 앤 드롭</a></dt> - <dd>HTML5의 드래그앤 드롭 API는 웹 사이트간에 있어서의 아이템의 끌어오기 및 놓기 기능을 지원합니다. 또, 확장 기능이나 Mozilla 기반의 애플리케이션으로 사용할 수 있는 단순한 API 도 제공합니다.</dd> - <dt><a href="/ko/Focus_management_in_HTML" title="ko/Focus_management_in_HTML">HTML 내 포커스 관리</a></dt> - <dd>HTML5가 새로운 <code>activeElement</code> 속성과 <code>hasFocus</code> 속성이 지원되어 있습니다.</dd> - <dt><a href="/ko/Web-based_protocol_handlers" title="ko/Web-based_protocol_handlers">웹 기반 프로토콜 핸들러</a></dt> - <dd><code>navigator.registerProtocolHandler()</code>메소드를 사용하여, 웹 애플리케이션을 프로토콜 핸들러로서 등록할 수 있게 되었습니다.</dd> -</dl> - -<h2 id="HTML_파서">HTML 파서</h2> - -<p>Gecko의 <a href="/ko/HTML/HTML5/HTML5_Parser" title="ko/HTML/HTML5/HTML5 parser">HTML5 표준 파서</a>(HTML 문서를 DOM으로 변환하는 엔진)는 2010 년 3 월에 기본적으로 사용됩니다(Gecko 1.9.2 / Firefox 3.6에 탑재되어 있는 시점의 HTML5 파서는 매우 불안정한 버전이며 실제 이용하는 것을 추천 하지 않습니다).{{ fx_minversion_inline(4.0) }}</p> - -<h2 id="추가_변경사항">추가 변경사항</h2> - -<ul> - <li>HTML 문서에 있어서의 <code>localName</code> 및 <code>namespaceURI</code>는 XML 문서 때와 같은 행동을 하게 되었습니다. 예를 들면, <code>localName</code>는 소문자를 돌려주어, HTML 요소의 <code>namespaceURI</code>는 <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="external nofollow" title="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"</code>를 돌려줍니다.</li> - <li>페이지 URI 문서 단편 식별자 ("#" (해시) 문자에서 후의 부분)가 변경되었을 때, 새로운 <code>hashchange</code> 이벤트가 페이지에 보내집니다. 자세한 것은 <code><a href="/ko/DOM/window.onhashchange" title="ko/DOM/window.onhashchange">window.onhashchange</a></code>를 참조해 주십시오.</li> - <li><code>class</code> 속성을 보다 간단하게 취급할 수 있도록 HTML5의 <code><a href="/ko/DOM/element.classList" title="ko/DOM/element.classList">element.classList</a></code>이 기술 지원되었습니다.</li> - <li>문서에 즉시 생성되는 이벤트에 응하는 <code><a href="/ko/DOM/document.onreadystatechange" title="ko/DOM/document.onreadystatechange">document.onreadystatechange</a></code>와 <code><a href="/ko/DOM/document.readyState" title="ko/DOM/document.readyState">document.readyState</a></code>가 기술 지원되었습니다.</li> - <li>표시에 관련하는 속성으로 지정한 색은 HTML5의 사양에 따라서 해석됩니다.</li> -</ul> - -<h2 id="HTML5의_일부로서_포함된_기술">HTML5의 일부로서 포함된 기술</h2> - -<p>아래 기술들은 "HTML5"의 광의의 영역에 포함되어 있습니다만 W3C의 HTML5 사양에 없는 것들입니다.</p> - -<ul> - <li><a href="/ko/WebGL" title="ko/WebGL">WebGL</a></li> - <li><a href="/ko/DOM/FileReader" title="ko/DOM/FileReader">FileReader</a></li> - <li><a href="/ko/DOM/XMLHttpRequest" title="ko/XMLHttpRequest">XMLHttpRequest</a></li> - <li><a href="/ko/DOM/Locating_DOM_elements_using_selectors" title="ko/DOM/Locating DOM elements using selectors">querySelector(All)</a></li> - <li><a href="/Ja/Using_geolocation" title="ko/Using geolocation">Geolocation</a></li> - <li><a href="/ko/JavaScript/ECMAScript_5_support_in_Mozilla" title="ko/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript5</a></li> - <li><a href="/ko/CSS/CSS3" title="CSS3">CSS3</a></li> - <li><a href="/ko/XBL2_specification_(external)" title="ko/XBL2 specification (external)">XBL2</a></li> - <li><a href="/ko/DOM/Using_web_workers" title="ko/Using web workers">Web Workers</a></li> - <li><a href="/ko/WebSockets" title="https://developer.mozilla.org/ko/WebSockets">Web Sockets</a></li> - <li>JavaScript의 고속화</li> -</ul> - -<h2 id="관련_문서">관련 문서</h2> - -<p>웹 발자에게 영향이 있는 Firefox 출시 버전에 따른 변경점：</p> - -<ul> - <li><a href="/ko/Firefox_12_for_developers" title="Firefox 12 for developers">Firefox 12</a></li> - <li><a href="/ko/Firefox_11_for_developers" title="Firefox 11 for developers">Firefox 11</a></li> - <li><a href="/ko/Firefox_10_for_developers" title="Firefox 10 for developers">Firefox 10</a></li> - <li><a href="/ko/Firefox_9_for_developers" title="Firefox 9 for developers">Firefox 9</a></li> - <li><a href="/ko/Firefox_8_for_developers" title="Firefox 8 for developers">Firefox 8</a></li> - <li><a href="/ko/Firefox_7_for_developers" title="Firefox 7 for developers">Firefox 7</a></li> - <li><a href="/ko/Firefox_6_for_developers" title="Firefox 6 for developers">Firefox 6</a></li> - <li><a href="/ko/Firefox_5_for_developers" title="Firefox 5 for developers">Firefox 5</a></li> - <li><a href="/ko/Firefox_4_for_developers" rel="internal">Firefox 4 </a></li> - <li><a href="/ko/Firefox_3.6_for_developers" title="ko/Firefox 3.6 for developers">Firefox 3.6 </a></li> - <li><a href="/Ja/Firefox_3.5_for_developers" title="ko/Firefox 3.5 for developers">Firefox 3.5 </a></li> - <li><a href="/ko/Firefox_3_for_developers" title="ko/Firefox 3 for developers">Firefox 3 </a></li> - <li><a href="/ko/Firefox_2_for_developers" title="ko/Firefox 2 for developers">Firefox 2 </a></li> - <li><a href="/ko/Firefox_1.5_for_developers" title="ko/Firefox 1.5 for developers">Firefox 1.5</a></li> -</ul> diff --git a/files/ko/web/html/html5/introduction_to_html5/index.html b/files/ko/web/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 8b9698dc53..0000000000 --- a/files/ko/web/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: HTML5 소개 -slug: Web/HTML/HTML5/Introduction_to_HTML5 -tags: - - HTML5 - - 웹개발 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a>는 HTML 표준의 가장 새로운 버전입니다. HTML5를 통해 리치 미디어의 기술 지원 뿐만이 아니라, 사용자 및 로컬 데이터를 웹 서버 사이에 보다 간편하면서도 효과적으로 교환할 수 있는 웹 애플리케이션을 개발하기 위한 확장 기술 지원를 제공하는 새로운 기능도 제공됩니다.</p> - -<p>HTML5는 아직 표준 제정 단계에 있기 때문에 현재 사양에 대한 변경이 있을 것입니다. 따라서 모든 브라우저에 HTML5 기능 모든 것이 기술 지원되어 있는 것은 아닙니다. 하지만, Gecko (그리고 이를 사용하는 Firefox)에는 훌륭하게 HTML5의 최초 단계 기술 지원이 포함되어 있어 새로운 기능에 대한 대처를 계속하고 있습니다. Gecko는 버전 1.8.1에서 HTML5의 기능을 기술 지원하기 시작했습니다. <a href="/ko/HTML/HTML5" title="ko/HTML/HTML5">HTML5의 메인 페이지</a>에 Gecko가 기술 지원하고 있는 HTML5기능 목록이 있습니다. 여러 브라우저의 기술 지원 상황의 상세한 정보에 대해서는 <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a> 웹 사이트를 참조해 주십시오.</p> - -<h2 id="HTML5_DOCTYPE">HTML5 DOCTYPE</h2> - -<p>HTML5의 DOCTYPE는 매우 간단합니다. HTML 콘텐트로 HTML5를 사용하는 것을 나타내려면 단순하게 아래와 같이 합니다：</p> - -<pre><!DOCTYPE html> -</pre> - -<p>이 DOCTYPE은 현재 HTML5를 기술 지원하고 있지 않는 브라우저조차, HTML의 호환성을 유지함과 동시에 HTML5의 규격 대로 기능이 지원되지 않더라도 신기능을 무시하는 것을 의미하는 표준 모드로 전환합니다.</p> - -<p>이것은 이전의 doctype들 보다 훨씬 간단하고 짧으며, 기억하기 쉽고, 다운로드 받아야 하는 바이트의 양을 줄여줍니다.</p> - -<h2 id="<meta_charset>으로_문자셋_정의하기"><code><meta charset>으로 문자셋 정의하기</code></h2> - -<p>보통 문서의 처음에는 사용된 문자셋을 정의합니다. 이전 버전의 HTML에서는 매우 복잡한 {{HTMLElement("meta")}} 엘리먼트를 통해서 문자셋을 정의했습니다. 이제는 이렇게 간단해졌습니다.</p> - -<pre class="brush:html; line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> - -<p><code>이것을 {{HTMLElement("head") }} 뒤에 가져다 놓으세요. 몇몇 브라우저는 HTML에 기대했던것과 다른 문자셋이 정의되어 있으면 문서를 다시 해석합니다. 또한, 여러분이 현재 다른 문자셋을 사용하고 있다면 UTF-8로 여러분 웹 페이지의 문자셋을 변경하는것을 추천합니다. 이것이 여러 스크립트를 사용한 문서의 문자 처리를 단순화시켜줍니다.</code></p> - -<p><code>HTML5는 ASCII와 호환되며 적어도 8비트의 크기를 가지는 문자셋만을 지원합니다. 이렇게 함으로서 보안을 강화하고 특정형태의 공격을 방지할수 있습니다.</code></p> - -<h2 id="새로운_HTML5_해석기의_사용">새로운 HTML5 해석기의 사용</h2> - -<p>HTML5에서는 마크업의 의미를 분석하는 해석 룰이 더 정확하게 정의 되었습니다. HTML5가 나오기 전까지는 단지 유효한 마크업의 의미만 정의되었기 때문에 마크업에 작은 에러라도 있을 때 문서를 어떻게 해석해야 할지는 정의되지 않았습니다. 결국 모든 브라우저가 서로 다르게 작동했습니다. 이제는 그렇지 않습니다. 이제 마크업에 에러가 있을 때는 모든 호환 브라우저가 똑같이 반응해야 합니다.</p> - -<p>이 요구사항이 웹 개발자들의 삶을 꽤 편하게 해줍니다. 이제 모든 최신 브라우저가 HTML5의 해석 룰을 따르지만 HTML5-비호환 브라우저들도 여전히 사용되고 있습니다. 유효한 마크업을 사용하면 읽기 편하고 유지보수에 좋을 뿐 아니라, 여러 오래된 브라우저에서 호환되지 않을 가능성을 매우 줄여주기 때문에 이를 매우 추천합니다.</p> - -<p>걱정하지 마세요 — 여러분 웹사이트를 손 댈 필요는 없습니다 — 웹브라우저 개발자들이 여러분을 위해 모두 준비해놓았습니다!</p> diff --git a/files/ko/web/html/html5_문서의_섹션과_윤곽/index.html b/files/ko/web/html/html5_문서의_섹션과_윤곽/index.html deleted file mode 100644 index 87cae41ebd..0000000000 --- a/files/ko/web/html/html5_문서의_섹션과_윤곽/index.html +++ /dev/null @@ -1,367 +0,0 @@ ---- -title: HTML 구획과 개요 사용하기 -slug: Web/HTML/HTML5_문서의_섹션과_윤곽 -tags: - - HTML - - HTML5 -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -<div>{{HTMLSidebar}}</div> - -<div class="warning"> -<p><strong>중요</strong>: 개요 알고리즘은 W3C의 최종 명세에 포함된 적이 없고, 브라우저와 보조 기술 중 알고리즘을 구현한 경우도 없습니다. 따라서 <a href="https://html.spec.whatwg.org/multipage/sections.html#outline">개요</a> 알고리즘을 사용해 사용자에게 문서 구조를 나타내서는 <strong>안됩니다</strong>. 문서 작성자는 대신 제목 <a href="https://html.spec.whatwg.org/multipage/sections.html#rank">순위</a>(<a href="https://html.spec.whatwg.org/multipage/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1-h6</a>)를 사용해 문서 구조를 나타내는 것이 좋습니다.</p> -</div> - -<p>HTML5 표준 명세서에서는 웹 개발자가 표준화된 의미론적 체계를 가지고 웹 문서의 구조를 표현할 수 있게 해주는 몇 개의 새로운 요소들을 선보였습니다. 이 문서에서는 이 새로운 요소들과 문서의 아웃라인을 의도한 대로 정의하는 법을 설명하고 있습니다.</p> - -<p>예를 들면 <div>는 콘텐츠에 대한 어떠한 내용도 포함하지 않지만, <figcaption>은 콘텐츠에 어떤 내용을 포함하고 있는지를 명확하게 포함합니다.</p> - -<p>새로운 의미론적 요소들은 HTML5에서 웹사이트의 내용을 구분하는 것을 향상시키기 위해 추가되었습니다. 개발자들은 표시된 목적 이외의 용도로 의미론적 요소를 사용하지 않도록 하는 것이 중요합니다.</p> - -<h2 id="HTML4에서의_문서_구조">HTML4에서의 문서 구조</h2> - -<p><span style="line-height: inherit;">문서의 구조, 즉 <code><body></code>와 <code></body></code> 사이에 있는 것의 의미론적 구조는, 페이지 내용을 사용자에게 전달하는 데 중요한 토대가 됩니다.</span> HTML4에선 일종의 섹션과 그 하위 섹션으로 구분하는 개념을 써서 문서의 구조를 표현합니다. 섹션은 HTML 구획({{HTMLElement("div")}})요소와 함께 그 안에 있는 제목을 정의하는 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, 혹은 {{HTMLElement("h6")}})를 써서 정의됩니다. 이런 HTML 구획 요소와 HTML 제목 요소의 관계가 문서의 구조와 그 아웃라인을 결정짓게 됩니다.</p> - -<p>그래서 다음과 같은 마크업은:</p> - -<pre class="brush: xml"><div class="section" id="forest-elephants"> - <h1>둥근귀코끼리</h1> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다. - ...섹션 내용 진행 중... - <div class="subsection" id="forest-habitat"> - <h2>서식지</h2> - <p><span style="color: #323333; font-family: courier new;">둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</span> - ...하위 섹션 내용 진행 중... - </div> -</div></pre> - -<p><span style="line-height: inherit;">다음과 같은 문서 아웃라인을 가지게 됩니다:</span></p> - -<pre>1. 둥근귀코끼리 - 1.1 서식지 -</pre> - -<p>새로운 섹션을 정의할 때 {{HTMLElement("div")}} 요소가 꼭 필요한 것은 아닙니다. 단순히 HTML 제목 요소만 있으면 새로운 섹션이 시작됨을 자동으로 암시해 줍니다. 그래서,</p> - -<pre class="brush: xml"><h1>둥근귀코끼리</h1> -<p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다. -...섹션 내용 진행 중... -<h2>서식지</h2> -<p>둥근귀<span style="color: #323333; font-family: courier new;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</span> -...하위 섹션 내용 진행 중... -<h2>먹이</h2> -<h1>몽골 게르빌루스쥐</h1></pre> - -<p>앞의 문서는 다음과 같은 아웃라인을 가지게 됩니다:</p> - -<pre>1. 둥근귀코끼리 - 1.1 서식지 - 1.2 먹이 -2. 몽골 게르빌루스쥐 -</pre> - -<h2 id="HTML5에서_해결한_문제들">HTML5에서 해결한 문제들</h2> - -<p>HTML4에서의 문서 구조에 대한 정의와 여기에 내포된 암묵적인 문서 알고리듬은 매우 투박해서 다음과 같은 많은 문제점을 가지고 있습니다:</p> - -<ol> - <li>의미론적으로 섹션을 정의하는데 {{HTMLElement("div")}}을 사용하면, 특히나 <strong>class</strong> 속성에 어떠한 값도 지정하지 않았을 땐, 문서의 아웃라인을 파악하는 알고리듬을 자동화하는 <font color="#000000">것은 불가능합니다</font>("사용된 {{HTMLElement("div")}}이 문서 아웃라인에 포함되는가, 만약 포함된다면 섹션인가 아니면 하위 섹션인가?" 혹은 "오로지 스타일 목적으로만 쓰인 표상적인 {{HTMLElement("div")}}일 뿐인가?"). 바꾸어 말하면, HTML4 표준 명세서에는 무엇이 섹션이고 어떻게 그 범위를 구분 짓는지에 대해 매우 모호하게 정의해 놓았습니다. 문서의 윤곽을 자동으로 생성하는 작업은 매우 중요하며, 특히나 <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">보조 장비에 사용되는 기술</a>에선 더욱 그러한데, 이를 이용해서 파악된 문서의 구조를 바탕으로 사용자에게 정보를 전달해 주게 된다는 것을 고려하면 그 중요성은 더욱 명확해집니다. HTML5에선 HTML 섹션 요소로 새롭게 {{HTMLElement("section")}} 요소를 도입하면서 문서 아웃라인 알고리듬에서 {{HTMLElement("div")}} 요소의 사용 필요성을 없애버렸습니다.</li> - <li>여러 문서를 하나로 합치는 일은 복잡하고 어려운 일입니다: 주 문서에 어떤 하위 문서를 추가할 때 원래 문서의 아웃라인을 온전히 보전하려면 HTML 제목 요소의 계급을 고쳐야만 하는 일이 생깁니다. HTML5에서 새로 소개된 섹션을 구분 짓는 요소들({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} 그리?고 {{HTMLElement("aside")}})은, 내부에 포함된 제목 요소와 관계없이, 항상 그들이 속한 가장 가까운 상위 섹션의 바로 밑 하위 섹션으로 자리 잡게 되면서 이 문제를 해결하였습니다.</li> - <li>HTML4에선 모든 섹션이 문서 아웃라인에 영향을 주게 됩니다. 하지만 문서?가 언제나 그렇게 선형적이지만은 않지요. 문서에는 가령 광고 표시 문구를 담고 있는 구역이나 설명 문구를 담은 구획처럼 주 내용의 흐름에는 포함되진 않지만, 간접적으로 연관되는 정보를 가진 특별한 섹션이 포함될 수도 있습니다. HTML5에선 이렇게 문서의 주요 내용 윤곽에는 포함되지 않는 {{HTMLElement("aside")}} 요소가 소개되었습니다.</li> - <li>반복되는 얘기지만, HTML4에선 모든 섹션이 문서의 아웃라인에 포함되기 때문에 로고나 메뉴, 문서의 목차, 혹은 저작권 정보나 법률적 고지처럼 특정 문서가 아닌 사이트 전체와 관련된 정보를 포함하는 섹션을 표현할 수가 없었습니다. 이러한 목적으로, HTML5에서 다음과 같은 세 가지 특수 목적의 섹션 요소를 소개하였습니다: 예를 들어 콘텐츠의 목차처럼 링크들의 모음을 감싸줄 때 쓰는 {{HTMLElement("nav")}} 그리고 사이트와 관련된 정보 표시를 위한 {{HTMLElement("footer")}}와 {{HTMLElement("header")}}가 있습니다.</li> -</ol> - -<p>좀 더 포괄적으로 말하면 HTML5에선 문서를 구획하고 이들에게 제목을 부여하는 방법이 좀 더 세밀해지면서, 문서의 아웃라인 파악이 좀 더 예측 가능해지고 덩달아 이를 이용한 브라우저를 통해서 사용자 경험도 향상됩니다.</p> - -<h2 id="HTML5_문서_아웃라인_알고리즘">HTML5 문서 아웃라인 알고리즘</h2> - -<p>HTML이 섹션과 문서 아웃라인을 다루는 방식에 기반한 알고리즘을 생각해 보겠습니다.</p> - -<h3 id="HTML5에서의_섹션_정의">HTML5에서의 섹션 정의</h3> - -<p>우선 {{HTMLElement("body")}} 요소 안에 배치된 콘텐츠는 모두 적어도 하나의 섹션 안에 포함되어 자리하게 됩니다. 그리고 HTML5에서 섹션은 서로 중첩되서 표시될 수도 있습니다. {{HTMLElement("body")}} 요소에 의해 정의된 주요 섹션을 제외하고, 모든 섹션은 명시적으로나 혹은 은연중 자동으로 구분되어 정의될 수 있습니다. 명시적으로 정의되는 섹션은 {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, 그리고 {{HTMLElement("nav")}} 태그들 안에 포함된 콘텐츠입니다.</p> - -<div class="note">각 섹션은 자기들만의 제목 계층을 가질 수 있습니다. 그래서, 중첩된 섹션이라도 {{HTMLElement("h1")}} 제목을 가질 수 있습니다. <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽#HTML5.EC.97.90.EC.84.9C_.EC.A0.9C.EB.AA.A9_.EC.A7.80.EC.A0.95.ED.95.98.EB.8A.94_.EB.B2.95" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">HTML5에서 제목 지정하는 법</a>을 보십시오.</div> - -<p>보기:</p> - -<pre class="brush:xml"><section> - <h1>둥근귀코끼리</h1> - <section> - <h1>소개</h1> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p> - </section> - <section> - <h1>서식지</h1> - <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p> - </section> - <aside> - <p>광고 구역</p> - </aside> -</section> -<footer> - <p>(c) 2013 회사 이름</p> -</footer></pre> - -<p>위에 있는 HTML 코드에선 가장 윗 단계에 두 개의 섹션이 정의되었습니다:</p> - -<pre><span style="color: red;"><section> - <h1></span>둥근귀<span style="color: red;">코끼리</h1> - <section> - <h1>소개</h1> - <p>이번 섹션에선, 잘 알려지지 않은 </span>둥근귀<span style="color: red;">코끼리에 관해 알아보겠습니다.</p> - </section> - <section> - <h1>서식지</h1> - <p></span>둥근귀<span style="color: red;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p> - </section> - <aside> - <p>광고 구역</p> - </aside> -</section></span> - -<span style="color: green;"><footer> - <p>(c) 2013 회사 이름?</p> -</footer></span></pre> - -<p>첫 번째 섹션에선 세 개의 하위 섹션이 존재합니다:</p> - -<pre><section> - <h1>둥근귀코끼리</h1> - - <span style="color: red;"><section> - <h1>소개</h1> - <p>이번 섹션에선, 잘 알려지지 않은 </span>둥근귀<span style="color: red;">코끼리에 관해 알아보겠습니다.</p></span> -<span style="color: red;"> </section></span> - - <span style="color: green;"><section> - <h1>서식지</h1> - <p></span>둥근귀<span style="color: green;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p> - </section></span> - - <span style="color: blue;"><aside> - <p>광고 구역</p> - </aside></span> -</section> - -<footer> - <p>(c) 2013 회사 이름</p> -</footer></pre> - -<p>그래서 다음과 같은 구조를 가지게 됩니다:</p> - -<pre>1. 둥근귀코끼리 - 1.1 소개 - 1.2 서식지 - 1.3 광고 구역 (aside) -</pre> - -<h3 id="HTML5에서_제목_지정하는_법">HTML5에서 제목 지정하는 법</h3> - -<p>비록 명시적 HTML 섹션 요소가 문서의 전체 구조를 정해주기는 하지만, 그 아웃라인을 좀 더 명확하게 표현하려면 제목의 사용도 중요합니다. 기본 규칙은 단순합니다: 처음 쓰인 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} 중 하나)가 해당 섹션의 제목으로 정해집니다.</p> - -<p><span style="line-height: inherit;">제목 요소엔 요소 이름에 붙은 숫자를 가지고 <em>계급</em>을 매기는데,</span> {{HTMLElement("h1")}}이 <em>최상위</em> 계급이며 {{HTMLElement("h6")}}는 <em>최하위</em> 계급이 됩니다. 제목 간 계급의 상대적 등급은 오로지 같은 섹션 안에서만 중요해집니다; 이 말은 섹션의 구조가 문서의 아웃라인을 결정짓는 데 중요한 변수로 작용하지만, 섹션 안에서 사용된 제목의 계급은 여기에 아무런 관련이 없다는 얘기입니다. 예를 들어, 아래와 같은 코드를 살펴보면:</p> - -<pre class="brush:xml"><section> - <h1>둥근귀코끼리</h1> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. - ...계속 된 섹션 내용... - <section> - <h2>서식지</h2> - <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다. - ...계속 된 하위 섹션 내용... - </section> -</section> -<section> - <h3>몽골 게르빌루스쥐</h3> - <p>이번 섹션에선, 잘 알려진 몽골 게르빌루스쥐에 관해 알아보겠습니다. - ...계속 된 섹션 내용... -</section></pre> - -<p>이는 다음과 같은 아웃라인을 갖게 됩니다:</p> - -<pre>1. 둥근귀코끼리 - 1.1 서식지 -2. 몽골 게르빌루스쥐</pre> - -<p>여기서 쓰인 제목 요소의 계급(위 보기에선 처음 최상위 섹션의 {{HTMLElement("h1")}}, 그 하위 섹션의 {{HTMLElement("h2")}} 그리고 두 번째 최상위 섹션에서 사용된 {{HTMLElement("h3")}})은 중요하지 않다는 점을 주목하십시오. (명시적으로 정의된 섹션의 제목으로 어떠한 계급을 써도 상관은 없지만, 이 방식이 권장되는 것은 아닙니다.)</p> - -<h3 id="은연중_자동으로_정의되는_섹션">은연중 자동으로 정의되는 섹션</h3> - -<p>HTML5에서 소개된 명시적 섹션 요소들만이 문서의 아웃라인을 정의하는 데 <span style="line-height: inherit;">절대적으로 </span><span style="line-height: inherit;">필요한 요소는 아니므로, 기존 웹에서 지배적으로 사용되는 HTML4와의 호환성을 지키려는 노력의 일환으로, 이들 없이도 섹션을 정의하는 또 하나의 방법이 있습니다. 이를 </span><em>은연중 자동으로 정의되는 섹션</em><span style="line-height: inherit;">이라 하겠습니다</span><span style="line-height: inherit;">.</span></p> - -<p>HTML 제목 요소({{HTMLElement("h1")}}부터 {{HTMLElement("h6")}})는 만약에 그들이 속한 상위 명시적 섹션의 첫 번째 제목으로 사용되지 않았다면, 자동으로 또 하나의 새로운 암묵적인 섹션으로 분류/정의되어 집니다. 이들 암묵적 섹션이 문서 아웃라인에서 위치하게 되는 기준은 기존 이들 제목을 포함하고 있는 상위 섹션에서 사용된 제목과의 상대적 계급에 따라 결정됩니다. 만약 전에 사용된 제목보다 계급이 더 낮다면, 은연중으로 해당 섹션의 하위 섹션으로 자리 잡게 됩니다. 아래 코드를 살펴보면:</p> - -<pre class="brush:xml"><section> - <h1>둥근귀코끼리</h1> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. - ...섹션 내용 진행 중... - <h3 class="implicit subsection">서식지</h3> - <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다. - ...하위 섹션 내용 진행 중... -</section></pre> - -<p>이는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p> - -<pre>1. 둥근귀코끼리 - 1.1 서식지 <em>(</em>h3 요소에 의해 은연중 자동으로 정의됨<em>)</em> -</pre> - -<p>만약에 이전에 사용된 제목과 같은 계급이라면, (명시적으로 정의되었을 수도 있지요!) 바로 이전 섹션과 구분되면서 같은 계급의 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:</p> - -<pre class="brush:xml"><section> - <h1>둥근귀코끼리</h1> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. - ...섹션 내용 진행 중... - <h1 class="implicit section">몽골 게르빌루스쥐</h1> - <p>몽골 게르빌루스쥐는 귀엽고 작은 포유 동물입니다. - ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중... -</section></pre> - -<p>위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p> - -<pre>1. 둥근귀코끼리 -2. 몽골 게르빌루스쥐 (h1 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐) -</pre> - -<p>만약에 이전에 사용된 제목보다 더 높은 계급의 제목이 사용되었다면, 이전 섹션과 구분되면서 더 높은 제목의 계급을 가진 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:</p> - -<pre class="brush:xml"><body> - <h1>포유 동물</h1> - <h2>고래</h2> - <p>이번 섹션에선, 유영하는 고래에 관해 알아보겠습니다. - ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중... - <section> - <h3>둥근귀코끼리</h3> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다. - ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중... - <h3>몽골 게르빌루스쥐</h3> - <p>몽골 게르빌루스쥐의 무리는 몽골을 훨씬 벗어나는 구역까지 퍼져있습니다. - ...<span style="color: #323333; font-family: courier new;">하위 섹션 내용</span> 진행 중... - <h2>파충류</h2> - <p>파충류는 냉혈 동물입니다. - ...<span style="color: #323333; font-family: courier new;">하위 섹션 내용</span> 진행 중... - </section> -</body></pre> - -<p>위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p> - -<pre dir="rtl">1. 포유 동물 - 1.1 고래 <em>(</em>h2 요소에 의해 자동으로 정의됨<em>)</em> - 1.2 둥근귀코끼리 <em>(</em>섹션 요소에 의해 명시적으로 정의됨<em>)</em> - 1.3 몽골 게르빌루스쥐 <em>(</em>h3 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐<em>)</em> -2. 파충류 <em>(</em>h2 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐<em>)</em></pre> - -<p>단순히 써진 제목의 태그들만 살펴본다면, 이것은 결코 예상했던 문서의 아웃라인은 아닐 것입니다. 그래서 작성한 마크업이 다른 사람에게도 쉽게 이해되도록 하려면, 섹션을 구분할 때 명시적 섹션 요소의 태그들을 쓰는 것이 바람직하며, 원래 의도하는 섹션의 중첩 수준을 고려해서 그에 어울리는 제목의 계급을 써야 합니다. 그런데 이것이 꼭 HTML5 명세서에서 요구하는 필수 준수 사항은 아닙니다. 만약에 작성한 문서의 아웃라인을 <span style="line-height: inherit;">브라우저가 </span><span style="line-height: inherit;">원래 의도한 방향으로 표시해 주지 못한다면, 혹시 사용한 제목 요소가 은연중 자동으로 기존 섹션과 구분되게 사용되었는지 확인해 보시기 바랍니다.</span></p> - -<p>제목의 계급은 항상 해당 섹션의 중첩 수준과 일치하도록 쓰라는 규칙의 예외도 있을 수 있는데, 그 중 하나 여러 문서에서 공통으로 재사용되는 섹션의 경우가 있습니다. 예를 들면, 섹션 내용이 어떤 콘텐츠 관리 시스템에 저장되어 실시간으로 여러 다른 저장된 내용과 함께 조합되어 문서에 표시될 때가 있습니다. 이 경우엔, 재사용되는 섹션의 가장 최상위 제목으로 {{HTMLElement("h1")}}부터 시작해서 사용하실 것을 권장합니다. 그러면 재사용되는 섹션의 중첩 수준은 문서의 섹션 계층 중 해당 섹션이 삽입되어 보이는 위치에 따라 자동으로 결정될 것입니다. 이 경우에도 명시적 섹션 태그가 문서 아웃라인을 명확히 하는 데 도움을 줍니다.</p> - -<h3 id="섹션_구분의_근원점"><a name="sectioning_root">섹션 구분의 근원점</a></h3> - -<p>섹션 구분의 근원점은 HTML 요소 중 자기만의 아웃라인을 가질 수는 있지만, 그 안의 섹션이나 제목이 자기 위에 있는 요소의 아웃라인에는 어떠한 영향도 끼치지 않는 것들을 가리킵니다. 논리적으로 따지면 당연히 문서의 섹션을 구분하는데 그 근본이 되는 {{HTMLElement("body")}}가 여기에 포함되고, 이 외에도 종종 외부 콘텐츠를 페이지에 표시하는 데 사용되는 다음과 같은 요소들도 있습니다: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 마지막으로 {{HTMLElement("td")}}.</p> - -<p>보기:</p> - -<pre class="brush:xml"><section> - <h1>숲 코끼리</h1> - <section> - <h2>소개</h2> - <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p> - </section> - <section> - <h2>서식지</h2> - <p>둥근귀<span style="color: #323333; font-family: courier new;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다. -</span> 과학자들은 "<cite>보르네오 섬의 둥근귀코끼리</cite>"라는 제목의 책에서 다음과 같이 서술하고 있습니다:</p> - <blockquote> - <h1>보르네오 섬</h1> - <p>보르네오 섬에 서식하는 둥근귀코끼리...</p> - </blockquote> - </section> -</section> -</pre> - -<p>위의 보기에선 다음과 같은 문서 아웃라인을 가지게 됩니다:</p> - -<pre>1. 숲 코끼리 - 1.1 소개 - 1.2 서식지</pre> - -<p>이 문서의 아웃라인을 살펴보면 외부 인용 문구로 사용된 {{HTMLElement("blockquote")}} 요소의 경우, 섹션 구분의 근원이 되는 요소 중 하나로서 자기가 포함하고 있는 내부 내용의 아웃라인이 외부의 것과 완전히 차단되면서, 전체 문서의 아웃라인에는 포함되지 않았습니다.</p> - -<h3 id="문서의_아웃라인_밖에_존재하는_섹션">문서의 아웃라인 밖에 존재하는 섹션</h3> - -<p><span style="line-height: inherit;">HTML5에선 웹 문서의 주요 아웃라인에 속하지 않는 섹션을 정의할 수 있도록 하는 새로운 네 가지의 요소들을 소개하고 있습니다:</span></p> - -<ol> - <li>HTML Aside 섹션 요소({{HTMLElement("aside")}})는 주요 문맥을 담은 요소와 어떤 관련성을 지니고 있지만, 어떤 부연 설명 표시 영역이나 광고처럼 문맥의 주요 흐름 줄기엔 속하지 않는 섹션을 나타냅니다. 물론 자기만의 아웃라인을 가지고 있어서, 문서의 주요 아웃라인엔 포함되지 않습니다.</li> - <li>HTML Navigational 섹션 요소({{HTMLElement("nav")}})는 내비게이션 링크들을 포함하고 있는 섹션입니다. 이런 링크들은 문서에 여러 개가 있을 수 있는데, 예를 들어, 콘텐츠 목차와 같은 페이지 내부 링크나 사이트의 내비게이션 링크가 있습니다. 이런 링크는 문서의 주요 문맥과 아웃라인에 포함되지 않아서 보통 처음에는 스크린 리더나 비슷한 보조 기술을 사용하는 장치에서 읽어드리지 않을 수도 있습니다.</li> - <li>HTML Header 섹션 요소({{HTMLElement("header")}})는 페이지의 도입부로서 보통 로고나 사이트 이름 그리고 수평 메뉴를 포함하고 있습니다. 이름에서 풍기는 느낌과는 달리 꼭 페이지 처음에 있을 필요는 없습니다.</li> - <li>HTML Footer 섹션 요소({{HTMLElement("footer")}})는 페이지의 종결부로서 보통 저작권이나 법률적 고지 혹은 약간의 링크들을 포함하고 있습니다. 이것도 역시 이름이 가진 직설적 의미와 달리 페이지 끝에 있을 필요는 없습니다.</li> -</ol> - -<h2 id="섹션을_구분짓는_요소의_주소와_발행_시간">섹션을 구분짓는 요소의 주소와 발행 시간</h2> - -<p>문서를 작성하다 보면 종종 저자의 이름이나 주소와 같은 연락 정보를 공개하고 싶을 때가 있습니다. HTML4에선 이런 목적으로 {{HTMLElement("address")}} 요소가 쓰였는데, HTML5에선 여기에 더 보완된 내용이 추가되었습니다.</p> - -<p>가끔 문서에는 여러 명의 저자가 작성한 여러 개의 섹션이 포함되어 있을 수도 있습니다. 메인 페이지의 저자와 다른 또 다른 사람?이 작성한 콘텐츠가 포함된 섹션은 {{HTMLElement("article")}} 요소를 써서 정의합니다. 이렇게 하면, {{HTMLElement("address")}} 요소는 지정?된 위치에 따라 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}}과 연관된 정보로 표시됩니다.</p> - -<p>비슷하게, HTML5의 새 {{HTMLElement("time")}} 요소에 pubdate boolean 속성이 지정되었다면 문서 전체의 발행 날짜를 표시해 주는데, article에서처럼, 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}} 과 연관된 정보로 표시됩니다.</p> - -<h2 id="HTML5_미지원_브라우저에서_HTML5_요소를_사용하는_법">HTML5 미지원 브라우저에서 HTML5 요소를 사용하는 법</h2> - -<p>섹션과 제목 요소들은 대부분의 HTML5 미지원 브라우저에서도 정상적으로 사용하실 수 있습니다. 지원하진 않더라도, 어떤 특별한 DOM 인터페이스가 필요한 것은 아니고 단지 인식하지 못하는 요소는 기본적으로 <code>display:inline</code> 으로 표시되기 때문에 다음과 같이 특별한 CSS 스타일을 지정해 주어야 합니다:</p> - -<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { - display:block; -} -</pre> - -<p>물론 웹 개발자가 이들의 스타일을 달리 표시해 줄 수도 있는데, HTML5 미지원 브라우저에선 해당 요소들의 기본 표시 스타일이 원래의 정상적인 것과 다르다는 점을 명심해야 합니다. 또한, 여기엔 {{HTMLElement("time")}} 요소가 포함되지 않았는데, 그 이유는 기본 스타일이 HTML5 미지원 브라우저의 것과 HTML5 호환 브라우저의 것과 서로 같기 때문입니다.</p> - -<div>그런데 이 방법도 약간의 제약이 있어서, 어떤 브라우저에선 지원하지 않은 요소의 스타일을 애초에 지정할 수도 없게 되어 있습니다. Internet Explorer(버전 8 이하)가 여기에 해당하는데, 제대로 스타일을 지정해 주려면 다음과 같은 스크립트가 필요합니다:</div> - -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> -<![endif]--></pre> - -<p>이 스크립트가 하는 일은, Internet Explorer(8 혹은 그 이하)일 경우, HTML5의 섹션 요소와 제목 요소가 제대로 표시될 수 있도록 실행됩니다. 여기에 언급된 요소들은 전체 페이지의 구조를 정의하는 데 필요한 아주 중요한 요소이기 때문에, 만약에 스크립트의 힘을 빌리지 않다면 표시조차 되지 않게 되면서 문제 될 수 있습니다. 그래서 이런 때를 대비해서 명시적으로 다음과 같은 {{HTMLElement("noscript")}} 요소도 추가되어야 합니다:</p> - -<pre class="brush:xml"><noscript> - <strong>주의 !</strong> - 귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다. - 그런데 안타깝게도 귀하의 브라우저에선 스크립트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다. -</noscript></pre> - -<p>그래서 결국, Internet Explorer(8 혹은 그 이하)처럼 HTML5 미지원 브라우저에서도 HTML5의 섹션과 제목 요소를 제대로 지원하도록 하고, 또 만약을 대비해 이런 미지원 브라우저에서 스크립팅 기능이 꺼져있을 때를 대비해서 다음과 같은 코드를 추가해 줘야 합니다:</p> - -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> - <noscript> - <strong>주의 !</strong> - 귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다. - 그런데 안타깝게도 귀하의 브라우저에선 스크리트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다. - <code></noscript> -</code><![endif]--> -</pre> - -<h2 id="맺음말">맺음말</h2> - -<p>HTML5에서 소개된 새로운 섹션과 제목 요소는 웹 문서의 구조와 아웃라인을 표준화된 방법으로 작성할 수 있게 도와줍니다. 또한, HTML5를 지원하는 브라우저 사용자나 페이지 내용을 제대로 전달하는데 그 구조 파악이 중요한, 예를 들어 보조 지원 기술의 도움으로 페이지의 내용을 파악하는, 사용자 모두에게 커다란 이득을 안겨다 줍니다. 새로 소개된 의미가 담긴 요소들은, 약간의 노력만 기울인다면, 사용이 간편해서 HTML5 미지원 브라우저에서도 온전히 사용하실 수 있습니다. 그러므로 아무런 제약 없이 마음 놓고 사용하시기 바랍니다.</p> |