HTML PPT · 코스 모듈은(는) 무엇을 하나요?
html-ppt 마스터 스킬의 집중 진입점으로, 사용자를 course-module 풀덱 템플릿으로 바로 안내합니다.
이 카드가 선택되었을 때
예시 갤러리는 "이 프롬프트 사용"을 위의 example_prompt에 연결합니다. 해당 프롬프트를 수락하면, 사용자가 course-module의 시각적 정체성을 정확히 원할 때 이 카드가 적합합니다 (스크린샷과 근거는 상위 풀덱 카탈로그 참조).
덱 제작 방법
- 먼저 마스터 스킬을 읽으십시오. 모든 제작 규칙은
design-templates/html-ppt/SKILL.md에 있습니다 — 콘텐츠/청중 체크리스트, 토큰 규칙, 레이아웃 재사용, 발표자 모드, 키보드 런타임, "슬라이드에 발표자 전용 텍스트를 절대 넣지 말 것" 규칙. - 일치하는 템플릿 폴더에서 시작하십시오:
design-templates/html-ppt/templates/full-decks/course-module/—index.html과style.css를 프로젝트로 복사하고.tpl-course-modulebody 클래스를 유지하십시오. - 템플릿과 함께 공유 런타임을 가져오십시오. 상위
index.html은../../../assets/...를 통해 공유 CSS/JS를 연결합니다. 이는design-templates/html-ppt/templates/full-decks/안에 3단계 깊이로 위치하기 때문입니다.index.html을 프로젝트로 복사하면 상위 상대 경로 URL이 더 이상 올바르게 작동하지 않으며,base.css,animations.css,runtime.js에서 404 오류가 발생합니다. 즉, 덱이 활성화되지 않고 슬라이드 내비게이션이 작동하지 않습니다. 프로젝트별로 다음 두 가지 방법 중 하나를 선택하십시오:- Recipe A — 복사 후 경로 재작성(권장):
design-templates/html-ppt/assets/fonts.css,design-templates/html-ppt/assets/base.css,design-templates/html-ppt/assets/animations/animations.css,design-templates/html-ppt/assets/runtime.js를 프로젝트 로컬assets/폴더(하위assets/animations/animations.css포함)로 복사한 다음,index.html의 네 개<link>/<script>태그를../../../assets/...에서 프로젝트 로컬 경로(assets/fonts.css,assets/base.css,assets/animations/animations.css,assets/runtime.js)로 다시 작성하십시오. - Recipe B — 인라인 포함: 동일한 네 파일의 내용을 읽고 각
<link rel="stylesheet" href="../../../assets/...">를<style>...</style>로,<script src="../../../assets/runtime.js">를<script>...</script>로 대체하십시오. 단일 자체 포함index.html이 생성됩니다. 어떤 방법을 사용하든, 상위../../../assets/...URL을 프로젝트 아티팩트에 그대로 전달하지 마십시오. 이 URL은 저장소 내에서만 작동합니다.
- Recipe A — 복사 후 경로 재작성(권장):
- 테마를 선택하십시오. 기본 토큰도 충분히 괜찮습니다. 다른 느낌을 원하면
design-templates/html-ppt/assets/themes/*.css에서 36개 테마 중 하나를<link id="theme-link">를 통해 교체하고T키로 전환할 수 있습니다. - 데모 콘텐츠를 교체하되, 클래스는 변경하지 마십시오.
.tpl-course-module범위 CSS는 템플릿에 포함된 구조적 클래스만 인식하므로 그대로 유지하십시오. - 발표자 노트는
<aside class="notes">또는<div class="notes">안에 작성하십시오. 슬라이드에 보이는 텍스트로 절대 넣지 마십시오.
저작자 표시
시각 시스템, 레이아웃, 테마 및 런타임 키보드 모델은 상위 MIT 라이선스 lewislulu/html-ppt-skill 저장소에서 제공됩니다. 라이선스 파일은 design-templates/html-ppt/LICENSE에 있으며, 재배포 시 그대로 유지하시기 바랍니다.