[javascript] Reveal.js 테마 사용하기

27 Nov 2023

javascript

Reveal.js는 HTML과 JavaScript로 구현된 프레젠테이션 라이브러리입니다. 이 라이브러리를 사용하면 멋진 프레젠테이션을 만들 수 있습니다. 하지만 기본 테마만 사용한다면 프레젠테이션에 독특한 분위기를 주기 어려울 수 있습니다. 이번 글에서는 Reveal.js 라이브러리에서 제공하는 테마를 사용하는 방법을 소개합니다.

테마 다운로드하기

Reveal.js의 테마는 별도로 다운로드하여 사용해야 합니다. 테마 파일은 CSS와 이미지 파일로 구성되어 있습니다. 테마 파일을 다운로드하고 원하는 위치에 저장해주세요.

Reveal.js 테마 다운로드 링크: https://github.com/hakimel/reveal.js/tree/master/css/theme

테마 적용하기

다운로드한 테마 파일을 Reveal.js 프레젠테이션에 적용하기 위해서는 먼저 HTML 파일을 열어야 합니다. HTML 파일의 <head> 태그 안에 다음의 코드를 추가해주세요.

<link rel="stylesheet" href="테마파일.css">

위 코드에서 테마파일.css는 다운로드한 테마 파일의 경로를 넣어주시면 됩니다. 경로는 원하는 위치에 따라 적절히 수정해주세요.

테마 적용 확인하기

테마 파일을 적용한 후, Reveal.js 프레젠테이션을 열어서 테마가 적용되었는지 확인해보세요. 프레젠테이션의 배경색이 변경되거나 폰트 스타일이 바뀐다면 테마가 정상적으로 적용된 것입니다.

추가로 테마 파일에는 특정 클래스들이 포함되어 있을 수 있습니다. 이 클래스들을 사용하여 슬라이드에 추가적인 스타일을 적용할 수도 있습니다. 테마 파일의 CSS 코드를 살펴보고 필요한 클래스를 사용해보세요.

마무리

Reveal.js의 테마 기능을 사용하면 프레젠테이션에 다양한 분위기를 더할 수 있습니다. 테마 파일을 다운로드하여 프레젠테이션에 적용하는 방법을 익혀보세요. 원하는 테마를 적용하면서 멋진 프레젠테이션을 만들어보세요.