Education Learning Material

---
name: education-learning-material
description: |
  확인된 학습 내용을 목표·설명·예제·복습으로 정리해 브라우저용 HTML 학습자료를 만듭니다.
  도식·차트·수식·코드가 필요할 때만 해당 렌더러를 추가합니다.
  요청 예: "이 내용으로 HTML 학습자료 만들어줘", "개념을 도식과 예제로 설명해줘".
version: "1.2.1"
---

# HTML 학습자료

## 입력과 구성

학습 주제, 대상 수준, 사용할 원문과 출처, 원하는 파일 위치를 확인한다. 원문이 없으면 조사한 사실과 설명을 구분한다. 학습 목표 → 핵심 설명 → 검증된 예제 → 자가 점검 질문 순서로 구성하고, 필요 없는 섹션은 생략한다.

## HTML 제작

- 사용자 제공 내용과 외부 자료를 HTML에 넣을 때는 텍스트·속성 값을 각각 올바르게 이스케이프한다. 코드 예시와 다이어그램 정의를 실행 가능한 HTML이나 스크립트로 섞지 않는다.
- 제목과 본문, 표, 코드, 도식, 차트에 의미 있는 구조와 설명을 둔다. 차트는 원본 수치 표를 함께 제공하고, 도식에는 텍스트 설명을 붙인다.
- 순수 텍스트·표만 있으면 JavaScript를 추가하지 않는다. 도식·차트·수식·코드 하이라이트가 실제로 있을 때만 필요한 라이브러리를 고른다. CDN을 쓰는 파일은 **네트워크가 필요한 HTML**이라고 표시한다.
- 라이브러리 URL과 초기화 방식은 `references/cdn-libraries.md`의 공식 문서 링크를 확인한다. 다운로드가 막혀도 본문·표·코드는 읽을 수 있게 둔다.
- 기본 본문 크기, 색 대비, 키보드 탐색, 작은 화면과 인쇄 상태를 확인한다. 애니메이션은 학습 이해에 필요한 경우에만 쓰고 사용자의 동작 줄이기 설정을 존중한다.
- 파일을 실제로 저장한 뒤 열어 렌더링을 확인한다. 브라우저 접근이 없으면 소스 검사 결과와 화면 검증 미실행을 구분해 보고한다.

## 화면 검증

| 항목 | 확인 방법 |
|---|---|
| 본문 크기 | 브라우저 computed style, 본문 16px 이상 권장 |
| 글자 대비 | 실제 전경·배경 색의 WCAG 대비, 일반 텍스트 4.5:1 이상 |
| 잘림 | 긴 제목·표·코드·모바일 폭에서 스크롤과 오버플로 확인 |
| 그래픽 대안 | 도식 설명, 차트 데이터 표, 이미지 대체 텍스트 |
| 외부 의존 | CDN 차단 상태에서 남는 내용과 깨지는 기능 확인 |

측정하지 못한 항목을 PASS로 쓰지 않는다. 출처가 검증되지 않은 설명은 자료 안에 확인 필요로 표시한다.

## 산출물

사용자가 지정한 경로의 `.html` 파일과 실제 열람 결과, 사용한 외부 라이브러리, 출처, 남은 검증을 보고한다. 학습 프로젝트에 넣는 작업은 `moai-tutor:education-learning-project`, 일반 업무 보고서는 `moai-officer:doc-html-report`를 사용한다.