코딩의 시작, TCP School

◀ 이전 다음 ▶

<source> 태그의 media 속성

HTML <source> 태그 ⇒

정의 및 특징

<source> 태그의 media 속성은 <picture> 요소에서 리소스의 용도에 맞는 매체의 미디어 쿼리를 명시합니다.

문법

속성값

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

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

예제

<picture>
    <source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
    <source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
    <img src="/examples/images/people_200.jpg" alt="People">
</picture>

코딩연습 ▶