[HTML5] 이미지 태그 <img> / 독립적 콘텐츠 태그 <figure>

이미지 태그는 <img>로 닫는 태그가 없다.

• 인라인 요소
• 빈 요소, 빈 태그로 종료 태그 없음
• src="이미지 경로"
• alt="이미지 대체 텍스트"
• alt의 경우 웹표준의 기본이므로 꼭 작성.
• 컨텐츠로 분류되고 닫아주는 태그가 없음에도 범위를 가지며 가로 세로 값 조절 가능

---

좌 : a태그, 우 : img태그

---

<img> 태그의 성격

<img>태그는 하나의 글자로 취급된다.

---

독립적 콘텐츠 태그 <figure>

• 블록 요소
• 독립적 콘텐츠 그룹 작성시 사용
• 설명문, 시, 도표, 삽화, 인용문 등을 구분하고자 할 때 사용
• <figcaption> : figure의 자식으로 항상 이미지를 따라다니며 설명, 즉 캡션을 덧붙일 수 있으며 생략 가능. 

---

<figure>태그 안에 <img>, <figcaption> 태그 작성.

 

• 웹 접근성과 웹표준을 위해 <img>태그의 alt 속성은 필수이나, <figcaption>을 작성할 경우 생략해도 된다.

<img>태그 내 alt 속성 생략.

이미지는 <img>태그, 아래 설명은 <figcaption>태그

---

<image> 태그 사이의 공백

• image 태그는 인라인 요소로 띄어쓰기와 행간, 수직 정렬의 값을 가짐.
• image가 문자로 취급되므로 인라인 요소 사이의 공백은 개수와 상관 없이 스페이스 하나로 처리된다.
• 스페이스 = 공백 , 엔터 = 공백
• 이미지 태그 사이의 공백을 없애려면 태그를 줄바꿈이나 띄어쓰기 없이 나란히 작성하면 된다.