HTML5는 정적이 아닌, 동적 그래픽을 만들기 위한 다양한 기능을 제공합니다. 이를 이용하여 웹 페이지에 다양한 그래픽 요소를 구현할 수 있습니다. 이번 글에서는 HTML5에서 제공하는 Canvas와 SVG 그래픽 요소에 대해 알아보겠습니다.

Canvas

HTML5 Canvas는 JavaScript를 사용하여 그래픽 요소를 그릴 수 있는 플랫폼입니다. Canvas를 사용하면 2D 또는 3D 그래픽을 그릴 수 있으며, 애니메이션 및 상호작용적인 요소를 추가할 수 있습니다. 아래는 간단한 Canvas를 이용한 그래픽 예제입니다.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  context.fillStyle = 'red';
  context.fillRect(10, 10, 50, 50);
</script>

Canvas를 이용하여 직접 그래픽을 그리는 것 외에도, Canvas API를 통해 다양한 그래픽 및 애니메이션 기능을 사용할 수 있습니다.

SVG (Scalable Vector Graphics)

SVG는 벡터 기반의 그래픽을 표현하는 데 사용되며, XML 형식으로 정의됩니다. 따라서 SVG 그래픽은 확대 또는 축소해도 화질이 손상되지 않으며, 텍스트나 이미지를 내용으로 포함할 수 있습니다. 아래는 간단한 SVG 그래픽 예제입니다.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

SVG는 CSS, JavaScript 및 SMIL 애니메이션을 사용하여 상호작용적인 요소를 생성할 수 있습니다. SVG 2와 같은 표준 업데이트도 진행 중이며, 다양한 기능이 추가되고 있습니다.

HTML5는 이와 같은 다양한 그래픽 기능을 제공하여 웹 페이지에 동적이고 풍부한 그래픽을 표현할 수 있도록 하고 있습니다. 이를 이용하여 다양한 시각적 요소를 구현하고 사용자 경험을 향상시킬 수 있습니다.