HTML <area> 태그
정의 및 특징
<area> 태그는 이미지 맵(image-map)에서 하이퍼링크가 연결될 영역을 정의할 때 사용합니다.
예제
<img src="/examples/images/img_imagemap.jpg" alt="진실 혹은 거짓" usemap="#vending" style="width:320px; height:240px">
<map name="vending">
<area shape="rect" coords="210,200,70,130" alt="진실" href="https://ko.wikipedia.org/wiki/%EC%A7%84%EC%8B%A4">
<area shape="rect" coords="90,60,180,130" alt="거짓" href="https://ko.wikipedia.org/wiki/%EA%B1%B0%EC%A7%93%EB%A7%90">
</map>
지원하는 브라우저 및 버전
| 태그명 |
|
|
|
|
|
|
|---|---|---|---|---|---|---|
| <area> | 지원함 | 지원함 | 지원함 | 1.0 | 지원함 | 지원함 |
사용할 수 있는 속성
: HTML5에서 새롭게 추가된 속성
| 속성명 | 속성값 | 설명 | |
|---|---|---|---|
|
텍스트 |
영역(area)에 대한 대체 텍스트(alternate text)를 명시함. 반드시 href 속성이 설정되어 있어야만 사용할 수 있음. |
||
|
|
좌표 |
영역의 좌표를 명시함. |
|
|
|
파일 이름 |
사용자가 하이퍼링크를 클릭할 때 해당 대상(target)으로 연결되지 않고 대신 해당 콘텐츠가 다운로드됨을 명시함. |
|
|
|
URL |
해당 영역(area)에 연결된 하이퍼링크의 대상 URL(target URL)을 명시함. |
|
|
|
언어 코드 |
대상 URL의 언어를 명시함. HTML5.1부터 더 이상 지원하지 않음. |
|
|
|
미디어 쿼리 |
대상 URL이 최적화되는 미디어나 매체를 명시함. |
|
|
nohref |
|
값 |
해당 영역이 연관된 어떠한 링크도 가지고 있지 않음을 명시함. HTML5에서는 더 이상 지원하지 않음. |
|
|
alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
현재 문서와 대상 URL 사이의 연관 관계를 명시함. |
|
|
|
default rect circle poly |
영역의 모양을 명시함. |
|
|
|
_blank _parent _self _top 프레임 이름 |
영역을 클릭했을 때 대상 URL의 문서가 열릴 위치를 명시함. |
|
|
|
미디어 타입 |
대상 URL의 미디어 타입을 명시함. HTML5.1부터 더 이상 지원하지 않음. |
CSS 기본값
| area { display: none; } |
DOM 인터페이스
| interface HTMLAreaElement : HTMLElement { attribute DOMString alt; attribute DOMString coords; attribute DOMString shape; attribute DOMString target; attribute DOMString download; attribute DOMString rel; [SameObject, PutForwards=value] readonly attribute DOMTokenList relList; attribute DOMString hreflang; attribute DOMString type; attribute DOMString referrerPolicy; }; HTMLAreaElement implements HTMLHyperlinkElementUtils; |
