HTML 기초 정리(7) - <area> 이미지 맵

정의 및 사용법

 

태그 <area>는 이미지 맵 내부의 영역을 정의합니다(이미지 맵은 클릭할 수 있는 영역이 있는 이미지입니다).
<area>요소는 항상 태그 안에 중첩됩니다 <map>.

 

참고: 속성 usemap은 요소의 속성 <img>과 연관되며 , 이미지와 지도 사이에 관계를 만듭니다.<map> name

 

속성

alt	text	해당 영역의 대체 텍스트를 지정합니다. href 속성이 있는 경우 필수입니다.
coords	coordinates (좌표)	해당 지역의 좌표를 지정합니다
download	filename	사용자가 하이퍼링크를 클릭하면 대상이 다운로드되도록 지정합니다.
href	URL Specifies	해당 영역의 하이퍼링크 대상을 지정합니다.
hreflang	language_code	대상 URL의 언어를 지정합니다
media	media query	대상 URL이 어떤 미디어/장치에 최적화되어 있는지 지정합니다.
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url	링크와 함께 보낼 참조자 정보를 지정합니다.
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	현재 문서와 대상 URL 간의 관계를 지정합니다.
shape	default rect circle poly	영역의 모양을 지정합니다
target	_blank _parent _self _top framename	대상 URL을 열 위치를 지정합니다
type	media_type	대상 URL의 미디어 유형을 지정합니다.

 

 

글로벌 속성

이 태그는 HTML의 전역 속성<area> 도 지원합니다 .

이벤트 속성

이 태그는 HTML의 이벤트 속성<area> 도 지원합니다 .

 

예시

클릭 가능한 영역이 있는 또 다른 이미지 맵:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>