AI와 함께 배우는 HTML 첫걸음 03 | 콘텐츠 섹션과 랜드마크 완벽 정리

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

이번 영상에서는 HTML5의 핵심인 콘텐츠 섹션(Content Section)과 랜드마크(Landmark), 그리고 올바른 헤딩 태그(h1~h6) 계층 구조를 설계하는 방법을 다룹니다.

웹 표준과 웹 접근성을 지키기 위해 시각적인 디자인에만 의존하지 않고 논리적인 구조를 나누는 기준을 짚어보고, AI(제미나이 등)를 활용해 복잡한 웹페이지의 랜드마크와 헤딩 구조를 빠르고 정확하게 분석하고 코드로 추출하는 실무 프롬프트 및 수동 검수 팁까지 함께 소개합니다.

📌 강의 안내 및 관련 링크

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

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


⏱️ 타임라인 (Timestamps)
00:00 인트로 및 콘텐츠 섹션(Content Section) 개요
00:22 h1~h6 헤딩 태그 원칙과 제목 계층 설계
01:35 실전 화면 분석: 시각적 디자인과 논리적 제목 구조의 차이
04:43 웹 접근성을 위한 제목 네이밍 주의점 (푸터/헤더 용어 지양)
06:00 HTML 기본 마크업 구조 잡기
06:37 h1~h6 With AI (섹션별 캡처 & AI 프롬프트 분석)
11:03 AI 분석 결과 검수 및 시맨틱 보정 (header, nav, aside)
13:06 푸터(Footer) 영역의 계층 구조 분석
15:24 Landmark (랜드마크 시맨틱 요소 총정리)
17:09 Landmark With AI (전체 화면 캡처로 랜드마크 & 헤딩 한 번에 추출하기)
18:25 AI 생성 전체 마크업 검수 및 수동 보정 가이드
20:26 랜드마크와 헤딩 태그 최종 점검 및 마무리 요약