HTML <area> 태그 coords 속성 – 이미지 맵 좌표 설정 방법

HTML <area> 태그의 coords 속성이란?

HTML <area> 요소의 coords 속성은 이미지 맵(image map)에서 클릭 가능한 영역의 좌표를 지정하는 데 사용됩니다. 이 속성은 반드시 shape 속성과 함께 사용해야 하며, 두 속성을 조합하면 맵 위 영역의 크기와 모양을 자유롭게 정의할 수 있습니다.

기본 문법

<area coords="value">

shape 값에 따른 좌표 형식

shape 속성값에 따라 coords 속성에 입력해야 하는 좌표 형식이 달라집니다. 각 형식은 다음과 같습니다.

x1,y1,x2,y2	사각형(rect)의 왼쪽 위와 오른쪽 아래 모서리 좌표 (shape="rect")
x,y,radius	원(circle)의 중심 좌표와 반지름 (shape="circle")
x1,y1,x2,y2,…,xn,yn	다각형(poly)의 각 꼭짓점 좌표

예제로 배우는 coords 속성

다음 예제는 <area> 요소의 coords 속성을 실제로 구현한 전체 코드입니다.

<!DOCTYPE html>
<html>
<body>
<h2>Learning</h2>
<p>Learn these technologies with ease....</p>
<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
<map name = "tutorials">
    <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
       href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />
    <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
       href = "/html/index.htm" target = "_blank" />
    <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
       href = "/php/index.htm" target = "_blank" />
</map>
</body>
</html>

실행 결과

HTML area 태그 coords 속성 – 이미지 맵 좌표 설정 방법

코드 설명

먼저 usemap 속성을 사용해 이미지에 맵을 연결합니다.

<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>

그다음 <map> 요소 안에 shape 속성으로 영역의 모양을 지정하고, 그 안에 클릭 영역 역할을 할 <area> 요소들을 배치합니다.

<map name = "tutorials">
    <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
       href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />
    <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
       href = "/html/index.htm" target = "_blank" />
    <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
       href = "/php/index.htm" target = "_blank" />
</map>

각 <area> 요소에서는 coords 속성으로 해당 영역의 좌표를 지정합니다. 예를 들어 사각형 영역은 왼쪽 위(x1, y1)와 오른쪽 아래(x2, y2) 두 점의 좌표만 입력하면 됩니다.

<area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
    href = "/html/index.htm" target = "_blank" />