GUMI Dev
[HTML] HTML Graphics 본문
HTML Graphics
웹 상에 그래픽을 표현하는데 있어서 가장 기본적으로 활용할 수 있는 기능은 <canvas>요소와 <svg>요소다.
이 요소들은 직접 그래픽을 그리지는 않으며, 그래픽이 들어가는 컨테이너 역할만 한다.
Canvas
즉, <canvas>요소를 활용하여 실제로 그래픽을 그리기 위해서는, 아래와 같이 <canvas></canvas> 안에 JavaScript로 따로 그래픽을 그려주어야 한다.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
svg
마찬가지로 <svg>요소를 활용하여 그림을 그릴 때도 <svg></svg> 안에 코딩을 직접하는 방식으로 그래픽을 그린다.
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
혹은, svg 확장자를 가진 이미 만들어진 이미지 파일을 가져오는 방법도 있다.
웹에서 SVG 사용하기
들어가며 우리는 픽셀의 시대를 살아가고 있습니다. 웹 디자이너와 웹 개발자들에게 픽셀이란 뗄레야 뗄 수 없는 친구이면서 골치덩어리입니다. 완벽한 웹 사이트를 위해서는 파일 용량을 줄여
svgontheweb.com
'Web > FrontEnd' 카테고리의 다른 글
| 브라우저 개발자 툴 사용하기 (0) | 2021.11.23 |
|---|---|
| [CSS] CSS 기본 (0) | 2021.11.09 |