Embedded content

img

• <img src="이미지 경로" alt="이미지 설명"/>
• html 문서에 이미지를 삽입할 때 사용한다.

<src="이미지 경로">

필수 속성으로 이미지 파일 경로가 들어간다. 절대경로 또는 상대경로로 적는다.

• 절대경로
  root부터 시작하여 파일 경로를 적는다.
  /동물/강아지/잠자는 강아지.jpg
• 상대경로
  현재 있는 위치에서 부터 파일까지의 경로를 적는다.
  ./잠자는 강아지.jpg (현재 위치가 '/강아지' 일 경우)

<alt="이미지 설명">

• 이미지에 대한 설명을 적는다. 최대한 자세히 적는 것이 좋다.
• 이미지 오류로 이미지가 보이지 않을 때 화면에 표시된다.
• 접근성 프로그램에 정보를 제공한다.(ex 스크린리더)
  • <img src="img.jpg" alt=""/> : 읽지 않는다.
  • <img src="img.jpg" alt=" "/> : 파일명(img.jpg)을 읽는다.
  • <img src="img.jpg"/>: 파일명(img.jpg)을 읽는다

srcset

• 반응형 사이트일 경우 사용하며, 브라우저에게 이미지 선택권을 주어 최적의 이미지를 로딩하는데 도움을 준다.
• src = "" 은 <srcset>을 사용할 수 없는 브라우저일 때, 나타나는 이미지이다.
• x: 화소의 밀도(pixel density), 콘솔창에 window.devicePixelRatio를 입력하면 현재 화면의 화소 밀도를 알 수 있다.

<img
  srcset="
    ./img/rabbit_300.png 2x,
    ./img/rabbit_500.png 3x
  "
  src="./img/rabbit_150.png"
  alt="rabit"
>

• w: 이미지의 가로크기(px단위)
• sizes: 화면 넓이에 따라 이미지가 차지할 크기를 적는다.
• 아래의 코드의 경우 화면 넓이에 따른 이미지는 다음과 같다.
  • 960px 이상: rabbit_300.png (300px 사이즈 이미지)
  • 620px ~ 959px: rabbit_150.png (150px 사이즈 이미지)
  • 619px 이하: rabbit_500.png (500px 사이즈 이미지)

<img
  srcset="
    ./img/rabbit_500.png 500w,
    ./img/rabbit_300.png 300w,
    ./img/rabbit_150.png 150w
  "
  sizes="
    (min-width: 960px) 300px,
    (min-width: 620px) 150px,
    900px
  "
  src="./img/rabbit_150.png"
  alt="rabit"
>

picture

• <source>와 <img>를 이용하여 화면의 크기에 맞게 이미지를 보여주도록 하는 태그이다.
• <source srcset="">의 srcset값을 <img src=""> src에 적용하기 때문에 <img>는 반드시 있어야 한다.
• media="화면 사이즈"를 통해 보여주는 이미지를 결정한다.
• type=""브라우저에게 포맷 타입을 알려준다.

<picture>
   <source srcset="./img/rabbit_500.png" media="(min-width:960px)" type="image/png">
   <source srcset="./img/rabbit_300.png" media="(min-width:640px)">
   <img src="./img/rabbit_150.png" alt="">
</picture>

점진적 향상기법

• 최신 포맷(WebP, AVIF)의 이미지를 지원하고 싶다면 크로스브라우징을 위해 <picture> 요소와 함께 사용 하는것이 좋다.
• 위와 같은 크로스브라우징 기법을 점진적 향상기법이라고 한다.
• 예전의 기술을 기본으로 하고 최신의 기술이 적용되는 환경에서는 최신의 기술을 제공하여 사용자에게 보다 더 나은 경험을 제공한다.

iframe

• 현재 페이지에 다른 HTML을 보여주고 싶을 때 사용한다.

audio

• 음악 컨텐츠를 재생하는 태그
• controls : 재생, 멈춤 등 음악을 컨트롤 할 수 있는 컨트롤러
• autoplay: 자동재생
• loop: 반복재생

<audio src="music.mp4" controls autoplay loop ></audio>

video

• 동영상 컨텐츠를 재생하는 태그
• <video>태그로 비디오를 삽입하면 트래픽이
• controls : 재생, 멈춤 등 동영상을 컨트롤 할 수 있는 컨트롤러
• autoplay: 자동재생
• loop: 반복재생

<video  src="video.mp4" controls autoplay loop width="450" height="300"></video >

video의 점진적 향상기법

• <source>를 함께 사용하여 크로스브라우징 및 사용자 친화적인 <video> 표현을 할수 있다.
• preload: 페이지 로드 시 해당 파일이 같이 로드 되는지의 여부를 정한다.(기본 값은 브라우저마다 다르다.)
  • preload="none" : 파일을 미리 로딩하지 않는다. 페이지 로딩이 좀 더 빨라진다.
  • preload="metadata": 파일을 미리 로딩하지 않지만 메타데이터를 미리 가져온다.
  • preload="auto" : 파일을 미리 로딩하여 사용자가 볼 수 있도록 준비한다.
• <source> 파일 포멧을 여러가지로 지정하여 해당 브라우저가 지원하는 파일의 비디오가 보여지게 할 수 있다.
• <track> :<audio>와 <video>의 자식요소로 자막, 텍스트 트랙을 보여줄 수 있다.
  • kind="텍스트 트랙 종류" subtitles(자막), captions(설명) 등
  • srclang="텍스트 트랙 언어" ko(한국어), en(영어) 등
  • label="텍스트 트랙 제목"

<video controls poster="video.jpeg" preload="auto" width="450" height="300">
	<source src="video.mp4" type="video/mp4">
	<source src="video.ogv" type="video/ogg">
	<source src="video.webm" type="video/webm">
	<track kind="subtitles" src="foo.en.vtt" srclang="ko" label="video">
</video>

autoplay 속성 정책

• <iframe>, <audio>, <video>에 자동으로 재생되는 autoplay 속성을 붙일 수 있다.
• 다만, 브라우저 정책상 일부 모바일 브라우저에서 작동하지 않을 수 있으며, 항상 mute 속성과 함께 사용되어야 한다.
• autoplay 미작동 이유
  • 동영상의 용량이 커짐에 따라 사용자가 원하지 않는 리소스를 다운받지 않게하여 의도하지않은 트래픽 유발을 방지한다.
  • 사용자의 접근성 측면에서 좋지 않다.
• 참고: 크롬 오토플레이 정책 원문