..

Search

<map>

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>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<map> 1.0 지원함 지원함 1.0 1.0 지원함

HTML5에서 변경된 사항

HTML5에서는 <map> 요소에 id 속성을 명시할 때 그 값을 반드시 name 속성값과 같은 값으로 명시해야만 합니다.


HTML과 XHTML에서의 차이점

XHTML에서는 name 속성을 더 이상 지원하지 않으므로, name 속성 대신 전역 속성인 id 속성을 사용해야 합니다.


사용할 수 있는 속성

속성명   속성값 설명

name

 

이름

필수 속성으로, 이미지맵의 이름을 명시함.


CSS 기본값

map {

  display: inline;

}


DOM 인터페이스

interface HTMLMapElement : HTMLElement {

  attribute DOMString name;

  [SameObject] readonly attribute HTMLCollection areas;

  [SameObject] readonly attribute HTMLCollection images;

};


연관 페이지

HTML 이미지 수업 ⇒


연습문제