코딩의 시작, TCP School

◀ 이전 다음 ▶

<link> 태그의 media 속성

HTML <link> 태그 ⇒

정의 및 특징

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

문법

속성값

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

연산자		설명
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>

코딩연습 ▶