Reveal.js는 HTML 기반의 프레젠테이션 라이브러리로, 실시간으로 슬라이드를 생성하고 제어할 수 있습니다. 이러한 라이브러리를 사용하면 다양한 효과와 기능을 가진 유연한 프레젠테이션을 만들 수 있습니다. 이번에는 Reveal.js 라이브러리와 플러그인의 관리에 대해서 알아보겠습니다.
Reveal.js 라이브러리 설치 및 설정하기
Reveal.js를 사용하기 위해서는 먼저 라이브러리를 설치해야 합니다. npm을 사용하여 Reveal.js를 설치할 수 있습니다.
npm install reveal.js
설치가 완료되면, HTML 문서에 Reveal.js 라이브러리를 로드해야 합니다.
<link rel="stylesheet" href="reveal.css">
<script src="reveal.js"></script>
또한, Reveal.js의 초기화를 위해 다음과 같은 스크립트를 추가해야 합니다.
<script>
Reveal.initialize();
</script>
플러그인 추가하기
Reveal.js는 다양한 플러그인을 제공하며, 이를 사용하여 프레젠테이션에 추가적인 기능을 확장할 수 있습니다. 플러그인은 npm을 통해 설치한 후, 스크립트 태그로 로드하면 됩니다. 예를 들어, 다음은 Reveal.js의 ‘Markdown’ 플러그인을 추가하는 방법입니다.
npm install reveal.js-markdown
<script src="reveal.js"></script>
<script src="plugin/markdown/marked.js"></script>
<script src="plugin/markdown/markdown.js"></script>
위의 예제에서는 ‘reveal.js-markdown’ 플러그인을 설치하고, ‘markdown’ 디렉토리의 스크립트를 로드하는 방식으로 플러그인을 사용하고 있습니다.
플러그인 설정하기
플러그인을 추가한 후에는 해당 플러그인을 사용하기 위해 설정을 해주어야 합니다. Reveal.js의 설정은 Reveal.initialize() 함수의 인자로 전달됩니다.
<script>
Reveal.initialize({
plugins: [RevealMarkdown]
});
</script>
위의 예제에서는 “RevealMarkdown” 플러그인을 활성화 하기 위해 plugins 속성을 설정하고 있습니다.
플러그인 사용하기
플러그인을 추가하고 설정한 후에는 해당 플러그인의 기능을 사용할 수 있습니다. ‘Markdown’ 플러그인을 예로 들면, 다음과 같은 방식으로 Markdown 포맷으로 슬라이드를 작성할 수 있습니다.
<section data-markdown>
<textarea data-template>
# Hello, Reveal.js!
This is a *demo* presentation using **Markdown**.
</textarea>
</section>
위의 예제에서는 data-markdown 속성을 사용하여 Markdown 형식의 슬라이드를 작성한 후, textarea 태그 안에 Markdown 내용을 작성하고 있습니다.
결론
Reveal.js 라이브러리와 플러그인을 사용하면 강력한 프레젠테이션을 개발할 수 있습니다. 라이브러리의 설치 및 설정, 플러그인의 추가 및 설정, 그리고 플러그인의 사용 방법에 대해 알아보았습니다. 다양한 플러그인을 조합하여 원하는 프레젠테이션을 만들어보세요!
참고 자료: