HTML
언어 및 기초 · 4단계 · 28개 학습 단위
시리즈 목표
문서 의미와 입력 계약을 마크업으로 표현하고 키보드·리소스 실패·확대 조건에서 확인합니다.
선수 지식
브라우저와 파일 경로
실습 방식과 제공 범위
학습 단위는 날짜가 아닙니다. 설명과 과제를 읽고, 완료 조건을 확인한 뒤 다음 단위로 이동하세요. 각 단위의 예제를 출발점으로 삼아 변수를 바꾸고 결과를 관찰합니다. 내장 실행 예제와 별도 환경이 필요한 과제를 구분해서 표시합니다. 예제를 여는 것만으로 학습을 완료한 것으로 처리하지 않습니다.
기존 단위 ID와 필기는 유지됩니다. 기존 01·02·03 예제는 확장된 학습 순서의 1·14·28번째에 연결되므로 주소의 숫자와 화면의 학습 순서가 다를 수 있습니다.
학습 경로
1단계 · 문서 의미와 콘텐츠
- 01. 의미와 문서 구조 — 편집 가능한 예제
- 02. 문서 골격과 문자 인코딩 — 편집 가능한 예제
- 03. 메타데이터와 문서 제목 — 편집 가능한 예제
- 04. 문단과 텍스트 의미 — 편집 가능한 예제
- 05. 목록과 용어 설명 — 편집 가능한 예제
- 06. 링크 경로와 페이지 내 이동 — 편집 가능한 예제
- 07. 이미지와 대체 텍스트 — 편집 가능한 예제
2단계 · 표와 폼 입력
- 08. figure와 복합 설명 — 편집 가능한 예제
- 09. 표의 행과 열 관계 — 편집 가능한 예제
- 10. 인용과 기계 판독 날짜 — 편집 가능한 예제
- 11. 폼의 제출 계약 — 편집 가능한 예제
- 12. 입력 종류와 자동 완성 — 편집 가능한 예제
- 13. 그룹 입력과 선택 의미 — 편집 가능한 예제
- 14. 폼과 키보드 — 편집 가능한 예제
3단계 · 네이티브 UI와 미디어
- 15. disabled와 readonly의 차이 — 편집 가능한 예제
- 16. details로 접히는 목차 — 편집 가능한 예제
- 17. dialog와 모달 흐름 — 편집 가능한 예제
- 18. 미디어 자막과 대체 경로 — 외부 실행 예제 · 미리보기 안내
- 19. 반응형 이미지 선택 — 편집 가능한 예제
- 20. picture와 형식 대체 — 편집 가능한 예제
- 21. iframe과 포함 콘텐츠 경계 — 외부 실행 예제 · 미리보기 안내
4단계 · 접근성 검토와 카드 통합
- 22. template과 반복 콘텐츠 — 편집 가능한 예제
- 23. 스크립트 로딩과 문서 파싱 — 외부 실행 예제 · 미리보기 안내
- 24. 접근성 이름과 설명 — 편집 가능한 예제
- 25. 읽기 순서와 건너뛰기 링크 — 편집 가능한 예제
- 26. HTML 오류와 브라우저 복구 — 편집 가능한 예제
- 27. 이미지 실패와 확대 점검 — 편집 가능한 예제
- 28. 접근 가능한 학습 카드 — 편집 가능한 예제
통합 프로젝트와 제출물
제목·목차·이미지 대체 설명·폼을 갖춘 접근 가능한 학습 카드 문서
구현 코드와 실행 방법, 기준 조건과 변경 조건의 기록, 실패 사례와 복구 방법을 함께 남기세요. 측정하지 않은 성능과 수행하지 않은 테스트는 결과로 기재하지 않습니다.