Colin's Blog
[javascript] Reveal.js 슬라이드 만들기

개요

Reveal.js는 JavaScript로 작성된 프레젠테이션 프레임워크로, 웹 기술을 활용하여 멋진 슬라이드를 만들 수 있습니다.

설치

Reveal.js를 사용하기 위해서는 다음과 같은 단계를 따라야 합니다:

  1. Reveal.js 다운로드: https://github.com/hakimel/reveal.js 에서 최신 버전을 다운로드합니다.

  2. 디렉토리 구조: 다운로드한 파일을 원하는 디렉토리에 압축을 풉니다. 압축이 풀린 디렉토리 안에 index.html 파일이 있어야 합니다.

  3. 슬라이드 작성: index.html 파일을 텍스트 에디터로 열어 슬라이드를 작성합니다. Reveal.js는 HTML과 Markdown 문법을 지원합니다.

슬라이드 작성 방법

Reveal.js를 사용하여 슬라이드를 작성하는 방법은 다양합니다. 다음은 기본적인 슬라이드 작성 방법입니다.

섹션 정의

슬라이드를 그룹화하기 위해 <section> 태그를 사용합니다. 다음은 섹션을 정의하는 예입니다:

<section>
    <h2>첫 번째 섹션</h2>
    <p>첫 번째 섹션의 내용입니다.</p>
</section>

프레젠테이션 모드

Reveal.js는 다양한 프레젠테이션 모드를 제공합니다. 좌/우 방향키 또는 스와이프 제스처로 슬라이드를 전환할 수 있습니다.

프레젠테이션 모드를 변경하려면 index.html 파일에서 data-transition 속성을 수정하면 됩니다. 예를 들어 Cube 모드로 변경하고 싶다면 다음과 같이 수정합니다:

<body data-transition="cube">

Markdown 사용

Reveal.js는 Markdown 문법을 지원하여 간편하게 슬라이드를 작성할 수 있습니다. Markdown 문법을 작성한 후 해당 섹션을 <section data-markdown> 태그로 감싸야 합니다. 다음은 Markdown을 사용한 슬라이드 작성 예입니다:

<section data-markdown>
    <script type="text/template">
        ## 두 번째 섹션
        
        - 첫 번째 항목
        - 두 번째 항목
        - 세 번째 항목
    </script>
</section>

위 예제에서는 <script type="text/template"> 태그 안에 Markdown 문법을 작성합니다.

프래젠테이션 실행

슬라이드를 실행하려면 index.html 파일을 웹 브라우저로 엽니다. 슬라이드는 전체 화면으로 표시되며, 방향키 또는 스와이프 제스처로 전환할 수 있습니다.

추가 기능

Reveal.js에는 다양한 추가 기능을 활용할 수 있습니다. 몇 가지 기능을 소개합니다:

더 자세한 기능 및 사용 방법은 Reveal.js 공식 문서를 참고하면 됩니다.

마무리

이렇게 Reveal.js를 사용하여 멋진 슬라이드를 만들어보았습니다. 설치 방법과 슬라이드 작성 방법을 익힌 후 다양한 기능을 활용하면 더욱 풍부한 프레젠테이션을 생성할 수 있습니다.

더 자세한 내용은 Reveal.js 공식 문서를 참고하시기 바랍니다.

참고 문서:

© 2018 Colin. All rights reserved.