HTML <area> media 속성

HTML <a> 태그

정의와 사용법

media 속성은 링크된 문서가 어떤 매체나 장치를 최적화할지 정의합니다。

이 속성은 특정 장치(예: iPhone)나 음성 또는 인쇄 매체를 위해 설계된 목표 URL을 정의합니다。

이 속성은 여러 값을 받을 수 있습니다。

존재할 때만 href 속성 사용할 때

주의하세요：이 속성은 단순히 권장 사항입니다。

예제

사용자 지정 매체를 지정하는 media 속성을 사용하여 목표 URL을 최적화합니다：

<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun"
  href="sun.html" media="screen and (min-color-index:256)"
</map>

개인적으로 시도해보세요

문법

<area media="value>

가능한 연산자

연산자 설명
and AND 연산자를 정의합니다.
not NOT 연산자를 정의합니다.
, OR 연산자를 정의합니다.

장치

값 설명
all 기본 설정. 모든 장치에 적합합니다.
aural 오디오 합성기。
braille 점자 피드백 장치。
handheld håndholdt enhet(liten skjerm, begrenset bredbånd)。
projection 프로젝션。
print 프린트 프리뷰 모드/프린트 페이지。
screen 컴퓨터 스크린。
tty 텔렉스프레스 또는 고정된 글리드의 문자를 사용하는 유사 매체。
tv 티비 유형 장치(저 해상도, 제한된 페이지링능)。

값

값 설명
width

목표 디스플레이 영역의 너비를 정의합니다.

"min-"과 "max-" 프리كس를 사용할 수 있습니다.

예시: media="screen and (min-width:500px)"
height

목표 디스플레이 영역의 높이를 정의합니다.

"min-"과 "max-" 프리كس를 사용할 수 있습니다.

예시: media="screen and (max-height:700px)"
device-width

목표 디스플레이/용지의 너비를 정의합니다.

"min-"과 "max-" 프리كس를 사용할 수 있습니다.

예시: media="screen and (device-width:500px)"
device-height

목표 디스플레이/용지의 높이를 정의합니다.

"min-"과 "max-" 프리كس를 사용할 수 있습니다.

예시: media="screen and (device-height:500px)"
orientation

목표 디스플레이/용지의 방향을 정의합니다.

가능한 값: "portrait" 또는 "landscape"

예시: media="all and (orientation: landscape)"
aspect-ratio

목표 디스플레이 영역의 너비/높이 비율을 정의합니다.

"min-"과 "max-" 프리كس를 사용할 수 있습니다.

예시: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

목표 디스플레이/용지의 device-width/device-height 비율을 정의합니다.

"min-"과 "max-" 프리كس를 사용할 수 있습니다.

예시: media="screen and (aspect-ratio:16/9)"
color

목표 디스플레이의 각 색상의 비트 수를 정의합니다.

"min-"과 "max-" 프리كس를 사용할 수 있습니다.

예시: media="screen and (color:3)"
color-index

목표 디스플레이가 처리할 수 있는 색상 수를 정의합니다.

"min-"과 "max-" 프리كس를 사용할 수 있습니다.

예시: media="screen and (min-color-index:256)"
monochrome

단색 프레임 버퍼에서의 각 픽셀 비트를 정의합니다.

"min-"과 "max-" 프리كس를 사용할 수 있습니다.

예제: media="screen and (monochrome:2)"
resolution

목표 디스플레이/용지의 픽셀 밀도 (dpi 또는 dpcm)를 정의합니다.

"min-"과 "max-" 프리كس를 사용할 수 있습니다.

예제: media="print and (resolution:300dpi)"
scan

TV 디스플레이의 스캔 방법을 정의합니다.

가능한 값은 "progressive"과 "interlace"입니다.

예제: media="tv and (scan:interlace)"
grid

출력 장치가 그리드인지 비트맵인지 정의합니다.

가능한 값: "1"은 그리드, "0"은 다른 것입니다.

예제: media="handheld and (grid:1)"

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원

HTML <a> 태그