HTML - Embedded content

<img>

• <img>

  : <img> 요소는 웹 페이지에 이미지를 추가할 때 사용한다. 이 요소는 빈 요소로 닫기 태그가 없다.
  
  

• <img src="">

  : <src=""> 속성은 브라우저에게 이미지 파일의 위치 및 파일 명의 출처(source)를 알려준다. "" 안에는 절대 URL 또는 상대 URL이 들어가야 한다.
  
  

• <img alt="">

  : <alt=""> 속성은 이미지를 볼 수 없는 경우에 이미지 설명을 위해 이미지에 대한 텍스트 설명을 제공한다.

  <alt=""> 속성에 사용되는 텍스트를 alt 텍스트 라고 한다. 이는 이미지 콘텐츠에 대한 정확한 설명이 필요한데, 스크린 리더와 같은 접근성을 위한 프로그램에 정보를 제공하기 위한 용도로 사용되며, 브라우저에 이미지에 대한 정보를 전달함으로써 SEO(Search Engine Optimization)에 도움을 준다.

  의미는 없이 장식용으로 이미지를 사용하는 경우에는 <alt=""> 속성을 비워둔다.
  
  

• <img title="">
  

  : <img title=""> 속성은 이미지에 대한 추가 정보를 제공할 때 사용한다. 대부분의 브라우저는 사용자가 이미지 위로 마우스를 가져가면 말풍선으로 "" 안 내용을 보여준다.
  
  

• 반응형 이미지를 위한 <img srcset="">

  : <srcset=""> 속성을 사용하면 여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩하는데 도움을 줄 수 있다. <srcset=""> 속성은 다양한 크기를 가지는 동일 이미지를 최소 2개 이상 사용할 때 사용하며, 브라우저에게 이미지의 선택권을 위임하는 속성이다.

  반응형 이미지를 사용하는 이유는 기기의 뷰포트에 따라 이미지 구현이 달라지기 때문이다.

  우선 기기에 따른 이미지 크기에 대한 문제가 발생한다.
  예를 들어 사이트의 전체 너비는 최대 1200px인데, 노트북이나 데스크톱처럼 화면이 넓은 기기에서 뷰포트가 1200px이 넘는 경우 남는 공간 안에서 가운데 정렬된다. 반면 1200px 이하의 뷰포트에서는 뷰포트 전체 너비의 100%가 된다. 그러나, 좁은 화면 기기로 사이트를 보기 시작하면 문제가 생긴다. 즉, 이미지가 모바일 기기에서는 화면 높이를 너무 많이 차지하기 시작한다.

  또한, 기기에 따라 해상도의 문제도 발생한다.
  어떤 기기는 고해상도 화면이 있어서 더 큰 이미지가 필요하지만, 모바일 사용자는 기기에 맞는 작은 이미지 대신 데스크톱에 사용되는 커다른 이미지를 다운로드하고 싶어하지 않는다.
  이를 해결하기 위한 이상적인 상황은 다양한 해상도를 준비해 두고, 웹사이트 데이터를 받는 기기에 따라 적당한 사이즈를 제공하는 것이다.

  브라우저에 여러 개의 이미지 파일들을 제공하는 반응형 이미지 기술은 위에서 지적한 문제를 해결하기 위해 최근에 구현됐다. 즉, 다른 공간 점유에 맞는 다른 이미지를 보여 주거나(아트 디렉션), 픽셀 수가 다르지만 동일한 이미지를 보여주거나(해상도 전환).

  이러한 이유에서 반응형 이미지 속성(<img srcset="">)을 사용하는 것이다.
  
  

  • x 서술자 속성
    

    : x 서술자 는 화소의 밀도(pixel density)를 나타낸다. 디바이스의 화소 밀도에 따른 이미지를 로딩하도록 브라우저에 알려준다.

    [Pixel density] 
    
    : 동일한 면적에 들어가는 화소의 수로 화소의 갯수가 많을수록 더 높은 해상도의 기기이다. 
    화면의 화소 밀도를 알고 싶으시다면 브라우저 api를 이용해서 볼 수 있다. 
    (개발자 화면의 콘솔창에서 window.devicePixelRatio 명령어를 입력)

    맥북 에어 기준에서 화소의 밀도는 2이기 때문에
    

    <img srcset="images/image_1.png 2x> 를 선택할 것이다. 만약 두 조건에 해당하는 해상도가 없다면 <img src="image.png"> 를 선택할 것이다.
    
    

  • w 서술자 속성
    

    : w 서술자 는 원본 이미지의 넓이를 차례대로 브라우저에게 알려준다. px이 아닌 w로 이미지 크기를 표기하는것에 주의하도록 한다.

    w 서술자 와 x 서술자는 동시에 사용할 수 없다.
    또한, src 속성을 유지하는 것은 필수이다. srcset 을 사용할 수 없는 브라우저를 대비해 사용하는 이미지이다.
    
    

• <img sizes="">

  

  : 미디어 조건문을 지정하고, 그 조건문에 해당하는 이미지의 최적 크기를 지정하는 속성이다.

  뷰포트의 조건에 따라 이미지가 UI안에서 차지하게 될 사이즈를 브라우저에 알려준다. 브라우저는 우리가 제공한 이미지의 원본 사이즈와 뷰포트에 따른 이미지의 사이즈 정보를 통합해 가장 적절한 이미지를 로딩하게 된다.

  위 코드의 경우, 기기 너비가 500px 아래일 때는 이미지가 400px로 출력되고, 800px 아래일 때는 800px로 출력한다.
  두 조건에도 해당하지 않으면 마지막에 작성한 기본값 1200px로 출력한다.

  물론 srcset 속성은 sizes 속성이 없다고 해도 동작에는 문제가 없지만, 웹 표준을 준수하기 위해서는 srcset 속성을 사용하면 sizes 속성도 반드시 명시되어야 한다.

  sizes 속성을 사용할 때 주의할 점은 CSS를 통한 이미지의 사이즈를 컨트롤 하는 방법과 충돌 할 수 있다는 점이다. (CSS 스타일이 sizes 속성에 우선한다.)
  협업할 때는 사전에 반드시 동료들에게 어떠한 방법으로 반응형 이미지를 처리했는지 공유하도록 한다.

---

<picture>

• <picture></picture>

  : <picture> 요소는 <source> 요소와 <img> 요소를 통해 각기 다른 디스플레이 혹은 디바이스에 따라 조건에 맞는 이미지를 보여주는 요소이다.

  <picture> 요소의 자식으로 0개 이상의 <source> 태그와 <img> 태그를 넣어 준다. 그 이유는 <picture> 태그를 미지원하는 브라우저에 호환성 문제가 있기 때문이다.

  <img srcset=""> 속성이 화면에 따라 이미지의 크기를 조절한다면, <picture> 요소는 이미지 포맷 자체를 변경 할 수 있다.
  
  

  • <source srcset="" media=""> 속성
    

    : <picture> 의 자식인<source media=""> 속성의 값을 통해 조건에 알맞는 이미지를 찾게 된다. <media> 조건에 맞으면 <source srcset=""> 속성 값을 찾아 <img src=""> 속성을 변환시켜 화면에 보여준다.
    (<picture> 와 <source> 요소 자체는 이미지를 표현하지 않는다.)

    이러한 구조로 작동하기 때문에 조건에 맞지 않을 시 <img> 요소가 없다면 이미지가 화면에 나타나지 않는다는 점에 주의한다.
    
    

  • <source srcset="" type=""> 속성
    

    : <picture> 의 자식인<source type=""> 속성의 값을 통해 브라우저가 지원하는 포맷인지 탐색한다. 만약 지원하지 않는 포맷이라고 판단되면 다음 <source type=""> 요소로 넘어간다.

    만약 모든 <source> 요소의 이미지 사용이 불가능하면 <img> 요소의 이미지를 랜더링 한다.

    때문에 WebP나 AVIF 와 같은 최신 포맷의 이미지를 지원하고 싶다면 크로스 브라우징을 위해 <picture> 요소와 함께 사용 하는 것이 좋다.

    이러한 방식의 크로스 브라우징 기법을 점진적 향상 기법 이라고 한다.

    [점진적 향상 기법] 
    
    		: 기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고,
    		최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여 더 나은 사용자 경험을 제공할 수 있는 방법

---

<iframe>

• <iframe></iframe>

  : <iframe> 은 현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용한다. 즉, 페이지 속 작은 창(inline frame)이라고 생각하면 쉽다.

  <ifram> 의 대표적인 사용 예로는 지도를 페이지 내에 내장한 경우, 유투브에서 영상을 불러올 때 많이 사용한다.
  <ifram> 의 콘텐츠는 같은 서버에 있든지, 혹은 웹 상의 다른 곳에 있든지 상관이 없이 모든 html 페이지에서 가능하다.

  iframe은 width 혹은 height 속성으로 크기를 조절한다. 따로 값을 설정하지 않는다면 height는 150px, width는 300px을 기본값으로 한다.
  
  

• google map을 불러오게 되면 보통 아래와 같은 속성값들을 가진다.
  

  • <src> : 프레임에 표시할 페이지의 URL을 지정한다.
    
    
  • <width> 와 <height> : iframe의 넓이와 높이 영역을 지정한다.
    
    
  • <scrolling>
    : 이제 더는 사용하지 않는 값이다.
    yes, no, auto 로 값을 설정해 iframe에 스크롤바 생성 여부를 지정하는 데 사용한다.
    iframe 내부의 페이지가 지정한 영역보다 큰 경우에 스크롤바를 이용해 프레임을 이동하며 볼 수 있게 한다.
    
    
  • <frameborder>
    : 이제 더는 사용하지 않는 값이다.
    0 혹은 1의 값으로 테두리를 그려줄지 결정한다.
    
    
  • <seamless>
    : 스크롤바를 원하지 않는 iframe에 적용할 수 있다.
    
    

• youtube 영상을 불러오게 되면 보통 아래와 같은 속성값들을 가진다.
  

  • <allowfullscreen> : 전체 화면을 지원한다.
    
    
  • <allow>
    : iframe 에서 허용할 기능들을 지정한다.
    <allow="autoplay"> 속성은 브라우저 정책 상 일부 모바일 브라우저에 작동하지 않을 수 있으며, 항상 mute 속성과 함께 사용되어야 한다.
    이는 모바일 환경에서 <allow="autoplay"> 기능으로 인한 의도하지 않은 트래픽 유발을 방지하고 접근성 측면에서 좋지 않기 때문이다.
    이러한 특징은 <iframe>, <audio>, <video> 요소 모두 동일하게 적용된다.

---

<audio>

• <audio></audio>

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

• <audio src="" controls>

  : 음악 파일을 제어할 수 있는 컨트롤러를 불러 온다.
  속성을 사용하지 않으면 기본적으로 컨트롤러가 나타나지 않는다. 또한, 자바 스크립트를 사용해 자체적인 컨트롤을 지정할 수도 있다.
  
  

• <audio src="" autoplay>

  : 로딩이 완료된 파일을 자동으로 재생한다. 하지만, 사용자가 재생 여부를 직접 선택하게 하는 편이 더 낫다.
  (Chrome에서 정책상 autoplay가 안 된다. 간혹 되는 경우도 있으나 정책상 안되는 것이 맞다. 그렇기에 js로 컨트롤 한다.)
  
  

• <audio src="" loop> : 음악을 반복한다.
  
  

• <audio src="" preload>

  : <autoplay> 를 설정하지 않은 경우 브라우저가 수행해야 할 작업을 나타낸다.

  • <preload="none">
    : 오디오가 미리 로드되지 않아야 함을 나타낸다.
    
    
  • <preload="metadata">
    : 오디오 메타데이터만 가져옴을 나타낸다.
    
    
  • <preload="auto">
    : 전체 오디오 파일을 다운로드 할 수 있음을 나타낸다.
    
    

• <source src="">
  

  : <audio> 태그 안에 <source> 요소를 사용해 하나 이상의 오디오 파일을 지정할 수 있다. 다른 요소와 마찬가지로 크로스 브라우징을 위해 여러 포맷의 파일을 지원할 수 있다.

---

<video>

• <video></video>

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

• <video src="">
  : 비디오에 대한 경로를 지정하는 속성이다. 브라우저에게 비디오 파일의 위치 및 파일명을 알려준다.
  
  

• <video controls>
  : 영상 파일을 재생하는데 필요한 컨트롤러를 불러온다.
  
  

• <video autoplay>
  : 로딩이 완료되면 자동으로 영상 파일을 재생시킨다.
  
  

• <video loop>
  : 영상이 종료되면 다시 반복해서 재생한다.
  
  

• <video poster>
  : 비디오를 내려 받는 동안이나 사용자가 비디오를 재생하게 될 때까지 표시할 이미지를 지정하는 속성이다.
  
  

• <video preload>
  : 페이지를 로드할 때 브라우저가 수행해야 할 작업을 나타낸다.

  • <preload="none">
    : 재생 버튼을 누를 때까지 미리 로드되지 않는다.
    
    
  • <preload="metadata">
    : 오디오 메타데이터만 가져옴을 나타낸다.
    
    
  • <preload="auto">
    : 비디오 파일을 미리 로딩하여 사용자가 바로 영상을 볼 수 있도록 준비한다.
    
    

• <track>

  

  : <audio> 혹은 <video> 요소의 자식으로 자막과 같은 시간 기반 텍스트 데이터(텍스트 트랙)를 보여주고자 할 때 사용한다.

  • <track kind="">
    : 텍스트 트랙의 종류를 지정한다. subtitles(자막), captions(설명) 등을 지정할 수 있다.
    생략 시, subtitles로 간주하고, 유효하지 않은 값을 가진 경우 metadata로 간주한다.
    
    
  • <track srclang="">
    : 텍스트 트랙의 언어를 지정한다.
    
    
  • <track label="">
    : 텍스트 트랙의 제목을 정한다.
    
    

• <source src="">

  : <video> 태그 안에 <source> 요소를 사용해 하나 이상의 비디오 파일을 지정할 수 있다. 다른 요소와 마찬가지로 크로스 브라우징을 위해 여러 포맷의 파일을 지원할 수 있다.