HTML <a> media 속성
정의와 사용법
media
속성은 링크 문서가 어떤 미디어나 장치를 최적화한지 정의합니다.
이 속성은 목표 URL이 특정 장치(예: 아이폰)나 음성, 인쇄 미디어를 위해 설계되었는지 정의합니다.
이 속성은 여러 값을 받을 수 있습니다.
다음과 같은 경우에만 사용할 수 있습니다. href 속성 존재할 때 사용합니다.
주의:이 속성은 단순히 권장 사항입니다.
예제
media 属性를 설정한 링크:
<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)"> 프린트를 위해 사용할 media 속성 페이지를 엽니다. </a>
문법
<a media="value>
가능한 연산자
연산자 | 설명 |
---|---|
and | AND 연산자를 정의합니다. |
not | NOT 연산자를 정의합니다. |
, | OR 연산자를 정의합니다. |
장치
값 | 설명 |
---|---|
all | 기본 설정. 모든 장치에 적합. |
aural | 오디오 합성기. |
braille | 브라일 피드백 장치. |
handheld | 핸드-held 장치(작은 스크린, 제한된 밴드위드) |
projection | 프로젝터. |
프린트 프리뷰 모드/프린트 페이지. | |
screen | 컴퓨터 스크린. |
tty | 텔레그래프 레이더 및 일반적인 너비 글리프 그리드를 사용하는 유사 매체. |
tv | TV 유형 장치(저 해상도, 제한된 페이지링크 능력) |
값
값 | 설명 |
---|---|
width |
목표 표시区域的 너비를 정의합니다. prefix "min-"과 "max-"를 사용할 수 있습니다. 예시: media="screen and (min-width:500px)" |
height |
목표 표시区域的 높이를 정의합니다. prefix "min-"과 "max-"를 사용할 수 있습니다. 예시: media="screen and (max-height:700px)" |
device-width |
목표 디스플레이/용지의 너비를 정의합니다. prefix "min-"과 "max-"를 사용할 수 있습니다. 예시: media="screen and (device-width:500px)" |
device-height |
목표 디스플레이/용지의 높이를 정의합니다. prefix "min-"과 "max-"를 사용할 수 있습니다. 예시: media="screen and (device-height:500px)" |
orientation |
목표 디스플레이/용지의 방향을 정의합니다. 가능한 값: "portrait" 또는 "landscape" 예시: media="all and (orientation: landscape)" |
aspect-ratio |
목표 표시区域的 너비/높이 비율을 정의합니다. prefix "min-"과 "max-"를 사용할 수 있습니다. 예시: media="screen and (aspect-ratio:16/9)" |
device-aspect-ratio |
목표 디스플레이/용지의 device-width/device-height 비율을 정의합니다. prefix "min-"과 "max-"를 사용할 수 있습니다. 예시: media="screen and (aspect-ratio:16/9)" |
color |
목표 디스플레이의 각 색상의 비트 수를 정의합니다. prefix "min-"과 "max-"를 사용할 수 있습니다. 예시: media="screen and (color:3)" |
color-index |
목표 디스플레이가 처리할 수 있는 색상 수를 정의합니다. prefix "min-"과 "max-"를 사용할 수 있습니다. 예시: media="screen and (min-color-index:256)" |
monochrome |
단색 프레임 버퍼에서의 각 픽셀 비트를 지정합니다. prefix "min-"과 "max-"를 사용할 수 있습니다. 예제: media="screen and (monochrome:2)" |
resolution |
목표 디스플레이/용지의 픽셀 밀도 (dpi 또는 dpcm)를 지정합니다. prefix "min-"과 "max-"를 사용할 수 있습니다. 예제: media="print and (resolution:300dpi)" |
scan |
TV 디스플레이의 스캔 방법을 지정합니다. 가능한 값은 "progressive"과 "interlace"입니다. 예제: media="tv and (scan:interlace)" |
grid |
출력 장치가 그리드인지 비트맵인지 지정합니다. 가능한 값: "1"은 그리드, "0"은 다른 것입니다. 예제: media="handheld and (grid:1)" |
브라우저 지원
크롬 | 에지 | 파이어폭스 | 사파리 | 오퍼라 |
---|---|---|---|---|
크롬 | 에지 | 파이어폭스 | 사파리 | 오퍼라 |
지원 | 지원 | 지원 | 지원 | 지원 |