HTML5 <polygon> 태그란?
HTML5에서는 SVG(Scalable Vector Graphics)를 활용해 웹 페이지에 벡터 그래픽을 직접 그릴 수 있습니다. 그중 <polygon> 태그는 여러 개의 점을 연결하여 닫힌 다각형을 만드는 데 사용되는 요소입니다. 삼각형, 오각형, 별 모양 등 다양한 형태를 좌표 값만으로 간단하게 표현할 수 있다는 것이 큰 장점입니다.
주요 속성
- points: 다각형을 구성하는 각 꼭짓점의 x, y 좌표를 쉼표로 구분하여 나열합니다. 좌표와 좌표 사이는 공백으로 구분합니다.
- fill: 다각형 내부를 채울 색상을 지정합니다. 색상 이름, HEX 코드, RGB 값 등을 사용할 수 있습니다.
- stroke: 도형의 테두리 선 색상을 지정합니다.
예제 코드: SVG 별 모양 그리기
아래 예제는 <polygon> 태그를 사용하여 빨간색 별 모양을 화면 중앙에 그리는 방법을 보여줍니다. 코드를 직접 실행해 보면서 동작을 확인해 보세요.
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2 align="center">HTML5 SVG Star</h2>
<svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
<polygon points="100,10 40,180 190,60 10,60 160,180" fill="red"/>
</svg>
</body>
</html>코드 설명
1. CSS 스타일로 가운데 정렬#svgelem 선택자를 통해 SVG 요소를 화면 기준 왼쪽에서 50% 위치로 이동시키고, transform: translateX(-40%)를 적용해 시각적으로 중앙에 배치했습니다. 브라우저 호환성을 위해 -webkit-, -ms- 접두사도 함께 작성되어 있습니다.
2. SVG 요소 선언<svg> 태그의 xmlns 속성은 SVG 네임스페이스를 지정하며, height 속성은 캔버스의 높이를 200px로 설정합니다.
3. polygon으로 별 모양 정의points="100,10 40,180 190,60 10,60 160,180"는 다섯 개의 꼭짓점 좌표를 의미합니다. 이 점들이 순서대로 연결되어 오각형이 아닌 별(star) 형태가 완성됩니다. 마지막으로 fill="red" 속성으로 내부를 빨간색으로 채웠습니다.
마무리
<polygon> 태그는 좌표만 조정하면 원하는 어떤 다각형이든 자유롭게 그릴 수 있습니다. 이미지 파일 없이 코드만으로 그래픽을 표현할 수 있기 때문에 용량 부담이 적고, 확대해도 화질이 깨지지 않는다는 점에서 반응형 웹 디자인에 특히 유용합니다. 다양한 좌표 조합을 실험해 보면서 익혀보세요.