이미지 분석: Img & Figures

핵심 개념

이미지(img)와 그에 대한 설명(figcaption)을 하나의 꾸러미(figure)로 묶어주면 검색 엔진이 아주 좋아해요.

코드 분석

HTML5📋 코드 (4줄)

<figure style='border: 1px solid #ccc; padding: 10px; width: fit-content;'>
  <img src='https://www.w3schools.com/html/img_chania.jpg' alt='Chania' style='width: 200px;'>
  <figcaption>그림 1. 그리스의 아름다운 도시 찬야</figcaption>
</figure>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 img 태그 코드의 alt, srcset, loading, decoding 속성에서
빠진 부분을 찾아 LCP·접근성 관점으로 개선해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

<picture>, srcset, sizes를 활용해서
반응형 이미지를 모바일·태블릿·데스크톱별로
최적 노출하는 실전 코드를 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 페이지의 모든 이미지를 분석해서
파일 크기, LCP 영향, 반응형 적절성, alt 누락을
우선순위 리스트로 만들어줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년에 WebP, AVIF 같은 차세대 포맷을
실제로 안 쓰면 얼마나 손해인지,
브라우저 호환성 현실을 솔직히 알려줘.

⭐ 이것만 기억하세요

이미지 분석: Img & Figures는 이 3가지만 확실히 잡으세요

1.alt 속성이 없으면 이미지 로딩 실패 시 빈 칸만 보이고, 스크린리더 사용자는 내용을 전혀 알 수 없습니다

2.figure는 이미지와 설명(figcaption)을 하나의 의미 단위로 묶어 콘텐츠의 맥락을 보존합니다

3.다음 챕터에서 정적 이미지를 넘어 canvas로 그래픽을 직접 그리는 법을 배웁니다

💬 이 챕터 질문 보기

HTML5 · CH.13 — 질문하거나 답변을 확인하세요

→

진행도 13 / 33

← 커리큘럼으로 ← 목록으로 (HTML5)