[HTML] 개념 정리 11 :: 이미지 맵 <map> <area>태그

HTML 이미지 맵: <map> 및 <area> 태그와 속성

이미지 맵은 이미지의 특정 영역을 클릭했을 때 다른 페이지로 이동하거나 특정 동작을 수행하도록 설정하는 기능을 제공함. 이를 구현하기 위해 HTML에서는 <map> 및 <area> 태그를 사용함.

---

1. 이미지 맵의 기본 구조

(1) <map> 태그

이미지 맵을 정의하며, 하나 이상의 영역(<area>)을 포함함.

(2) <area> 태그

이미지 맵의 특정 클릭 가능한 영역을 정의.

(3) usemap 속성

이미지 태그(<img>)에서 이미지 맵을 연결하기 위해 사용.

기본 구조

<img src="image.jpg" usemap="#mapName">
<map name="mapName">
  <area shape="..." coords="..." href="...">
</map>

---

2. <area> 태그의 주요 속성

(1) shape: 영역의 형태

• rect: 사각형 영역.
• circle: 원형 영역.
• poly: 다각형 영역.
• default: 이미지의 기본 영역.

(2) coords: 영역의 좌표

• 영역의 좌표를 픽셀 단위로 정의.
• 형태에 따른 좌표 형식
  • rect: x1, y1, x2, y2 (왼쪽 상단과 오른쪽 하단의 좌표)
  • circle: x, y, r (중심 좌표와 반지름)
  • poly: x1, y1, x2, y2, x3, y3, ... (다각형의 각 점 좌표)

(3) href: 링크 URL

영역을 클릭했을 때 이동할 경로를 정의.

(4) alt: 대체 텍스트

이미지가 로드되지 않을 경우 표시될 텍스트.

---

3. 이미지 맵 예제

(1) 사각형(rect) 영역

이미지의 특정 사각형 영역에 링크 추가.

<img src="example.jpg" usemap="#exampleMap">
<map name="exampleMap">
  <area shape="rect" coords="50,50,200,200" href="https://example.com" alt="사각형 링크">
</map>

• coords 설명: (50,50)은 왼쪽 상단, (200,200)은 오른쪽 하단 좌표.

---

(2) 원형(circle) 영역

이미지의 특정 원형 영역에 링크 추가.

<img src="example.jpg" usemap="#exampleMap">
<map name="exampleMap">
  <area shape="circle" coords="150,150,50" href="https://example.com" alt="원형 링크">
</map>

• coords 설명: (150,150)은 원의 중심 좌표, 50은 반지름.

---

(3) 다각형(poly) 영역

이미지의 다각형 영역에 링크 추가.

<img src="example.jpg" usemap="#exampleMap">
<map name="exampleMap">
  <area shape="poly" coords="100,100,200,50,300,100,250,200" href="https://example.com" alt="다각형 링크">
</map>

• coords 설명: 각 점의 좌표를 나열하며, 100,100, 200,50, 300,100, 250,200은 다각형을 구성하는 점들임.

---

(4) 기본 영역(default)

이미지 전체를 클릭 가능한 영역으로 설정.

<img src="example.jpg" usemap="#exampleMap">
<map name="exampleMap">
  <area shape="default" href="https://example.com" alt="기본 링크">
</map>

---

4. 종합 예제: 복합 이미지 맵

<img src="example.jpg" usemap="#exampleMap" alt="이미지 맵 예제">
<map name="exampleMap">
  <area shape="rect" coords="50,50,200,200" href="https://example.com/rect" alt="사각형 영역">
  <area shape="circle" coords="300,150,75" href="https://example.com/circle" alt="원형 영역">
  <area shape="poly" coords="400,100,450,50,500,100,475,200" href="https://example.com/poly" alt="다각형 영역">
</map>

---

5. 이미지 맵 활용 팁

1. 정확한 좌표 계산: 이미지 편집 프로그램(GIMP, Photoshop 등)을 사용하면 각 영역의 좌표를 쉽게 계산 가능.
2. 반응형 웹 고려: 기본 이미지 맵은 고정 크기로 작동. 반응형 웹에서는 JavaScript 또는 CSS를 사용하여 조정 필요.
3. 대체 텍스트 제공: 모든 <area>에 alt 속성을 추가해 접근성을 향상.

---

6. CSS와 JavaScript를 활용한 이미지 맵

반응형 이미지 맵

CSS로 이미지를 100% 너비로 조정.

<style>
  img {
    width: 100%;
    height: auto;
  }
</style>
<img src="example.jpg" usemap="#exampleMap">
<map name="exampleMap">
  <area shape="rect" coords="50,50,200,200" href="https://example.com" alt="사각형 영역">
</map>

JavaScript로 동적 이미지 맵 조정

JavaScript로 이미지 크기 변화에 따라 좌표 조정 가능.

<script>
  const areas = document.querySelectorAll('area');
  const originalWidth = 600; // 원래 이미지 크기
  const img = document.querySelector('img');

  function resizeMap() {
    const scale = img.offsetWidth / originalWidth;
    areas.forEach(area => {
      const coords = area.dataset.originalCoords.split(',').map(c => Math.floor(c * scale));
      area.coords = coords.join(',');
    });
  }

  window.addEventListener('resize', resizeMap);
  resizeMap(); // 초기 실행
</script>
<img src="example.jpg" usemap="#exampleMap">
<map name="exampleMap">
  <area shape="rect" data-original-coords="50,50,200,200" href="https://example.com" alt="사각형 영역">
</map>

---

결론

HTML의 <map> 및 <area> 태그는 이미지의 특정 영역을 클릭 가능한 링크로 변환하는 데 유용. 정적 이미지 맵은 간단히 설정 가능하며, CSS와 JavaScript를 사용하면 반응형 레이아웃에도 적용 가능.

이 글이 이미지 맵 활용에 도움이 되길 바람! 😊