HTML에서는 shape 속성을 사용하여 이미지 맵(image map) 내 <area> 요소의 모양을 지정할 수 있습니다. 이 속성은 클릭 가능한 영역이 사각형, 원, 다각형 중 어떤 형태를 가질지 결정하며, <map> 태그와 함께 사용됩니다.
shape 속성의 주요 값
shape 속성에는 다음과 같은 값을 사용할 수 있습니다.
- rect – 직사각형(기본값), 좌표는 왼쪽 위와 오른쪽 아래 꼭짓점을 지정합니다.
- circle – 원형, 중심 좌표(x, y)와 반지름을 지정합니다.
- poly – 다각형, 각 꼭짓점의 좌표를 순서대로 나열합니다.
- default – 이미지 전체 영역을 의미합니다.
shape 속성은 반드시 coords(좌표) 속성과 함께 사용해야 하며, 두 속성의 조합으로 실제 클릭 영역의 위치와 크기가 정해집니다.
예제 코드
아래 예제는 shape 속성을 활용해 원형 클릭 영역을 만드는 방법을 보여줍니다. 이미지에 usemap 속성으로 맵을 연결하고, <map> 안에서 <area> 요소로 원형 영역을 정의했습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML shape attribute</title>
</head>
<body>
<img src = "/images/html.gif" alt = "HTML Map" border = "0" usemap = "#html"/>
<!-- 맵핑 생성 -->
<map name = "html">
<area shape = "circle" coords = "154,150,59" href = "about/about_team.htm"
alt = "Team" target = "_self" />
</map>
</body>
</html>
코드 설명
<img> 태그의 usemap="#html" 속성은 해당 이미지가 이름이 'html'인 맵을 사용한다는 뜻입니다. <area> 요소에서 shape="circle"로 원형 영역을 지정했고, coords="154,150,59"는 중심이 x=154, y=150이고 반지름이 59픽셀인 원을 의미합니다. 사용자가 이 영역을 클릭하면 href에 지정된 페이지로 이동하며, alt 속성은 접근성을 위해 대체 텍스트를 제공합니다.
참고로 <area> 요소는 항상 <map> 태그 내부에 위치해야 하며, 하나의 이미지에 여러 개의 영역을 설정할 수도 있습니다.