HTML의 <area> 태그는 이미지 맵(image map) 안에서 클릭 가능한 영역을 정의할 때 사용합니다. 이미지 맵은 하나의 이미지 위에 여러 개의 링크 영역을 배치하여, 이미지의 특정 부분을 클릭하면 서로 다른 페이지로 이동하도록 만드는 기능입니다. <area> 태그는 반드시 <map> 태그 내부에 작성해야 하며, <img> 태그의 usemap 속성과 <map> 태그의 name 속성을 서로 연결해 사용합니다.
<area> 태그의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| alt | 텍스트 | 해당 영역에 대한 대체 텍스트(alternate text)를 지정합니다. |
| 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 | 해당 영역을 이미지 맵에서 제외합니다. (HTML5 표준에서는 제거됨) |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag | 현재 문서와 대상 URL 사이의 관계를 지정합니다. |
| shape | rect (rectangle) circ (circle) poly (polygon) | 이미지 맵 영역의 모양을 지정합니다. |
| target | _blank _parent _self _top | 대상 URL을 열 위치를 지정합니다. _blank : 새 창(새 탭)에서 열립니다. _self : 클릭한 것과 동일한 프레임에서 열립니다. _parent : 부모 프레임셋에서 열립니다. _top : 창 전체 영역에서 열립니다. |
| type | MIME 타입 | 대상 URL의 MIME(Multipurpose Internet Mail Extensions) 타입을 지정합니다. |
<area> 태그 사용 예제
다음 예제는 하나의 이미지에 다각형(poly), 사각형(rect), 원형(circle) 세 가지 모양의 클릭 영역을 설정하고, 각 영역을 클릭하면 해당 튜토리얼 페이지가 새 창에서 열리도록 구현한 코드입니다.
<!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>
실행 결과
위 코드를 브라우저에서 실행하면 이미지 위에 세 개의 클릭 영역이 생성됩니다. 오각형 영역을 클릭하면 Perl 튜토리얼, 사각형 영역을 클릭하면 HTML 튜토리얼, 원형 영역을 클릭하면 PHP 튜토리얼 페이지가 각각 새 탭에서 열립니다.
알아두면 좋은 점
- <area> 태그는 닫는 태그가 없는 빈 요소(empty element)입니다.
- nohref 속성은 HTML5 표준에서 제거되었으므로, 최신 문서에서는 사용하지 않는 것이 좋습니다.
- 스크린 리더 사용자의 접근성을 위해 alt 속성으로 의미 있는 대체 텍스트를 항상 함께 제공하는 것이 좋습니다.
- coords 좌표는 이미지의 왼쪽 상단 모서리를 원점(0, 0)으로 하여 픽셀 단위로 계산합니다.