[javascript] Reveal.js 설치하기

27 Nov 2023

javascript

Reveal.js는 HTML 및 JavaScript로 작성된 오픈 소스 프레젠테이션 라이브러리입니다. 이 라이브러리를 사용하면 훌륭한 인터랙티브 프레젠테이션을 만들 수 있습니다. 이제 Reveal.js를 설치하는 방법에 대해 알아보겠습니다.

1. 프로젝트 폴더 생성 및 초기화

먼저, Reveal.js를 설치할 프로젝트 폴더를 생성합니다. 다음으로, 해당 폴더로 이동하여 다음 명령을 실행하여 프로젝트를 초기화합니다:

npm init -y

위 명령은 package.json 파일을 생성합니다.

2. Reveal.js 설치

다음으로, 아래 명령을 실행하여 Reveal.js를 설치합니다:

npm install reveal.js

위 명령은 node_modules 폴더를 생성하고, 이 폴더에 필요한 파일들을 다운로드합니다.

3. HTML 파일 작성

이제 Reveal.js를 사용하여 프레젠테이션을 작성할 HTML 파일을 생성합니다. 이 파일을 예를 들어 presentation.html로 저장합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Presentation</title>

  <link rel="stylesheet" href="node_modules/reveal.js/dist/reset.css">
  <link rel="stylesheet" href="node_modules/reveal.js/dist/reveal.css">
  <link rel="stylesheet" href="node_modules/reveal.js/dist/theme/default.css">

  <!-- 프레젠테이션 스타일링을 위해 이곳에 추가 CSS를 작성할 수도 있습니다 -->

</head>
<body>
  <div class="reveal">
    <div class="slides">
      <section>Slide 1</section>
      <section>Slide 2</section>
      <section>Slide 3</section>
      <!-- 추가 슬라이드를 이곳에 작성할 수도 있습니다 -->
    </div>
  </div>

  <script src="node_modules/reveal.js/dist/reveal.js"></script>
  <script>
    Reveal.initialize();
  </script>
</body>
</html>

위의 예제는 기본적인 HTML 구조임과 함께 Reveal.js를 사용한 프레젠테이션의 예제입니다.

4. 프레젠테이션 실행

이제 웹 브라우저에서 presentation.html 파일을 열어 프레젠테이션을 실행할 수 있습니다. 실행하면 슬라이드간에 전환할 수 있는 프레젠테이션이 표시됩니다.

축하합니다! 이제 Reveal.js를 사용하여 멋진 프레젠테이션을 만들 준비가 되었습니다. 자세한 내용은 Reveal.js 공식 문서를 참조하세요.