area element - by. UXKM

2025-05-16

요약 설명 <area> 요소는 <map> 요소 내에서 이미지 맵의 클릭 가능한 영역을 정의하는 태그로, 이미지의 특정 좌표를 링크 등과 연결할 수 있게 합니다.
shape, coords, href, alt 등의 속성을 통해 영역의 형태와 링크 대상, 대체 텍스트 등을 지정하며, <img> 요소의 usemap 속성과 연결되어 하나의 이미지에서 여러 영역에 다른 동작을 부여할 수 있습니다. 접근성을 위해 alt 속성은 반드시 제공해야 하며, 마우스 없이도 인식될 수 있도록 구성하는 것이 좋습니다.

주요 역할 및 특징

이미지의 특정 영역을 클릭 가능하게 만듦
- <area> 요소는 <map> 요소 안에서 정의되며, 특정 좌표를 클릭할 수 있도록 설정합니다.
- 예: 세계 지도에서 특정 국가를 클릭하면 해당 국가의 정보 페이지로 이동 가능.
다양한 형태(Shape) 지원
shape 속성을 사용하여 전체 영역(default), 사각형(rect), 원형(circle), 다각형(poly) 등의 클릭 가능한 영역을 만들 수 있습니다.
coords 속성을 사용하여 위치 정의
coords 속성을 사용하여 특정 위치에 링크를 설정합니다. 좌표값은 이미지 크기에 따라 조정해야 합니다.
브라우저 렌더링
- <area> 요소는 시각적으로 보이지 않지만, 지정된 영역에서 클릭이 가능합니다.
- CSS 스타일링이 직접 적용되지 않으며, 필요할 경우 JavaScript로 조정해야 합니다.
SEO 및 접근성 향상
- alt 속성을 추가하면 검색 엔진이 이미지 맵을 더 잘 이해할 수 있습니다.
- 키보드 및 스크린 리더 사용자도 접근할 수 있도록 tabindex를 활용할 수 있습니다.

CSS 기본 값

<area> 요소는 특정한 CSS 기본 값이 없으며, 배경색, 테두리 등 시각적 스타일링 불가능 합니다.
<area> 요소는 인터랙티브한 요소(클릭 가능)지만, 시각적인 요소는 없습니다.

기본 문법

							<img src="map.jpg" usemap="#example-map" alt="예제 이미지 맵">

							<map name="example-map">
								<area shape="rect" coords="50,50,150,150" href="https://example.com/section1" alt="섹션 1">
							</map>

속성

`<area>` 속성 요약

속성명
설명

href [필수]

클릭 시 이동할 URL을 지정합니다.
alt [필수]

이미지 맵 영역의 대체 텍스트를 제공합니다. (접근성을 위해 필수)
shape [필수]

영역의 모양을 지정합니다. (rect, circle, poly, default)
coords [필수]

영역의 좌표 값을 설정합니다. (shape 속성과 함께 사용)
target

링크가 열리는 방식을 지정합니다. (_blank, _self 등)
rel

현재 문서와 링크 대상의 관계를 설정합니다. (noopener, nofollow 등)
referrerpolicy

Referer 헤더 정보를 전송하는 방식을 설정합니다. (origin, no-referrer 등)
download

클릭 시 파일을 다운로드하도록 설정합니다. (href가 필요)

[href] 필수 <area href="URL">

클릭 시 이동할 URL을 지정합니다. 내부/외부 링크 및 앵커(#)를 사용할 수 있습니다.

								<area shape="circle" coords="100,100,50" href="https://example.com">

[alt] 필수 <area alt="텍스트">

이미지 맵에 대체 텍스트를 제공합니다. 접근성을 고려하여 반드시 작성하는 것이 좋습니다.

								<area shape="rect" coords="50,50,150,150" href="https://example.com" alt="예제 링크">

[shape] 필수 <area shape="값">

<area> 영역의 모양을 지정합니다.

설정 가능한 값 :: rect : 사각형 (x1, y1, x2, y2); circle : 원 (centerX, centerY, radius); poly : 다각형 (x1, y1, x2, y2, x3, y3, ...); default : 전체 이미지 영역

								<area shape="rect" coords="50,50,150,150" href="https://example.com">
								<area shape="circle" coords="100,100,50" href="https://example.com">
								<area shape="poly" coords="400,32,416,32,422,22,441,23,464" href="https://example.com">

[coords] 필수 <area coords="값">

shape 속성과 함께 사용되며, 영역의 좌표를 지정합니다.

shape 속성의 값이 rect(사각형)인 경우

사각형을 정의하는 도형으로, 두 개의 대각선 꼭짓점 좌표를 이용하여 크기와 위치를 지정합니다.

형식 : x1, y1, x2, y2: x1, y1 : 사각형의 왼쪽 상단 꼭짓점 좌표; x2, y2 : 사각형의 오른쪽 하단 꼭짓점 좌표

[shape="rect" 속성에서 coords 좌표 계산 예시]

										<!-- rect 1 -->
										<area shape="rect" coords="0, 0, 100, 100" href="https://example.com" alt="rect 1">

										<!-- rect 2 -->
										<area shape="rect" coords="100, 0, 200, 100" href="https://example.com" alt="rect 1">

shape 속성의 값이 circle(원)인 경우

원을 정의하는 도형으로, 원의 중심 좌표와 반지름을 이용하여 크기와 위치를 결정합니다.

형식 : centerX, centerY, radius: centerX, centerY : 원의 중심 좌표; radius : 원의 반지름

[shape="circle" 속성에서 coords 좌표 계산 예시]

										<!-- rect 1 -->
										<area shape="circle" coords="50,50,50" href="https://example.com" alt="circle 1">

										<!-- rect 2 -->
										<area shape="circle" coords="150,50,50" href="https://example.com" alt="circle 2">

shape 속성의 값이 poly(다각형)인 경우

다각형을 정의하는 도형으로, 여러 개의 꼭짓점 좌표를 나열하여 형태를 지정합니다.

형식 : x1, y1, x2, y2, x3, y3, ...: 각 x, y 쌍은 다각형을 구성하는 꼭짓점 좌표를 나타냅니다.; 최소 세 개 이상의 좌표가 필요합니다.

[shape="poly" 속성에서 coords 좌표 계산 예시]

										<area shape="poly" coords="2,5,32,1,33,22,51,36,33,57" alt="America">
										<area shape="poly" coords="57,14,70,2,111,3,114,23,97,34" alt="Eurasia">
										<area shape="poly" coords="57,14,86,29,73,52,66,49,50,28" alt="Africa">
										<area shape="poly" coords="105,40,108,49,122,52,127,41,117,34" alt="Australia">

[target] 선택 사항 <area target="값">

링크가 열릴 위치를 지정합니다.

설정 가능한 값 :: _self : 같은 창에서 열기 (기본값); _blank : 새 창 또는 새 탭에서 열기; _parent : 부모 프레임에서 열기; _top : 최상위 프레임에서 열기

								<area shape="rect" coords="50,50,150,150" href="https://example.com" target="_blank">

[rel] 선택 사항 <area rel="값">

현재 문서와 링크 대상의 관계를 설정합니다.

설정 가능한 값 :: noopener : 새 창에서 열릴 때 보안 강화 (window.opener 방지); nofollow : 검색 엔진이 해당 링크를 따라가지 않도록 설정; noreferrer : Referer 헤더를 전송하지 않음

								<area shape="rect" coords="10,10,100,100" href="https://example.com" rel="noopener">

[referrerpolicy] 선택 사항 <area referrerpolicy="값">

Referer 헤더 정보를 전송하는 방식을 제어합니다.
(Referer 헤더란? 사용자가 웹사이트에서 다른 웹사이트로 이동할 때, 현재 페이지의 URL을 다음 요청과 함께 전달하는 HTTP 헤더 필드입니다.)

설정 가능한 값 :: no-referrer : Referer를 전송하지 않음; origin : 도메인만 전송 (https://example.com); strict-origin : HTTPS에서만 Referer 전송; same-origin : 같은 도메인에서만 Referer 포함

								<area shape="rect" coords="10,10,100,100" href="https://example.com" referrerpolicy="no-referrer">

[download] 선택 사항 <area download="값">

클릭 시 링크된 파일을 다운로드하도록 설정합니다.
download 속성만 선언하면 href에 지정된 파일이 그대로 다운로드되며, 속성값을 지정하면 href와 별도로 다운로드될 파일명을 설정할 수 있습니다.

								<!-- download 속성만 선언 : href로 지정한 파일 다운로드 -->
								<area shape="rect" coords="10,10,100,100" href="example.pdf" download>

								<!-- download 속성의 값 설정 : download 속성으로 지정한 파일 다운로드 -->
								<area shape="rect" coords="10,10,100,100" href="file.pdf" download="example.pdf">

예제

사각형(Rectangle) 영역 링크

원형(Circle) 영역 링크

다각형(Polygon) 영역 링크 (MDN 링크)

다각형(Polygon) 영역 링크 (반응형 세계 지도)

주의사항

<area> 요소는 단독으로 사용할 수 없으며, 반드시 <map> 내부에서 사용해야 합니다.
<img>에 usemap="#map-name" 속성을 추가하지 않으면 이미지 맵이 정상적으로 동작하지 않습니다.
<area> 요소는 이미지의 일부를 클릭할 수 있는 기능이므로, 반드시 alt 속성을 추가하여 의미를 전달해야 합니다.
<area> 요소는 스타일을 적용할 수 없으므로, 시각적 효과가 필요할 경우 JavaScript를 활용해야 합니다.