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 | |||||||