[3일차] Embedded contents

Embedded contents의 요소들

 

• <img>
  src
  alt
  반응형 이미지를 위한 srcset
  x서술자, w서술자 , sizes 속성
• <picture>
  source
  media 속성
  type 속성
• <ifame>
• <audio>
• <video>

 

<img>

HTML 페이지내에 이미지를 삽입할 때 사용하는 태그. 이미지만 넣을수 있음.

 

 

src (source) : <img>태그에 이미지가 있는곳을 입력하기 위한 수단. 경로는 절대경로와 상대경로이어야 한다.

 

alt (alternative text) : alt 속성은 이미지가 보이지 않을때 어떤 이미지인지 설명해주는것이다. 그리고 접근성을 위한 프로그램에 정보를 제공해주며, 브라우저에 이미지에 대한 정보를 전달함으로써 SEO에 도움을 준다.

*SEO = Search Engine Optimize

* 모든 이미지에 alt값을 넣을 필요는없음. 불필요한 내용까지 넣어버리면 시각장애인들은 혼란을 느낄수있음.

 

 

 

srcset : 여러해상도에 맞게 브라우저가 최상의 이미지를 로딩하게 도움을 준다.

         다양한 크기를 가지는 동일 이미지를 최소 2개이상 사용할때 사용.

 

 

x서술자 : 화소의 밀도를 나타냄. 디바이스의 화소 밀도에 따라 이미지를 로딩하도록 브라우저에게 알려줌.

<img

width="200px"

srcset="img/logo_1.png 2x,

        img/logo_2.png 3x"

src="a.png"

alt="test">

w 서술자: 원본 이미지의 넓이가 차례대로 300px , 600px , 700px 임을 브라우저에게 알려준다.

px가 아닌 w로 표기해야함!

<img

width="200px"

srcset="img/logo_3.png 700w,

        img/logo_2.png 600w,

                img/logo_1.png 300w"

src="a.png"

alt="test">

 

 

sizes :  뷰포트의 조건에 따라 이미지가 UI 안에서 차지하게 될 사이즈를 브라우저에게 알려줌.

<img

srcset="img/logo_3.png 700w,

        img/logo_2.png 600w,

                img/logo_1.png 300w"

sizes="(min-width: 960px) 250px,

             (min-width: 620px) 150px,

             300px"

src="a.png"

alt="test">

브라우저는 가장 적절한 이미지를 로딩함. 

웹표준을 준수하기 위해서는 srcset 속성을 사용하면 그에 맞는 sizes 속성도 반드시 명싱해야한다.

 

 

<picture>

<source>요소와 <img> 요소를 통해 각기 다른 디바이스에 따라 조건에 맞는 이미지를 보여준다.

 

<picture>

    <source srcset="babies_large.jpeg" media="(min-width:960px)">

    <source srcset="babies.jpeg" media="(min-width:620px)">

    <img src="babies_small.jpeg" alt="귀여운 아기 팽귄들">

</picture>

 

 

picture 방식은 점진적 향상기법이다. 점진적 향상기법은 예전 기술환경의 기능을 구현하고, 최신기술을 사용할수있는 환경에서는 최신기술을 제공하는 방식이다.

 

 

<source> = picture태그에서 최적의 이미지를 찾기위해 보는 후보들.

 

 <picture>는 <source>안의 media 속성값을 통해 조건에 알맞는 이미지를 찾는다.

그리고 srcset 속성값을 찾아 <img> 태그의 src에 넣어 화면에 보여준다.

-> img가 없으면 화면에 이미지가 나타나지 않음!!

 

type 속성 : 이미지의 포맷타입을 브라우저에게 알려줌.

<picture>

    <source srcset="babies.webp" type="image/webp">

    <source srcset="babies.avif" type="image/avif">

    <img src="babies.jpeg" alt="귀여운 아기 팽귄들">

</picture>

 

위에서 아래로 브라우저가 지원하는 포맷을 탐색한다.

모든요소가 사용이 불가능하면 <img> 요소의 이미지를 랜더링함.

그렇기때문에 크로스브라우징을 위해 <picture>요소와 함께 사용하자.

 

 

🐬 이미지 포맷의 종류

 

GIF : 256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 듭니다. 투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능합니다. 애니메이션 처리가 가능합니다.

 

JPG/JPEG : 매우 화소가 높고, 용량도 적지만 투명처리가 불가능합니다.

 

PNG  : 왠만한 컬러는 모두 표현 가능하여 투명 영역을 처리 가능하지만 용량이 큽니다.

 

SVG  : SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능합니다.

 

WebP  : 압축률이 좋다고 소문난 JPEG 이미지에 비해 무려 용량은 70% 수준으로 낮지만 더 뛰어난 색상을 지원하는 포맷입니다. 그럼에도 불구하고 PNG 처럼 투명도 표현 가능하며, GIF 처럼 애니메이션 표현도 가능한 만능 포맷입니다.

 

AVIF (AV1 Image File Format) : WebP 처럼 뛰어난 색상표현, 애니메이션 지원, 투명도 표현 모두 가능하며 JPEG 이미지의 50% 수준인 용량을 자랑하는 차세대 이미지 포맷입니다. 아직 지원하지 않는 브라우저가 많음에 주의해야합니다.

 

 

 

 

 

 

 

<iframe>

 

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

              width , height 속성으로 크기를 조정하며 설장하지 않으면 height:150px , width:300px가 기본값이다.

 

<iframe src="링크"></iframe>

 

 

• frameborder : 테두리를 그려줄지 결정합니다. 0 혹은 1의 값을 가집니다. 이제 더는 사용하지 않는 값이며 CSS의 border 속성을 대체되었습니다.
• allow : iframe 에서 허용할 기능들을 지정합니다.
• allowfullscreen : 전체화면을 지원합니다.

 

 

<audio> 

음악컨텐츠를 재생하기 위한 태그. src속성은 브라우저에게 오디오 파일의 위치 및 파일명을 알려준다.

 

<audio src="폴더/파일명" controls autoplay loop ></audio>

 

 

• controls : 음악 파일을 제어할 수 있는 컨트롤러를 불러옵니다.
• autoplay : 로딩이 완료된 파일을 자동으로 재생합니다.(Chrome에서 정책상 autoplay가 안됩니다. 간혹 되는 경우도 있으나 정책상 안되는 것이 맞습니다. 그래서 js로 컨트롤합니다.)
• loop : 음악을 반복합니다.

<video>

동영상 파일을 재생하기 위한 태그.

 

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

 

• src : 브라우저에게 비디오 파일의 위치 및 파일명을 알려주는 속성.
• controls : 영상 파일을 재생하는데 필요한 컨트롤러를 불러오는 속성.
• autoplay : 로딩이 완료되면 자동으로 영상 파일을 재생시키는 속성.
• loop : 영상이 종료되면 다시 반복해서 재생하는 속성.

 

 

• preload : 좋은 사용자 경험을 위해 고려해 볼 수 있는 속성. (기본 값은 브라우저마다 다름.)
  • none : 비디오 파일을 미리 로딩하지 않음. 서버가 최소한의 트래픽을 유지하며 페이지 로딩이 좀 더 빨라짐
  • metadata : 비디오 파일을 미리 로딩하지 않지만 파일의 메타데이터(예를 들어서 영상의 길이)를 미리 가져옴.
  • auto : 비디오 파일을 미리 로딩하여 사용자가 바로 영상을 볼 수 있도록 준비함.
• poster : 영상이 로딩 중 일 때 대신해서 화면에 보여줄 이미지를 지정함.
• <source> : 다른 embedded 요소들과 마찬가지로 source 요소를 통해 브라우저가 지원하는 파일 포멧을 여러가지 지정할 수 있음.
• <track> : <audio> 혹은 <video> 요소의 자식으로 자막과 같은 시간 기반 텍스트 데이터(텍스트 트랙)를 보여주고자 할 때 사용함.
  • kind : 텍스트 트랙의 종류를 지정함. subtitles(자막), captions(설명) 등을 지정할 수 있음.
  • srclang : 텍스트 트랙의 언어를 지정함.
  • label : 텍스트 트랙의 제목을 정함.

<video controls poster="batman.jpeg" preload="auto" width="450" height="300">

    <source src="batman.mp4" type="video/mp4">

    <source src="batman.ogv" type="video/ogg">

    <source src="batman.webm" type="video/webm">

    <track kind="subtitles" src="foo.en.vtt" srclang="ko" label="batman">

</video>

 

다양한 속성을 이용해서 크로스브라우징과 사용자 친화적인 비디오를 구현할수있다.

 

 

🍳 WebVTT (Web Video Text Tracks) 

     <track> 요소에서 사용할 자막 파일 포맷.   .vtt로 표시함

 

🍳 자막(subtitles) vs 설명 (captions)

자막: 시청자가 이해할 수 없는 언어에 대한 번역

설명: 자막+오디오 트랜스크립션   // 

오디오 트랜스크립션: 모든 소리데이터를 문자로 표현한것. 주로 청각장애를 가진 사용자에게 적합함.

 

 

🍳 코덱(codec)과 포맷(format)

 

코덱: 촬영을 통해 얻은 원본영상을 편집하여 압축한 결과물

포맷: 코덱을 담아 재생가능한 플레이어에 전달되는 컨테이너 역할

 

-> 비디오파일은 코덱과 포맷의 조합