..

Search

<source>

HTML <source> 태그

정의 및 특징

<source> 태그는 <audio> 요소나 <video> 요소, <picture> 요소에서 사용할 수 있는 다중 미디어 자원(multiple media resources)을 정의할 때 사용합니다.

 

<source> 요소는 미디어 타입이나 코덱의 지원여부, 미디어 쿼리에 따라 브라우저가 선택할 수 있는 대체 비디오/오디오/이미지 파일을 명시할 수 있도록 해줍니다.

예제
<audio controls>
    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">
    <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mpeg">
    이 문장은 여러분의 브라우저가 audio 태그를 지원하지 않을 때 화면에 표시됩니다!
</audio>

코딩연습 ▶

지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera
<source> 지원함 지원함 9.0 3.5 지원함 지원함

HTML5에서 변경된 사항

<source> 태그는 HTML5에서 새롭게 추가된 요소입니다.

사용할 수 있는 속성

속성명   속성값 설명

src

  

URL

<source> 요소가 <audio> 요소나 <video> 요소 내부에 사용될 때 필수 속성으로, 미디어 파일의 URL을 명시함.

srcset

   URL

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

media

   미디어 쿼리

<picture> 요소에서 이미지 리소스의 용도에 맞는 매체의 미디어 쿼리를 명시함.
sizes   유효한 크기값

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

type

 

미디어 타입

미디어 리소스의 미디어 타입을 명시함.

DOM 인터페이스

interface HTMLSourceElement : HTMLElement {

  attribute DOMString src;

  attribute DOMString type;

  attribute DOMString srcset;

  attribute DOMString sizes;

  attribute DOMString media;

};

연관 페이지

HTML 비디오 수업 ⇒

HTML 오디오 수업 ⇒

연습문제