Quarto Revealjs Demo

모든 기능을 담은 종합 프레젠테이션 예시

JungYeon Lee

2026-03-26

기본 기능

기본적인 슬라이드 작성법을 소개합니다

슬라이드 생성 방법

슬라이드는 세 가지 방법으로 생성할 수 있습니다:

# 섹션 타이틀       <!-- Level 1 = 섹션 타이틀 슬라이드 -->
## 슬라이드 타이틀   <!-- Level 2 = 일반 슬라이드 -->
---                  <!-- 수평선 = 제목 없는 슬라이드 -->

텍스트 서식

일반 텍스트에 다양한 서식을 적용할 수 있습니다:

  • 굵게 / 기울임 / 취소선
  • 링크
  • 인라인 코드

인용문(blockquote)도 사용 가능합니다.

Pause (점진적 공개)

첫 번째 내용이 먼저 보입니다.

점 세 개(. . .)를 사용하면 클릭 후 나타납니다.

어떤 콘텐츠든 순차적으로 공개할 수 있습니다.

인크리멘탈 리스트 & Fragments

인크리멘탈 리스트

  1. 첫 번째 항목이 먼저 나타납니다
  2. 그 다음 두 번째 항목
  3. 마지막으로 세 번째 항목

Non-Incremental 리스트

인크리멘탈 모드에서도 한 번에 보여줄 수 있습니다:

  • 모든 항목이
  • 한 번에
  • 표시됩니다

Fragment 종류

fade-in: 페이드 인

fade-up: 아래에서 위로

fade-left: 오른쪽에서 왼쪽으로

fade-in-then-semi-out: 나타난 후 반투명

strike: 취소선

highlight-red: 빨간색 하이라이트

highlight-blue: 파란색 하이라이트

Fragment 순서 지정

세 번째로 나타남 (index=3)

첫 번째로 나타남 (index=1)

두 번째로 나타남 (index=2)

중첩 Fragment

Fade in → 빨간 하이라이트 → 반투명

코드

코드 블록 — 구문 하이라이팅

import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()

Learn more: Quarto Syntax Highlighting

코드 라인 하이라이팅

줄 번호를 |로 구분하면 단계별로 강조됩니다:

import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
  • code-line-numbers="1-2|4-5|7-10" → 3단계 애니메이션

다양한 언어 코드

JavaScript

const greet = (name) => {
  return `Hello, ${name}!`;
};
console.log(greet("Quarto"));

Rust

fn main() {
    let name = "Quarto";
    println!("Hello, {}!", name);
}

레이아웃

2단 레이아웃 (Columns)

왼쪽 열

  • 항목 A
  • 항목 B
  • 항목 C

텍스트와 리스트를 배치할 수 있습니다.

오른쪽 열

이름 값
Alpha 0.1
Beta 0.5
Gamma 0.9

3단 레이아웃

Column 1

  • 항목 A
  • 항목 B

Column 2

  • 항목 C
  • 항목 D

Column 3

  • 항목 E
  • 항목 F

r-fit-text

큰 텍스트

슬라이드에 맞게 텍스트 크기가 자동 조절됩니다.

r-stack (요소 겹치기)

Tabsets

import matplotlib.pyplot as plt
import numpy as np

x = np.linspace(0, 10, 100)
plt.plot(x, np.sin(x))
plt.title("Sine Wave")
plt.show()
x sin(x)
0 0.000
π/2 1.000
π 0.000
3π/2 -1.000
2π 0.000

사인 함수는 주기가 \(2\pi\)인 삼각함수입니다. 진폭은 1이며, 원점을 지나는 기함수입니다.

수식

LaTeX 수식

인라인 수식: \(E = mc^2\)

블록 수식:

\[ \nabla \cdot \mathbf{E} = \frac{\rho}{\epsilon_0} \]

\[ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} \]

수식 정렬

\[ \begin{aligned} \frac{\partial f}{\partial x} &= 2x + y \\ \frac{\partial f}{\partial y} &= x + 2y \\ \nabla f &= \left(\frac{\partial f}{\partial x}, \frac{\partial f}{\partial y}\right) \end{aligned} \]

수식 + Columns 레이아웃

맥스웰 방정식

\[ \begin{gather} \nabla \cdot \mathbf{E} = \frac{\rho}{\epsilon_0} \\ \nabla \cdot \mathbf{B} = 0 \\ \nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} = \mu_0 \mathbf{J} + \mu_0 \epsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{gather} \]

설명

  • 가우스 법칙 (전기)
  • 가우스 법칙 (자기)
  • 패러데이 법칙
  • 앙페르-맥스웰 법칙

1

슬라이드 배경

색상 배경

background-color 속성으로 배경색을 지정합니다.

## 슬라이드 제목 {background-color="#e74c3c"}

그라디언트 배경

## 제목 {background-gradient="linear-gradient(to right, #4facfe, #00f2fe)"}

방사형 그라디언트

## 제목 {background-gradient="radial-gradient(#283b95, #17b2c3)"}

iframe 배경

Auto-Animate

Animating content

Animating content

Auto-Animate 박스

Auto-Animate 박스

코드 Auto-Animate

# Step 1
data = [1, 2, 3]

코드 Auto-Animate

# Step 1
data = [1, 2, 3]

# Step 2
result = sum(data)
print(f"Sum: {result}")

트랜지션

Slide 트랜지션

이 슬라이드는 convex 트랜지션을 사용합니다.

Fade 트랜지션

이 슬라이드는 fade 트랜지션을 사용합니다.

Zoom 트랜지션

이 슬라이드는 zoom 트랜지션을 사용합니다.

Concave 트랜지션

이 슬라이드는 concave 트랜지션을 사용합니다.

혼합 트랜지션

진입과 퇴장에 다른 트랜지션을 적용할 수 있습니다.

## 제목 {transition="fade-in slide-out"}

콘텐츠 오버플로

Smaller 텍스트

.smaller 클래스를 사용하면 슬라이드 전체의 글자 크기가 작아집니다.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")

Scrollable 슬라이드

.scrollable 클래스를 사용하면 내용이 넘칠 때 스크롤할 수 있습니다.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16
  • Item 17
  • Item 18
  • Item 19
  • Item 20

발표 도구

발표자 노트

S 키를 눌러 발표자 뷰를 확인하세요.

슬라이드 내용과 함께 노트가 별도 창에 표시됩니다.

Chalkboard (칠판)

Reveal.js chalkboard 플러그인이 활성화되어 있습니다:

키 기능
B 칠판 토글
C 노트 캔버스 토글
D 드로잉 다운로드
X / Y 색상 변경
BACKSPACE 초기화
DEL 슬라이드 지우기

Preview Links

preview-links: auto가 설정되어 있어 링크 클릭 시 iframe으로 미리보기됩니다.

커스텀 Footer

슬라이드별로 footer를 변경할 수 있습니다.

## 제목 {footer="커스텀 footer 텍스트"}

Footer 숨기기

이 슬라이드에는 footer가 표시되지 않습니다.

## 제목 {footer=false}

키보드 단축키

키보드 단축키 총정리

키 기능
←→↑↓ / Space / N / P 네비게이션
Alt + ←→ Fragment 건너뛰고 이동
Shift + ←→ 처음/마지막 슬라이드
F 전체화면
O 오버뷰 모드
M 네비게이션 메뉴
S 발표자 뷰
E PDF 인쇄 뷰
B 칠판 토글
C 캔버스 토글
R 스크롤 뷰 토글
Alt + 클릭 줌 인

슬라이드 숨기기

visibility="hidden" 또는 visibility="uncounted" 속성을 사용합니다.

## 숨겨진 슬라이드 {visibility="hidden"}
## 카운트 제외 슬라이드 {visibility="uncounted"}

YAML 설정 총정리

format:
  revealjs:
    theme: moon                    # 12개 내장 테마
    slide-number: c/t              # 슬라이드 번호 형식
    transition: slide              # none, fade, slide, convex, concave, zoom
    background-transition: fade    # 배경 전환 효과
    transition-speed: default      # default, fast, slow
    chalkboard: true               # 칠판 플러그인
    preview-links: auto            # 링크 미리보기
    controls: true                 # 네비게이션 화살표
    progress: true                 # 진행바
    history: true                  # 브라우저 히스토리
    navigation-mode: linear        # vertical, grid, linear
    smaller: false                 # 전역 작은 텍스트
    scrollable: false              # 전역 스크롤
    slide-tone: false              # 접근성 사운드
    auto-slide: 5000               # 자동 넘김 (ms)
    loop: true                     # 반복 재생
    width: 1050                    # 슬라이드 너비
    height: 700                    # 슬라이드 높이
    margin: 0.1                    # 여백 비율
    embed-resources: true          # 독립 HTML 파일
    menu:
      side: left                   # 메뉴 위치
      width: wide                  # 메뉴 너비

감사합니다!

Q & A

S를 눌러 발표자 노트를 확인하세요