TAGS

Editing
  • account_tree
  • bug_report

<area>

이미지에 원하는 영역을 지정하고 하이퍼링크(hyperlink)를 지정할 수 있다.

  • 콘텐츠 분류

  • 허용된 부모 요소 또는 위치

    <MAP>

    구문 콘텐츠(phrasing content)가 예상되는 위치이지만 반드시 <map> 요소가 조상으로 존재해야 한다.

  • 콘텐츠 모델

  • 태그 생략

    종료 태그 생략 가능

  • DOM Interface

구문

마크업 형식
<map> <area></area>
</map>
Example

애트리뷰트

alt string

지정된 요소의 대체 텍스트를 나타낸다.

이 요소에서의 특징

href 애트리뷰트가 명시되면 반드시 설정해야 한다. alt 애트리뷰트는 요소의 대체 텍스트 역할을 한다. 즉 <area> 요소에서는 연결된 <img>  요소가 문제가 발생해 이미지가 화면에 나타나지 않을 경우 기본적으로 <img> 요소에 명시된 alt 애트리뷰트의 대체 텍스트가 나타난다. 그리고 <area> 요소에 명시된 alt 애트리뷰트의 텍스트가 하이퍼링크(hyperlink)와 동일한 의미로 작동한다.

HTML Living Standard의 사양에는 alt 애트리뷰트의 구체적인 내용이 명시되어 있지만 이 정보를 게시한 시점에 실제로 웹브라우저에서의 작동은 확인이 안된다.
한편으로 영문으로 작성된 기술 사양에 대한 해석 오류일 수 있다는 것도 배제할 수 없다. [필자]
coords comma-separated tokensfloating-point numbers

선택된 핫스팟의 모양에 따라 영역을 좌표로 지정한다.

  • rect : x1, y1, x2, y2의 형식을 갖는 좌상단과 우하단을 나타내는 두 개의 x, y 의 세트
  • circle : x, y, r 형식을 갖는 원의 중심을 나타내는 x, y의 위치 값과 반지름 r을 차례대로 지정
  • poly : x1, y1, x2, y2, x3, y3[, ..] 리스트 형식을 갖는 다각형 꼭지점의 x, y 좌표를 세 개 이상 지정
About Comma-separated tokens

콤마(,)로 구분된 토큰 목록을 나타낸다.

shape enumerated attribute

핫스팟의 모양을 정의한다. 가능한 값은 아래와 같다.

  • rect : 사각 형태로 지정
  • circle : 원 형태로 지정
  • poly : 직접 영역을 형성
About Enumerated attribute

제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.

사용되는 키워드

circle

원 상태의 영역에는 3개의 정수가 있는 coords 애트리뷰트가 명시되어야 하며 마지막 정수는 음수가 아니어야 한다. 첫 번째 정수는 이미지의 왼쪽 가장자리에서 원의 중심까지의 거리(CSS 픽셀 단위)여야 하고, 두 번째 정수는 이미지의 상단 가장자리에서 원의 중심까지의 거리(CSS 픽셀 단위)여야 한다. 세 번째 정수는 원의 반지름(CSS 픽셀 단위)이어야 한다.

default

coords 애트리뷰트가 생략이 된 경우이며 영역은 전체 이미지이다.

poly

폴리곤(polygon) 상태에서 <area> 요소는 최소 6개의 정수가 포함된 coords 애트리뷰트가 명시되어야 한다. 각 정수 쌍은 각각 이미지의 왼쪽과 위쪽으로부터의 거리로 주어진 좌표를 CSS 픽셀 단위로 나타내며 모든 좌표는 순서대로 다각형의 점(point)을 나타낸다.

rect

사각형 상태에서 <area> 요소는 정확히 4개의 정수가 포함된 coords 애트리뷰트가 명시되어야 한다. 첫 번째는 세 번째보다 작아야 하고 두 번째는 네 번째보다 작아야 한다. 4개의 점은 각각 이미지의 왼쪽 가장자리에서 사각형의 왼쪽까지의 거리, 이미지의 위쪽 가장자리에서 사각형의 위쪽까지의 거리, 이미지의 왼쪽 가장자리에서 사각형의 오른쪽까지의 거리,  이미지의 위쪽 가장자리에서 사각형의 아래쪽까지의 거리를 나타내며 모두 CSS 픽셀 단위이다.

href non-empty URL

유효한 URL을 설정한다. 설정된 URL은 요소에 따라 용도가 정해진다. 리소스를 가져오거나 하이퍼링크를 위한 목적지로 사용될 수 있다. 또한 참조되는 값으로 사용될 수 있다.

About Non-empty URL

비워있지 않은 유효한 URL을 나타내는 문자열을 나타낸다.

target navigable target names or keywords

하이퍼링크 또는 기타 연결을 설정하는 경우 연결된 리소스를 여는 방식을 지정한다.

기본값

_self
자신의 창(프레임)에서 연결될 리소스를 연다.

사용되는 키워드

_blank

새로 생성한 창(또는 탭)에 보여준다.

_parent

현재 페이지가 프레임 안에 존재하는 경우 부모 프레임(창)에서 보여준다.

_self

현재 창에서 보여준다.

_top

현재 문서가 프레임 안에 존재하는 경우를 포함하여 다수의 프레임이 연관되어 있다면 최상위 프레임(창)에서 보여준다.

download boolean attributes
연결되는 리소스가 다운로드되는 것으로 명시한다.
<a href="file.zip" download>Download</a>
연결되는 리소스를 다운로드후 저장할 때 권장 파일 이름을 지정한다. 허용되는 값에 대한 제한은 없지만 파일 시스템에서 지원되는 파일 확장자에 제한이 있을 수 있으며 유저 에이전트가 개입되어 값이 조정될 수도 있다.
<a href="file.zip" download="safe_file.zip">Download</a>
About Boolean attributes

불리언(boolean) 값을 나타낸다. 예를 들어 다음 세 가지 값은 모두 참(true)이다.

<input disabled>, <input disabled="disabled">, <input disabled="">

ping space-separated tokensnon-empty URL

사용자가 하이퍼링크를 따라가는 경우 알림을 받고자 하는 리소스의 URL을 제공한다. 값은 공백으로 구분된 토큰(token) 집합이어야 하며 각 토큰(token)은 유효한 URL이어야 한다. 이 값은 하이퍼링크 감사를 위해 유저 에이전트가 사용한다.

About Non-empty URL

비워있지 않은 유효한 URL을 나타내는 문자열을 나타낸다.

rel unordered set of unique space-separated tokens

리소스를 연결하는 경우 관계를 정의한다. 연결 유형은 지정된 값을 공백으로 구분한 리스트로 작성해야 한다. 그러나 특별히 명시된 경우를 제외하고는 두 번 이상 지정할 수 없다.

About Unordered set of unique space-separated tokens

순서가 없는 공백으로 구분된 고유한 토큰 세트를 나타낸다.

사용되는 키워드

alternte

사용되는 요소가 <link>이고 stylesheet 키워드가 설정된 경우라면 추가적으로 alternate 키워드를 지정하는 경우 대체 스타일 시트로 연결된다. 이 경우 빈 문자열 값을 허용하지 않으며 유효한 값을 가진 title 애트리뷰트가 반드시 존재해야 한다.

일반적으로 외부의 CSS 파일을 연결할 때 <link> 요소를 사용하므로 주로 위와 같은 경우처럼 alternate가 사용된다.

<a>, <area>, <link> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

author

작성자에 대한 정보 및 작성자와 연락 가능한 연락처 정보가 담긴 페이지로 연결되는 하이퍼링크로 정의한다.

<a>, <area>, <link> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

bookmark

가장 가까운 조상 <article> 요소에 대해 퍼머링크(permalink)를 제공하는 하이퍼링크로 정의한다. 만약에 <article> 요소가 없다면 <link> 요소와 가장 가까운 관계를 가지고 있는 섹션(section)에 대한 퍼머링크(permalink)로 인식된다.

<a>, <area>요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

canonical

현재 문서의 기본 URL을 지정한다.

<link> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

dns-prefetch

유저 에이전트(user agent)가 대상 리소스의 출처에 대한 DNS 확인을 선제적으로 수행하도록 지정한다.

<link> 요소에서 외부 리소스(external resource)로 사용이 가능하다.

external

연결될 문서가 현재 웹사이트 외부의 리소스임을 알린다.

<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.

help

상황에 맞는 도움말에 대한 링크를 제공한다.

만약 <a> 요소이거나 <area> 요소이면 help는 하이퍼링크가 부모와 자손 요소에 대한 추가 도움말을 제공하는 리소스임을 나타낸다.

<link> 요소라면 help는 하이퍼링크가 페이지 전체에 대한 추가 도움말을 제공하는 리소스임을 나타낸다.

<a>, <area>, <link> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

icon

현재 문서를 나타내는 아이콘을 가져오는 것으로 처리한다. 때때로 icon 앞에 shortcut 유형을 작성하는 경우가 있는데 이는 비표준이며 웹브라우저가 무시하므로 사용하지 않아야 한다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

참고로 애플(Apple)의 iOS는 icon 유형을 사용하지 않을 수 있다. 더 자세한 사항은 iOS의 사파리(safari) 웹브라우저의 최신 기술 명세를 확인하라.
license

현재 문서의 주요 콘텐츠가 하이퍼링크(hyperlink)로 참조된 문서에 설명된 저작권 라이선스의 적용을 받는다는 것을 나타낸다.

<a>, <area>, <link>, <form> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

manifest

애플리케이션의 매니페스트(manifest)를 가져오거나 연결한다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

mask-icon

단색의 투명한 배경을 갖는 SVG 아이콘을 나타낸다. color 애트리뷰트와 함께 사용될 수 있다. W3C 명세에는 반드시 지원하지 않아도 되는 것으로 정했다. 따라서 모든 최신 유저 에이전트가 지원한다고 보기 어렵다.

사파리(safari) 웹브라우저에서 지원한다.
modulepreload

유저 에이전트(user agent)가 모듈 스크립트(moduel script)를 선제적으로 가져와 나중에 평가할 수 있도록 문서의 모듈 맵(moduel map)에 저장하도록 지정한다. 선택적으로 모듈의 종속성도 가져올 수 있다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

next

현재 문서가 구조화된 문서의 일부이며 하이퍼링크(hyperlink)로 연결될 문서가 다음 순서에 해당하는 것을 의미한다.

<a>, <area>, <link>, <form> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

nofollow

현재 문서의 게시자(또는 원저자)가 연결될 문서를 보증하지 않음을 나타낸다.

<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.

noopener

하이퍼링크(hyperlink)가 현재 문서와 컨텍스트(context)가 단절되어 열린다. 즉 하이퍼링크(hyperlink)로 열린 문서에서 window.opener 속성 값은 null을 갖는다. 신뢰할 수 없는 문서를 연결할 때 유용하다. target 애트리뷰트는 기본적으로 _blank로 적용된다.

<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.

noreferrer

하이퍼링크(hyperlink) 연결을 정의한 현재 문서를 하이퍼링크(hyperlink)로 열릴 문서에서 참조하도록 헤더(header)에 포함시키지 않는다. 즉 문서를 열게한 문서와 단절된다는 측면에서 noopener와 동일한 작용을 한다고 할 수 있다.

<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.

opener

하이퍼링크(hyperlink)로 열릴 문서는 현재 문서의 탐색 컨텍스트(context)를 포함한다. 즉 noopener와 반대 작용을 한다고 볼 수 있다.

<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.

pingback

현재 문서에 대한 핑백(pingback)을 처리하는 핑백(pingback) 서버의 주소를 지정한다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

preconnect

유저 에이전트가 대상 리소스의 오리진(origin)에 선제적으로 연결하도록 지정한다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

prefetch

후속 탐색이 가능하도록 유저 에이전트가 대상 리소스를 선제적으로 가져와 캐시(cache)하도록 지정한다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

preload

유저 에이전트가 as 애트리뷰트에 지정된 잠재적 목적지와 연결 우선 순위에 따라 현재 탐색을 위해 대상 리소스를 선제적으로 가져와 캐시(cache)하도록 지정한다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

prev

현재 문서가 구조화된 문서의 일부이며 하이퍼링크(hyperlink)로 연결될 문서가 이전 순서에 해당하는 것을 의미한다.

<a>, <area>, <link>, <form> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

search

현재 문서 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스에 대한 링크를 나타낸다.

<a>, <area>, <link>, <form> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

stylesheet

현재 문서에 스타일시트 문서를 리소스로 가져온다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

tag

하이퍼링크가 현재 문서에 적용되는 태그를 설명하는 문서임을 나타낸다.

<a>, <area> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

referrerpolicy enumerated attribute

리소스를 가져올 때 사용할 리퍼러(referrer)를 나타낸다.

About Enumerated attribute

제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.

사용되는 키워드

no-referrer

리퍼러(referrer) 헤더(header)가 전송되지 않는다.

no-referrer-when-downgrade

요청의 리퍼러(referrer)로 사용할 수 있도록 요청의 전체 referrerURL을 제거하여 보낸다. TLS(HTTPS)를 사용하지 않고 오리진(origin)으로 요청할 때 리퍼러(referrer) 헤더(header)를 보내지 않음을 의미한다. 명시적으로 지정한 정책이 없다면 기본값으로 처리된다.

origin

same-origin-referrer 요청 및 cross-origin-referrer 요청을 모두 수행할 때 요청의 referrerURL의 ASCII 직렬화만 리퍼러(referrer) 정보로 전송되도록 한다.

origin-when-cross-origin

same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되고 cross-origin-referrer 요청의 경우는 요청의 referrerURL 원본의 ASCII 직렬화만 리퍼러(referrer) 정보로 전송되도록 한다.

same-origin

same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되도록 한다. 반면에 cross-origin-referrer 요청에는 전송되지 않는다.

strict-origin

요청에 대한 referrerURL 원본의 ASCII 직렬화를 전송한다.

strict-origin-when-cross-origin

same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되고 cross-origin-referrer 요청시에는 요청의 referrerURL 원본의 ASCII 직렬화만 전송되도로 한다.

unsafe-url

요청의 전체 referrerURLsame-origin-referrer 요청과 cross-origin-referrer 요청 모두에게 전송되도록 한다.

글로벌 애트리뷰트

일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.

글로벌 이벤트 핸들러

일부 글로벌 이벤트 핸들러는 이 요소에서 사용되지 않을 수 있다. 이벤트 등록은 자바스크립트 사용을 권장한다.

버전 명세

HTML Standard
#the-area-element

지원 웹브라우저