HTML <map> 태그
정의 및 특징
<map> 태그는 클라이언트 사이드 이미지맵(client-side image-map)을 정의할 때 사용합니다.
이미지맵(image-map)은 클릭할 수 있는 영역을 가지는 이미지를 의미합니다.
<area> 요소는 이러한 이미지맵의 클릭할 수 있는 영역을 정의하는데 사용되며, <map> 요소는 하나 이상의 <area> 요소를 포함할 수 있습니다.
<map> 요소의 필수 속성인 name 속성은 <img> 요소의 usemap 속성과 결합하여, 이미지(image)와 맵(map) 사이의 관계를 설정합니다.
예제
<img src="/examples/images/img_imagemap.jpg" alt="진실 혹은 거짓" usemap="#vending" style="width:320px; height:240px">
<map name="vending">
<area shape="rect" coords="210,200,70,130" alt="진실" href="https://ko.wikipedia.org/wiki/%EC%A7%84%EC%8B%A4">
<area shape="rect" coords="90,60,180,130" alt="거짓" href="https://ko.wikipedia.org/wiki/%EA%B1%B0%EC%A7%93%EB%A7%90">
</map>
지원하는 브라우저 및 버전
| 태그명 |
|
|
|
|
|
|
|---|---|---|---|---|---|---|
| <map> | 1.0 | 지원함 | 지원함 | 1.0 | 1.0 | 지원함 |
HTML5에서 변경된 사항
HTML5에서는 <map> 요소에 id 속성을 명시할 때 그 값을 반드시 name 속성값과 같은 값으로 명시해야만 합니다.
HTML과 XHTML에서의 차이점
XHTML에서는 name 속성을 더 이상 지원하지 않으므로, name 속성 대신 전역 속성인 id 속성을 사용해야 합니다.
사용할 수 있는 속성
| 속성명 | 속성값 | 설명 | |
|---|---|---|---|
|
|
이름 |
필수 속성으로, 이미지맵의 이름을 명시함. |
CSS 기본값
|
map { display: inline; } |
DOM 인터페이스
|
interface HTMLMapElement : HTMLElement { attribute DOMString name; [SameObject] readonly attribute HTMLCollection areas; [SameObject] readonly attribute HTMLCollection images; }; |
