그래픽 요소(<canvas>, <svg>)

약 4분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

그래픽 요소 소개

안녕하세요! HTML을 배우는 여러분을 환영합니다. 오늘은 웹 페이지에서 그래픽을 그릴 수 있는 두 가지 중요한 HTML5 요소, 와 에 대해 알아보겠습니다.

요소는 동적으로 이미지를 그릴 수 있는 공간을 만드는 데 사용됩니다. 간단하게 말하면, 마치 미술 작업을 위해 준비한 빈 캔버스와 같습니다. 우리가 이 캔버스에 그림을 그릴 수 있도록 JavaScript를 사용합니다.

코드 html

<canvas id='myCanvas' width='300' height='150' style='border:1px solid #000000;'></canvas>

위의 코드는 300x150 픽셀 크기의 캔버스를 생성합니다. 이제 이 캔버스에 그림을 그려보겠습니다.

코드 javascript

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(20, 20, 150, 100);

이 JavaScript 코드는 캔버스를 가져와서 20px, 20px 위치에 빨간색 사각형을 그립니다. 각 코드의 역할을 이해하며 직접 입력해 보세요!

요소는 벡터 그래픽을 그릴 수 있게 해줍니다. 벡터 그래픽은 픽셀로 구성되지 않고 기하학적 형태로 이루어져 있어, 크기를 조정해도 선명함이 유지됩니다. 이는 마치 종이에 그린 도형과 같습니다.

코드 html

<svg width='300' height='150'>
  <rect width='300' height='150' style='fill:blue;'/>
  <circle cx='150' cy='75' r='50' style='fill:red;'/>
</svg>

위의 SVG 코드는 파란색 사각형과 빨간색 원을 그립니다. 이런 방식으로 다양한 도형을 조합하여 복잡한 그림을 만들 수 있습니다.

는 픽셀 단위로 그림을 그리는 공간이며, 는 벡터형태로 이미지를 만드는 데 사용합니다. 각각의 특징을 잘 이해하고 필요에 맞게 선택해 사용하세요!

이제 여러분의 자기소개 페이지를 만들어 보세요! 개인 정보를 포함하고, 나 를 사용하여 자신만의 멋진 그래픽을 추가해보세요. 여러분의 창의력을 마음껏 발휘해보세요!