HTML 참조 매뉴얼

HTML 태그 전체 목록

HTML source media 속성

source media 속성은 CSS에서 정의된 모든 유효한 미디어 쿼리를 받아들이며, media 속성은 여러 값을 받아들일 수 있습니다.

온라인 예제

두 개의 소스 파일과 대체 이미지를 가진 <picture> 요소:

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML source media 속성 사용-기본 강의(oldtoolbag.com)</<title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</<head>
<body>
<picture>
　　<source media="(min-width:　650px)" srcset="img_pink_flowers.jpg">
　　<source media="(min-width:　465px)" srcset="img_white_flower.jpg">
　　<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
<p>브라우저 크기를 조정하여 다양한 뷰포트 크기에서 로드되는 이미지의 다른 버전을 확인하세요. 브라우저는 사용자 현재 뷰포트 너비와 일치하는 첫 번째 source 요소를 찾아 srcset 속성에 지정된 이미지를 가져옵니다.</p>
<p>img 요소는 이미지 선언 블록의 마지막 자식 태그입니다. img 요소는 picture 요소를 지원하지 않는 브라우저나 일치하는 소스 태그가 없는 경우 백컴파트니티를 제공합니다.
</p>
</body>
</html>

테스트를 보고 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

모든 주요 브라우저는 media 속성을 지원합니다. 주의: IE12와 이전 버전 또는 Safari 9.0과 이전 버전은 picture 요소를 지원하지 않습니다

정의와 사용법

media 속성은 CSS에서 정의된 모든 유효한 미디어 쿼리를 받을 수 있습니다.

주의:이 속성은 여러 가지 값을 받을 수 있습니다.

HTML 4.01 와 HTML5의 차이

<source> 태그는 HTML5 中新 태그.

문법

<source media="value>

가능한 연산자

값	설명
and	AND 연산자를 지정하십시오.
not	NOT 연산자를 지정하십시오.
,	OR 연산자를 지정하십시오.

장치

값	설명
all	기본 설정. 모든 장치에 적용됩니다.
aural	오디오 합성기.
braille	점자 피드백 장치.
handheld	핸드 헬드 장치(작은 스크린, 제한된 대역폭).
projection	프로젝터.
print	인쇄 미리보기 모드/인쇄 페이지.
screen	컴퓨터 스크린.
tty	텔레그램 타이핑기 및 유사한 등비 문자 그리드를 사용하는 미디어.
tv	티비 타입 장치(저 해상도, 제한된 스크롤 기능).

값

값	설명
width	목표 디스플레이区域的 너비. "을 사용할 수 있습니다.-"과 "max-" 접두사. 예제: media="screen and (min-width:500px)"
height	목표 디스플레이区域的 높이. "을 사용할 수 있습니다.-"과 "max-" 접두사. 예시: media="screen and (max-height:700px)"
device-width	목표 디스플레이기 지정/용지의 너비. "을 사용할 수 있습니다.-"과 "max-" 접두사. 예시: media="screen and (device-width:500px)"
device-height	목표 디스플레이기 지정/용지의 높이. "을 사용할 수 있습니다.-"과 "max-" 접두사. 예시: media="screen and (device-height:500px)"
orientation	목표 디스플레이기 지정/용지의 방향. 가능한 값: "portrait" 또는 "landscape". 예시: media="all and (orientation: landscape)"
aspect-비율	목표 디스플레이区域的 너비/높이 비율. "을 사용할 수 있습니다.-"과 "max-" 접두사. 예시: media="screen and (aspect-비율:16/9)"
device-aspect-비율	목표 디스플레이기 지정/용지의 device-width/device-높이 비율. "을 사용할 수 있습니다.-"과 "max-" 접두사. 예시: media="screen and (aspect-비율:16/9)"
color	목표 디스플레이의 bits/색. "을 사용할 수 있습니다.-"과 "max-" 접두사. 예시: media="screen and (color:3)"
color-index	목표 디스플레이기가 처리할 수 있는 색상 수를 지정합니다. "을 사용할 수 있습니다.-"과 "max-" 접두사. 예제: media="screen and (min-color-index:256)"
monochrome	단색 프레임버퍼의 bits를 지정합니다./pixel. "을 사용할 수 있습니다.-"과 "max-" 접두사. 예제: media="screen and (monochrome:2)"
resolution	목표 디스플레이기 지정/지시서의 픽셀 밀도 (dpi 또는 dpcm)입니다. "을 사용할 수 있습니다.-"과 "max-" 접두사. 예제: media="print and (resolution:300dpi)"
scan	tv 디스플레이器的 스캔 방식을 지정합니다. 가능한 값: "progressive"과 "interlace"입니다. 예제: media="tv and (scan:interlace)"
grid	출력 장치가 그리드 또는 비트맵인지 지정합니다. 가능한 값:"1"이网格로, 그렇지 않으면 "0"입니다. 예제: media="handheld and (grid:1)"

　HTML <source> 태그

HTML: <template> 태그