HTML 태그 area

안녕하세요. crome입니다.

오늘은 <area> 태그에 대해 알아보겠습니다.

이미지의 핫스팟 영역을 정의하고 하이퍼링크를 추가할 수 있습니다. <map> 요소 안에서만 사용할 수 있습니다.

아래 예시는 한국 지도 이미지에 area 태그를 적용하여 각 지역을 클릭하면 해당 지역의 정보를 보여주는 페이지로 이동하는 이미지 맵을 만듭니다.

<img src="korea-map.png" usemap="#korea-map" alt="Korea map">
<map name="korea-map">
  <area shape="poly" coords="50,50,100,100,150,50" href="seoul.html" alt="Seoul">
  <area shape="rect" coords="200,200,300,300" href="busan.html" alt="Busan">
  <area shape="circle" coords="400,400,50" href="jeju.html" alt="Jeju">
</map>

태그별 주요 속성

shape

`rect`: 사각형 모형의 형태
`circle`: 원 모양의 형태
`poly`:  다각형 형태

coords

- 핫스팟 영역을 지정하는 일련의 좌표입니다. 값의 수와 의미는 `shape` 특성의 값에 따라 달라집니다.
    - `rect`: 좌상단과 우하단을 나타내는 두 개의 x, y 쌍입니다. 
    - `circle`:  `x, y, r`로서 `x, y`는 원의 중심 좌표이며 `r`은 반지름입니다.
    - `poly`:  다각형의 꼭지점을 나타내는 다수의 x, y 쌍(`x1, y1, x2, y2, x3, y3,...`)입니다.

href

<area> 하이퍼링크의 대상입니다. 유효한 URL이야 합니다. 생략할 경우, 이 <area> 요소는 하이퍼링크를 나타내지 않습니다.

target

 링크된 리소스가 어디에 표시될지 지정합니다. HTML4에서 이것은 프레임의 이름이나 키워드가 될 수 있습니다. HTML5에서는, 브라우징 컨텍스트(탭, 윈도우, 인라인 프레임)의 이름이나 키워드가 될 수 있습니다. 다음 키워드들은 특별한 의미를 가지고 있습니다.

 _self: 현재 창에서 링크를 엽니다. 이 값은 기본값이므로 생략해도 됩니다.
 _blank: 새 창에서 링크를 엽니다.
_parent: 부모 창에서 링크를 엽니다. 현재 창이 프레임 안에 있을 경우에만 적용됩니다.
_top: 최상위 창에서 링크를 엽니다. 현재 창이 프레임 안에 있을 경우에만 적용됩니다.

예제실습)

참조:https://developer.mozilla.org/ko/docs/Web/HTML/Element/area

오늘은 HTML 태그 중 area 태그에 대해 알아보았습니다.

도움이 되셨다면 공감 및 댓글 남겨주세요.

감사합니다.