<area> 태그의 정의 및 사용법

<area> 태그는
<map> 태그로 정의된 이미지 맵에서 이미지 내의 클릭 가능한 링크 영역을 나타냅니다.

HTML에서 이미지 맵이란
특정 이미지 안에서 하나 이상의 기하학적 영역별로 하이퍼링크를 매핑할 수 있는 기술를 말합니다.
이미지 맵의 목적은 하나의 그림을 여러 개의 그림파일로 분할할 필요 없이 이미지의 여러 영역에 링크를 만드는 간단한 방법을 제공하는 것입니다.
[참고: Wikimedia - Image map (위키백과에서 제공한 정보를 참고하여 내용을 정리했습니다.)]

사용법

  1. 이미지 맵에 사용할 실제 이미지는 <map> 태그 외부의 특정 <img> 태그를 연결해서 사용합니다.
  2. 이미지의 맵에 해당하는 클릭 가능한 영역과 링크는 <map> 태그 내에 <area> 태그로 설정합니다.
  3. 여러 영역에 링크를 만들려면, <map> 태그 내에 여러 개의 <area> 태그를 추가해서 설정하면 됩니다.
  4. 이렇게 하면 연결한 <img> 태그에 이미지 맵이 정의됩니다.
  5. <map>과 <area> 태그는 자체적으로 화면에 표시되지 않습니다.

<area> 태그는 반드시 <map> 태그 내에서 사용해야 합니다.

데모

다음의 데모로 <area> 태그로 이미지 맵에서 이미지 내의 클릭 가능한 링크 영역을 어떻게 나타내는지 살펴보세요.

HTML 
<!-- 이미지 맵에 사용할 실제 이미지 -->
<img src="example.jpg" alt="Web infographic" usemap="#web-link-map">  <!-- usemap 속성으로 <map> 태그를 연결 -->

<!-- 이미지 맵을 정의 -->
<map name="web-link-map"> <!-- name 속성으로 이미지 맵에 이름을 지정 -->
    <!-- 세 개의 <area>로 세 개의 영역에 링크 설정하기 -->
    <area target="_blank" alt="HTML" href="/category/html/" coords="114,154,49" shape="circle">
    <area target="_blank" alt="CSS" href="/category/css/" coords="57,58,49" shape="circle">
    <area target="_blank" alt="JavaScript" href="/category/javascript/" coords="172,57,49" shape="circle">
</map>
실제 적용된 모습

속성

<area> 태그는 전역 속성을 사용할 수 있습니다.
그리고, 이 태그에는 다음의 속성들로 클릭 가능한 링크 영역을 설정합니다.

링크 설정과 관련된 속성들

다음은 <area> 태그에서 링크 설정과 관련된 속성들입니다.

href

연결된 이미지 맵에서 정의한 영역을 클릭하면 링크되는 하이퍼링크가 가리키는 URL을 지정합니다. 이 URL은 브라우저가 지원하는 모든 URL 스키마을 사용할 수 있습니다.

href 속성은 필수가 아닙니다. 생략된 경우 해당 <area> 태그는 하이퍼링크를 나타내지 않습니다.

href 속성에 대한 전체 설명은 <a> 태그를 참조하세요.

alt

이미지가 누락되었거나 사용할 수 없을 경우 사용할 이미지의 대체 텍스트(alternative text)를 지정합니다. 선택적(옵션)으로 사용할 수 있습니다.

시각장애인을 위한 스크린 리더를 사용하는 사용자에게 이미지 대신 사용자가 이해할 수 있는 대체 텍스트로 설명할 수 있어서 웹 접근성 차원에서 매우 유용합니다. 텍스트는 대체 텍스트 없이 표시될 때 이미지가 제공하는 것과 동일한 종류의 선택을 사용자에게 제공하도록 표현되어야 합니다. 이 속성은 href 속성이 사용되는 경우에만 필요합니다.

target

사용자가 링크를 클릭했을 때 URL을 어떤 창이나 탭에서 링크 대상 페이지를 열지 지정합니다.
이 속성은 href 속성이 사용되는 경우에만 필요합니다.

값
target 속성의 값
_self target 속성이 지정되지 않을 때 기본값임.
URL이 현재 창이나 프레임에 표시됨
_blank URL이 새 창이나 새 탭에 표시됨
_parent URL이 부모 프레임에 표시됨. 프레임 구조가 없는 경우 _self와 동일하게 동작함
_top URL이 전체 창의 최상위 프레임에 표시됨. 프레임 구조가 없는 경우 _self와 동일하게 동작함
download

이 속성은 리소스가 브라우저에 표시되는 것이 아니라 다운로드되도록 의도되었음을 나타냅니다. download 속성의 값으로 파일의 새 이름을 지정할 수 있습니다.
이 속성은 href 속성이 사용되는 경우에만 필요합니다.

download 속성에 대한 전체 설명은 <a> 태그를 참조하세요.

rel

rel 속성은 링크된 리소스와의 관계를 명시적으로 표현합니다.
이 속성은 href 속성이 사용되는 경우에만 필요합니다.

자세한 내용은 HTML rel 속성 – 개념 정리 및 활용 방법을 참조하세요.

ping

하이퍼링크를 클릭할 때 브라우저가 특정 URL로 POST 요청을 보내는 기능을 제공합니다. 주로 클릭 추적(Tracking) 또는 로깅(Log) 목적으로 사용됩니다.

referrerpolicy

리소스를 가져올 때 요청 헤더에 참조자(referrer) 정보를 어떻게 보낼지 지정합니다.

referrerpolicy 속성의 값
strict-origin-when-cross-origin 기본값임.
크로스-도메인(cross-origin) 요청 시 Referer 헤더 전송 방식을 엄격하게 제어합니다.
동일 출처 요청을 수행할 때 전체 URL을 보내고, 프로토콜 보안 수준이 동일하게 유지되는 경우에만 출처를 보내고(HTTPS→HTTPS), 보안 수준이 낮은 대상에는 헤더를 보내지 않습니다(HTTPS→HTTP).
no-referrer 참조자 정보를 전송하지 않습니다.
origin 참조자 정보를 도메인까지만 전송합니다.
origin-when-cross-origin 크로스 오리진 요청일 경우 도메인까지만 전송합니다.
다른 출처로 전송된 레퍼러는 스킴, 호스트, 포트로 제한됩니다. 동일한 출처의 탐색에는 여전히 경로가 포함됩니다.
unsafe-url 전체 URL을 전송합니다. (하지만 fragment , password 또는 username은 포함하지 않습니다.) 이 값은 TLS로 보호되는 리소스에서 안전하지 않은 origin으로 origin과 path를 누출하기 때문에 안전하지 않습니다.
no-referrer-when-downgrade HTTPS에서 HTTP로 요청하는 경우 Referer 헤더를 비활성화합니다. 즉, 보안 수준이 낮은 HTTP 페이지로 이동할 때는 Referer 정보가 전송되지 않도록 합니다.
strict-origin 프로토콜 보안 수준이 동일하게 유지되는 경우(HTTPS→HTTPS)에만 문서 출처를 참조자로 보내지만, 보안 수준이 낮은 대상(HTTPS→HTTP)에는 보내지 않습니다.

영역 설정과 관련된 속성들

다음은 <area> 태그에서 영역 설정과 관련된 속성들입니다.

shape

이미지 맵에서 생성될 모양의 종류를 지정합니다.
이 속성은 다음의 키워드를 값으로 사용할 수 있습니다.

값
shape 속성의 값
rect 사각형(Rectangle)을 정의합니다.
circle 원(Circle)을 정의합니다.
poly 다각형(Polygon)을 정의합니다.
default 정의된 모양을 벗어난 전체 영역(Entire image)을 정의합니다.
coords

coords 속성은 <area> 태그로 지정한 모양의 종류별 좌표를 자세히 설정합니다.
단, shape 속성의 값이 default로 설정된 경우 이 속성을 사용하면 안 됩니다.

shape 속성 값에 따른 좌표 값은 다음과 같습니다.

shape 속성 값에 따른 coords 속성의 좌표 값 형식
shape 속성 값에 따른 coords 속성의 좌표 값 형식
shape 속성 값 설명 coords 형식
rect 사각형(Rectangle) "x1, y1, x2, y2" (좌상단 x1, y1 / 우하단 x2, y2)
circle 원(Circle) "x, y, r" (중심 x, y / 반지름 r)
poly 다각형(Polygon) "x1, y1, x2, y2, x3, y3, ..." (각 꼭짓점 좌표 나열)

값은 CSS 픽셀의 숫자입니다.

예제
HTML 
<img src="image-map.png" usemap="#examplemap">
<map name="examplemap">
    <!-- 사각형 영역: 좌상단 (34,44), 우하단 (270,350) -->
    <area shape="rect" coords="34,44,270,350" href="https://example.com/rect">
    
    <!-- 원형 영역: 중심 (200,150), 반지름 50 -->
    <area shape="circle" coords="200,150,50" href="https://example.com/circle">
    
    <!-- 다각형 영역: 꼭짓점 (130,60), (180,100), (160,200) -->
    <area shape="poly" coords="130,60,180,100,160,200" href="https://example.com/poly">
</map>
주의할 점
  • 좌표 값은 이미지 기준 - coords 속성의 좌표는 이미지의 왼쪽 상단(0,0)을 기준으로 설정됩니다.
  • 이미지 크기가 바뀌면 좌표도 변경해야 함 - 원본 이미지 크기를 변경하면 coords 값도 그에 맞춰 조정해야 합니다.
  • 다각형(poly)의 경우, 반드시 최소 3개의 좌표 지정 - 점 2개만 지정하면 선(Line) 이 되므로 다각형으로 인식되지 않습니다.

기술적인 문법 요약

area 태그의 구문 형식
태그 생략 시작 태그가 있어야 하며, 닫는 태그(</area>)가 있어서는 안 됩니다.
허용되는 부모 요소 구문 내용을 허용하는 모든 요소.
<map>이 조상에 있어야 하지만, 직접적인 부모일 필요는 없습니다.
허용되는 콘텐츠 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다.
암시적인 role 속성 값 link 속성이 존재하는 경우 href, 그렇지 않은 경우 generic
허용된 role 속성 값 없음

브라우저 호환성

area 태그의 브라우저 호환성
태그와 속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<area> 1 12 1 1
alt 1 12 1 1
href 1 12 1 1
target 1 12 1 1
shape 1 12 1 1
coords 1 12 1 1
ping 12 17 1 6
download 54 12 20 10.1
referrerpolicy 51 79 79 14
rel 16 12 30 5

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

area 태그의 명세서 사양
명세서 사양
<area> HTML
#the-area-element

참고문헌

같이 보기