ELEMENTS

Editing
  • account_tree
  • bug_report

<source>

<img> 요소에 대한 여러 대체 소스 세트(srcset 애트리뷰트) 또는 미디어 요소(<audio>, <video>)에 대한 여러 대체 미디어 리소스를 지정할 수 있다. 자체로는 아무것도 나타내지 않는다.

  • 콘텐츠 분류

    NONE

  • 허용된 부모 요소 또는 위치

    <AUDIO>, <PICTURE>, <VIDEO>

    • <picture> 요소의 자식으로서 <img> 요소 앞
    • <audio>, <video> 하위 요소로 플로우 콘텐츠(flow content) 또는 <track> 요소 이전
  • 콘텐츠 모델

  • 태그 생략

    종료 태그 생략 가능

  • DOM Interface

    HTMLSourceElement

    [Exposed=Window]
    interface HTMLSourceElement : HTMLElement {
      [HTMLConstructor] constructor();
    
      [CEReactions] attribute USVString src;
      [CEReactions] attribute DOMString type;
      [CEReactions] attribute USVString srcset;
      [CEReactions] attribute DOMString sizes;
      [CEReactions] attribute DOMString media;
      [CEReactions] attribute unsigned long width;
      [CEReactions] attribute unsigned long height;
    };

구문

마크업 형식
<picture>
  <source ></source>
  <img />
</picture>
마크업 형식
<audio>
  <source ></source>
</audio>
마크업 형식
<video>
  <source ></source>
</video>
Example

애트리뷰트

type MIME type string

가장 많이 사용되는 대표적인 text/html, text/css, text/javascript가 있고 그외의 유형은 Media Types를 참고하라.

About MIME type string

미디어 유형 토큰(token) 생성과 일치하는 문자열이다. 매개변수가 포함될 수 있다. 매개변수가 없는 유효한 MIME 형식 문자열은 U+003B(;)을 포함하지 않은 MIME 형식 문자열이다.

사용되는 키워드

text/css

*.css와 같이 스타일시트(stylesheet) 파일을 나타내는 MIME 유형이다.

text/html

*.html, *.htm 파일을 나타내는 MIME 유형이다.

text/javascript

*.js 파일을 나타내는 MIME 유형이다.

media media query list

미디어쿼리 리스트(media query list)를 지정한다.

About Media query list

CSS <media-query-list> 타입을 나타낸다.

이 요소에서의 특징

스크린의 환경이 지정된 미디어 쿼리와 일치하지 않는 경우 유저 에이전트는 다음 <source>로 건너뛴다.

src non-empty URL

사용할 리소스의 경로를 설정한다.

About Non-empty URL

비워있지 않은 유효한 URL을 나타내는 문자열을 나타낸다.

이 요소에서의 특징

재생하고자 하는 <audio>, <video>의 리소스 경로를 설정한다.

srcset srcset attribute

스크린의 크기와 환경에 따라 사용할 리소스를 힌트와 함께 유저 에이전트에게 제공한다.

About Srcset attribute

콤마(,)로 구분된 하나 이상의 문자열 값이며 유저 에이전트가 환경에 따라 선택적으로 사용할 수 있는 이미지 리소스를 나타낸다.

이 요소에서의 특징

<picture> 요소의 자식으로 있는 경우 스크린의 환경에 따라 사용될 이미지 리소스의 경로를 설정한다.

sizes sizes attribute

소스 크기를 소스 집합(srcset)에 제공하는 애트리뷰트이다.

srcset 애트리뷰트에서 너비(width) 디스크립터(descriptor)가 작성되었다면 sizes 애트리뷰트를 작성 해야한다.

About Sizes attribute

리소스의 크기 집합을 나타내는 콤마로 구분된 하나 이상의 문자열을 나타낸다.

구문 예

공통으로 사용하는 애트리뷰트의 경우 구문에 사용된 요소가 다를 수 있다.

구문 형식
<source-size-list> = <source-size>#? , <source-size-value>
<source-size> = <media-condition> <source-size-value> | auto
<source-size-value> = <length> | auto

이 요소에서의 특징

<picture> 요소의 자식으로 있는 경우 srcset 애트리뷰트에 정의된 리소스 목록에서 너비(width) 디스크립터(descriptor)가 있는 경우 작성한다.

width dimension attribute

요소의 시각적 가로 크기를 CSS의 픽셀(pixels)을 기본 단위로 해서 지정한다. 음수가 아닌 유효한 정수여야 한다.

이 요소에서의 특징

<picture> 요소의 자식으로 있을 경우 사용이 가능하다.

height dimension attribute

요소의 시각적 세로 크기를 CSS의 픽셀(pixels)을 기본 단위로 해서 지정한다. 음수가 아닌 유효한 정수여야 한다.

이 요소에서의 특징

<picture> 요소의 자식으로 있을 경우 사용이 가능하다.

글로벌 애트리뷰트

일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.

글로벌 이벤트 핸들러

일부 글로벌 이벤트 핸들러는 이 요소에서 사용되지 않을 수 있다. 이벤트 등록은 자바스크립트 사용을 권장한다.

기술 문서

<video>, <audio> 요소에서 공통으로 사용하고 있는 다양한 미디어 타입으로 연결이 가능하도록 지원한다.

버전 명세

HTML Standard
#the-source-element

지원 웹브라우저