html-slideshow
하나의 자체 포함, 최소화된 .html 파일로 번들링되는 반응형 슬라이드쇼입니다.
HTML로 슬라이드를 작성하면, 엔진(assets/base.css + base.js)과 Bun 빌드가 최종 파일을 생성합니다. Bun이 필요합니다.
워크플로우
- 런타임 확인 —
bun --version(없으면 bun.sh에서 설치; 1.4.0에서 확인됨). - 템플릿 복사 —
assets/base.html,assets/base.css,assets/base.js를 사용자 작업공간의 데크 폴더에 복사합니다 (나란히)..html파일은 자유롭게 이름을 변경할 수 있습니다(예:my-deck.html);base.css와base.js는.html에서 상대 경로로 참조되므로, 이름을 변경하면 해당 참조를 업데이트해야 합니다. - 제목 설정 —
.html에서<title>을 수정합니다. 데크는 기본적으로 어두운 테마로 렌더링되며, 인쇄 시 자동으로 강제 밝은 팔레트로 전환됩니다. - 슬라이드 추가 —
<main id="deck">안에 슬라이드당 하나의<section class="slide">를 추가합니다:<section class="slide"> <h2>분기별 실적</h2> <ul><li>매출 24% 증가</li></ul> </section> - 사용자 CSS/JS — 링크된 파일만 사용, 절대 인라인 금지.
.html에<style>또는<script>블록을 추가하지 마십시오 —.html은 페이지 골격과 슬라이드 내용만 보유하며, 빌드가 링크된 파일을 최종 자체 포함 파일에 인라인 처리하여 소스를 편집 가능하게 하고 엔진을 단일 소스로 유지합니다. 사용자 코드를 위한 두 가지 공식 위치:base.css/base.js를 직접 편집하거나, 데크별 스타일링/동작을 엔진과 분리하려면<link rel="stylesheet" href="extra.css">/<script src="extra.js" defer></script>를 추가합니다(빌드가 인라인 처리하며, 가능하면base.*는 수정하지 않은 상태로 유지 —references/bundling-assets.md참조). (references/slide-patterns.md의 레시피는 이를 따릅니다.) - 컨테이너 단위로 크기 조정 — 절대
px사용 금지. 각 슬라이드는 CSS 쿼리 컨테이너이므로cqw/cqh/cqmin과clamp()를 사용하면 콘텐츠가 모든 화면에 맞게 조정됩니다.px/pt는 반응형을 깨뜨리므로 사용하지 마십시오(외부 프레임은svh를 사용합니다). 이는 에이전트가 자주 실수하는 규칙입니다. 전체 가이드는references/responsive-units.md에 있습니다. 세로 뷰포트는 자동으로 처리됩니다: 슬라이드는 가로 캔버스에서 렌더링된 후 맞게 축소되므로, 넓은 테이블/그리드가 휴대폰 화면을 넘치지 않습니다(:root의--slide-w/--slide-h, 기본값16/9). - 빌드 — 스킬의 빌드 스크립트를 실행합니다:
bun scripts/build.js my-deck.html(bun build --compile --target=browser --minify my-deck.html --outdir dist를 래핑하며, Bun이 지원하는 모든 OS에서 실행됨) →dist/my-deck.html: CSS, JS 및 참조된 모든 에셋이 인라인된 단일 최소화 자체 포함 파일입니다. 이 파일을 배포합니다. - 빌드된 파일 확인 — 브라우저 도구에서
dist/my-deck.html에file://URL로 접근합니다. 통과 기준: 컨트롤이 렌더링됨; 오른쪽 화살표 키가 카운터를 "2 / N"으로 증가시키고location.hash를#2로 설정함; 약 400×800 뷰포트에서도 하나의 완전히 보이는 레터박스 슬라이드가 표시됨;O키가 개요를 토글함; 인쇄 매체 에뮬레이션이 페이지당 하나의 슬라이드를 표시함. 신호는references/using-the-deck.md에 문서화되어 있습니다. 브라우저 도구를 사용할 수 없는 경우 시각적 확인을 건너뛰었다고 말합니다. - 정리 — 빌드 출력 외에는 생성된 것이 없습니다.
my-deck.html,base.css,base.js(편집 가능한 소스)를dist/my-deck.html(배포하는 파일) 옆에 유지합니다. 사용자가 단일 파일만 원하는 경우,dist/my-deck.html을 데크가 필요한 위치로 이동하고 데크 폴더를 소스로 유지합니다.
참조 색인
필요할 때 로드 — 한 번에 모두 로드하지 않음:
references/using-the-deck.md— 설정, 슬라이드 계약, 전체 탐색, 딥 링크(#5는 5번 슬라이드를 엽니다;#some-id는 해당 ID를 가진 슬라이드를 엽니다; 인용 → 출처에 사용), 빌드 및 인쇄.references/slide-patterns.md— 미리 만들어진 슬라이드 레시피 + 작성 가이드.references/responsive-units.md—px없는 유동적 크기 조정 가이드.references/bundling-assets.md— 인라인 SVG / 데이터 URI 에셋(빌드는 상대 참조도 인라인 처리함).references/engine-anatomy.md— 엔진(base.html/base.css/base.js) 변경을 위한 맵.examples/quickstart.html— 채워진 데크(소스; 빌드하여 자체 포함 파일 생성).examples/README.md— 예제 데크의 두 가지 형태(읽을 수 있는 소스 vs 빌드된 독립형) 및 편집 후 독립형을 재빌드하는 방법.
사용 시기
출력물을 한 번에 한 화면씩 표시해야 할 때: 발표, 수업, 데모, 상태 업데이트 또는 피치. 스크롤이 필요한 산문이나 문서에는 적합하지 않습니다.