HTML <map> 태그

정의와 사용법

<map> 이미지 맵을 정의하는 태그가 필요합니다. 이미지 맵(image map, 분할 탐색 맵)은 클릭 가능 영역을 가진 이미지입니다.

<map> 요소는 name 속성의 속성은 <img> 요소 의 usemap 속성 관련된 요소와 함께 사용되어 이미지와 맵 간의 관계를 정의합니다。

<map> 요소는 일부 <area> 요소，이미지 맵 내의 클릭 가능 영역을 정의합니다。

추가로 참조:

HTML DOM 참조 매뉴얼:Map 객체

예시

예제 1

클릭 가능 영역을 가진 이미지 맵:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

직접 테스트해 보세요

예제 2

또 다른 클릭 가능 영역을 가진 이미지 맵:

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

직접 테스트해 보세요

속성

속성 값 설명
name 맵 이름 필수. 이미지 맵의 이름을 정의합니다.

전역 속성

<map> 태그는 또한 HTML에서의 전역 속성.

이벤트 속성을 지원합니다

<map> 태그는 또한 HTML에서의 이벤트 속성.

기본 CSS 설정

대부분의 브라우저는 다음 기본 값으로 표시합니다. <map> 요소:

map {
  display: inline;
}

브라우저 지원

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
지원 지원 지원 지원 지원