Reveal.js는 HTML과 JavaScript로 작성된 오픈 소스 프레젠테이션 라이브러리입니다. 이 글에서는 Reveal.js의 기본 문법과 명령어에 대해 설명하겠습니다.

1. 슬라이드 구조

슬라이드는 HTML로 작성되며, 다음과 같은 기본 구조를 갖습니다:

<section>
    <h1>제목</h1>
    <p>내용</p>
</section>

<section> 태그로 슬라이드를 구분하고, 제목과 내용 등의 HTML 요소를 사용하여 슬라이드 내용을 작성합니다.

2. 배경 설정

배경을 설정할 때는 data-background 속성을 사용합니다. 다음은 배경을 이미지로 설정하는 예시입니다:

<section data-background="이미지 URL">
    <h1>배경 이미지</h1>
</section>

3. 애니메이션 효과

Reveal.js는 다양한 애니메이션 효과를 제공합니다. 애니메이션을 적용하려면 data-transition 속성을 사용합니다. 예를 들어 fade 애니메이션을 적용하려면 다음과 같이 작성합니다:

<section data-transition="fade">
    <h1>페이드 애니메이션</h1>
</section>

4. 명령어

Reveal.js는 다양한 명령어를 제공하여 프레젠테이션을 제어할 수 있습니다. 일부 주요 명령어는 다음과 같습니다:

• Left Arrow 또는 H: 이전 슬라이드로 이동
• Right Arrow 또는 L 또는 Space: 다음 슬라이드로 이동
• F: 전체 화면 토글
• Esc: 전체 화면 모드 해제

이 외에도 다양한 명령어가 있으며, Reveal.js 문서에서 확인할 수 있습니다.

5. 마무리

이상으로 Reveal.js의 기본 문법과 명령어에 대해 알아보았습니다. Reveal.js를 사용하면 멋진 프레젠테이션을 손쉽게 구현할 수 있습니다. 자세한 내용은 공식 문서를 참고해주세요.