1. 임베디드 요소
HTML 문서에 삽입하는 이미지, 비디오, 오디오, 웹 사이트, 이미지맵 등에 대한 컨텐츠
요소에 대해 알아볼게요.
1.1 picture
picture 태그는 다양한 스크린 환경(스마트폰, 데스크탑, 아이패드, TV 등)에 맞는
이미지를 화면에 적절하게 표시해주기 위해 사용 합니다.
img 요소의 다중 이미지 리소스를 위한 컨테이너를 정의할 때 사용합니다.
뷰포트의 너비에 따라 크기가 변동하는 한 개의 이미지를 사용하는 대신, 서로 다른
디스플레이나 기기에서 해당 뷰포트에 알맞게 채워질 수 있게 여러 개의 이미지 중에서
적절한 이미지를 사용할 수 있도록 서포트 해줍니다.
이런 기능으로 picture 태그는 개발자가 이미지의 리소스를 유연하게 지정할 수 있도록
해주므로, 반응형 웹에서 많이 사용됩니다.
⭐
picture요소는 0개 이상의source자식 요소와 하나의img요소로 구성됨
브라우저는 source 요소 중에서 해당 기기와 가장 적합한 source 요소를 다음과 같은
방법으로 선택하게 됩니다.
브라우저가 source를 선택하는 기준
브라우저는 여러 개의 source 요소의 속성값들을 각각 확인하면서 뷰포트의 조건에
만족하는 첫 번째 source 요소를 선택하고 나머지는 무시합니다.
source 태그의 속성으로 사용될 수 있는 값들은 srcset media type등이 존재
합니다. 이와 같이 선언된 속성등을 통해 기기에 적합한 이미지를 선택합니다.
적합한 요소가 선언되지 않았거나, source 요소를 선택할 수 없는 브라우저에서는
img 요소를 화면에 표시하게 됩니다.
즉, source 요소는 브라우저가 렌더링해야 하는 파일과 크기를 결정하는 데 도움이
되는 정보를 제공하고, img 요소는 source 요소를 브라우저가 선택할 수 없는
경우에 대체 텍스트, 또는 대체 이미지로써 존재합니다.
⭐ 구형 브라우저는
img모던한 브라우저는source요소를 선택
source 요소의 media 속성
picture 요소에서 리소스의 용도에 맞는 매체의 미디어 쿼리를 명시합니다.
사용할 수 있는 속성 확인하기: 클릭!
자주 사용하는 media 속성 값들로는 브라우저의 화면 크기에 따라 이미지를 보여주는
min-width max-width 속성등이 있습니다.
<picture>
<source media="(min-width: 700px)">
</picture>source 요소의 srcset 속성
srcset 속성은 각각 다른 환경에서 사용될 이미지의 URL을 명시합니다.
source 요소가 picture 요소 내부에 사용될 때는 반드시 srcset 속성이
명시되어야 합니다.
<picture>
<source media="(min-width: 700px)" srcset="~~~URL 주소">
</picture>source 요소의 type 속성
type 속성은 미디어 리소스의 미디어 타입을 명시할 때 사용합니다.
| 속성값 | 내용 |
|---|---|
| 미디어 타입 | 비디오 리소스의 일반적인 미디어 타입들 |
| video/ogg, video/mp4, video/webm | |
| 오디오 리소스의 일반적인 미디어 타입들 | |
| audio/ogg, audio/mpeg |
<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>1.2 pitcure 요소 사용 (media & srcset..)
<!-- 불러올 이미지의 크기를 적당하게 맞추기 위해 CSS 작업 -->
<style>
.container {
width: 300px;
}
.image {
width: 150%;
height: auto;
vertical-align: top;
}
</style>
<div class="container">
<picture>
<!-- 브라우저의 화면 너비가 586이상인 경우에는 source 요소의 이미지가 선택 된다 -->
<source
srcset="https://shop-phinf.pstatic.net/20210108_77/1610098201024zqFKE_PNG/PC_EBB0B0EAB2BDEC9DB4EBAFB8ECA780.png?type=w1200"
media="all and (min-width: 586px)">
<!-- 브라우저의 화면 너비가 586이하거나 구형 브라우저인 경우에는 img 요소의 이미지가 선택 된다 -->
<img
src="https://shop-phinf.pstatic.net/20210108_287/1610098198627t7rb9_PNG/MO_EBB0B0EAB2BDEC9DB4EBAFB8ECA780.png?type=w1200"
alt="대체" class="image">
</picture>
</div>
1.3 video 요소
video 요소는 동영상 컨텐츠를 포함하기 위해 사용하며, src 속성이나 source 요소를
이용해 여러 개의 동영상 소스 중 하나를 표시하도록 할 수 있습니다.
video 요소 내의 텍스트는, 브라우저가 비디오를 지원하지 않을 때 보여지게 됩니다.
video 타입은 세 가지 포맷 파일을 지원합니다.
MP4(MIME 타입: video/mp4)
WebM(MIME 타입: video/webm)
Ogg(MIME 타입: video/gg)사용할 수 있는 속성
| 속성 | 내용 |
|---|---|
| src | 비디오 파일 경로 |
| poster | 비디오를 다운하거나 사용자가 재생버튼을 누르기 전까지 표시할 이미지 |
| preload | auto(기본 값), 페이지가 로드될 때 오디오 파일이 같이 로드되어야 하는지 여부와 방법 안내 |
| width & height | 비디오 너비 및 높이 설정 |
| controls | 플레이 버튼이나 정지 버튼과 같이 비디오의 실행을 제어할 수 있는 제어버튼 표시 |
| muted | 비디오 음소거 |
| autoplay | 비디오 자동 재생 |
사용 예제
<video height="180" width="288" controls>
<source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
<source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>MIME(마임) 타입은 브라우저가 확장자를 인식할 수 있게 정의해주는 식별자입니다.
자세한 내용 : 보기
1.4 audio 요소
audio 요소도 video 요소와 유사하게 사용합니다.
src 속성이나 source 요소를 이용해 여러 개의 동영상을 표시할 수 있습니다.
속성은 위의 video 요소와 거의 동일합니다.
<audio src="audiofile.mp3">
<p>
<!-- 오디오를 지원하지 않는 브라우저에선 대체 텍스트가 표시 됩니다. -->
HTML5 <code>audio</code> 요소를 지원하지 않는 구형 웹 브라우저를 사용 중입니다.
<a href="http://outdatedbrowser.com/ko">최신형 브라우저로 업데이트</a>로 업데이트 하세요.
</p>
</audio>1.5 track 요소
track 요소는 비디오 및 오디오를 재생할 때 자막을 표시해주는 기능 입니다.
.vtt 는 video text track의 약어이며 트랙을 설정할 때 속성값으로 자막이나
인코딩 언어를 설정할 수 있습니다.
기본 값으로 보여주고자 하는 것이 있다면 default 속성 값을 사용하면 됩니다.
<!-- 사용 예시 -->
<video src="videofile.mp4" poster="posterimage.jpg">
<track kind="subtitles" src="videofile.ko.vtt" srclang="ko" label="한국어" default>
<track kind="subtitles" src="videofile.en.vtt" srclang="en" label="English">
</video>