HTML - Image Map: A Beginner's Friendly Guide

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 HTML Image Maps의 흥미로운 세계로 점프할 것입니다. 초보자라면 걱정하지 마세요; 저는 여러 해 동안 교실에서 사용한 같은 인내심으로 단계별로 안내해 드릴 것입니다. 함께 여정을 시작해보세요!

HTML - Image Map

왜 Image Map을 사용해야 하나요?

웹사이트에 아름다운 세계 지도의 그림이 있다고 상상해 보세요. 방문자들이 다른 나라를 클릭하여 더 알아보고 싶을 때, Image Maps가 유용하게 사용됩니다! Image Maps는 단일 이미지에 클릭 가능한 영역을 생성하여 인터랙티브 요소로 만들 수 있습니다.

HTML `<map>` 태그

<map> 태그는 우리의 인터랙티브 영역의 컨테이너입니다. 여기서 우리는 맵의 이름을 정의하여 이미지와 연결할 것입니다.

이렇게 보입니다:

<map name="worldmap">
<!-- 클릭 가능한 영역을 여기에 추가할 것입니다 -->
</map>

이 예제에서 우리는 맵을 "worldmap"으로 이름지었습니다. 이를 독특한 ID로 생각하면 됩니다.

HTML `<area>` 태그

이제 <area> 태그에 대해 이야기해 보겠습니다. 이제 마법이 일어납니다! 각 <area> 태그는 우리의 이미지 맵 내에서 클릭 가능한 영역을 정의합니다.

기본 구조는 다음과 같습니다:

<area shape="shape_type" coords="coordinates" href="link_url" alt="description">

이를 구분해 보겠습니다:

shape: 클릭 가능한 영역의 모양을 정의합니다 (rect, circle, poly)
coords: 영역의 좌표를 지정합니다
href: 영역이 클릭될 때 이동할 URL
alt: 영역에 대한 텍스트 설명 ( 접근성에 중요합니다)

HTML Image Map in Action

이제 실제 예제로 모든 것을 통합해 보겠습니다. 우리는 피자의 이미지가 있고, 각 조각을 클릭 가능하게 만들고 싶습니다.

<img src="pizza.jpg" alt="Delicious Pizza" usemap="#pizzamap">

<map name="pizzamap">
<area shape="poly" coords="150,0,97,90,203,90" href="cheese.html" alt="Cheese Slice">
<area shape="poly" coords="0,90,97,90,48,180" href="pepperoni.html" alt="Pepperoni Slice">
<area shape="poly" coords="203,90,300,90,252,180" href="mushroom.html" alt="Mushroom Slice">
<area shape="poly" coords="48,180,148,180,97,90" href="veggie.html" alt="Veggie Slice">
<area shape="poly" coords="152,180,252,180,203,90" href="supreme.html" alt="Supreme Slice">
</map>

이를 구분해 보겠습니다:

우리는 피자 이미지를 표시하는 <img> 태그를 가집니다.
<img> 태그의 usemap 속성은 "pizzamap"이라는 맵과 연결합니다.
우리는 "pizzamap"이라는 이름의 <map>을 정의합니다.
각 <area>는 피자의 조각을 나타냅니다:

shape="poly"를 사용하여 다각형 모양( 삼각형 조각)을 정의합니다.
coords는 각 삼각형의 점을 정의합니다.
각 조각은 해당 피자 유형에 대한 다른 페이지로 링크됩니다.

Shapes and Their Coordinates

이제 이미지 맵에서 사용할 수 있는 다양한 모양과 그 좌표를 살펴보겠습니다:

Shape	Coordinates	Example
rect	left, top, right, bottom	`<area shape="rect" coords="0,0,82,126" href="square.html" alt="Square">`
circle	center-x, center-y, radius	`<area shape="circle" coords="90,58,3" href="circle.html" alt="Circle">`
poly	x1,y1,x2,y2,...,xn,yn	`<area shape="poly" coords="22,0,66,0,66,44,22,44" href="poly.html" alt="Polygon">`

좌표는 이미지의 왼쪽 상단 모서리에서 측정됩니다!

Tips and Tricks

Use an Image Map Generator: 처음 교육을 시작할 때, 저는 좌표를 계산하는 데 몇 시간을 보냈습니다. 지금은 온라인 도구를 사용하여 빠르게 생성합니다!
Test, Test, Test: 항상 다양한 장치와 브라우저에서 이미지 맵을 테스트하세요. 컴퓨터에서 완벽하게 보이는 것은 스마트폰에서는 이상하게 보일 수 있습니다.
Keep it Simple: 간단한 모양부터 시작하고 점차 더 복잡한 모양으로 이동하세요. 로마는 하루아침에 지어지지 않았고, 완벽한 이미지 맵도 그렇습니다!
Accessibility Matters: 각 영역에 설명적인 alt 텍스트를 포함하세요. 이는 단순한 관행이 아니라, 화면 독자 사용자에게 필수적입니다.