AI와 함께 배우는 HTML 첫걸음 04 | 멀티미디어 콘텐츠와 임베디드

안녕하세요, 리베하얀입니다.

이번 영상에서는 HTML의 이미지, 멀티미디어 및 내장 콘텐츠(iframe)를 다루는 실무 방법과 AI 코딩 시 반드시 점검해야 할 웹 접근성 포인트를 정리해 드립니다.

단순히 태그를 넣는 것에서 끝나지 않고, 사이트 성능을 높이는 Lazy Loading 점검법부터 스크린 리더를 위한 올바른 대체 텍스트(alt/IR 기법) 작성 기준, 반응형 picture 태그와 iframe 보안·접근성까지 실무 관점에서 확인해 보세요!

📌 강의 안내 및 관련 링크

온·오프라인 강의 안내: https://rebehayan.notion.site/15f5344e9c9180648cbdc918744a57c2?pvs=74

👉 구독자 단톡방 https://open.kakao.com/o/gOT0rthe

📌 주요 학습 내용
• loading="lazy"를 활용한 이미지 비동기 로딩과 성능 최적화
• 의미 있는 이미지 vs 장식용 아이콘의 대체 텍스트 구분 기준
• CSS 배경 이미지 및 IR(Image Replacement) 기법과 접근성 클래스(a11y-hidden)
• 자동 재생 비디오 필수 속성 (autoplay & muted)
• 반응형 picture 태그와 미디어 쿼리 일치 원칙
• iframe 태그 사용 시 필수 title 속성과 접근성 점검

⏰ 타임라인 (Timestamps)
00:00 인트로
00:24 img 태그와 loading="lazy" 성능 테스트 (개발자 도구 활용)
02:01 의미 있는 이미지 vs 무의미한 아이콘 구분 기준
02:43 대체 텍스트(alt)와 IR(Image Replacement) 기법의 이해
04:14 접근성 클래스(a11y-hidden)의 의미와 활용
04:33 AI 프롬프트로 이미지 마크업 및 대체 텍스트 생성하기
06:01 video 태그 자동 재생 시 필수 조건 (muted)
06:37 반응형 picture 태그와 미디어 쿼리 동기화
07:52 iframe 내장 콘텐츠 접근성(title) 및 보안 이슈 점검

#HTML #웹접근성 #프론트엔드 #웹퍼블리싱 #리베하얀 #퍼블리셔 #코딩강의