HTML에서 이미지 맵(image map)은 하나의 이미지 안에 여러 개의 클릭 가능한 영역을 만들어, 각 영역마다 서로 다른 링크를 연결할 수 있게 해주는 기능입니다. 이미지 맵을 추가하려면 HTML의 <map> 태그를 사용하며, 이 태그는 <img> 태그와 함께 사용됩니다.
map 태그의 주요 속성
<map> 태그에서 사용되는 속성은 다음과 같습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| name | unique_name | 맵(map) 태그에 고유한 이름을 지정합니다. <img> 태그의 usemap 속성과 연결하는 데 사용됩니다. |
이미지 맵 예제 코드
아래 예제 코드를 직접 실행해 보면 HTML에서 이미지 맵을 만드는 방법을 쉽게 이해할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML map Tag</title> </head> <body> <img src = "/images/html.gif" alt = "HTML Map" border = "0" usemap = "#html"/> <!-- 맵핑 생성 --> <map name = "html"> <area shape = "circle" coords = "154,150,59" href = "about/about_team.htm" alt = "Team" target = "_self" /> </map> </body> </html>
코드 설명
위 예제의 핵심 요소를 살펴보면 다음과 같습니다.
- usemap 속성:
<img>태그에usemap="#html"을 지정하여 해당 이미지가 어떤 맵과 연결되는지 정의합니다. - area 태그: 클릭 가능한 영역을 하나씩 정의하며, 여러 개를 추가해 다양한 링크를 설정할 수 있습니다.
- shape 속성: 영역의 모양을 지정합니다.
circle(원형),rect(사각형),poly(다각형) 등을 사용할 수 있습니다. - coords 속성: 영역의 좌표를 지정합니다. 원형일 경우 중심 x좌표, y좌표, 반지름 순으로 입력합니다.
- href 속성: 해당 영역을 클릭했을 때 이동할 링크 주소를 지정합니다.
이처럼 <map>과 <area> 태그를 조합하면 하나의 이미지에서도 위치별로 다른 페이지로 이동하는 인터랙티브한 UI를 손쉽게 구현할 수 있습니다.