코딩의 시작, TCP School

◀ 이전 다음 ▶

<style> 태그의 media 속성

HTML <style> 태그 ⇒

정의 및 특징

media 속성은 특정 음성 매체나 인쇄 매체, 장치 등을 위한 스타일을 명시하는데 사용되며, 동시에 여러 개의 속성값을 가질 수 있습니다.

문법

속성값

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

연산자		설명
and		AND 연산을 명시함.
not		NOT 연산을 명시함.
,		OR 연산을 명시함.

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

장치		설명
all		기본값으로, 모든 미디어 타입의 장치
aural		음성 합성 장치
braille		점자 기기
handheld		손으로 들 수 있는 소형 장치
projection		프로젝터
print		인쇄 미리 보기 기능 또는 페이지 출력
screen		컴퓨터나 테블릿, 스마트폰 등의 스크린
tty		텔레타이프 장치
tv		텔레비젼

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

값		설명
width		대상 디스플레이 영역의 너비를 명시함. “min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음. ex) media=“screen and (max-width:900px)”
height		대상 디스플레이 영역의 높이를 명시함. “min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음. ex) media=“screen and (min-height:600px)”
device-width		대상 디스플레이 또는 종이의 너비를 명시함. “min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음. ex) media=“screen and (min-device-width:500px)”
device-height		대상 디스플레이 또는 종이의 높이를 명시함. “min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음. ex) media=“screen and (max-device-height:800px)”
orientation		대상 디스플레이 또는 종이의 방향을 명시함. “portrait”는 세로 방향, “landscape”는 가로 방향을 명시함. ex) media=“print and (orientation:landscape)”
aspect-ratio		대상 디스플레이 영역의 너비와 높이의 비율을 명시함. “min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음. ex) media=“screen and (aspect-ratio:16/9)”
device-aspect-ratio		대상 디스플레이 또는 종이의 장치 너비와 장치 높이의 비율을 명시함. “min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음. ex) media=“screen and (device-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)”

예제

<style media="print">
    body { background-color: white; }
    h1 { color: black; }
</style>

코딩연습 ▶

지원하는 브라우저 및 버전

속성명
media	1.0	지원함	3.0	1.0	1.0	3.5

연습문제

◀ 이전 다음 ▶

Search

media

media

<style> 태그의 media 속성

HTML <style> 태그 ⇒

정의 및 특징

문법

속성값

예제

지원하는 브라우저 및 버전

연습문제

접속자집계