🧙🏼 HTML 임베디드 요소

1. IMG

: 이미지 삽입 요소, 이미지의 속성을 이용하여 작성

* SCR (필수) : 이미지의 URL

* ALT : 필수는 아니지만 접근 성 차원에서 매우 유용, 이미지의 대체 텍스트

👉🏻 이미지를 삽입하는 방법
: visual studio code를 통해 연습해볼것!
(1) 상대경로
⚬ 이미지 파일 만들기
⚬ 파일 안에 이미지를 삽입해주기
(2) 절대경로
⚬ 이미지 경로 복사 or 다른 이름으로 저장

* width : 가로의 길이

* height : 높이의 길이

( 가로와 높이는 단위없는 정수 / 하나만 정해도 높이도 같이 줄어든다. )
# 이미지 > 검사 > 이미지 사이즈 확인 가능

* srcset : 브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의

🌵 너비 기술 자 w 🌵 픽셀 밀도 기술자 x

#구글 > placehoder.com / 600 (사이즈 필요한 이미지)
= 웹 개발시 유용하게 사용이 가능하다. / 특정 사이즈 이미지 볼 수 있다.

* sizes : 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의

반응형 이미지 (미디어 조건, 소스 크기값 두가지로 나눠진다.)
여기서 미디어 조건에서 두가지로 또 나누어 살펴 볼 수 있다.
min-width최소 & max-width 최대
#이미지 > 검사 > network 에서 이미지 확인 시 이미지 사이즈 고정이 되어 확인 가능하다.

---

2. 웹에서 사용하는 이미지 유형

---

3. VIDEO

: 비디오 삽입 요소
: src 는 선택사항

<video></video>
<sourse scr ="경로">

(1) video controls : 영상 재생하여 확인이 가능하다
(2) auto play, muted : 같이 사용하면 음소거가 되어 영상이 재생된다.
(3) poster : 썸네일 같은 요소라고 생각하면 이해하기 쉽다.

* 한눈에 보는 HTML 요소(Elements & Attributes) 총정리
autoplay 준비되면 바로 재생
controls 제어 메뉴를 표시
loop 재생이 끝나면 다시 처음부터 재생
muted 음소거 여부
poster 동영상 썸네일 이미지 URL
preload 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)
src 콘텐츠 URL
width 동영상 가로 너비
height 동영상 세로 너비

---

4. audio

: 거의 대부분 video와 동일하게 사용이 가능하다.

<!-- Simple audio playback -->
<audio
  src="AudioTest.ogg"
  autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>

---

5. canvas, iframe

• canvas
  : 그래픽 캔퍼스 요소
  : 그래픽과 animation을 그릴 수 있다. (+JS)
  ⚬ height : 좌표 공간의 높이, CSS 픽셀 단위로, 기본값은 150입니다.
  ⚬ width : 좌표 공간의 너비, CSS 픽셀 단위로, 기본값은 300입니다.

• iframe
  : 인라인 프래임 요소
  : 지도웹 삽입할 때 많이 사용한다.
  ( ⚬ name, src, width, height, allowfullscreen, frameborder, sandbox)