이미지에 링크를 거는 이미지맵을 사용할 수 있다.
예전에 정말 많이 사용하던 방식인 이미지맵.
최근에는 거의 사용되지 않는다.
그래도 공부를 위해 알아보자.
<map>
inline 요소다.
<map> 태그를 이용해서 이미지맵을 만들고 <map>의 하위 요소인 <area> 태그를 이용해서 링크 걸고자하는 좌표를 지정할 수 있다.
또한 name 속성은 필수로 넣어야하며 <img> 태그의 usemap 속성과 연관된다.
<area>
alt
이미지를 출력하지 않는 브라우저에서 대신 표시할 대안 텍스트다.
텍스트의 내용은 대안 텍스트 없이 이미지만 표시할 때와 동일한 수준의 선택지를 나타낼 수 있어야 한다.
href 특성이 존재할 경우 필수 사항.
coords
하이퍼링크 영역을 지정하는 좌표다. 값의 수와 의미는 shape 특성의 값에 따라 달라진다.
값의 단위는 픽셀 단위로 입력한다.
download
페이지로 링크를 거는 대신 리소스 다운로드 용도로 사용한다.
<a>의 download 특성 설명에서 전체 설명을 볼 수 있다.
href
하이퍼링크의 대상을 지정한다.
생략할 경우 이 <area> 요소는 하이퍼링크를 나타내지 않는다.
hreflang
HTML5.1부터 더 이상 지원하지 않는다.
연결한 리소스의 언어를 나타낸다.
값은 BCP47에 따라 입력한다.
href 특성이 존재할 때만 사용한다.
media
대상 URL이 최적화되는 미디어나 매체를 지정한다.
값은 미디어 쿼리로 입력한다.
referrerpolicy
링크와 함께 보낼 참조자 정보를 지정한다.
속성 값
no-referrer
:
레퍼러 정보가 전송되지 않는다.
no-referrer-when-downgrade
:
기본값. 프로토콜 보안 수준이 같거나 더 높은 경우(HTTP에서 HTTP로, HTTPS에서 HTTPS로, HTTP에서 HTTPS로 정상) 경로 및 쿼리 문자열을 보낸다. 보안 수준이 낮은 수준으로 아무것도 전송하지 않음(HTTPS에서 HTTP로 전송하지 않음)
origin
:
문서의 출처(구성표, 호스트 및 포트)을 보낸다.
origin-when-cross-origin
:
교차 출처 요청을 위해 문서의 출처를 보낸다. 동일한 출처 요청에 대한 출처, 경로 및 쿼리 문자열을 보낸다.
same-origin
:
동일한 출처 요청에 대한 참조자를 보낸다. 교차 출처 요청에 대한 참조자를 보내지 않는다.
strict-origin-when-cross-origin
:
프로토콜 보안 수준이 동일하거나 더 높은 경우 출처를 보낸다(HTTP에서 HTTP로, HTTPS에서 HTTPS로, HTTP에서 HTTPS로 정상). 보안 수준이 낮은 수준(HTTPS에서 HTTP로)으로 아무것도 전송하지 않는다.
unsafe-url
:
보안에 관계없이 출처, 경로 및 쿼리 문자열을 보낸다. 안전하지 않다.
rel
href 속성을 포함하는 앵커의 경우 이 속성은 대상 객체와 링크 객체의 관계를 지정한다.
값은 쉼표로 구분된 링크 유형 값 목록으로 입력한다.
다른 관계가 지정되지 않은 경우 기본 관계는 무효다.
이 속성은 href 특성이 있는 경우에만 사용한다.
속성 값
alternate
:
문서의 대체 버전(예: 페이지 인쇄, 번역 또는 미러링)에 대한 링크
bookmark
:
북마크에 사용되는 영구 URL
license
:
문서에 대한 저작권 정보 링크
nofollow
:
유료 링크와 같이 승인되지 않은 문서에 대한 링크다. 구글 검색 스파이더가 해당 링크를 따라가지 않도록 지정하는 데 사용된다.
noreferrer
:
사용자가 하이퍼링크를 따를 경우 브라우저가 HTTP 리퍼러 헤더를 보내지 않도록 지정한다.
prefetch
:
대상 문서를 캐시하도록 지정한다.
search
:
문서에 대한 검색 도구에 대한 링크
shape
영역의 모양을 지정한다.
target
대상 URL을 열 위치를 지정한다.
속성 값
_blank
:
링크된 문서를 새 창 또는 탭에서 연다.
_self
:
링크된 문서를 누른 프레임과 동일한 프레임에서 연다.
_parent
:
상위 프레임에서 연결된 문서를 연다.
_top
:
창의 전체 본문에서 연결된 문서를 연다.
프레임 이름
:
연결된 문서를 ‘프레임 이름’으로 설정한 iframe에서 연다.
type
대상 URL의 미디어 유형을 지정한다.
HTML
기본 예시
W3C School - HTML map tag
W3C School - HTML area tag
MDN Web Docs - <area> : The Image Map Area element
TCP School - HTML <area> 태그