source element - by. UXKM

Publishing
HTML
내장 콘텐츠(Embedded content)
source element

요약 설명
<source> 요소는 <picture>, <audio>, <video> 요소 안에서 미디어 소스 파일을 조건에 따라 선택적으로 제공할 때 사용하는 태그입니다.
src, type, media 속성 등을 통해 파일 경로, 파일 형식, 화면 조건 등을 지정하며, 브라우저는 이를 참고해 가장 적합한 소스를 자동으로 선택합니다.
대체 형식이나 해상도, 포맷별 이미지·음성·영상 대응을 할 수 있도록 도와주며, <source>는 단독으로 사용되지 않고 항상 부모 미디어 요소 안에 포함되어야 합니다.

주요 역할 및 특징

다양한 미디어 형식 제공
<video>, <audio>, <picture> 요소 내에서 사용되며, 브라우저가 지원하는 형식에 따라 적절한 파일을 선택합니다.
브라우저별 포맷 지원 최적화
일부 브라우저는 특정 미디어 포맷(WebP, AVIF, Ogg 등)을 지원하지 않기 때문에, 여러 포맷을 제공하여 호환성을 높일 수 있습니다.
미디어 쿼리와 함께 사용 가능
- media 속성을 통해 화면 크기나 환경에 따라 적합한 미디어 파일을 제공할 수 있습니다.
- 반응형 디자인에서 중요한 역할을 합니다.
비디오, 오디오 파일의 대체 포맷 제공
type 속성을 활용하여 MP4, WebM, Ogg 등 다양한 형식을 지정할 수 있습니다.
파일 로딩 최적화 및 성능 개선
사용자의 디바이스나 네트워크 상태에 따라 적절한 리소스를 제공함으로써 로딩 속도를 향상시킬 수 있습니다.

CSS 기본 값

<source> 요소 자체는 화면에 표시되지 않으며, <video>, <audio>, <picture> 요소 내에서만 동작합니다.

기본 문법

반응형 이미지 제공 (<picture> 내 사용)
<picture> <source srcset="image-large.jpg" media="(min-width: 1024px)"> <source srcset="image-medium.jpg" media="(min-width: 600px)"> <img src="image-default.jpg" alt="반응형 이미지"> </picture>
비디오 파일 형식별 대체 제공 (<video> 내 사용)
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> 브라우저가 비디오를 지원하지 않습니다. <a href="video.mp4">비디오 다운로드</a> </video>
오디오 파일 형식별 대체 제공 (<audio> 내 사용)
<audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> <source src="audio.wav" type="audio/wav"> 브라우저가 오디오를 지원하지 않습니다. <a href="audio.mp3">오디오 다운로드</a> </audio>

속성

`<source>` 속성 요약

속성명
사용 가능한 요소
설명

src [필수 - <video>, <audio>]

<video>, <audio>, <picture>

미디어 파일의 URL을 지정 (<video>, <audio> 요소 내에서 사용하는 경우에만 필수)
type

<video>, <audio>, <picture>

미디어의 MIME 유형을 지정
srcset [필수 - src 대신]

<picture>

이미지의 다양한 해상도 및 크기별 URL을 지정 (<picture>, <audio> 요소 내에 사용 시 src 속성을 사용하지 않는 조건에 필수)
media

<video>, <picture>

특정 미디어 조건에서만 해당 리소스를 로드

[src] 필수 : <video>, <audio> <source src="파일 경로(URL)">

비디오, 오디오 또는 이미지 파일의 경로를 지정합니다.
<audio> 및 <video> 요소에서는 미디어 파일의 URL을 지정하는 필수 속성이지만, <picture> 요소에서는 srcset이 대신 사용되므로 필수 속성이 아닙니다.

								<video controls>
									<source src="video.mp4" type="video/mp4">   <!-- src -->
									<source src="video.webm" type="video/webm"> <!-- src -->
									브라우저가 지원하지 않습니다.
								</video>

[type] 선택 사항 <source type="값">

미디어 파일의 MIME 유형을 지정합니다.
<audio>, <video>, <picture> 요소에서 사용되며, 브라우저가 지원하는 포맷인지 확인할 때 유용합니다.

								<audio controls>
									<source src="audio.ogg" type="audio/ogg">  <!-- type -->
									<source src="audio.mp3" type="audio/mpeg"> <!-- type -->
									브라우저가 지원하지 않습니다.
								</audio>

[srcset] 필수 : <picture> <source srcset="값">

<picture> 요소에서만 사용되며, src를 대신할 수 있습니다.
여러 해상도에 따라 적절한 이미지를 로드하도록 설정하며, 해상도(1x, 2x 등) 또는 w 단위(폭 기준)로 이미지를 선택할 수 있습니다.

								<picture>
									<source srcset="image-480w.jpg 480w, image-800w.jpg 800w" media="(max-width: 600px)">
									<img src="fallback.jpg" alt="반응형 이미지">
								</picture>

[media] 선택 사항 <source media="값">

<picture> 및 <video> 요소에서 사용됩니다.
미디어 조건을 지정하여 특정 화면 크기나 기기에서만 해당 리소스를 로드하며, CSS의 @media와 동일한 문법을 사용합니다.

								<picture>
									<source srcset="image-mobile.jpg" media="(max-width: 600px)">
									<source srcset="image-desktop.jpg" media="(min-width: 601px)">
									<img src="fallback.jpg" alt="반응형 이미지">
								</picture>

예제

다양한 형식의 비디오 제공 (<video>와 함께 사용)

사용자의 브라우저가 MP4를 지원하지 않으면 WebM 또는 Ogg 형식을 시도합니다.
모든 형식이 지원되지 않으면, "비디오를 지원하지 않는 브라우저입니다."라는 메시지가 표시됩니다.

								<video controls>
									<source src="video.mp4" type="video/mp4">
									<source src="video.webm" type="video/webm">
									<source src="video.ogv" type="video/ogg">
									비디오를 지원하지 않는 브라우저입니다. <a href="audio.mp4">비디오 다운로드</a>
								</video>

오디오 파일 형식별 지원 (<audio>와 함께 사용)

사용자의 브라우저가 MP3를 지원하지 않으면 WebM 또는 Ogg 형식을 시도합니다.
모든 형식이 지원되지 않으면, "브라우저가 오디오를 지원하지 않습니다."라는 메시지가 표시됩니다.

								<audio controls>
									<source src="audio.mp3" type="audio/mpeg">
									<source src="audio.ogg" type="audio/ogg">
									브라우저가 오디오를 지원하지 않습니다. <a href="audio.mp3">오디오 다운로드</a>
								</audio>

반응형 이미지 제공 (<picture>와 함께 사용)

화면 크기 조건에 맞는 이미지를 선택하여 로드합니다.
media 속성을 통해 미디어 쿼리를 사용하여 이미지를 동적으로 바꿔줍니다.

								<picture>
									<source srcset="image-large.jpg" media="(min-width: 1200px)">
									<source srcset="image-medium.jpg" media="(min-width: 768px)">
									<img src="image-default.jpg" alt="반응형 이미지">
								</picture>

주의사항

<source> 요소는 반드시 상위 요소(<picture>, <video>, <audio>) 내에서 사용해야 합니다.
<source> 요소 단독으로 사용될 수 없습니다.
모든 브라우저가 동일한 이미지 및 미디어 포맷을 지원하는 것이 아니므로, 다양한 형식을 제공하는 것이 중요합니다.
대용량 미디어 파일을 제공할 경우, 모바일 사용자의 데이터 사용량을 고려하여 적절한 크기의 파일을 제공해야 합니다.