본문 바로가기

Webstoryboy

Category

Explanation

HTML/Alphabet

[HTML] <area>

<area> 태그는 이미지 맵의 영역을 정의합니다. 이미지 위에 가상의 영역을 만들어서 클릭을 유도할 수 있습니다. 하지만 접근성에 있어 좋지 않기 때문에 현재는 많이 사용하지 않습니다.


<area>

<area> 태그는 이미지 맵의 영역을 정의합니다.

특징 설명
요소 인라인 요소(Inline Element)
닫는 태그 적용(<area> ~ </area>)
버전 HTML4
시각적 표현 -
사용성 ★☆☆☆☆

정의(Definition)

  • <area> 태그는 이미지 위에 영역 링크를 정의 할 때 간편하게 사용할 수 있습니다.
  • <area> 태그는 <map>, <img> 태그와 같이 사용합니다.
  • <area> 태그 shape 속성을 통해 영역을 모양(rect, circle, poly)을 설정합니다.
  • <area> 태그 cords 속성을 통해 영역을 위치를 설정합니다. cords의 위치 값은 프로그램을 통해 좌표 값을 얻는 방법이 쉽습니다.
  • <map> 태그의 name 속성과 이미지의 usemap 속성이 일치해야 적용됩니다.
  • 이미지 위에 영역을 설정하고 링크를 설정하는 방법은 많이 사용하지 않습니다. 직접 링크를 걸고 사용하는 것을 추천합니다.
  • 이미지 맵은 위치가 고정적이기 때문에 반응형 사이트에서 적용 할 수 없습니다.

속성(Property)

속성 값(예) 설명 버전
alt alt="text" 영역에 대한 대체 텍스트를 설정합니다. href 속성이 있다면 필수적 속성입니다. -
coords coords="90,58,3" 영역에 대한 좌표를 설정합니다. -
download download="filename" 영역 링크를 클릭하면 대상이 다운로드 되도록 설정합니다. html5
href href="URL" 영역에 대한 링크를 설정합니다. -
hreflang hreflang="ko" 영역 타겟에 대한 언어를 설정합니다. html5
ping ping="URL" 추적 용도로 사용하는 속성입니다. URL을 POST 방식으로 전송합니다. -
media media="value" 영역 타겟에 대한 미디어쿼리를 설정합니다. html5
nohref nohref 연관된 경로가 없을 경을 경우 설정합니다. html5
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
문서에 대한 대체 링크를 설정합니다.
문서에 대한 저자 링크를 설정합니다.
문서에 대한 북마크 URL을 설정합니다.
문서에 대한 도움과 관련된 링크를 설정합니다.
문서에 대한 저작권과 관련된 링크를 설정합니다.
문서에 대한 다음 문서 링크를 제공합니다.
문서에 대한 링크를 사용하지 않을 때 설정합니다.
문서에 대한 HTTP 레퍼럴을 사용하지 않을 때 설정합니다.
문서에 대한 캐시를 설정합니다.
문서에 대한 이전 문서를 설정합니다.
문서에 대한 검색 도구를 설정합니다.
문서에 대한 키워드를 설정합니다.
html5
shape default
rect
circle
poly
링크의 형태를 기본 값으로 설정합니다.
링크의 형태를 사각형 설정합니다.
링크의 형태를 원형 설정합니다.
링크의 형태를 다각형 설정합니다.
-
target _blank
_parent
_self
_top
링크 클릭시 새로운 브라우저 창으로 설정합니다.
현재 브라우저의 부모 브라우저 창으로 설정합니다.
현재와 동일한 브라우저 창으로 설정합니다.
최상위 브라우저 창에서 설정합니다. 부모가 없는 경우 _self와 동일합니다.
-
type type="text/html" 영역에 대한 문서 유형을 설정합니다. html5

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<area>

참고 사이트(Reference)


더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기