figure

비디오, 오디오, 이미지, 테이블 등등 독립적인 콘텐츠를 설명하고자 할 때 뒷받침 정보로 사용할 수 있습니다.
콘텐츠를 담는 태그들을 만나보기에 앞서 콘텐츠를 담는 태그를 감싸는 figure태그를 먼저 알아봅시다.

<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth">
  <figcaption>
    dinosaur image
  </figcaption>
</figure>

figure는 block-level로 감싸주고, 이미지에 대한 설명을 figcaption에 담습니다.

Images

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">

이미지 사용법

src는 이미지의 경로를 나타내어 외부 자원을 내 문서에 넣을 수 있게 만들어주고,
alt는 시각장애인들과 이미지가 로드되지 못한 상황에 대비해 의미있는 글을 넣어야 합니다. 다른 내용들과 중복되거나 꾸미기만을 위해 사용된 이미지에는 alt를 넣지 않습니다. 즉, 이미지대신 사용가능한 글을 적어야 합니다.

css background-image

오직 꾸미는 용으로만 쓰이는 이미지는 의미가 없으므로 css background 속성으로 대체합니다.
의미가 있는 이미지라면 이미지 태그로 작성하세요.

responsive images

css에서 반응형 이미지를 사용하는 게 더 낫지만, 마크업 측면에서 지원되는 부분을 보겠습니다.

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

• srcset: 파일이름적고 한 칸 띄고 이미지의 실제 크기를 적습니다. (px단위가 아니라 w 단위를 사용함)
• sizes: 스크린의 크기(미디어 크기)조건을 적고 한 칸 띄고 이미지가 렌더될 크기를 적어줍니다. %단위는 제공되지 않습니다.

위와 같이 적는다면, 브라우저는 장치의 너비를 먼저 보고 크기 목록에서 가장 먼저 참인 미디어 상태를 파악한 뒤, 해당 미디어 쿼리에 지정된 슬롯의 크기와 가장 비슷한 이미지를 srcset에서 찾습니다.

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

이미지 크기를 자연상태로 두면서 해상도만 바꾸고 싶을 경우 위와 같이 하면 됩니다.

<picture>
  <source type="image/jpg" media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source type="image/jpg" media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

picture라는 태그로 같은 srcset과 sizes를 구현할 수 있습니다.
0개 이상의 source와 1개 이상의 img태그가 꼭 필요합니다.

map & area

<map> 요소는 이미지 맵(클릭 가능한 링크 영역)을 정의하기 위해 <area>와 함께 사용됨.

<img src="products-map.jpg" alt="제품 모음" usemap="#products-map">

<map name="products-map">
  <area
  shape="circle"
  coords="200,250,25"
  hreflang="en-GB"
  href="another.html"
  alt="Another Page"
  target="_blank">
</map>

area 속성
shape - 핫스팟 모양 설정
coords - 모양의 좌표 값 설정
href - 하이퍼링크 주소 설정
target - 새 창(탭) 열림 설정
alt - 대체 텍스트 설정
hreflang - 연결된 페이지의 언어 속성 설정
download - canvas 데이터 다운로드 설정

video & audio

video와 audio 태그의 구조는 같습니다. 오디오 태그에서 비주얼을 담당하는 속성들을 제공하지 않는 차이만 뺀다면요.

비디오 기본구조

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>

src: 이미지처럼 파일의 경로.
controls: 재생, 일시정지, 볼륨조정 등 비디오 컨트롤 바
video 태그 안에 있는 글: fallback text.

크로스 브라우징 적용

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

브라우저와 플랫폼들 사이의 코덱, 인코딩 문제로 인해 여러개를 넣고 싶다면 source 태그를 작성하면 됩니다.
webm과 mp4 정도면 대부분의 오늘날 플랫폼에서 동작할 것입니다.
source의 타입 속성은 선택사항이지만, 불필요한 리소스 낭비를 막기 위해 적어두어 브라우저가 자신이 제공하지 않는 타입이면 스킵할 수 있도록 해줍니다.

보조자료 추가

시각적인 비디오의 보조자료로서, 자막, 캡션(의미있는 소리 표현해놓은 것), 화면설명서 등을 추가할 수 있습니다.
track 엘리먼트에 자막(subtitles) 캡션(captions), 화면설명서(descriptions) 임을 알리는 kind 속성, 경로 나타내는 src 속성, 주언어가 무엇인지 알려주는 srclang 속성이 있습니다.

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

iframe

다른 웹문서를 통째로 끼워넣는 요소.

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> 
    <a href="https://developer.mozilla.org/en-US/docs/Glossary">
       Fallback link for browsers that don't support iframes
    </a>
  </p>
</iframe>

나머지 속성들은 이름만으로 대체로 이해가 가능한데, sandbox는 잘 이해가 안갔습니다.
sandbox는 보안을 강화한 속성으로 써 주는 것이 좋다고 합니다.

embed, object

범용 삽입 태그이나, 오늘날 잘 쓰지 않는다.

svg

svg는 수학적으로 계산된 수치값으로 선을 잇는 방식으로 만들어진 벡터 이미지입니다.
svg는 xml 기반 언어로 콘텐츠를 표현하는 마크업과 비슷하게 그래픽을 표현한다.

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

<img>로 임베딩할 수도 있다.

<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">

이미지 태그로 넣을 수있지만, 자바스크립트로 이미지를 조작하거나 css를 넣을 순 없습니다.
단지, 다른 img 태그처럼 백그라운드 이미지로만 들어갈 수 있습니다.

.svg {
  background: url("fallback.png") no-repeat center;
  background-image: url("image.svg");
  background-size: contain;
}