[HTML] map 태그 (이미지 특정 영역 클릭하기)

728x90

목 차

• 1. map 태그란?
• 2. map 태그 속성
  • 2-1. name
  • 2-2. usemap
• 3. area 태그 속성
  • 3-1. shape
  • 3-2. coords
  • 3-3. href
  • 3-4. alt
  • 3-5. target
• 4. 예제
• 5. 마무리

반응형

 

1. map 태그란?

• HTML의 <map>
• <map> 태그는 이미지 맵을 정의하는 컨테이너입니다.
• <map> 태그는 <img> 태그와 함께 사용되며, 이미지 내에서 클릭 가능한 영역을 설정할 때 사용합니다.
• 클릭할 수 있는 영역은 <area> 태그로 정의됩니다.
• <map> 태그는 자바스크립트와 함께 사용하면 더 복잡한 상호작용도 가능하게 해줍니다.

 

---

 

2. map 태그 속성

2-1. name

• 이미지 맵의 고유 이름을 지정하는 속성입니다. 이 속성을 통해 이미지와 연결됩니다.
• 태그에서 usemap 속성을 사용하여 해당 이미지에 맵을 연결할 수 있습니다.

<map name="myMap">
  <!-- clickable areas go here -->
</map>

 

2-2. usemap

• 이미지에 이미지 맵을 연결할 때 사용합니다. 이 속성의 값은 <map> 태그의 name 속성 값과 일치해야 하며, 앞에 # 기호를 붙입니다.

<img src="image.jpg" alt="Sample Image" usemap="#myMap">

 

---

 

3. area 태그 속성

• 이미지 내에서 클릭 가능한 영역은 <area> 태그로 정의됩니다. 각 영역마다 서로 다른 링크를 설정할 수 있습니다.

3-1. shape

• 클릭할 수 있는 영역의 모양을 지정합니다.
• rect: 사각형 영역. 좌표는 left, top, right, bottom의 형태로 지정.
• circle: 원형 영역. 좌표는 center-x, center-y, radius의 형태로 지정.
• poly: 다각형 영역. 좌표는 다수의 x, y 점으로 지정.
• default: 이미지의 나머지 전체 영역을 클릭 가능하게 만듭니다.

 

3-2. coords

• 영역의 좌표를 지정합니다. 좌표는 shape에 따라 다르게 정의됩니다.
• 좌표는 이미지 내에서의 위치를 나타내며, (0,0)은 이미지의 왼쪽 위 모서리입니다.

 

3-3. href

• 영역을 클릭했을 때 이동할 링크 URL을 지정합니다.

 

3-4. alt

• 영역에 대한 대체 텍스트를 설정합니다. 이 텍스트는 시각 장애인이나 이미지 로드 실패 시 사용됩니다.

 

3-5. target

• 링크를 클릭했을 때 열릴 브라우저 창이나 탭을 지정합니다. (예: _blank는 새 탭에서 링크 열기)

 

---

 

4. 예제

※ 아래 이미지의 노트북, 핸드폰, 커피를 클릭해 보세요. 각각 다른 페이지로 이동 합니다.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://spirit0833.tistory.com/62">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="https://spirit0833.tistory.com/61">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://spirit0833.tistory.com/60">
</map>

 

---

 

5. 마무리

• <map> 태그는 이미지 맵을 정의하는 태그로, <img>와 함께 사용하여 이미지의 특정 영역을 클릭할 수 있게 합니다.
• <area> 태그를 사용해 각 클릭 가능한 영역을 정의하며, 이때 영역의 모양(사각형, 원형, 다각형)을 설정할 수 있습니다.
• 이미지 맵은 웹사이트에서 인터랙티브한 콘텐츠나 지도, 제품 설명 등에 유용하게 사용됩니다.

 

---

 

관련글

• [HTML] img 태그
• [HTML] ol 태그
• [HTML] ul 태그