[ HTML ] map 태그 & area 태그

map 태그는
이미지의 특정 부분을 지정하여 링크를 걸 때 사용하는 태그이며,
img 태그와 함께 사용한다.

이미지를 마치 지도처럼 사용한다 하여, 이미지맵이라 부른다.

이미지의 일부분을 클릭하면, 그 부분에 링크된 주소로 이동하게 된다.

그리고 map 태그 안에는, 반드시 area 태그가 들어있어야 한다. ( 즉, <area>는 <map>의 자식 요소이다. )

<area>와 <map>은 모두, 대부분의 브라우저에서 사용할 수 있다.

사용 가능	사용 가능	사용 가능	사용 가능	사용 가능

• 기본 사용법
• 각 태그에서 사용된 속성들
• coords 속성 사용법
• coords에서 사용할 x좌표와 y좌표 구하기
• 기타 참고사항 (nohref 속성)

---

기본 사용법

아래 예문은,
map 태그를 이용하여, 하나의 그림에 여러 주소를 링크한 것이다.
area 태그에, 아래처럼 target 속성을 적용하면, 새창( 또는 새탭 )에서 열리도록 할 수 있다.

 
<img src="menu_bar.png" width="403" height="39" alt="블로그 메뉴" usemap="#menuMap" /> 

<map name="menuMap" id="menuMap"> 
     <area  shape="rect"  coords="11,13,56,24"  alt="첫화면"  title="Home"  target="_blank"  href="http://tonks.tistory.com/" /> 
     <area  shape="rect"  coords="85,11,114,29"   alt="태그 목록"     title="Tag"            target="_blank"  href="../tag" /> 
     <area  shape="rect"  coords="148,11,204,24"  alt="미디어 로그"  title="Media"        target="_blank"  href="../media" /> 
     <area  shape="rect"  coords="236,12,307,24"  alt="위치 로그"     title="Location"     target="_blank"  href="../location" /> 
     <area  shape="rect"  coords="338,12,390,30"  alt="방명록"         title="Guestbook"  target="_blank"  href="../guestbook" /> 
</map> 
 

Tip	area 태그에 적용되는 테두리를 없애는 방법. <area onfocus="this.blur()" . . . . >
	<area>의 테두리에 생기는 점선은, 키보드 사용자를 위한 것으로서, 반드시 필요한 기능임. 참고 사이트 : a 요소(하이퍼 링크)의 사용성과 접근성 - naradesign

---

각 태그에서 사용된 속성들

아래는, 각 태그에서 사용된 속성에 대한 설명이다.

img 태그
usemap	이 이미지에서 map을 사용할 것임을, 브라우저에게 알려준다. 사용할 map의 이름을 넣어준다.
map 태그
name	map 태그에게 붙여줄 이름.
id	name 속성에서 정한 것과 동일한 이름을 넣는다.
※ html 5로 넘어오면서, name 속성보다는 id 속성을 사용하라고 권하는 추세다.
area 태그
shape	map의 모양. 링크를 걸어줄 영역의 모양. 기본값인 default는, 이미지의 전체 영역. default, rect, circle, poly 중에서 하나를 선택하여 사용한다.
coords	map의 좌표. 다각형(poly)일 경우, 최소 3개의 좌표가 필요하다. 추가 설명은 아래의 "coords 속성 사용법"을 참고바람.
alt	"스크린 리더" 사용자처럼 이미지를 볼 수 없는 경우, 또는 이미지를 불러올 수 없는 브라우저를 위한 설정. 이미지를 대신할 문구를 넣어준다.
title	말풍선. 해당 영역으로 마우스를 가져갔을 때 나타나는 문구.
href	클릭시 이동할 URL.
※ ie 7 이하에서는, title이 아닌 alt에서 설정한 내용이 말풍선으로 표시됨.

---

coords 속성 사용법 ( 최종 수정일 : 2016. 2. 17. )

※ coords 속성 안에서는, 빈칸이 올 수 없다.
잘못된 작성법 : coords="90, 58, 3"
올바른 작성법 : coords="90,58,3"

1. 사각형 ( rectangle )
   <area shape="RECT" coords="X1,Y1,X2,Y2" alt="ALTERNATE TEXT" href="URL" />
   X1, Y1, X2, Y2 : 사각형의 두 꼭지점의 위치.
   하나는 왼쪽, 위의 꼭지점이고, 다른 하나는 우측 아래의 꼭지점이다.
   
   사용 예문 : <area shape="rect" coords="1,-1,83,125" alt="home" href="../home.htm" />
    
2. 원형 ( circle )
   <area shape="CIRCLE" coords="X,Y,RADIUS" alt="ALTERNATE TEXT" href="URL" />
   X, Y, RADIUS : 원중심의 X좌표, 원중심의 Y좌표, 원의 반지름
   
   사용 예문 : <area shape="circle" coords="90,58,3" alt="home" href="../home.htm" />
    
3. 다각형 ( polygon )
   <area shape="POLY" coords="X1,Y1,X2,Y2.....,Xn,Yn" alt="ALTERNATE TEXT" href="URL" />
   X1, Y1, X2, Y2....., Xn, Yn : 3개 이상의 x, y좌표
   
   사용 예문 : <area shape="poly" coords="28,65,57,16,90,65" alt="home" href="../home.htm" />
    

---

coords에서 사용할 x좌표와 y좌표 구하기

윈도 PC의 그림판을 이용하면, x좌표와 y좌표값을 알아낼 수 있다.

아래 그림은,
사각형으로 설정할 경우에, 좌표값을 알아내는 방법이다.

원하는 영역만큼, 사각형을 그린 후,
연필 도구를 선택하여,
사각형의 각 꼭지점에 연필 아이콘을 가져가면,
그림판 아래쪽의, 상태 창에
좌측으로부터의 위치와 위로부터의 위치값이 나온다.

위 그림에서는,
home 이란 글자의 바깥쪽에, 분홍색으로 넣어준 사각형에 대해서
왼쪽, 위에 있는 꼭지점의 좌표값을 알 수 있다.

그림판의 아래쪽, 상태 창에 표시된,
첫번째 9px가 x좌표이고, 그 다음 12px가 y좌표이다.

circle과 poly값에 대한 설정은 아래 그림을 참고바람.

※ 위의 그림에서 원을 타원형 모양으로 그린 이유는
  radius가 좌우 반지름이 아닌, 상하 반지름이라는 것을 보여주기 위함이다.
  "shape" 속성만으로 <area>의 영역을 타원형으로 설정할 수는 없는 듯 하다. (2018년 3월 9일 추가함)

---

기타 참고사항 (nohref 속성)

참고로, "nohref" 속성은 더이상 사용하지 않는다.
하지만, 문서를 작성중이거나 특별한 문제가 있어서 링크를 걸어줄 수 없을 경우에 사용할 수는 있다.

해당 영역에는, 링크가 걸려있지 않음을 말한다.
"href" 속성 대신에, 아래와 같이, "nohref"를 집어넣어서 사용한다.

<area shape="rect" coords="85,11,114,29" nohref="true" alt="It doesn't have a link."> 
또는 
<area shape="default" nohref>

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*