소스 미디어 속성

HTML DOM Source 대상

정의와 사용법

media <source> 요소 내 media 속성의 값을 설정하거나 반환합니다.

<source> media 속성 미디어 자원의 유형을 정의합니다(파일이 어떤 매체/장치에 최적화되었는지).

브라우저는 media 속성을 사용하여 파일을 재생할 수 있는지 확인할 수 있습니다. 그렇지 않으면, 다운로드하지 않을 수 있습니다.

HTML 참조 가이드:HTML <source> 태그

예제

특정 파일이 어떤 매체/장치에 최적화되었는지 반환:

var x = document.getElementById("mySource").media;

직접 테스트해 보세요

문법

media 속성 반환:

sourceObject.media

media 속성 설정:

sourceObject.media = value

주석:이 속성은 여러 값을 받을 수 있습니다。

가능한 연산자

값 설명
and 정의되는 AND 연산자.
not 정의되지 않은 NOT 연산자.
, 정의 또는 연산자.

장치

값 설명
모든 모든 장치에 적용됩니다. 기본 설정。
오라 오디오 시뮬레이터。
브라일 브라일 피드백 장치。
핸드헬드 소형 스크린과 제한된 밴드WITH를 가진手持기。
프로젝션 프로젝터
프린트 프린트 미리보기 모드/프린트 페이지。
스크린 컴퓨터 스크린。
tty 고정 간격 문자 그리드를 사용하는 텔레그램 텍스트 타이핑 기계와 유사한 매체。
tv 저해된 해상도와 제한된 롤링 능력을 가진 텔레비전 유형의 장치。

속성 값

값 설명
width

목표 표시区域的 너비를 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예시: media="screen and (min-width:500px)"
height

목표 표시区域的 높이를 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예시: media="screen and (max-height:700px)"
device-width

목표 디스플레이/용지의 너비를 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예시: media="screen and (device-width:500px)"
device-height

목표 디스플레이/용지의 높이를 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예시: media="screen and (device-height:500px)"
orientation

목표 디스플레이/용지의 방향을 정의합니다.

가능한 값: "portrait" 또는 "landscape".

예시: media="all and (orientation: landscape)"
aspect-ratio

목표 표시区域的 너비/높이 비율을 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예시: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

목표 디스플레이/용지의 장치 너비/장치 높이 비율을 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예시: media="screen and (aspect-ratio:16/9)"
color

목표 디스플레이의 각 색상의 비트수를 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예시: media="screen and (color:3)"
color-index

목표 디스플레이가 처리할 수 있는 색상의 수를 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예시: media="screen and (min-color-index:256)"
monochrome

단색 프레임버퍼에서 각 픽셀의 비트수를 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예시: media="screen and (monochrome:2)"
resolution

목표 디스플레이/용지의 픽셀 밀도(dpi 또는 dpcm)를 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예시: media="print and (resolution:300dpi)"
scan

텔레비전 디스플레이의 스캔 방법을 정의합니다.

가능한 값은 "progressive"과 "interlace"입니다.

예시: media="tv and (scan:interlace)"
grid

출력 장치가 그리드인지 비트맵인지 정의합니다.

가능한 값은 "1"입니다. 그렇지 않으면 "0"입니다.

예제: media="handheld and (grid:1)"

기술 세부 사항

반환 값: 문자열 값, 미디어 자원의 유형을 나타냅니다.

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원

주석:그러나, 주요 브라우저 중 하나도 HTML media 속성을 지원하지 않습니다.

관련 페이지

HTML 참조 가이드:HTML <source> 미디어 속성

HTML DOM Source 대상