img, src, alt로 의미 있는 이미지를 문서에 넣습니다.
src는 이미지 파일의 위치, alt는 이미지가 로드되지 않거나 화면 읽기 도구가 사용할 대체 설명입니다. figure와 figcaption을 쓰면 이미지와 설명을 하나의 콘텐츠로 묶을 수 있습니다.
figure가 바깥 상자이자 .demo 카드가 되고, 그 안에서 img와 figcaption이 하나의 콘텐츠로 묶입니다. 원본 그림은 600×260 크기지만 CSS의 width: 100%와 height: auto 덕분에 카드 폭에 맞춰 줄어들면서 비율을 유지하고, display: block은 인라인 이미지 아래에 생기던 작은 빈틈을 없앱니다.
img에 width와 height 속성을 적어 두면 브라우저가 파일을 받기 전에 비율을 계산해 자리를 먼저 잡아 두므로, 이미지가 늦게 도착해도 아래 내용이 밀려 내려가지 않습니다. 장식용 그림은 alt를 빈 값으로 두어 화면 읽기 도구가 건너뛰게 하고, alt 속성 자체를 빼면 파일 이름을 대신 읽는 도구도 있습니다.
정보를 전달하는 이미지의 alt를 파일명이나 '이미지'라고만 적지 마세요.
직접 바꿔보세요alt를 실제 그림을 보지 못한 사람도 이해할 수 있는 문장으로 바꿔보세요.