HTML 페이지에서 원을 그리는 방법은 크게 세 가지가 있습니다. CSS의 border-radius 속성, SVG, 그리고 Canvas를 활용하는 것입니다. 각 방법은 용도와 상황에 따라 장단점이 있으므로, 프로젝트의 요구 사항에 맞는 방식을 선택하는 것이 좋습니다.
1. CSS border-radius로 원 그리기
가장 간단하고 널리 사용되는 방법은 CSS입니다. 정사각형 요소에 border-radius 속성을 50% 또는 너비의 절반 값으로 설정하면 완벽한 원이 만들어집니다. 별도의 이미지나 자바스크립트 없이 순수 CSS만으로 구현할 수 있어 성능 면에서도 유리합니다.
예제 코드
아래 코드를 실행하면 파란색 원이 화면에 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#circle {
width: 50px;
height: 50px;
border-radius: 50%;
background: blue;
}
</style>
</head>
<body>
<div id="circle"></div>
</body>
</html>코드 설명
- width / height: 원의 크기를 결정합니다. 가로와 세로 값이 같아야 정확한 원이 됩니다.
- border-radius: 50%: 요소의 모서리를 반지름만큼 둥글게 만들어 원 형태로 변환합니다. 픽셀 값(예: 25px) 대신 백분율을 사용하면 크기가 변해도 항상 원이 유지됩니다.
- background: 원의 색상을 지정합니다.
참고로 예전에는 웹킷 및 모질라 계열 브라우저를 위해 -webkit-border-radius, -moz-border-radius 같은 벤더 접두사를 함께 작성해야 했지만, 현재 모든 주요 브라우저는 표준 border-radius 속성을 지원하므로 접두사 없이 사용해도 됩니다.
2. SVG로 원 그리기
SVG는 벡터 기반이므로 화면 크기와 상관없이 선명하게 표시되며, 확대·축소 시에도 품질이 유지됩니다.
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="blue" /> </svg>
cx와 cy는 중심 좌표, r는 반지름, fill은 채우기 색상을 의미합니다.
3. Canvas로 원 그리기
동적인 그래픽이나 애니메이션이 필요하다면 Canvas API를 사용하는 것이 적합합니다.
<canvas id="myCanvas" width="100" height="100"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
</script>arc() 메서드는 중심 좌표(x, y), 반지름, 시작 각도, 끝 각도를 인자로 받아 원호를 그립니다. 전체 원을 그리려면 끝 각도를 Math.PI * 2(360도)로 지정하면 됩니다.
어떤 방법을 선택해야 할까?
- 간단한 장식용 원: CSS
border-radius가 가장 간편하고 성능이 좋습니다. - 확대해도 선명해야 하는 아이콘이나 로고: SVG가 적합합니다.
- 실시간 애니메이션, 게임, 데이터 시각화: Canvas가 가장 강력합니다.