본문 바로가기

Webstoryboy

Category

Explanation

HTML

[HTML] <source>

<source>

<source> 태그는 <picture>, <audio> 요소 및 <video> 요소에 소스를 지정하는데 사용합니다. 닫는 태그가 없는 빈요소입니다.


<source>

<source> 태그는 미디어 요소에 대한 소스를 지정하는데 사용합니다.

정의(Definition)

  • <source> 태그는 미디어 요소에 대한 소스를 지정하는데 사용합니다.
  • <source> 태그는 <picture>, <audio>, <video> 요소들을 지원합니다.

속성(Property)

속성 값(예) 설명 버전
media media = "value" 미디어 쿼리를 설정합니다. -
size size 다양한 페이지 레이아웃에 대한 이미지 크기를 설정합니다 -
src src = "URL" 미디어의 경로를 설정합니다. -
srcset srcset = "URL을" 화면 크기 및 해상도에 따라 이미지를 설정합니다. <picture> 요소에서만 사용 -
type type="audio/mpeg" 미디어 타입을 설정합니다. -

Sample1

결과
html
<video width="620" controls poster="이미지 경로">
    <source src="비디오.mp4" type="video/mp4">
    <source src="비디오 경로.ogv" type="video/ogg">
    <source src="비디오 경로.avi" type="video/avi">
    당신의 브라우저는 동영상을 지원하지 않습니다.
</video>

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<source> 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능
media 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능
size 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능
src 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능
srcset 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능
type 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기