[ 임베디드 요소 ]

임베디드 요소 : 외부 소스를 불러와 웹페이지에 삽입하는 요소

[이미지]

<img> : 이미지 불러오기
(속성)

• src(source) : 이미지 경로. 필수!! (절대경로 - 인터넷 링크 / 상대경로 - 내 위치)
• alt(대체 텍스트) : 이미지를 불러오지 못했을 때 대체할 텍스트

[웹에 사용하는 이미지 유형]

(이미지 용량이 중요함.)

• 래스터 이미지 (확대하면 깨지는 이미지)
• JPEG : 정지 이미지 손실 압축 (현재 가장 많이 사용)
• PNG : 투명도 적용(제품사진, 아이콘)
• GIF : 움직이는 사진. 단, 표현 가능한 색상 수가 제한적.
• WEBP : 높은 압축률& 화질. but 제한적 이용.
( * WEBP 적용 가능한 사이트 확인을 위한 사이트 추천 --> Can I use )
• 벡터 이미지 (확대해도 깨지지 않는 이미지)
• SVG (아이콘, ui)

( 이미지 속성 )
• Srcset : viewport(화면 크기)에 따른 반응형 이미지 생성. 작은 화면에 작은 이미지, 큰 화면에 큰 이미지가 나오도록.
  서술자
  • 너비 서술자 w

    사용 ex)
        <img src="a.png"
        srcset="small.png 300w, mideum.png 450w, large.png 600w">
        

  • 픽셀 밀도 서술자 x
  검색)via.placeholder.com/(가로)*(세로)
  (개발 중 이미지 공간 테스트)
• Sizes : 이미지 크기 고정 sizes=“(min-width: 600px) 600px, (min-width: 450px) 450px, 300px”

[동영상]

<video> : 영상 삽입. 이미지와 달리 빈 요소 아님

• 속성
  • controls : 영상 컨트롤러 생성.(음량 조절, 타임라인 바, 일시정지, 재시작)
  • muted : 음소거
  • autoplay : 자동재생. 단, 음소거 상태일 때만 적용. (유저에게 방해가 될 수 있으므로)
  • poster : 영상 썸네일

<source> : <video>의 자식태그로, src속성을 이용해 영상 링크 제공

[오디오]

<audio> : 음원 요소. src속성으로 음원 파일을 불러오며 화면 상에 컨트롤 바가 나타나게 하려면 controls 속성도 꼭 넣어줄 것.
파일을 불러오지 못했을 때 태그 사이의 내용을 메시지로 출력.

[그래픽 캔버스]

<canvas> : 그래픽 캔버스 요소 삽입. 그래픽, 애니메이션 표현 가능.
단, HTML만으로는 가로 세로 길이만 마크업 가능하며, 세부적인 것은 JavaScript 코드가 필요

[인라인 프레임]

<iframe> : 인라인 프레임. 현재 페이지 안에 다른 웹페이지 삽입.