source element - by. UXKM

source element 설명

<source> 요소는 <audio>, <video>, <picture> 요소의 다중 미디어 리소스를 지정하기 위해 사용됩니다.
이것은 빈 요소 입니다.
이것은 일반적으로 다른 브라우저에서 지원하는 여러 포맷들을 통해 같은 미디어를 제공하기 위해 사용됩니다.

<source> 요소는 HTML5에서 새롭게 추가된 요소입니다.
Internet Explorer 9+ 부터 지원합니다.

6.9.1. source 속성

[src] <source src="URL">

<source> 요소가 <audio> 요소나 <video> 요소 내부에 사용될 때 필수 속성으로, 미디어 파일의 URL을 명시합니다.
만약 <source> 요소가 <picture> 요소 내부에 있을 경우, 이 속성은 무시됩니다.

[type] <source type="미디어 타입(MIME 타입)">

미디어 리소스의 미디어 타입(MIME 타입)을 명시합니다(선택적으로 codecs 매개 변수도 함께).
RFC 4281에 코덱을 어떻게 지정하는지에 대한 정보를 확인할 수 있습니다.

[srcset] <source srcset="URL">

<source> 요소가 <picture> 요소 내부에 사용될 때 필수 속성으로, 각각 다른 환경에서 사용될 이미지의 URL을 명시합니다.

[sizes] <source sizes="유효한 크기값">

각각 다른 페이지 레이아웃에서 사용될 이미지의 크기를 명시합니다.

[media] <source media="속성값">

<picture> 요소에서 이미지 리소스의 용도에 맞는 매체의 미디어 쿼리를 명시합니다.

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

    and - AND 연산을 명시합니다.

    not - NOT 연산을 명시합니다.

    , - OR 연산을 명시합니다.

  2. 속성값에 사용할 수 있는 장치는 다음과 같습니다.

    all - 기본값으로, 모든 미디어 타입의 장치

    aural - 음성 합성 장치

    braille - 점자 기기

    handheld - 손으로 들 수 있는 소형 장치

    projection - 프로젝터

    print - 인쇄 미리 보기 기능 또는 페이지 출력

    screen - 컴퓨터나 테블릿, 스마트폰 등의 스크린

    tty - 텔레타이프 장치

    tv - 텔레비젼

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

  1. width

    대상 디스플레이 영역의 너비를 명시합니다.

    "min-" 접두사로 최솟값, "max-" 접두사로 최대값을 명시할 수 있습니다.

    ex) media="screen and (max-width:900px)"

  2. height

    대상 디스플레이 영역의 높이를 명시합니다.

    "min-" 접두사로 최솟값, "max-" 접두사로 최대값을 명시할 수 있습니다.

    ex) media="screen and (min-height:600px)"

  3. device-width

    대상 디스플레이 또는 종이의 너비를 명시합니다.

    "min-" 접두사로 최솟값, "max-" 접두사로 최대값을 명시할 수 있습니다.

    ex) media="screen and (min-device-width:500px)"

  4. device-height

    대상 디스플레이 또는 종이의 높이를 명시합니다.

    "min-" 접두사로 최솟값, "max-" 접두사로 최대값을 명시할 수 있습니다.

    ex) media="screen and (max-device-height:800px)"

  5. orientation

    대상 디스플레이 또는 종이의 방향을 명시합니다.

    "portrait"는 세로 방향, "landscape"는 가로 방향을 명시합니다.

    ex) media="print and (orientation:landscape)"

  6. spect-ratio

    대상 디스플레이 영역의 너비와 높이의 비율을 명시합니다.

    "min-" 접두사로 최솟값, "max-" 접두사로 최대값을 명시할 수 있습니다.

    ex) media="screen and (aspect-ratio:16/9)"

  7. device-aspect-ratio

    대상 디스플레이 또는 종이의 장치 너비와 장치 높이의 비율을 명시합니다.

    "min-" 접두사로 최솟값, "max-" 접두사로 최대값을 명시할 수 있습니다.

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

  8. color

    대상 디스플레이의 색상 당 비트수를 명시합니다.

    "min-" 접두사로 최솟값, "max-" 접두사로 최대값을 명시할 수 있습니다.

    ex) media="screen and (color:4)"

  9. color-index

    대상 디스플레이가 처리할 수 있는 색상의 개수를 명시합니다.

    "min-" 접두사로 최솟값, "max-" 접두사로 최대값을 명시할 수 있습니다.

    ex) media="screen and (color-index: 512)"

  10. monochrome

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

    "min-" 접두사로 최솟값, "max-" 접두사로 최대값을 명시할 수 있습니다.

    ex) media="screen and (monochrome:3)"

  11. resolution

    대상 디스플레이 또는 종이의 화소밀도(pixel density)를 명시합니다.

    "min-" 접두사로 최솟값, "max-" 접두사로 최대값을 명시할 수 있습니다.

    ex) media="print and (resolution:360dpi)"

  12. scan

    TV 디스플레이의 주사법(scanning method)을 명시합니다.

    "progressive"는 프로그레시브 방식, "interlace"는 인터레이스 방식을 명시합니다.

    ex) media="tv and (scan:progressive)"

  13. grid

    출력 장치가 그리드(grid)인지 비트맵(bitmap)인지를 명시합니다.

    "1"은 그리드, "0"은 그리드 이외의 장치를 명시합니다.

    ex) media="projection and (grid:1)"

source element 코드 예제