웹 입문

SVG와 캔버스 기초

지금까지 우리는 HTML을 사용하여 웹 페이지의 구조를 만들고, 텍스트, 링크, 일반 이미지( ), 그리고 비디오/오디오와 같은 멀티미디어 콘텐츠를 삽입하는 방법을 학습했습니다. 이제는 웹에서 그래픽을 다루는 두 가지 강력한 기술인 SVG와 Canvas를 알아볼 차례입니다.

SVG의 특징 및 장점와 SVG 기본 문법과 활용를 중심으로 SVG와 캔버스 기초의 판단 흐름을 읽습니다.

핵심 흐름

1

SVG: 확장 가능한 벡터 그래픽

SVG는 XML 기반의 벡터 그래픽을 웹에 표현하기 위한 마크업 언어입니다.

2

Canvas: 비트맵 그래픽 그리기

Canvas는 HTML5에서 도입된 태그와 자바스크립트 API를 사용하여 비트맵(픽셀) 기반의 2D 그래픽을 웹 페이지에 직접 그릴 수 있도록 하는 기술입니다.

3

SVG의 특징 및 장점

JPG, PNG와 같은 비트맵 그래픽(픽셀 기반)과는 근본적으로 다릅니다.SVG의 특징 및 장점 확장성 (Scalable): 가장 큰 특징이자 장점입니다.

4

SVG 기본 문법과 활용

편집 용이성: SVG 코드는 XML 기반의 텍스트이므로, 텍스트 편집기나 SVG 편집 소프트웨어에서 쉽게 수정할 수 있습니다.