Merge pull request #37 from fiji-flo/unslugging-ko

Unslugging ko

1 files changed, 63 insertions, 0 deletions

diff --git a/files/ko/web/api/canvas_api/tutorial/index.html b/files/ko/web/api/canvas_api/tutorial/index.html
new file mode 100644
index 0000000000..3886ef9cf1
--- /dev/null
+++ b/files/ko/web/api/canvas_api/tutorial/index.html
@@ -0,0 +1,63 @@
+---
+title: 캔버스 튜토리얼
+slug: Web/API/Canvas_API/Tutorial
+tags:
+  - Canvas
+  - Graphic
+  - Guide
+  - HTML
+  - HTML5
+  - Intermediate
+  - Web
+translation_of: Web/API/Canvas_API/Tutorial
+original_slug: Web/HTML/Canvas/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>&lt;canvas&gt;</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>&lt;canvas&gt;</code></strong></a>를 사용하여 만들 수 있는 것들의 일부입니다.</p>
+</div>
+
+<p><span class="seoSummary">이 튜토리얼은 <code>&lt;canvas&gt;</code> 요소를 사용하여 2D 그래픽을 어떻게 그리는지 기초부터 설명합니다. 예제들을 통하여 캔버스로 할 수 있는 것이 무엇인지 알려주며, 바로 사용할 수 있도록 코드도 제공합니다.</span></p>
+
+<p><code>&lt;canvas&gt;</code>는 Apple의 Webkit에 처음 도입되어 Mac OS X 대시보드(Dashboard)에 사용되었고, 이후 다른 브라우저에도 구현되어 왔습니다. 현재 대부분의 주요 브라우저에서 지원됩니다.</p>
+
+<h2 id="Before_you_start" name="Before_you_start">시작하기 전 알아두어야 할 것</h2>
+
+<p><code>&lt;canvas&gt;</code> 요소를 사용하는 것이 어려운 일은 아니지만, <a href="/en-US/docs/HTML" title="HTML">HTML</a>과 <a href="/en-US/docs/JavaScript" title="JavaScript">자바스크립트</a>에 대한 기본 지식을 갖추고 있어야 합니다. 몇몇 오래된 브라우저는 <code>&lt;canvas&gt;</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>