HTML에서 이미지 맵(image map)의 영역을 정의하려면 <area> 태그를 사용합니다. 이미지 맵은 하나의 이미지 안에서 클릭 가능한 여러 영역을 만들어, 각 영역마다 서로 다른 링크를 연결할 수 있게 해주는 강력한 기능입니다.
<area> 태그는 반드시 <map> 태그 내부에 위치해야 하며, <img> 태그의 usemap 속성과 연결되어 동작합니다.
<area> 태그의 주요 속성
HTML <area> 태그에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| alt | 텍스트 | 해당 영역에 대한 대체 텍스트를 지정합니다. |
| coords | shape="rect"인 경우: "left, top, right, bottom" shape="circ"인 경우: "centerx, centery, radius" shape="poly"인 경우: "x1, y1, x2, y2, ..., xn, yn" | shape 속성에 맞는 좌표값을 지정하여 이미지 맵의 특정 영역을 정의합니다. |
| download | 파일명 | 사용자가 하이퍼링크를 클릭했을 때 대상 파일이 다운로드되도록 지정합니다. |
| href | URL | 링크가 이동할 페이지의 URL 또는 앵커 이름을 지정합니다. |
| hreflang | 언어 코드 | 대상 URL의 언어를 지정합니다. |
| media | 미디어 쿼리 | 대상 URL이 최적화된 미디어/기기를 지정합니다. |
| nohref | true / false | 이미지 맵에서 해당 영역을 제외합니다. |
| rel | alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag | 현재 문서와 대상 URL 간의 관계를 지정합니다. |
| shape | rect(직사각형) circ(원형) poly(다각형) | 이미지 맵 영역의 모양을 지정합니다. |
| target | _blank _parent _self _top | 대상 URL을 어디에서 열지 지정합니다. _blank: 새 창에서 열림 _self: 클릭된 동일한 프레임에서 열림 _parent: 부모 프레임셋에서 열림 _top: 창 전체 본문에서 열림 |
| type | MIME 타입 | 대상 URL의 MIME(Multipurpose Internet Mail Extensions) 타입을 지정합니다. |
좌표(coords) 지정 방법 이해하기
coords 속성은 shape 속성 값에 따라 작성 방식이 달라집니다.
1. rect (직사각형)
왼쪽 상단 모서리의 x, y 좌표와 오른쪽 하단 모서리의 x, y 좌표를 순서대로 입력합니다.
2. circ (원형)
원의 중심 x, y 좌표와 반지름 값을 입력합니다.
3. poly (다각형)
다각형을 이루는 각 꼭짓점의 x, y 좌표를 시계 방향 또는 반시계 방향으로 나열합니다.
예제 코드
아래 코드를 실행하면 <area> 태그로 이미지 맵의 영역을 정의하는 방법을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML area 태그</title>
</head>
<body>
<img src="/images/usemap.gif" alt="usemap" border="0" usemap="#tutorials"/>
<map name="tutorials">
<!-- 다각형(poly) 영역 -->
<area shape="poly" coords="74,0,113,29,98,72,52,72,38,27"
href="/perl/index.htm" alt="Perl 튜토리얼" target="_blank" />
<!-- 직사각형(rect) 영역 -->
<area shape="rect" coords="22,83,126,125" alt="HTML 튜토리얼"
href="/html/index.htm" target="_blank" />
<!-- 원형(circle) 영역 -->
<area shape="circle" coords="73,168,32" alt="PHP 튜토리얼"
href="/php/index.htm" target="_blank" />
</map>
</body>
</html>마무리
이미지 맵은 하나의 이미지에서 여러 개의 클릭 영역을 제공해야 하는 경우 유용하게 활용됩니다. 예를 들어 세계 지도에서 각 국가별 페이지로 연결하거나, 제품 이미지의 특정 부분을 클릭했을 때 상세 정보로 이동하는 기능 등을 구현할 수 있습니다. 다만 모바일 환경에서는 반응형 대응이 어려울 수 있으므로, 최근에는 SVG나 CSS 기반 인터랙티브 요소를 함께 고려하는 것이 좋습니다.