..

Search

media

media

<source> 태그의 media 속성


HTML <source> 태그 ⇒


정의 및 특징

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


문법

<source 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)”


예제
<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>

코딩연습 ▶


지원하는 브라우저 및 버전

속성명

chrome

edge

ie

firefox

safari

opera

media 지원함 지원함 9.0 15.0 지원함 지원함

HTML5에서 변경된 사항

<source> 태그는 HTML5에서 새롭게 추가된 요소입니다.


연습문제