# HTML 슬라이드 엔진 레퍼런스 이 파일에는 슬라이드 덱의 뼈대(boilerplate) 전체가 담겨 있습니다. 신규 파일을 만들 때 아래 보일러플레이트를 복사한 뒤 `` 영역에 슬라이드를 채워 넣으세요. --- ## Technical Guide 보일러플레이트 ```html {{TITLE}}
⌨ 키보드 단축키
→ / PgDn
다음 슬라이드
← / PgUp
이전 슬라이드
Home
첫 슬라이드로
End
마지막 슬라이드로
T
목차 사이드바 토글
Esc
모달/사이드바 닫기
``` --- ## 핵심 동작 원리 ### 슬라이드 트랜지션 모든 슬라이드는 `position: absolute; inset: 0`으로 겹쳐 있고, `transform: translateX(±100%)`로 오프스크린에 숨겨집니다. `goToSlide()`는 `void el.offsetWidth`(reflow 강제)를 호출해 position 재설정 후 트랜지션을 시작하므로, 방향성 있는 슬라이드-인/아웃 애니메이션이 구현됩니다. ### 사이드바 Push `body.sb-open` 클래스가 토글되면 `#deck`, `#nav`, `#progress-bar`가 CSS `left: 300px`으로 밀려납니다. 사이드바 자체는 `translateX(-300px) → translateX(0)` 전환입니다. ### SLIDE_META vs DOM 순서 - JS 엔진은 `querySelectorAll('.slide')` 결과의 **배열 인덱스**를 사용 - `SLIDE_META[i].idx`가 그 배열 인덱스와 일치해야 사이드바 클릭이 올바른 슬라이드로 이동 - 슬라이드 div의 `data-idx` 속성은 **시각적 레퍼런스용**일 뿐, JS가 읽지 않음