1. 이미지 태그 (img)

<img> 태그는 HTML 문서에 이미지를 삽입하는 데 사용됩니다.

예전에는 이미지를 보려면 링크를 클릭해 새 창에서 확인해야 했습니다. 이미지도 하나의 문서로 생각되었던 거죠. 마크 로웰 앤드리슨(모자이크 웹 브라우저 및 넷스케이프 내비게이터 개발자)이 '글자와 이미지를 한 번에 보여주면 어떨까?'라는 아이디어로 모자이크 브라우저에 이미지 태그를 만들어 적용하게 되었습니다.

<img src="rosy.jpg" alt="위니브 검은 토끼 캐릭터 로지" >

주요 속성

alt 속성 사용 시 주의사항

• src에 지정한 이미지를 제대로 불러오지 못했을 때 alt 값에 적힌 내용을 보여줍니다.
• 시각장애인을 위한 스크린리더를 지원합니다.
• 이미지가 단순히 페이지를 꾸미는 용도라면 alt="" 처럼 생략이 아닌 빈 값으로 둡니다.

title 속성 사용 시 주의사항

• title 속성은 alt 속성을 대체할 수 없습니다.
• alt 속성의 값을 title 속성에 사용하면 스크린 리더가 동일한 내용을 두 번 읽어 혼란을 줄 수 있습니다.
• 이미지가 상세 설명을 필요로 할 경우에는 아래에서 배울 <figure>와 <figcaption> 태그를 사용하세요.
• 터치화면 환경에서는 툴팁이 표시되지 않으므로 반드시 넣어주지 않아도 됩니다.

<img
  src="rosy.jpg"
  alt="위니브 검은 토끼 캐릭터 로지"
  title="로지는 보조개와 큰 리본을 가진 검은 토끼 캐릭터입니다."
/>

2. 이미지 맵 (map, area)

2.1 map 태그

<map> 태그는 이미지 맵을 정의하는 태그입니다. 이미지의 특정 영역을 클릭 가능하게 만들 수 있습니다.

2.2 area 태그

<area> 태그는 이미지 맵 내의 클릭 가능한 영역을 정의합니다.

아래 링크의 생성기를 사용하면 HTML 이미지 맵을 쉽게 만들 수 있습니다.

3. 피규어 태그 (figure, figcaption)

<figure>는 문서의 주요 흐름과 독립적으로 참조될 수 있는 자체 완결적인 콘텐츠를 나타냅니다. 일러스트레이션, 다이어그램, 사진, 코드 목록 등을 그룹화하는 데 사용됩니다.

<figcaption> 요소는 이 콘텐츠에 대한 설명(캡션)을 제공합니다.

이러한 콘텐츠의 경우 이미지와 캡션이 연결되도록 <figure> 요소를 도입할 수 있습니다.

<figure>
  <img src="images/baby.jpg" alt="엄마 코끼리와 아기 코끼리" />
  <figcaption>관심 받고싶어하는 아기</figcaption>
</figure>

이미지뿐만 아니라 코드 조각, 인용문 등에도 사용 가능합니다.

<article>
  <p>아스키 아트는 텍스트로 이미지를 표현하는 방식입니다.</p>
  <figure>
    <pre>
           /\_/\
          ( o.o )
           > ^ <
    </pre>
    <figcaption>그림 1: 귀여운 고양이 아스키 아트</figcaption>
  </figure>
  <p>
    아스키 아트는 코드나 텍스트 기반의 환경에서 그래픽을 표현하는 데 유용합니다.
  </p>
</article>