○임베디드 요소

• HTML 문서에 삽입하는 이미지, 비디오, 오디오, 웹사이트, 이미지 맵 등에 대한 컨텐츠 요소

1-1 picture

picture 태그는 다양한 스크린환경(스마트폰, 아이패드, 데스크탑, tv등)에 맞는 이미지를 화면에 적절히 표시할 때 사용


img 요소의 다중 이미지 리소스를 위한 컨테이너를 정의할 때 사용함
뷰포트의 너비에 따라, 크기가 변동하는 한 개의 이미지를 사용하는 대신, 서로 다른 디스플레이나 기기에서 해당 뷰포트에 알맞게 채워질 수 있게 여래가의 이미지 중 적절한 이미지를 사용할 수 있게 해줌

picture 요소는 0개 이상의 source자식요소, 그리고 하나의 img로 구성

브라우저가 source를 선택하는 기준은?

-여러개의 source 요소의 속성 값을 확인 후 뷰포트의 조건에 맞는 첫번째 source 요소를 선택 후 나머지는 무시
-source태그의 속성: srcset,media,type 등
-source요소는 브라우저가 렌더링 해야하는 파일의 크기를 결정하는데 도움이 되는 정보를 제공, img요소는 source 요소를 브라우저가 선택할 수 없는 경우에 대체 텍스트나 대체 이미지로써 존재

구형 브라우저는 img 모던한 브라우저는 source요소를 선택함

source요소의 media 속성

picture 요소에서 리소스의 용도에 맞는 매체의 미디어 쿼리 명시
-자주 사용하는 media 속성 값: mix-width,max-width 등

<picture>
	<source media="(min-width:700px)">
</picture>

### source요소의 srcset속성 srcset속성은 각각 다른 환경에서 사용될 이미지의 URL명시 srcset 요소가 picture요소 내부에 사용 될 때는 반드시 srcset속성이 명시되어야 함 -여러가지 이미지 파일을 ' , ' 로 구분해 한개 이상 사용 가능

<picture>
	<source media="(min-width:700px)" sre="img/img.jpg 200w, img/img2.jpg 600w">
</picture>

source 요소의 type 속성

type 속성은 미디어 리소스의 미디어 타입을 명시할때 사용

• audio 태그를 지원하지 않을때 화면에 표시되어 나타남
  -> 비디오 리소스의 일반적인 미디어 타입
  : video/ogg, video/mp4, video/webm
  -> 오디오 리소스의 일반적인 미디어 타입
  : audio/ogg, auidio/mpeg

<audio controls>
	<source src="....ogg" type="audio/agg">
	<source src="....mp3" type="audio/mpeg">
</audio>

1-2 video요소

video요소는 동영상 컨텐츠를 포함하기 위해 사용하며 src 속성이나 source요소를 이용해 여러개의 동영상 소스 중 하나를 표시하도록 할 수 있음
video요소 내의 텍스트는 브라우저가 비디오를 지원하지 않을 시 보여지게 됨

video타입이 지원하는 포맷 파일

1. mp4(MIME타입: video/mp4)
2. WebM(MIME타입 : video/webm)
3. Ogg(MIME타입 : video/gg)

사용할 수 있는 속성

1. src : 비디오 파일 경로
2. poster : 비디오를 다운하거나 사용자가 재생버튼을 누르기 전까지 표시할 이미지
3. preload : auto(기본 값), 페이지가 로드될 때 오디오 파일이 같이 로드되어야 하는지의 여부와 방법 안내
4. widht & hight : 비디오 너비 & 높이
5. controls : 플레이 버튼이나 정지 버튼과 같이 비디오를 제어할 수 있는 버튼 표시
6. muted : 비디오 음소거
7. autoplay : 비디오 자동재생

--> 주의할 점은 비디오 자동재생을 사용하려면 autoplay 속성만 사용하면 안되고 muted 속성까지 함께 사용해야 적용 가능.

1-3 audio요소

audio요소도 video와 흡사
video 속성과 거의 동일

1-4 canvas요소

-크기 정도만 html로 정의 가능하고 나머지는 js로 설정해야함

1-5 iframe:인라인 프레임 요소

-프레임안에 다른 html 페이지를 삽입(소스를 넣어서 불러움)-대게 지도같은 것들을 넣어서 사용