[HTML] area 태그 (이미지 특정 영역 지정)

728x90

목 차

• 1. area 태그란?
• 2. 기본 개념
• 3. 기본 문법
• 4. 구성 요소
  • 4-1. map 태그
  • 4-2. area 태그
• 5. 주요 속성
  • 5-1. shape
  • 5-2. coords
  • 5-3. href
  • 5-4. alt
  • 5-5. target
  • 5-6. download
• 6. 사용 예제
• 7. 주의 사항

반응형

 

1. area 태그란?

HTML의 <area> 태그는 이미지 맵(image map)을 정의할 때 사용됩니다. 이미지 맵은 이미지의 특정 영역을 클릭 가능한 링크로 설정할 수 있는 기능으로, <img> 태그와 함께 <map> 태그 안에서 사용됩니다. <area> 태그는 이미지 맵에서 각 영역의 위치, 크기, 링크를 정의합니다.

 

---

 

2. 기본 개념

• <area> 태그는 HTML5에서 지원되며, 닫는 태그가 없는 빈 태그(self-closing tag)입니다.
• 이미지를 클릭 가능한 여러 영역으로 나누는 데 사용됩니다.
• 각 영역은 coords 속성을 통해 모양과 위치를 정의하며, href 속성을 통해 연결할 링크를 지정합니다.

 

---

 

3. 기본 문법

<img src="image-map.jpg" alt="Example Image Map" usemap="#mapname">

<map name="mapname">
  <area shape="rect" coords="50,50,150,150" href="https://example.com" alt="Rectangle Link">
  <area shape="circle" coords="200,200,50" href="https://example2.com" alt="Circle Link">
</map>

 

---

 

4. 구성 요소

4-1. map 태그

• 이미지 맵을 정의하는 컨테이너입니다.
• name 속성은 <img> 태그의 usemap 속성과 연결됩니다.

4-2. area 태그

• 이미지를 나눈 영역을 정의합니다.
• shape, coords, href 등의 속성을 사용하여 각 영역의 특성을 지정합니다.

 

---

 

5. 주요 속성

5-1. shape

• 영역의 모양을 지정합니다.
• 사용 가능한 값:
  • rect: 사각형 영역
  • circle: 원형 영역
  • poly: 다각형 영역
  • default: 이미지 전체 영역
• 예시:

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

 

5-2. coords

• 영역의 크기와 위치를 지정합니다.
• 값의 형식은 shape에 따라 다릅니다.
  • rect: x1, y1, x2, y2 (좌상단과 우하단의 좌표)
  • circle: x, y, r (중심 좌표와 반지름)
  • poly: x1, y1, x2, y2, ... (각 점의 좌표)
• 예시:

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

 

5-3. href

• 클릭했을 때 이동할 링크를 지정합니다.
• 예시:

  <area href="https://example.com">

 

5-4. alt

• 영역의 대체 텍스트를 지정합니다. 이미지를 사용할 수 없는 상황에서 내용을 설명합니다.

 

5-5. target

• 링크를 열 방식(탭, 창 등)을 지정합니다.
  • _self: 현재 창(기본값)
  • _blank: 새 창/탭
  • _parent: 부모 프레임
  • _top: 최상위 프레임
  • 예시:

    <area href="https://example.com" target="_blank">

 

5-6. download

• 링크를 클릭하면 파일을 다운로드합니다.
• 예시:

  <area href="file.pdf" download>

 

---

 

6. 사용 예제

<img src="image-map.jpg" alt="Sample Image Map" usemap="#samplemap">

<map name="samplemap">
  <!-- 사각형 영역 -->
  <area shape="rect" coords="50,50,150,150" href="https://example1.com" alt="Rectangle">
  
  <!-- 원형 영역 -->
  <area shape="circle" coords="300,300,50" href="https://example2.com" alt="Circle">
  
  <!-- 다각형 영역 -->
  <area shape="poly" coords="200,100,250,200,150,200" href="https://example3.com" alt="Triangle">
</map>

 

---

 

7. 주의 사항

• 정확한 coords 값 필요:
  • 좌표를 잘못 지정하면 영역이 올바르게 작동하지 않을 수 있습니다.
• 반응형 디자인과의 호환성:
  • 이미지 맵은 고정된 좌표를 사용하므로 반응형 디자인에서 왜곡될 수 있습니다. 이를 해결하려면 JavaScript 또는 CSS를 활용한 동적 이미지 맵 조정이 필요합니다.
• <area> 태그 만으로는 스타일링 불가:
  • 링크와 스타일링을 결합하려면 이미지 위에 HTML 요소를 겹쳐 사용하는 대안을 고려해야 합니다.

 

---

 

관련글

• [HTML] map 태그 (이미지 특정 영역 클릭하기)
• [HTML] address 태그 문법 및 사용 예제
• [HTML] abbr 태그 문법 및 스타일링