HTML 참조 설명서

HTML 태그 전체 목록

HTML link media 속성

link media 속성은 목표 자원이 어떤 미디어를 대상으로 하는지 지정합니다/장치에 최적화되어 있으며, 이 속성은 일반적으로 CSS 스타일 시트와 함께 사용되어 다른 미디어 타입에 대해 다른 스타일을 지정합니다.

　HTML <link> 태그

온라인 예제

두 가지 다른 미디어 타입(스크린과 인쇄)에 대한 두 가지 다른 스타일 시트:

예제

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML <link> hreflang 속성 사용-기본 튜토리얼(oldtoolbag.com)(/title>
<link rel="stylesheet" type="text/css" href="demo_screen.css">
<link rel="stylesheet" type="text/css" href="demo_print.css" media="print">
</head>
<body>
<h1>oldtoolbag.com 예제</h1>
<p><a href="tryhtml_link_media.html" target="_blank">여기 클릭/a> 새 창에서 이 페이지를 엽니다(tryit 부분 없음).</p>
<p>이 페이지를 인쇄하거나 인쇄 미리보기를 열면 media="print" 스타일 시트를 사용하여 스타일 설정을 볼 수 있습니다. "인쇄" 스타일 시트는 흰 배경에 검은 텍스트를 포함하고 있습니다.</p>
</body>
</html>

테스트를 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

모든 주요 브라우저가 media 속성을 지원합니다。

정의와 사용법

media 속성은 목표 자원이 어떤 미디어를 대상으로 하는지 지정합니다/장치가 최적화되었습니다。

이 속성은 일반적으로 CSS 스타일 시트와 함께 사용되어 다른 미디어 유형에 대해 다른 스타일을 지정합니다。

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

HTML 4.01 HTML5차이점

media 속성은 지금 더 많은 값을 지원합니다。

문법

<link media="value>

가능한 연산자

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

장치

값	설명
all	기본 설정. 모든 장치에 적용됩니다。
aural	오디오 시뮬레이터。
braille	점자 피드백 장치。
handheld	하nadheld 장치(작은 스크린, 제한된 밴드WITH)。
projection	프로젝터。
print	인쇄 프리뷰 모드/인쇄 페이지。
screen	컴퓨터 스크린。
tty	텔레타이프 및 유사한 고평면 문자 그리드를 사용하는 매체。
tv	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	목표 디스플레이의 bits/color。 가능한 "min"을 사용할 수 있습니다.-"과 "max-" 접두사. 예제: media="screen and (color:3)"
color-index	목표 디스플레이가 처리할 수 있는 색상 수를 정의합니다. 가능한 "min"을 사용할 수 있습니다.-"과 "max-" 접두사. 예제: media="screen and (min-color-index:256)"
monochrome	단색 프레임 버퍼의 bits를 정의합니다./pixel. 가능한 "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 <link> 태그

HTML: <template> 태그