..

Search

media

media

<link> 태그의 media 속성


HTML <link> 태그 ⇒


정의 및 특징

<link> 태그의 media 속성은 대상 리소스(resource)가 최적화되는 미디어나 장치를 명시합니다.

 

media 속성은 주로 미디어 타입에 따라 다른 스타일을 명시하기 위해 CSS 스타일 시트와 함께 사용되며, 여러 개의 속성값을 가질 수 있습니다.


문법

<link media=“속성값”>

속성값

속성값에 사용할 수 있는 연산자는 다음과 같습니다.

연산자   설명

and

 

AND 연산을 명시함.

not

 

NOT 연산을 명시함.

,

 

OR 연산을 명시함.

 

속성값에 사용할 수 있는 장치는 다음과 같습니다.

장치   설명

all

 

기본값으로, 모든 미디어 타입의 장치

print

 

인쇄 미리 보기 기능 또는 페이지 출력

screen

 

컴퓨터나 테블릿, 스마트폰 등의 스크린

speech  

페이지를 소리 내어 읽어주는 스크린 리더기(screen reader)

aural

 

더 이상 지원되지 않음.

음성 합성 장치

braille

 

더 이상 지원되지 않음.

점자 기기

handheld

 

더 이상 지원되지 않음. 

손으로 들 수 있는 소형 장치

projection

 

더 이상 지원되지 않음.

프로젝터

tty

 

더 이상 지원되지 않음.

텔레타이프 장치

tv

 

더 이상 지원되지 않음.

텔레비젼

 

속성값에 사용할 수 있는 값은 다음과 같습니다.

  설명

width

 

대상 디스플레이 영역의 너비를 명시함.

“min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음.

ex) media=“screen and (max-width:900px)”

height

 

대상 디스플레이 영역의 높이를 명시함.

“min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음.

ex) media=“screen and (min-height:600px)”

orientation

 

대상 디스플레이 또는 종이의 방향을 명시함.

“portrait”는 세로 방향, “landscape”는 가로 방향을 명시함.

ex) media=“print and (orientation:landscape)”

aspect-ratio

 

대상 디스플레이 영역의 너비와 높이의 비율을 명시함.

“min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음.

ex) media=“screen and (aspect-ratio:16/9)”

color

 

대상 디스플레이의 색상 당 비트수를 명시함.

“min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음.

ex) media=“screen and (color:4)”

color-index

 

대상 디스플레이가 처리할 수 있는 색상의 개수를 명시함.

“min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음.

ex) media=“screen and (color-index: 512)”

monochrome

 

단색 프레임 버퍼에서의 픽셀 당 비트수를 명시함.

“min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음.

ex) media=“screen and (monochrome:3)”

resolution

 

대상 디스플레이 또는 종이의 화소밀도(pixel density)를 명시함.

“min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음.

ex) media=“print and (resolution:360dpi)”

scan

 

TV 디스플레이의 주사법(scanning method)을 명시함.

“progressive”는 프로그레시브 방식, “interlace”는 인터레이스 방식을 명시함.

ex) media=“tv and (scan:progressive)”

grid

 

출력 장치가 그리드(grid)인지 비트맵(bitmap)인지를 명시함.

“1”은 그리드, “0”은 그리드 이외의 장치를 명시함.

ex) media=“projection and (grid:1)”

device-aspect-ratio

 

더 이상 지원되지 않음.

대상 디스플레이 또는 종이의 장치 너비와 장치 높이의 비율을 명시함.

device-width

 

더 이상 지원되지 않음.

대상 디스플레이 또는 종이의 너비를 명시함.

device-height

 

더 이상 지원되지 않음.

대상 디스플레이 또는 종이의 높이를 명시함.


예제
<head>
    <link rel="stylesheet" type="text/css" href="/examples/media/style.css">
    <link rel="stylesheet" type="text/css" href="/examples/media/print.css" media="print">
</head>

코딩연습 ▶


지원하는 브라우저 및 버전

속성명

chrome

edge

ie

firefox

safari

opera

media 1.0 지원함 지원함 1.0 지원함 지원함

연습문제