[javascript] Reveal.js 자동 재생 설정하기
Reveal.js는 웹 기반의 프레젠테이션 도구로, HTML, CSS 및 JavaScript를 사용하여 슬라이드 쇼를 만들 수 있습니다. 이 도구를 사용하여 슬라이드를 자동으로 재생하도록 설정하는 방법에 대해 알아보겠습니다.
단계 1: Reveal.js 설치하기
먼저, Reveal.js를 설치해야 합니다. npm을 사용하여 간단하게 설치할 수 있습니다. 아래 명령을 사용하여 설치하세요:
npm install reveal.js
단계 2: HTML 파일 설정하기
HTML 파일에는 Reveal.js 슬라이드 쇼를 만들기 위한 기본적인 구조가 있어야 합니다. 아래 코드는 Reveal.js 템플릿을 작성하는 기본적인 예시입니다:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reveal.js Presentation</title>
<link rel="stylesheet" href="node_modules/reveal.js/dist/reveal.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<!-- 여기에 슬라이드 내용 작성 -->
</div>
</div>
<script src="node_modules/reveal.js/dist/reveal.js"></script>
<script>
// Reveal.js 설정 및 초기화
Reveal.initialize();
</script>
</body>
</html>
단계 3: 자동 재생 설정하기
Reveal.js는 슬라이드 쇼를 자동으로 재생할 수 있는 옵션을 제공합니다. 자동 재생을 설정하기 위해서는 슬라이드 요소에 data-autoplay 속성을 추가해야 합니다. 아래 예시를 참고하세요:
<div class="reveal">
<div class="slides">
<section data-autoplay="_duration_">
<h2>슬라이드 1</h2>
<!-- 슬라이드 내용 작성 -->
</section>
<section>
<h2>슬라이드 2</h2>
<!-- 슬라이드 내용 작성 -->
</section>
</div>
</div>
data-autoplay 속성 값으로는 슬라이드가 재생될 시간(밀리초 단위)을 입력해야 합니다. 예를 들어, 5000(밀리초)은 5초를 의미합니다. 위의 예시에서 _duration_ 자리에 원하는 시간을 입력해 주세요.
단계 4: 슬라이드 쇼 실행하기
HTML 파일을 웹 브라우저로 열어 슬라이드 쇼를 실행할 수 있습니다. Reveal.js는 설정된 자동 재생 시간에 맞게 슬라이드를 자동으로 전환합니다.
결론
Reveal.js를 사용하여 자동 재생되는 슬라이드 쇼를 만들 수 있습니다. 자동 재생을 설정하는 방법을 위의 단계들을 따라 해보세요. Reveal.js의 다양한 설정 옵션을 활용하여 멋진 프레젠테이션을 만들어보세요!