diff options
Diffstat (limited to 'files/ko/web/html/element/canvas')
| -rw-r--r-- | files/ko/web/html/element/canvas/index.html | 194 |
1 files changed, 194 insertions, 0 deletions
diff --git a/files/ko/web/html/element/canvas/index.html b/files/ko/web/html/element/canvas/index.html new file mode 100644 index 0000000000..c9b9305e52 --- /dev/null +++ b/files/ko/web/html/element/canvas/index.html @@ -0,0 +1,194 @@ +--- +title: '<canvas>: 그래픽 캔버스 요소' +slug: Web/HTML/Element/canvas +tags: + - Canvas + - Element + - HTML + - HTML scripting + - Reference + - Web +translation_of: Web/HTML/Element/canvas +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><canvas></code> 요소</strong>는 <a href="/ko/docs/Web/HTML/Canvas">캔버스 스크립팅 API</a> 또는 <a href="/ko/docs/Web/API/WebGL_API">WebGL API</a>와 함께 사용해 그래픽과 애니메이션을 그릴 수 있습니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#내장_콘텐츠">내장 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#투명_콘텐츠_모델">투명</a>하지만 <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>가 아닌 요소. 단, {{HTMLElement("a")}}, {{HTMLElement("button")}}, 그리고 {{HTMLElement("input")}} 중 {{htmlattrxref("type", "input")}} 특성이 <code>checkbox</code>, <code>radio</code>, <code>button</code>인 요소는 가능</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLCanvasElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>좌표 공간의 높이입니다. CSS 픽셀 단위로, 기본값은 150입니다.</dd> + <dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>투명도가 중요한 요소인지를 캔버스에 알려줍니다. 투명도가 없음을 알게되면 페인팅 성능이 최적화됩니다. Mozilla 기반 브라우저에서만 지원하므로, 표준 {{domxref("HTMLCanvasElement.getContext()", "canvas.getContext('2d', { alpha: false })")}} 를 대신 사용하세요.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>좌표 공간의 너비입니다. CSS 픽셀 단위로, 기본값은 300입니다.</dd> +</dl> + +<h2 id="사용_일람">사용 일람</h2> + +<h3 id="대체_콘텐츠">대체 콘텐츠</h3> + +<p><code><canvas></code> 블록 안에 콘텐츠를 추가해 대체 콘텐츠로서 사용할 수 있습니다. 대체 콘텐츠는 캔버스를 지원하지 않는 구형 브라우저와, JavaScript를 비활성화한 브라우저에서 표시됩니다. 유용한 대체 텍스트, 혹은 하위 DOM을 제공하면 캔버스의 접근성을 향상할 수 있습니다.</p> + +<h3 id="닫는_태그_필수">닫는 태그 필수</h3> + +<p>{{HTMLElement("img")}} 요소와 달리, <code><canvas></code> 요소는 닫는 태그(<code></canvas></code>)를 필요로 합니다.</p> + +<h3 id="캔버스_크기_조절_CSS_vs._HTML">캔버스 크기 조절: CSS vs. HTML</h3> + +<p>캔버스의 표시 크기는 CSS로도 수정할 수 있습니다. 그러나, CSS를 사용할 경우 렌더링 과정에서 CSS 크기에 맞추기 위해 이미지의 크기를 조절하므로, 최종 그래픽이 변형될 수 있습니다.</p> + +<p>따라서 <code><canvas></code> 요소의 <code>width</code>와 <code>height</code> 특성을 통해 직접 크기를 바꾸는 것이 좋습니다. HTML에서 직접 할 수도 있고, JavaScript를 사용할 수도 있습니다.</p> + +<h3 id="최대_캔버스_크기">최대 캔버스 크기</h3> + +<p><code><canvas></code> 요소의 최대 크기는 매우 크지만, 정확한 최대 크기는 브라우저마다 다릅니다. 다음 표는 다양한 테스트와 여러 출처(<a href="https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element">Stack Overflow</a> 등)에서 수집한 값입니다.</p> + +<table> + <thead> + <tr> + <th scope="col">브라우저</th> + <th scope="col">최대 높이</th> + <th scope="col">최대 너비</th> + <th scope="col">최대 크기</th> + </tr> + </thead> + <tbody> + <tr> + <td>Chrome</td> + <td>32,767 픽셀</td> + <td>32,767 픽셀</td> + <td>268,435,456 픽셀 (i.e., 16,384 x 16,384)</td> + </tr> + <tr> + <td>Firefox</td> + <td>32,767 픽셀</td> + <td>32,767 픽셀</td> + <td>472,907,776 픽셀 (i.e., 22,528 x 20,992)</td> + </tr> + <tr> + <td>Safari</td> + <td>32,767 픽셀</td> + <td>32,767 픽셀</td> + <td>268,435,456 픽셀 (i.e., 16,384 x 16,384)</td> + </tr> + <tr> + <td>IE</td> + <td>8,192 픽셀</td> + <td>8,192 픽셀</td> + <td>?</td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 최대 면적 또는 영역을 초과하면 그리기 명령이 동작하지 않으므로, 캔버스를 사용할 수 없습니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<p>이 코드 조각은 HTML 문서에 캔버스를 추가합니다. 대체 텍스트를 추가해서 브라우저가 캔버스를 렌더링 할 수 없거나, 캔버스를 읽을 수 없는 경우에 대비했습니다.</p> + +<pre class="brush: html"><canvas id="canvas" width="300" height="300"> + 캔버스의 내용을 설명하는 대체 텍스트 +</canvas></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>그 다음, JavaScript 코드 내에서 {{domxref("HTMLCanvasElement.getContext()")}}를 호출해 그리기 맥락을 얻어서 캔버스 위에 그립니다.</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +ctx.fillStyle = 'green'; +ctx.fillRect(10, 10, 100, 100);</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="접근성_문제">접근성 문제</h2> + +<h3 id="대체_콘텐츠_2">대체 콘텐츠</h3> + +<p><code><canvas></code> 요소 자체는 비트맵에 불과하며 그려진 객체에 대한 어떠한 정보도 제공하지 않습니다. 캔버스 콘텐츠는 시맨틱 HTML 같은 접근성 도구에 노출되지 않습니다. 일반적으로 접근성 웹 사이트나 앱에서는 캔버스 사용을 피해야 합니다. 다음 안내서는 캔버스를 보다 쉽게 접근 가능한 형태로 사용하는 법을 설명합니다.</p> + +<ul> + <li><a href="https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">MDN Hit regions and accessability</a></li> + <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas 접근성 유즈 케이스</a></li> + <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas 엘리먼트 접근성 문제</a></li> + <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">Firefox 13 의 HTML5 Canvas 접근성 – by Steve Faulkner</a></li> + <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">대화형 캔버스 엘리먼트의 모범 사례</a></li> +</ul> + +<h2 id="Specifications" name="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', 'scripting.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-scripting.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.canvas")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/HTML/Canvas">Canvas API</a></li> + <li><a href="/ko/docs/Web/HTML/Canvas/Tutorial">캔버스 자습서</a></li> + <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">캔버스 치트 시트</a></li> + <li><a href="/ko/docs/Web/Demos_of_open_web_technologies">캔버스 관련 데모</a></li> +</ul> |