WeniVooks

이미지 img

1. <img>

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

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

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

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

• src: 경로
• alt: 대체 텍스트. 이미지에 대한 설명
  • src에 지정한 이미지를 제대로 불러오지 못했을 때 alt 값에 적힌 내용을 보여줍니다.
  • 시각장애인을 위한 스크린리더를 지원합니다
  • 이미지가 단순히 페이지를 꾸미는 용도라면 alt="" 처럼 생략이 아닌 빈 값으로 둡니다.
• title : 이미지에 대한 추가 정보를 제공하는 텍스트를 지정합니다. 마우스를 이미지 위에 올리면 툴팁으로 표시됩니다.
  • title 속성은 alt 속성을 대체할 수 없습니다.
  • alt 속성의 값을 title 속성에 사용하는 것을 피해야 합니다. 이 경우 스크린 리더는 불필요하게 동일한 내용을 두 번씩 읽게 되므로 사용자에게 혼란을 줄 수 있습니다.
  • title 속성으로 alt 속성 설명에 대한 부연 설명을 제공해서는 안 됩니다. 이미지가 설명을 필요로 할 경우에는 아래 배울 <figure>와 <figcaption> 태그를 사용하세요.
  • 요즘에는 터치화면을 주로 사용하기 때문에 반드시 넣어주지 않아도 됩니다.

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

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

2. <map>,<area>

2.1 <map>

이미지 맵을 정의하는 태그입니다.

2.2 <area>

이미지 맵 내의 클릭 가능한 영역을 정의하는 태그입니다.

• 아래 링크의 생성기를 사용하면 HTML 이미지 맵을 쉽게 만들 수 있습니다!
  • image-map Free Online Image Map Generator

3. <figure>, <figcaption>

주변 콘텐츠의 이해나 흐름과 관련된 이미지, 그림, 도표, 사진, 코드 목록 또는 기타 관련 콘텐츠 등의 독립된 콘텐츠를 나타내는 시멘틱한 태그입니다.

• 이 태그는 그 콘텐츠가 페이지의 다른 내용과 관련이 있음을 나타내지만, 그 콘텐츠가 없어도 페이지의 주요 흐름에는 영향을 미치지 않습니다.
• <figcaption>태그를 사용해서 이 콘텐츠를 참조할 수 있는 캡션(설명)을 추가할 수 있습니다.

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

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

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

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

img 태그만 사용해야 하는 경우

1. 단순히 이미지를 표시할 때 (내용과 관계 없는 이미지)
2. 본문의 일부로 이미지가 꼭 필요할때