[javascript] Reveal.js 플러그인 추가하기

Reveal.js는 HTML 기반의 프레젠테이션 프레임워크로서, 많은 유용한 플러그인을 제공합니다. 이 플러그인들은 Reveal.js 프레젠테이션에 다양한 기능과 효과를 추가할 수 있습니다.

이 글에서는 Reveal.js에 플러그인을 추가하는 방법을 알아보겠습니다.

1. 플러그인 다운로드

먼저, 원하는 플러그인을 다운로드해야 합니다. Reveal.js 공식 홈페이지 (https://revealjs.com) 에서 다운로드 링크를 찾을 수 있습니다.

2. 플러그인 추가하기

다운로드한 플러그인 파일을 Reveal.js 프로젝트의 plugin 디렉토리에 추가합니다. 보통 plugin 디렉토리는 Reveal.js 프로젝트 폴더의 루트 디렉토리에 있습니다.

3. 플러그인 설정하기

추가한 플러그인을 사용하려면 Reveal.js 설정 파일에서 해당 플러그인을 활성화해야 합니다. 이를 위해서는 index.html 파일을 수정해야 합니다.

<script src="js/reveal.js"></script>
<script>
    Reveal.initialize({
        // 기본 설정
        // ...

        // 플러그인 설정
        plugins: [
            // 플러그인 추가
            { src: 'plugin/plugin-name/plugin-name.js', /* optional options */ }
        ]
    });
</script>

위 코드에서 plugin-name을 추가한 플러그인의 이름으로 대체해야 합니다.

4. 플러그인 사용하기

추가하고 설정한 플러그인을 사용하기 위해, Reveal.js 프레젠테이션에 플러그인을 적용하는 방법을 알아야 합니다. 일반적으로 플러그인은 마크다운 문법이나 HTML 태그를 사용하여 적용됩니다.

마크다운 문법을 사용하는 경우:

<!-- .slide: data-plugin="plugin-name" -->

HTML 태그를 사용하는 경우:

<div class="slide" data-plugin="plugin-name">
    <!-- 슬라이드 내용 -->
</div>

위 코드에서 plugin-name을 추가한 플러그인의 이름으로 대체해야 합니다.

결론

Reveal.js에 플러그인을 추가하는 방법을 알아봤습니다. 플러그인을 다운로드하고 추가한 후 설정 파일에서 활성화하고, 마크다운 문법이나 HTML 태그를 사용하여 플러그인을 적용할 수 있습니다. 이를 통해 Reveal.js 프레젠테이션에 다양한 기능과 효과를 추가할 수 있습니다.