[HTML] 이미지 내부 영역 지정 <area>

[HTML] 이미지 내부 영역 지정 <area>

By i!kohong(아이코홍)

작성방법
<area shape="모양 지정" coords="이미지 내부의 좌표를 지정해줍니다." alt="영역의 대체 텍스트를 지정합니다
" href="url 작성">

 

태그 설명

• 이미지상에서 특정 위치를 지정해주는 태그입니다.
• <map>태그로 이미지맵을 생성하며, <area>태그로 이미지의 위치를 지정해줍니다.
• 이미지내부의 설정되어있는 위치을 클릭가능하며, 작성된 링크로 이동, 혹은 파일 다운로드를 할 수 있도록 해줍니다.

 

Attribute(속성)

속성	속성값	설명
alt	text	영역의 대체 텍스트를 지정. href 속성이 존재하는 경우 필수입니다.
coords	이미지 기준 (0,0,0,0) - 왼쪽 상단
	shape="rect"일 경우 x1(왼쪽),y1(상단),x2(오른쪽),y2(하단)	모양이 '사각형'일 경우 '좌,상,우,하' 를 설정합니다.
	shape="circle"일 경우 x,y,반지름	모양이 '원형'일 경우, 중심점을 지정해주고, 중심점을 기준으로 반지름을 지정해줍니다.
	shape="poly"일 경우 x1,y1,x2,y2, ..... x(n),y(n)	모양이 '다각형'일 경우, 시작의 좌표 기준으로 지정해준 점들끼리 연결하여, 모양을 만든다. 만일 시작좌표와 끝의 좌표가 동일하지 않을시, 자동으로 다각형의 가까이에 마지막 좌표쌍을 추가한다.
shape	area모양
	default	기본값. 전체영역
	rect	사각형
	circle	원형
	poly	다각형
target	작성한 링크를 여는 방법 - <a>태그랑 같은 방법으로 설정
	_blank	링크 페이지를 새로운 창에 띄웁니다.
	_parent	링크 페이지를 부모 창에 열게됩니다. (부모가 없다면, _self처럼 엽니다.)
	_self	링크 페이지를 현재 페이지에 바로 열게 됩니다.
	_top	링크 페이지를 전체 브라우저 창에 열게 됩니다.
	framename	지정된 프레임 안에 열게 됩니다.
download	파일 이름	사용자가 하이퍼 링크를 클릭 할 때 대상이 다운로드되도록 지정합니다.
href	경로 설정(url)	연결할 페이지의 경로를 작성해줍니다.
hreflang	언어 코드	url의 언어 코드 (EX : hreflang="en")
media	미디어 쿼리	url이 최적화된 미디어나 장치를 지정해줍니다.
rel	현재 문서와 대상 URL 사이의 관례를 지정합니다.
	alternate
	author
	bookmark
	help
	license
	next
	nofollow
	prefetch
	prev
	search
	tag
type	미디어 유형	url의 미디어 유형(MIME type) (Ex : type="image/gif")

예시

링크를 위한 이미지입니다. 아래의 CodePen을 통해 실습을 해보세요~

 

 

참고 자료

https://aboooks.tistory.com/377

https://www.w3schools.com/tags/tag_area.asp