HTML <map> 태그 – 올바른 이해와 사용 방법

`<map>` 태그의 정의 및 사용법

<map> 태그는
이미지의 특정 영역을 클릭하면 지정된 링크로 이동할 수 있는 이미지 맵을 정의합니다.

HTML에서 이미지 맵이란
특정 이미지 안에서 하나 이상의 기하학적 영역별로 하이퍼링크를 매핑할 수 있는 기술를 말합니다.
이미지 맵의 목적은 하나의 그림을 여러 개의 그림파일로 분할할 필요 없이 이미지의 여러 영역에 링크를 만드는 간단한 방법을 제공하는 것입니다.
[참고: Wikimedia - Image map (위키백과에서 제공한 정보를 참고하여 내용을 정리했습니다.)]

사용법

이미지 맵에 사용할 실제 이미지는 <map> 태그 외부의 특정 <img> 태그를 연결해서 사용합니다.
이미지의 맵에 해당하는 클릭 가능한 영역과 링크는 <map> 태그 내에 <area> 태그로 설정합니다.
이렇게 하면 연결한 <img> 태그에 이미지 맵이 정의됩니다.
<map>과 <area> 태그는 자체적으로 화면에 표시되지 않습니다.

데모

다음의 데모로 <map> 태그로 이미지 맵을 어떻게 정의하는지 살펴보세요.

HTML

<!-- 이미지 맵에 사용할 실제 이미지 -->
<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`

이 속성은 필수로 지정해야 하며, 이 속성의 값은 <map> 태그의 해당 이미지 맵의 고유식별자로 사용되는 이름을 지정합니다.
만약 지정한 태그에 id 속성도 지정되어 있다면 name과 id 속성의 값은 모두 같아야 합니다.

이 속성의 값은 같은 문서의 다른 태그에서 사용되는 name의 값과 같지 않아야 하며, 공백 문자가 없는 비어 있지 않은 값(예: name="", name=" ", name="my value")을 가져야 합니다.

name 속성의 값은 이미지 맵에 사용할 실제 이미지인 <img> 태그를 연결할 때 사용됩니다.
<img> 태그의 usemap 속성의 값으로 name 속성의 값을 지정하면 사용할 이미지와 name 속성의 값에 해당하는 이미지 맵이 연결됩니다.

부연설명
# 기호 뒤에 <img> 태그와 연결된 이미지 맵에 해당하는 <map> 태그의 name 속성의 값을 usemap 속성의 값으로 지정합니다.

HTML

<img src="example.jpg" alt="example" usemap="#example-map"> <!-- usemap 속성으로 <map> 태그를 연결 -->    
<map name="example-map"> <!-- name 속성으로 이미지 맵에 이름을 지정 -->
    ...
</map>

참고하세요!
<img> 태그가 <a> 또는 <button> 태그 내에서 사용될 경우에는 usemap 속성을 사용할 수 없습니다. 따라서, 이미지 맵과 연결할 수 없습니다.