..

Search

<area>

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>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<area> 지원함 지원함 지원함 1.0 지원함 지원함

사용할 수 있는 속성

html5 : HTML5에서 새롭게 추가된  속성

속성명   속성값 설명

alt

 

텍스트

영역(area)에 대한 대체 텍스트(alternate text)를 명시함.

반드시 href 속성이 설정되어 있어야만 사용할 수 있음.

coords

 

좌표

영역의 좌표를 명시함.

download

html5

파일 이름

사용자가 하이퍼링크를 클릭할 때 해당 대상(target)으로 연결되지 않고 대신 해당 콘텐츠가 다운로드됨을 명시함.

href

 

URL

해당 영역(area)에 연결된 하이퍼링크의 대상 URL(target URL)을 명시함.

hreflang

html5

언어 코드

대상 URL의 언어를 명시함.

HTML5.1부터 더 이상 지원하지 않음.

media

html5

미디어 쿼리

대상 URL이 최적화되는 미디어나 매체를 명시함.

nohref

 

해당 영역이 연관된 어떠한 링크도 가지고 있지 않음을 명시함.

HTML5에서는 더 이상 지원하지 않음.

rel

html5

alternate

author

bookmark

help

license

next

nofollow

noreferrer

prefetch

prev

search

tag

현재 문서와 대상 URL 사이의 연관 관계를 명시함.

shape

 

default

rect

circle

poly

영역의 모양을 명시함.

target

 

_blank

_parent

_self

_top

프레임 이름

영역을 클릭했을 때 대상 URL의 문서가 열릴 위치를 명시함.

type

html5

미디어 타입

대상 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;

연관 페이지

HTML 이미지 수업 ⇒


연습문제