HTML <area>: 클릭 영역 요소
HTML <area>
요소는 이미지 맵 안의 클릭 가능한 영역을 정의합니다. 이미지 맵은 이미지의 일부 영역을 하이퍼텍스트 링크와 연결할 때 사용합니다.
특성
전역 특성을 포함합니다.
alt
이미지를 출력하지 않는 브라우저에서 대신 사용할 대체 텍스트를 지정합니다. 텍스트의 내용은 이미지의 해당 영역이 나타내는 선택지를 동일하게 표현할 수 있어야 합니다.
href
특성이 존재할 때는 필수 특성입니다.coords
shape
특성으로 지정한 모양의 자세한 형태, 크기, 위치 등을 지정합니다. 값의 형태는shape
특성에 따라 다릅니다.rect
:coords
값의 형태가x1,y1,x2,y2
입니다. 각각 직사각형의 좌상단, 우하단 꼭짓점 좌표를 지정합니다.<area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Docs" />
의 예제에서는 클릭 영역이 왼쪽 위 0, 0에서 오른쪽 아래 253, 27까지 차지하는 사각형입니다.circle
: 값의 형태가x,y,radius
입니다. 원의 중심과 반지름을 지정합니다.poly
: 값의 형태가x1,y1,x2,y2,...,xn,yn
입니다. 각각의 쌍이 다각형의 꼭짓점 하나를 정의합니다. 맨 처음 꼭짓점과 마지막 꼭짓점의 좌표가 같지 않으면 브라우저가 자동으로 끝선을 이어줍니다.default
: 맵 전체를 덮으므로coords
특성을 지정해서는 안됩니다.
값의 단위는 CSS 픽셀입니다.
download
사용자를 연결된 URL로 바로 보내는 대신, 지정한 링크의 리소스를 다운로드할지 여부를 물어보게 됩니다.
<a>
요소의download
특성에서 전체 설명을 볼 수 있습니다.href
클릭 영역에 연결할 하이퍼링크입니다. 지정하지 않으면 요소가 하이퍼링크를 나타내지 않습니다.
hreflang
href
로 연결한 링크의 인간 언어를 지정합니다. 별도의 기능은 없습니다. 전역lang
특성과 같은 값을 사용합니다.ping
공백으로 구분하는 URL 리스트입니다. 사용자가 링크를 따라가면 본문을
PING
으로 하는POST
요청을 주어진 모든 URL로 전송합니다. 보통 행동 추적 용도로 사용합니다.referrerpolicy
링크를 따라갈 때 전송할 보낼 리퍼러를 지정합니다.
no-referrer
:Referer
헤더를 전송하지 않습니다.no-referrer-when-downgrade
: TLS(HTTPS) 지원을 하지 않는 출처에 대해서는Referer
헤더를 전송하지 않습니다.origin
:Referer
헤더가 요청의 출처, 즉 스킴, 호스트, 포트를 포함합니다.origin-when-cross-origin
: 다른 출처로 요청할 땐 리퍼러 데이터를 스킴, 호스트, 포트로 제한합니다. 동일 출처로 요청할 땐 전체 경로도 포함합니다.same-origin
: 동일 출처 요청에는 리퍼러를 전송하고, 교차 출처 요청에는 전송하지 않습니다.strict-origin
: 보안 수준이 동일(HTTPS→HTTPS)할 땐 문서의 출처를 리퍼러로 전송하고, 더 낮을(HTTPS→HTTP) 땐 전송하지 않습니다.strict-origin-when-cross-origin
(기본 값): 동일 출처 요청에는 전체 URL을 전송합니다. 교차 출처 요청에 대해서는 보안 수준이 동일(HTTPS→HTTPS)할 땐 문서의 출처를 리퍼러로 전송하고, 더 낮을(HTTPS→HTTP) 땐 전송하지 않습니다.unsafe-url
: 리퍼러가 항상 출처, 경로, 쿼리 문자열을 포함합니다. 프래그먼트, 비밀번호, 사용자 이름은 포함하지 않습니다. 안전하지 않은 값입니다. TLS로 보호받는 리소스에서 보호 없는 출처로 정보가 누출될 수 있습니다.
rel
연결한 URL과 현재 문서 사이의 관계를 명시합니다. 링크 유형을 공백으로 구분한 리스트여야 합니다.
shape
클릭 가능한 영역의 형태를 지정합니다. HTML 명세는 직사각형 영역을 나타내는
rect
, 원형 영역을 나타내는circle
, 다각형 영역을 나타내는poly
, 전체 영역을 덮는default
값을 정의하고 있습니다.다수의 브라우저에서
circ
,polygon
,rectangle
도 지원하지만 이 세 값은 표준에 정의된 값이 아닙니다.target
연결한 URL을 표시할 위치입니다.
<a>
요소의target
특성에서 전체 설명을 볼 수 있습니다.
명세
브라우저 호환성
데스크톱 | 모바일 | ||||||
---|---|---|---|---|---|---|---|
iOS | Android | ||||||
Safari | Chrome | Firefox | Safari | Chrome | Firefox | Samsung Internet | |
area | |||||||
alt | |||||||
coords |