[javascript] Reveal.js 프레젠테이션 브라우저에서 실행하기

27 Nov 2023

javascript

Reveal.js는 HTML과 CSS를 사용하여 멋진 프레젠테이션을 만들 수 있는 JavaScript 라이브러리입니다. 이 라이브러리를 이용하면 브라우저에서 프레젠테이션을 실행할 수 있습니다. 이 글에서는 Reveal.js 프레젠테이션을 브라우저에서 실행하는 방법을 소개하겠습니다.

단계 1: Reveal.js 다운로드 및 설정

Reveal.js 웹 사이트에 접속하여 최신 버전의 Reveal.js를 다운로드합니다.
압축을 해제한 후, 다운로드한 폴더 안에 index.html 파일을 생성합니다.
index.html 파일을 텍스트 편집기로 열고, 아래와 같이 HTML 구조를 작성합니다:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">

    <title>My Presentation</title>

    <link rel="stylesheet" href="reveal.css">
    <link rel="stylesheet" href="theme.css">
</head>
<body>
    <div class="reveal">
        <div class="slides">
            <!-- 슬라이드 내용 작성 -->
        </div>
    </div>

    <script src="reveal.js"></script>

    <script>
        // Reveal.js 초기화 코드 작성
    </script>
</body>
</html>

<link> 태그의 href 속성에는 reveal.css와 theme.css 파일의 경로를, <script> 태그의 src 속성에는 reveal.js 파일의 경로를 입력합니다.

단계 2: 프레젠테이션 내용 작성

index.html 파일의 <div class="slides"> 요소 내부에 슬라이드를 작성합니다.
각 슬라이드는 <section> 요소로 감싸는 것이 좋습니다. 각 <section> 요소는 한 페이지의 컨텐츠를 나타냅니다.

<div class="slides">
    <section>
        <h1>Hello, Reveal.js!</h1>
    </section>

    <section>
        <h2>Creating Presentations Made Easy</h2>
        <p>Reveal.js is a powerful JavaScript library for creating stunning presentations.</p>
    </section>

    <!-- 추가 슬라이드 작성 -->
</div>

단계 3: 브라우저에서 실행

웹 브라우저를 열고 index.html 파일을 불러옵니다.
슬라이드를 전환하려면 키보드의 화살표 키를 사용하거나 스크롤을 이용합니다.
프레젠테이션을 전체화면으로 보려면 F 키를 누르세요.
추가로 제공되는 기능과 단축키는 공식 문서에서 확인할 수 있습니다.

이제 Reveal.js 프레젠테이션을 브라우저에서 실행할 준비가 되었습니다. 잘 따라오셨다면 멋진 프레젠테이션을 만들어볼 수 있을 것입니다!