[HTML]임베디드 요소

img - src

• img는 빈 요소로 사용되며 포함하고자 하는 이미지의 경로를 src로 반드시 지정해줘야 합니다.
• 절대경로와 상대경로로 입력이 가능합니다.

img - alt, width, height

alt (alternative text)

• 이미지의 주소가 잘못되었거나 서버에 문제가 있어 읽어올 수 없는 경우 alt 속성이 이미지를 대체하여 표시됩니다.

width, height

• 각각 이미지 픽셀 기준의 너비, 높이를 지정하는 속성입니다.

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

반응형 이미지 - srcset

• 같은 비율의 다양한 크기를 가지는 동일 이미지들을 최소 2개 이상 명시하는 속성입니다.
• srcset은 브라우저에 이미지 선택권을 위임하는 속성으로 각 브라우저가 사용자에 맞춰 최적 크기의 이미지를 보여줍니다.

반응형 이미지 - sizes

• sizes는 min-width에 지정해준 조건에 맞춰 어떤 이미지 파일을 표시할지 지정해줍니다.
• 가로길이가 600px이상인 경우에는 600px로, 450이상 600미만인 경우에는 450px, 450미만인 경우에는 300px로 표시됩니다.

<img
  src="images/large.png"
  srcset="images/small.png 300w,
          images/medium.png 450w,
          images/large.png 600w"
  sizes="(min-width: 600px) 600px,
         (min-width: 450px) 450px,
         300px"
  alt="responsive images"
/>

video

• video는 요소로 사용되며 포함하고자 하는 비디오의 경로를 src로 반드시 지정해줘야 합니다.
• 비디오가 재생되지 않을 때는 포함된 텍스트 요소가 출력됩니다.
• 절대경로와 상대경로로 입력이 가능합니다.
• controls: 컨트롤 패널이 등장하게 하는 속성입니다.
• autoplay: 비디오를 자동재생 가능하게 하는 속성입니다. 새로고침을 누르면 비디오가 재생되지 않습니다. 사운드가 있는 경우 유저경험을 위해 autoplay를 막는 경우가 있는데 muted 속성을 함께 이용하면 새로고침을 해도 자동재생이 가능합니다.

audio

• HTML5 이전에는 웹 페이지에서 오디오를 들려주기 위한 표준안이 없었습니다만 HTML5에서는 <audio>태그를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공합니다.

canvas, iframe

• canvas는 웹 페이지에서 그래픽적인 것을 그릴 때 사용됩니다.
• 너비와 높이를 나타내는 width, height 속성이 있으며 <canvas> 요소는 닫는 태그 </canvas>가 필요합니다.