HTML <source> 미디어 속성
예시
두 개의 소스 파일과 대체 이미지가 있는 <picture> 요소:
<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>
정의 및 사용
media속성은 일반적으로 CSS에서 정의되는 모든 유효한 미디어 쿼리를 허용합니다 .
참고: 이 속성은 여러 값을 허용할 수 있습니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Attribute | |||||
|---|---|---|---|---|---|
| media | 38.0 | 9.0 | 15.0 | 9.1 | 25.0 |
통사론
<source media="media_query">
가능한 연산자
| Value | Description |
|---|---|
| and | Specifies an AND operator |
| not | Specifies a NOT operator |
| , | Specifies an OR operator |
장치
| Value | Description |
|---|---|
| all | Suitable for all devices. This is default |
| aural | Speech synthesizers |
| braille | Braille feedback devices |
| handheld | Handheld devices (small screen, limited bandwidth) |
| projection | Projectors |
| Print preview mode/printed pages | |
| screen | Computer screens |
| tty | Teletypes and similar media using a fixed-pitch character grid |
| tv | Television type devices (low resolution, limited scroll ability) |
가치
| Value | Description |
|---|---|
| width | Specifies the width of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (min-width:500px)" |
| height | Specifies the height of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (max-height:700px)" |
| device-width | Specifies the width of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="screen and (device-width:500px)" |
| device-height | Specifies the height of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="screen and (device-height:500px)" |
| orientation | Specifies the orientation of the target display/paper. Possible values: "portrait" or "landscape" Example: media="all and (orientation: landscape)" |
| aspect-ratio | Specifies the width/height ratio of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | Specifies the device-width/device-height ratio of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="screen and (aspect-ratio:16/9)" |
| color | Specifies the bits per color of target display. "min-" and "max-" prefixes can be used. Example: media="screen and (color:3)" |
| color-index | Specifies the number of colors the target display can handle. "min-" and "max-" prefixes can be used. Example: media="screen and (min-color-index:256)" |
| monochrome | Specifies the bits per pixel in a monochrome frame buffer. "min-" and "max-" prefixes can be used. Example: media="screen and (monochrome:2)" |
| resolution | Specifies the pixel density (dpi or dpcm) of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="print and (resolution:300dpi)" |
| scan | Specifies scanning method of a tv display. Possible values are "progressive" and "interlace". Example: media="tv and (scan:interlace)" |
| grid | Specifies if the output device is grid or bitmap. Possible values are "1" for grid, and "0" otherwise. Example: media="handheld and (grid:1)" |
❮ HTML <소스> 태그