HTML <link> media 속성

HTML <link> 태그

정의와 사용법

media 속성은 목표 자원이 무엇의 미디어/장치에 대해 최적화되었는지를 규정합니다.

media 속성은 링크된 문서가 무엇의 장치에서 표시될지를 지정합니다.

이 속성은 주로 CSS 스타일 시트와 함께 사용되어, 다른 미디어 타입에 대해 다른 스타일을 지정합니다.

media 속성은 여러 가지 값을 받을 수 있습니다.

예제

두 가지 다른 스타일 시트가 두 가지 다른 미디어 타입(스크린과 인쇄)을 대상으로 합니다:

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

직접 시도해 보세요

문법

<link media="value>

가능한 연산자

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

장치

장치 설명
모두 기본. 모든 미디어 유형 장치에 사용됩니다.
프린트 프린트 미리보기 모드/프린트 페이지를 사용합니다.
스크린 컴퓨터 스크린, 태블릿, 스마트폰 등을 사용합니다.
스피치 페이지를 읽기 위해 사용되는 스크린 리더.
오디얼 사용 중지됨.오디오 시뮬레이터.
브라일 사용 중지됨.브라일 피드백 장치.
하이드랜드 사용 중지됨.하이드랜드 장치(작은 스크린, 제한된 밴드WITH)
프로젝션 사용 중지됨.프로젝터.
TTY 사용 중지됨.고정 간격 문자 그리드의 텔레타이프와 유사한 미디어를 사용합니다.
텔레비전 사용 중지됨.해상도가 낮고, 롤링 능력이 제한된 텔레비전 유형 장치.

값

값 설명
비율

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

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

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

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

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

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

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

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

예시: media="screen and (min-color-index:256)"
device-aspect-ratio 사용 중지됨.목표 디스플레이/용지의 device-width/device-height 비율을 정의합니다.
device-width 사용 중지됨.목표 디스플레이/용지의 너비를 정의합니다.
device-height 사용 중지됨.목표 디스플레이/용지의 높이를 정의합니다.
그리드

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

가능한 값: "1"은 그리드, "0"은 다른 것을 의미합니다.

예시: media="handheld and (grid:1)"
높이

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

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

예시: media="screen and (max-height:700px)"
단색

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

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

예시: media="screen and (monochrome:2)"
방향

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

가능한 값은 "portrait" 또는 "landscape"입니다.

예시: media="all and (orientation: landscape)"
해상도

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

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

예시: media="print and (resolution:300dpi)"
스캔

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

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

예시: media="tv and (scan:interlace)"
너비

목표 표시区域的 너비를 지정합니다.

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

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

브라우저 지원

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

HTML <link> 태그