HTML5 SVG로 별 모양 그리기: polygon 태그 완벽 가이드

HTML5의 SVG(Scalable Vector Graphics)는 별도의 이미지 편집 프로그램 없이 코드만으로 다양한 도형을 그릴 수 있는 강력한 기능입니다. 이번 글에서는 <polygon> 태그를 활용해 별 모양을 그리는 방법을 예제 코드와 함께 살펴보겠습니다.

HTML5 SVG 별 모양 예제 코드

아래 코드는 <polygon> 태그를 사용하여 빨간색 별 모양을 화면 중앙에 그리는 완전한 HTML5 문서입니다.

<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>

코드 핵심 요소 설명

<svg> 태그: SVG 도형을 담는 컨테이너 역할을 합니다. height 속성으로 높이를 지정하고, xmlns 속성으로 SVG 네임스페이스를 선언해야 브라우저가 이를 올바르게 인식합니다.
polygon points 속성: 별의 꼭짓점 5개를 x,y 좌표 쌍으로 나열합니다. 첫 번째 점과 마지막 점은 자동으로 연결되어 닫힌 오각형 형태의 별이 만들어집니다.
fill 속성: 도형 내부를 채우는 색상을 지정합니다. 여기서는 red로 설정했으며, 원하는 색상 코드(#ff0000 등)로 자유롭게 변경할 수 있습니다.
CSS 정렬 스타일: #svgelem 선택자에 적용된 transform: translateX(-40%) 덕분에 SVG 요소가 화면 중앙 근처에 배치됩니다.

실행 결과

위 코드를 브라우저에서 실행하면 아래와 같이 빨간색 별 모양이 나타납니다.

HTML5 SVG로 별 모양 그리기: polygon 태그 완벽 가이드

응용 팁

points 좌표 값을 조절하면 별의 크기와 각도를 자유롭게 변경할 수 있고, stroke 속성을 추가하면 테두리선도 표현할 수 있습니다. 또한 CSS 애니메이션과 결합하면 회전하거나 반짝이는 별 효과도 손쉽게 구현할 수 있습니다.