이 페이지는 이미지가 단순 장식이 아니라 본문 구조의 일부로 남는지 확인한다.
figure 샘플
inline image 샘플
문장 사이에 같은 요소가 들어와도 행간이 무너지지 않아야 한다.
추가로 확인할 항목
- 외부 이미지가 lazy load와 함께 안정적으로 열리는가
- 링크가 걸린 figure가 클릭 가능한 영역처럼 자연스러운가
- 캡션이 본문보다 튀지 않는가
- 인라인 이미지는 줄 높이를 지나치게 흔들지 않는가
- 이미지 alt가 비어 있을 때도 구조가 깨지지 않는가
원문 코드
<figure class="content-figure content-figure--center"><img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1600&q=80" alt="작업용 책상과 노트북" loading="lazy"><figcaption>이미지 설명</figcaption></figure>
문장 사이에 <img src="https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/github.svg" alt="inline icon" style="height:16px; width:auto; vertical-align:middle; display:inline-block;" loading="lazy"> 같은 요소가 들어간다.
확인 포인트
- 이미지가 카드보다 더 강하게 떠 보이지 않는가
- 캡션이 본문보다 튀지 않는가
- 링크가 걸린 figure가 클릭 가능한 영역처럼 자연스러운가
- 인라인 이미지는 줄 높이를 지나치게 흔들지 않는가