[ HTML ] map 태그를 알아보자!

<map> 태그란?

하나의 이미지에서 특정 영역을 클릭 가능하도록 설정하는 기능이다. 사용자는 이미지의 특정 위치를 클릭하면 해당 영역에 연결된 링크로 이동할 수 있다.

예를 들어, 이케아, 오늘의 집 같은 온라인 쇼핑몰에서는 제품이 배치된 이미지에 <map> 태그를 활용해서 각 상품을 클릭하면 해당 상품의 상세 페이지로 이동할 수 있도록 만들 수 있다.

<img src="./img/ikea.png" usemap="#image-map">

    <map name="image-map">
        <area target="_blank" alt="" title="" href="https://www.ikea.com/kr/ko/p/mulig-clothes-bar-white-10179436/" coords="429,213,24" shape="circle">
        <area target="_blank" alt="" title="" href="https://www.ikea.com/kr/ko/p/malm-bed-frame-high-w-2-storage-boxes-white-s39199212/" coords="398,582,25" shape="circle">
        <area target="_blank" alt="" title="" href="https://www.ikea.com/kr/ko/p/malm-chest-of-6-drawers-white-70354644/" coords="597,696,23" shape="circle">
        <area target="_blank" alt="" title="" href="https://www.ikea.com/kr/ko/p/malm-chest-of-6-drawers-white-40354645/" coords="757,595,24" shape="circle">
    </map>

 

<map> 태그 사용 방법

1. 이미지와 맵 연결하기

• <img> 태그에 usemap 속성을 추가하고, # 기호와 함께 <map>의 name 속성값을 지정해야 한다.

2. 맵과 클릭할 영역 설정하기

• <map> 태그를 생성하고, name 속성을 usemap과 동일하게 설정하면 된다.

• <area> 태그를 이용해서 클릭 가능한 영역을 지정하고, coords 속성을 사용해 좌표를 입력한다.

• shape 속성을 이용해 영역의 형태를 정할 수 있다. (rect, circle, poly).

• href 속성으로 클릭하면 이동할 링크를 설정하면 된다.

 

Tip! 이미지 맵 쉽게 만들기 (https://www.image-map.net/)

손으로 좌표를 입력하는 건 번거로울 수 있으므로 https://www.image-map.net/ 같은 사이트를 이용하면 편리하다.

1. 원하는 이미지를 업로드하고, 클릭할 위치를 마우스로 지정한다.

2. 사이트에서 자동으로 <area> 태그 코드가 생성된다.

3. 해당 코드를 복사해서 HTML 파일에 붙여넣으면 바로 적용 가능하다.

map 코드 활용 예시

• 온라인 쇼핑몰: 제품이 포함된 이미지를 클릭하면 해당 상품 페이지로 이동하도록 설정 가능.
• 관광 지도: 지도에서 특정 지역을 클릭하면 장소에 대한 정보를 제공할 수 있음.
• 인터랙티브 인포그래픽: 특정 영역을 클릭하면 추가 정보를 보여주는 방식으로 활용 가능.

 

<map> 태그는 이미지에서 특정 영역을 클릭할 수 있도록 설정하는 기능

쇼핑몰, 지도, 인포그래픽 등 다양한 분야에서 활용된다!!