---
title: 웹 상 그래픽
slug: Web/Guide/Graphics
tags:
  - 2D
  - 3D
  - Canvas
  - Graphics
  - HTML5
  - SVG
  - WebGL
  - WebRTC
translation_of: Web/Guide/Graphics
original_slug: Web/Guide/그래픽
---
<p><span class="seoSummary">웹 사이트 및 응용 프로그램은 종종 그래픽을 보일 필요가 있습니다.</span> 정지 이미지는 {{HTMLElement("img")}} 요소 사용이나 {{cssxref("background-image")}} 속성을 사용한 HTML 요소의 배경 설정으로 쉽게 표시할 수 있습니다. 또한 그래픽을 그때그때 생성하거나 사후에 이미지를 조작할 수도 있습니다. <span class="seoSummary">여기서는 이를 수행할 수 있는 법을 주의 깊게 살펴봅니다.</span></p>

<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="2D_그래픽">2D 그래픽</h2>

<dl>
 <dt><a href="/ko/docs/Web/HTML/Canvas">Canvas</a></dt>
 <dd>{{HTMLElement("canvas")}} 요소는 JavaScript를 사용하여 2D 그래픽을 그리는 API를 제공합니다.</dd>
 <dt><a href="/ko/docs/Web/SVG">SVG</a></dt>
 <dd>Scalable Vector Graphics (SVG)는 그래픽을 묘사하기 위해 선, 곡선 및 그 밖의 기하학 도형을 사용할 수 있습니다. 벡터로, 어떤 크기로든 깔끔하게 크기 조정하는 이미지를 만들 수 있습니다.</dd>
</dl>

</div>

<div class="section">
<h2 class="Documentation" id="3D_그래픽">3D 그래픽</h2>

<dl>
 <dt><a href="/ko/docs/Web/API/WebGL_API">WebGL</a></dt>
 <dd>웹을 위한 3D 그래픽인 WebGL 시작 안내서. 이 기술로 웹 콘텐츠에 표준 OpenGL ES를 사용할 수 있습니다.</dd>
</dl>

<h2 id="비디오">비디오</h2>

<dl>
 <dt><a href="/ko/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">HTML5 audio 및 video 사용</a></dt>
 <dd>웹 페이지 내 비디오 및/또는 오디오 삽입 및 그 재생 제어.</dd>
 <dt><a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a></dt>
 <dd>WebRTC에서 RTC는 실시간 통신(Real-Time Communications)을 뜻하며, 오디오/비디오 스트리밍 및 브라우저 클라이언트(peer) 간 데이터 공유를 가능하게 하는 기술입니다.</dd>
</dl>
</div>
</div>