HTML에서 이미지를 넣는 방법

사용법

: <img>를 이용하여 이미지 표시하기

예시)

<img src="https://cdn.pixabay.com/photo/2021/12/27/14/04/paper-rocket-6897262_960_720.png">

---

대체 텍스트

: 대체 텍스트는 이미지를 표시할 수 없거나(엑스박스)

불러오는데 오래 걸리는 경우 이미지 대신 텍스트를 띄운다.

다양한 이유로 이미지 렌더링이 안되는 상황에서 대체 텍스트를 이용하면

이미지를 보지 않더라도 이미지에 대한 사용 가능한 경험을 제공한다. 

• 시각 장애인의 화면 리더기 사용시
• 파일 자체나 파일 경로가 잘못될 경우
• 브라우저가 이미지를 지원하지 않을 경우 
• 검색 엔진에 텍스트 제공
• 사용자가 임의로 브라우저의 이미지 표시를 끈 경우
• 이미지가 단지 화면을 꾸미는 용도인 경우
  스크린 리더기에 alt=""를 제공하여 불필요한 시간 낭비 방지
• 사용자가 텍스트 전용 브라우저를 사용 하는 경우

예시) 이미지의 주소를 잘못 입력하여 이미지를 불러오지 못하는 상황

<img 
	src="https://cdn.pixabay.com/photo/2021/12/27/14/04/paper-rocketewqeqgweg.png"
	alt="it is red paper-rocket"
">

---

너비와 높이

예시)

<img 
	src="https://cdn.pixabay.com/photo/2021/12/27/14/04/paper-rocket-6897262_960_720.png"
    alt="it is red paper-rocket"
	width="100"
	height="100"
>

---

제목

이미지 위에 마우스를 hover하면 생기는 툴팁에 대한 정보 제공

 hover는 잘 쓰이지 않는다.

<img 
	src="https://cdn.pixabay.com/photo/2021/12/27/14/04/paper-rocket-6897262_960_720.png"
    alt="it is red paper-rocket"
	width="100"
    height="100"
    title="red paper-rocket by Nikin"
>

---

figure와 figcaption

div 요소가 아닌 figure와 figcaption 요소를 이용해 img 요소를 wrapping한다.

<figure>
    <img 
        src="https://cdn.pixabay.com/photo/2021/12/27/14/04/paper-rocket-6897262_960_720.png"
        alt="it is red paper-rocket"
        title="red paper-rocket by Nikin"
    >
  <figcaption>red paper-rocket by Nikin</figcaption>
</figure>

red paper-rocket by Nikin

---