여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. map 요소
map 요소
2년전 작성
2년전 수정

이미지에 링크를 거는 이미지맵을 사용할 수 있다.

예전에 정말 많이 사용하던 방식인 이미지맵.

최근에는 거의 사용되지 않는다.

그래도 공부를 위해 알아보자.

<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
:
문서의 대체 버전(예: 페이지 인쇄, 번역 또는 미러링)에 대한 링크
author
:
문서 작성자에 대한 링크
bookmark
:
북마크에 사용되는 영구 URL
help
:
도움말 문서에 대한 링크
license
:
문서에 대한 저작권 정보 링크
next
:
선택 영역의 다음 문서
nofollow
:
유료 링크와 같이 승인되지 않은 문서에 대한 링크다. 구글 검색 스파이더가 해당 링크를 따라가지 않도록 지정하는 데 사용된다.
noreferrer
:
사용자가 하이퍼링크를 따를 경우 브라우저가 HTTP 리퍼러 헤더를 보내지 않도록 지정한다.
prefetch
:
대상 문서를 캐시하도록 지정한다.
prev
:
선택 영역의 이전 문서
search
:
문서에 대한 검색 도구에 대한 링크
tag
:
현재 문서의 태그(키워드)
shape

영역의 모양을 지정한다.

속성 값
default
:
전체 영역을 지정한다.
rect
:
사각형으로 영역을 지정한다.
circle
:
원형으로 영역을 지정한다.
poly
:
다각형으로 영역을 지정한다.
target

대상 URL을 열 위치를 지정한다.

속성 값
_blank
:
링크된 문서를 새 창 또는 탭에서 연다.
_self
:
링크된 문서를 누른 프레임과 동일한 프레임에서 연다.
_parent
:
상위 프레임에서 연결된 문서를 연다.
_top
:
창의 전체 본문에서 연결된 문서를 연다.
프레임 이름
:
연결된 문서를 ‘프레임 이름’으로 설정한 iframe에서 연다.
type

대상 URL의 미디어 유형을 지정한다.

HTML
Workplace


Computer
Phone
Cup of coffee
기본 예시
Workplace

Computer Phone Cup of coffee
참고

Mingg`s Diary
밍구
공부 목적 블로그