html 이미지 맵 에리어 - <map>,<area>

- <map>태그는 이미지 위에 클릭이 가능한 구역을 만들어주는 태그이다.

- <map> 태그는 "name" attribute를 요구하는데, 이 태그를 사용할때에는 <img>태그에 "usemap" attribute를 사용해   <map>과 <img> 태그 사이의 관계를 만들어 주어야한다.

- <map>태그는 <area> 태그를 감싸는 contain 요소라고 할 수 있는데, 

  <area>는 이미지위에 올릴 클릭구역 수 만큼 사용해주면 된다.

<img src="/" alt="이미지" usemap="#maparea">

<map name ="maparea">
  <area shape="모양" coords="좌표" href="링크" alt="설명">
  <area shape="모양" coords="좌표" href="링크" alt="설명">
  <area shape="모양" coords="좌표" href="링크" alt="설명">
</map>

<area>에서는 shape, coords, href 속성을 지정해주는데 shape에 따라서 coords 작성이 달라진다.

coords에는 모서리, 혹은 중심의 좌표값을 넣어 그 좌표값대로 이어진 영역이 area로 형성된다.

shape의 종류에는 rect(사각형, rectangle), circle(원형), poly(다각형, polygon)이 있다.

rect에는 위의 이미지와 같이 두 모서리의 좌표값을 넣어주면 된다.

coords="A-x,A-y,B-x,B-y" 

원형인 circle은 모서리가 없으니까, 원형의 중심인 A와, 원을 이루고 있는 반지름값을 넣어주면 된다.

coords ="A-x,A-y,B"

다각형은 rect와 마찬가지로 모서리의 좌표값을 적어주면 되는데, 

다른점이라면 모든 모서리의 좌표값을 적어주어야한다는 것이다.

coords="A-x,A-y,B-x,B-y,C-x,C-y,D-x,D-y,E-x,E-y"

분명 이미지 작업할때 E까지 써놨는데 저장하니까 어디간거니...?