HTML <area>, <map> 태그

 

<area>

이미지의 특정 영역을 클릭할 수 있도록 정의하는 데 사용됩니다. <map> 태그와 함께 사용됩니다.

 

이미지 내의 특정 부분을 클릭하면 다른 페이지로 이동하거나 특정 액션을 수행할 수 있습니다.

 

 

주요 속성

shape	영역의 모양 지정 (rect, circle, poly)
coords	해당 모양에 대한 좌표 값 설정
href	클릭 시 이동할 링크
alt	대체 텍스트
target	새 창에서 열지 여부 (_blank, _self 등)

 

 

예제 

 

 <img src="http://usingu.cdn3.cafe24.com/blog/imagemap-sample.jpg" 
 	 usemap="#imagemap-sample1">
 
    <map name="imagemap-sample1">
    
      <area target="_blank" alt="구글 이동"
        href="https://google.com" coords="71,352,270,503" shape="rect">
        
      <area target="_blank" alt="네이버 이동"
        href="https://naver.com" coords="611,418,100" shape="circle">
        
      <area target="_blank" alt="다음 이동"
        href="https://daum.net" coords="279,206,226,270,400,367,397,273" shape="poly">
        
      <area target="_blank" alt="MDN CSS Docs 이동"
        href="https://developer.mozilla.org/ko/docs/Web/CSS" coords="342,134,288,196,396,258,397,168" shape="poly">
        
      <area target="_blank" alt="MDN JS Docs 이동"
        href="https://developer.mozilla.org/ko/docs/Web/JavaScript" coords="345,130,399,158,399,65" shape="poly">
    </map>

결과

 

 

 

 

따라해보기

 

1️⃣ <img> 태그의 usemap 속성을 지정하여 사용할 <map> 연결

 

이미지맵을 사용하기 위해서는 먼저 img 요소에 이미지맵과 연결될 map의 name을 usemap 속성에 지정합니다.

<img
src = "url"
alt = "대체텍스트"
usemap = "#mapname"
>

- usemap 속성의 값은 <map> 요소의 name 속성의 값을 지정
- map이름 앞에 반드시 우물정(#)을 붙여서 작성
- map이름은 대소문자 구분하여 인식

 

2️⃣ <map>태그에 <img>의 usemap 값과 동일한 name 속성 지정

 

<map
name = "mapname" >
<area>
</map>

 

 

3️⃣ <area> 요소에 클릭 가능한 영역과 링크 URL 지정

 

이미지맵에서 이미지 내 클릭 가능한 영역을 지정하는 것은 <area>요소입니다. 

<area> 요소를 이용해 클릭가능한 영역을 여러 개를 지정할 수 있습니다.

클릭 가능한 영역의 모양도 원, 사각, 다각형으로 다양한 형태로 지정할 수 있습니다.

 

 

<map name = "mapname">
    <area
    shape = "default | rect | circle | poly "
    coords = "클릭가능한 영역의 좌표"
    alt = "대체텍스트"
    href ="URL"
    target = "_self | _blank | _parent | _top | framename "
    >
</map>

 

 

 

 

특징

• 이미지 맵을 구성하는 요소 🎨
  • <map> 태그와 함께 사용되며, <img> 태그의 usemap 속성과 연결됩니다.
• 다양한 모양 지정 가능 🔷
  • shape 속성을 이용해 사각형(rect), 원(circle), 다각형(poly) 형태를 지정할 수 있습니다.
• 좌표 지정 📍
  • coords 속성으로 영역의 좌표를 설정합니다.
• 하이퍼링크 가능 🔗
  • href 속성을 사용하여 클릭 시 이동할 URL을 지정할 수 있습니다.