<map>
태그의 정의 및 사용법
<map>
태그는
이미지의 특정 영역을 클릭하면 지정된 링크로 이동할 수 있는 이미지 맵을 정의합니다.
HTML에서 이미지 맵이란
특정 이미지 안에서 하나 이상의 기하학적 영역별로 하이퍼링크를 매핑할 수 있는 기술를 말합니다.
이미지 맵의 목적은 하나의 그림을 여러 개의 그림파일로 분할할 필요 없이 이미지의 여러 영역에 링크를 만드는 간단한 방법을 제공하는 것입니다.
[참고: Wikimedia - Image map (위키백과에서 제공한 정보를 참고하여 내용을 정리했습니다.)]
사용법
데모
다음의 데모로 <map>
태그로 이미지 맵을 어떻게 정의하는지 살펴보세요.
<!-- 이미지 맵에 사용할 실제 이미지 -->
<img src="example.jpg" alt="Web infographic" usemap="#web-link-map"> <!-- usemap 속성으로 <map> 태그를 연결 -->
<!-- 이미지 맵을 정의 -->
<map name="web-link-map"> <!-- name 속성으로 이미지 맵에 이름을 지정 -->
<!-- 세 개의 <area>로 세 개의 영역에 링크 설정하기 -->
<area target="_blank" alt="HTML" href="/category/html/" coords="114,154,49" shape="circle">
<area target="_blank" alt="CSS" href="/category/css/" coords="57,58,49" shape="circle">
<area target="_blank" alt="JavaScript" href="/category/javascript/" coords="172,57,49" shape="circle">
</map>

속성
<map>
태그는 전역 속성을 사용할 수 있습니다.
그리고, 이 태그에는 name
속성을 필수로 사용해야 합니다.
name
이 속성의 값은 같은 문서의 다른 태그에서 사용되는 name
의 값과 같지 않아야 하며, 공백 문자가 없는 비어 있지 않은 값(예: name=""
, name=" "
, name="my value"
)을 가져야 합니다.
<img src="example.jpg" alt="example" usemap="#example-map"> <!-- usemap 속성으로 <map> 태그를 연결 -->
<map name="example-map"> <!-- name 속성으로 이미지 맵에 이름을 지정 -->
...
</map>
기술적인 문법 요약
브라우저 호환성
태그 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
<map>
|
1 | 12 | 1 | 1 |
명세서
명세서 사양 | |
---|---|
<map>
|
HTML #the-map-element |