고급 Reveal

제목 슬라이드

메인 제목 슬라이드는 프레젠테이션의 첫 슬라이드이며, 콘텐츠는 다양한 문서 옵션(제목, 부제, 날짜, 작성자, 소속 등)을 바탕으로 생성됩니다.

사용자 정의 배경

제목 슬라이드에 사용자 정의 배경을 제공하려면 다음을 수행하세요:

  1. title-slide-attributes 키로 배경 옵션을 제공합니다.
  2. 이 키 안에서 지원되는 슬라이드 배경 옵션을 지정하되, 앞에 data-를 붙입니다.

예:

---
title: My Slide Show
title-slide-attributes:
  data-background-image: /path/to/title_image.png
  data-background-size: contain
  data-background-opacity: "0.5"
---

사용자 정의 템플릿

기본 제목 슬라이드를 사용자 정의 템플릿으로 완전히 대체할 수 있습니다. 이를 위해 title-slide.html 템플릿 부분을 지정하세요. 예:

title: My Slide Show
format:
  revealjs:
    template-partials:
      - title-slide.html

Quarto는 작성자와 소속 처리를 개선한 제목 슬라이드를 기본 지원합니다. author와 institute와의 하위 호환은 유지하지만, 이제는 표준 작성자 메타데이터를 사용하길 권장합니다. title-slide.html용 사용자 정의 partial을 제공하려면 이 고급 제목 슬라이드 템플릿의 소스 코드를 시작점으로 사용할 수 있습니다. 필요에 맞게 템플릿을 사용자 지정한 뒤 프레젠테이션과 함께 title-slide.html로 저장하세요.

Pandoc의 기본 제목 슬라이드를 사용하고 싶다면 YAML에서 title-slide-style: pandoc을 지정해 선택할 수 있습니다. 이때는 더 단순한 제목 슬라이드 템플릿 partial을 사용합니다. 다만 이 단순한 partial은 작성자 및 소속에 대한 개선된 처리를 활용하지 않으므로, 사용자 정의 제목 슬라이드의 시작점으로는 고급 템플릿을 권장합니다.

가운데 정렬

기본적으로 제목 슬라이드는 가운데 정렬되고, 모든 슬라이드는 상단 정렬입니다(즉 center: false). center-title-slide 옵션을 설정하면 제목 슬라이드 가운데 정렬을 방지할 수 있습니다:

title: My Slide Show
format:
  revealjs:
    center-title-slide: false

center: true가 설정되면 center-title-slide는 무시됩니다. 현재 콘텐츠 슬라이드는 가운데 정렬하고 제목 슬라이드는 상단 정렬하는 방법은 없습니다. 콘텐츠 슬라이드 가운데 정렬은 Section 6.3 를 참고하세요.

슬라이드 전환

Reveal은 슬라이드 전환과 배경 전환 모두에 대해 다양한 애니메이션 전환 효과를 지원합니다. 기본값은 전환 없음이며, 아래 옵션으로 전역 또는 슬라이드별로 활성화할 수 있습니다.

사용 가능한 전환 유형은 다음과 같습니다:

전환 설명
none 전환 없음(즉시 전환)
fade 교차 페이드
slide 수평 슬라이드
convex 볼록한 각도로 슬라이드
concave 오목한 각도로 슬라이드
zoom 들어오는 슬라이드를 화면 중앙에서 커지도록 스케일.

슬라이드와 배경 모두의 전역 전환 스타일은 다음과 같이 설정합니다:

---
title: "Presentation"
format:
  revealjs:
    transition: slide
    background-transition: fade
---

transition-speed를 default, fast, slow로 지정할 수도 있습니다:

---
title: "Presentation"
format:
  revealjs:
    transition: slide
    transition-speed: fast
---

개별 슬라이드에 대해 transition 및/또는 transition-speed를 지정할 수도 있습니다:

## Slide Title {transition="fade" transition-speed="fast"}

예를 들어 들어올 때와 나갈 때의 전환을 별도로 지정할 수도 있습니다:

## Slide Title {transition="fade-in slide-out"}

슬라이드 표시 여부

슬라이드 제목에 visibility="hidden" 속성을 추가하면 슬라이드를 숨길 수 있습니다. 예:

## Slide Title {visibility="hidden"}

번호 제외 슬라이드

프레젠테이션 준비 시 시간이 될 수도 있고 안 될 수도 있는 선택적 슬라이드를 마련해 두는 것이 유용할 때가 있습니다. 이는 프레젠테이션 끝에 슬라이드를 몇 개 추가하면 되지만, 그러면 Reveal 진행 바와 슬라이드 번호가 추가 슬라이드가 있음을 암시하게 됩니다.

번호 시스템에서 이러한 슬라이드를 “숨기려면” visibility="uncounted"를 사용하세요. 예:

## Slide 1

## Slide 2

## Slide 3 {visibility="uncounted"}

프레젠테이션 크기

모든 프레젠테이션에는 “기본” 크기, 즉 작성 시의 해상도가 있습니다. 기본 “기본” 크기는 1050 x 700이며, 대부분의 노트북 화면비에 최대한 맞추기 위해 사용됩니다.

Reveal은 기본 크기를 기준으로 프레젠테이션을 균일하게 스케일링하여, 콘텐츠의 화면비나 레이아웃을 변경하지 않고 어떤 디스플레이나 뷰포트에도 맞도록 합니다.

다음 옵션으로 슬라이드 크기, 콘텐츠 주변 여백, 콘텐츠 스케일링 한계를 설정할 수 있습니다:

옵션 설명
width 기본 너비(기본값 1050)
height 기본 높이(기본값 700)
margin 콘텐츠 주변에 비워둘 디스플레이 크기 비율(기본값 0.1)
min-scale 콘텐츠에 적용할 수 있는 최소 스케일(기본값 0.2)
max-scale 콘텐츠에 적용할 수 있는 최대 스케일(기본값 2.0)

절대 위치

absolute 클래스는 요소를 슬라이드의 임의 위치에 배치할 수 있게 해줍니다. 이 요소는 CSS position: absolute를 가지며 슬라이드의 top, left, bottom, right 기준으로 배치할 수 있습니다.

예를 들어 다음은 세 이미지에 .absolute 클래스를 추가하고 슬라이드에서 각각 다른 위치를 지정한 것입니다(크기를 제어하기 위해 width, height도 사용함에 주의):

![](image1.png){.absolute top=200 left=0 width="350" height="300"}

![](image2.png){.absolute top=50 right=50 width="450" height="250"}

![](image3.png){.absolute bottom=20 right=100 width="300" height="300"}

absolute에 사용할 수 있는 속성은 다음과 같습니다. 모든 값은 CSS 단위(예: px, em 등)로 지정할 수 있습니다. 단위가 없는 숫자를 지정하면(위 예시처럼) 픽셀로 간주됩니다.

속성 설명
width 요소 너비
height 요소 높이
top 슬라이드 상단에서의 거리
left 슬라이드 왼쪽에서의 거리
bottom 슬라이드 하단에서의 거리
right 슬라이드 오른쪽에서의 거리

프레젠테이션 슬라이드의 기본 크기는 1050 x 700입니다. 사용자 지정 방법은 프레젠테이션 크기를 참고하세요.

레이아웃 헬퍼

Reveal은 콘텐츠 레이아웃 제어를 위한 헬퍼 클래스를 제공합니다.

스택 레이아웃

r-stack 레이아웃 클래스는 여러 요소를 중앙에 배치하고 서로 겹치게 합니다. 이는 fragments와 함께 사용하여 요소를 점진적으로 표시하도록 설계되었습니다.

예를 들어 다음은 .r-stack 클래스를 가진 div를 만들고 3개의 이미지를 포함합니다(각각 .fragment를 사용해 단계적으로 표시됨):

::: {.r-stack}
![](image1.png){.fragment width="450" height="300"}

![](image2.png){.fragment width="300" height="450"}

![](image3.png){.fragment width="400" height="400"}
:::

텍스트 맞춤

r-fit-text 클래스는 슬라이드를 넘지 않도록 텍스트를 최대한 크게 만듭니다. 글꼴 크기를 일일이 맞추지 않고 큰 텍스트를 원할 때 유용합니다. 예:

::: {.r-fit-text}
Big Text
:::

가운데 정렬

center 클래스를 슬라이드에 적용하면 슬라이드 상단에 적절한 여백을 추가해 콘텐츠를 세로로 가운데 정렬합니다. 요소 사이의 세로 간격은 변경되지 않습니다. 예:

## This will be centered {.center}

This text is moved as well

제목 슬라이드의 가운데 정렬 제어는 Section 1.3 를 참고하세요.

Stretch

r-stretch 레이아웃 헬퍼는 이미지나 비디오 같은 요소의 크기를 조정해 슬라이드의 남은 세로 공간을 채우게 합니다. 예를 들어 다음에서는 이미지가 슬라이드 제목과 앞뒤 텍스트를 제외한 남은 공간을 채우도록 자동 크기 조정됩니다:

## Slide Title

Here is an image:

![](image.png){.r-stretch}

Some text after the image.

단일 최상위 이미지만 포함된 슬라이드에는 .r-stretch 클래스가 자동으로 적용됩니다. auto-stretch: false 옵션으로 이 동작을 비활성화할 수 있습니다:

format:
  revealjs:
    auto-stretch: false

개별 슬라이드에 .nostretch 클래스를 추가해 자동 stretch를 비활성화할 수도 있습니다:

## Slide Title {.nostretch}

또는 개별 이미지에 .nostretch를 직접 적용할 수 있습니다:

![](image.png){.nostretch fig-align="center" width="800px"}

auto-stretch는 중첩되지 않은 이미지에만 적용됩니다. 즉, 기능 블록(예: fragments, layout panel, columns, …)이나 사용자 정의 Div 안의 이미지는 무시됩니다. 사용자 정의 Div의 경우 바깥 div에 .r-stretch 클래스를 추가해 auto-stretch 동작을 적용할 수 있습니다.

Note제한 사항: 자동 늘이기와 스크롤 가능

스크롤 가능 슬라이드에서는 자동 늘이기가 사용하는 이미지 크기 계산이 잘 작동하지 않아 이미지가 표시되지 않을 수 있습니다. 필요에 따라 다음 두 가지 해결책이 있습니다.

  • 프레젠테이션 수준에서 자동 늘이기를 비활성화(auto-stretch: false)하고, 필요한 이미지에만 .r-stretch를 사용합니다.

  • 스크롤 가능한 슬라이드에는 .nostretch 클래스를 추가해 해당 슬라이드의 자동 늘이기를 비활성화합니다.

자동 애니메이션

Revealjs는 슬라이드 간 요소를 자동으로 애니메이션할 수 있습니다. 인접한 두 슬라이드에 auto-animate 속성을 추가하면 Auto-Animate가 두 슬라이드 사이의 일치 요소를 애니메이션합니다.

다음은 사용 방법을 보여주는 간단한 예입니다. 이 예시에서는 슬라이드에 제목이 없고 auto-animate 속성만 있지만, 제목을 포함할 수도 있습니다.

## {auto-animate=true}

::: {style="margin-top: 100px;"}
Animating content
:::

## {auto-animate=true}

::: {style="margin-top: 200px; font-size: 3em; color: red;"}
Animating content
:::

이 예시는 margin-top 속성으로 요소를 이동하지만, 내부적으로 Reveal은 부드러운 이동을 위해 CSS transform을 사용합니다. 이 애니메이션 방식은 대부분의 애니메이션 가능한 CSS 속성에 적용되며 position, font-size, line-height, color, background-color, padding, margin 등을 전환할 수 있습니다.

코드 애니메이션

코드 블록 간 애니메이션으로 코드 변경 사항을 보여줄 수도 있습니다. 예:

## {auto-animate="true"}

```r
# Fill in the spot we created for a plot
output$phonePlot <- renderPlot({
  # Render a barplot
})
```

## {auto-animate=true}

```r
# Fill in the spot we created for a plot
output$phonePlot <- renderPlot({
  # Render a barplot
  barplot(WorldPhones[,input$region]*1000, 
          main=input$region,
          ylab="Number of Telephones",
          xlab="Year")
})
```

이동 애니메이션

애니메이션은 스타일 변경에만 국한되지 않습니다. Auto-Animate는 슬라이드에서 콘텐츠가 추가/삭제/재배치될 때 요소를 새 위치로 자동 이동시키는 데도 사용됩니다. 인라인 CSS 한 줄 없이 가능합니다. 예를 들어 다음은 두 슬라이드의 콘텐츠 차이가 암묵적으로 애니메이션됩니다:

## {auto-animate=true}

Animation

## {auto-animate=true}

Implicit

Animation

요소 매칭

두 자동 애니메이션 슬라이드 사이를 이동할 때, Reveal은 두 슬라이드에서 일치하는 요소를 자동으로 찾으려고 합니다. 텍스트는 내용과 노드 타입이 모두 같으면 일치로 간주합니다. 이미지, 비디오, iframe은 src 속성을 비교합니다. 또한 DOM에서 요소가 나타나는 순서도 고려합니다.

자동 매칭이 어려운 경우, 애니메이션할 객체에 동일한 data-id 속성을 부여할 수 있습니다. data-id 매칭을 자동 매칭보다 우선합니다.

다음은 자동 매칭에 사용할 콘텐츠가 없기 때문에 여러 블록에 동일한 ID를 부여한 예입니다. 이 예시는 추가 애니메이션 속성(auto-animate-easing, auto-animate-delay)도 사용하며, 다음 섹션에서 설명합니다.

## {auto-animate=true auto-animate-easing="ease-in-out"}

::: {.r-hstack}
::: {data-id="box1" auto-animate-delay="0" style="background: #2780e3; width: 200px; height: 150px; margin: 10px;"}
:::

::: {data-id="box2" auto-animate-delay="0.1" style="background: #3fb618; width: 200px; height: 150px; margin: 10px;"}
:::

::: {data-id="box3" auto-animate-delay="0.2" style="background: #e83e8c; width: 200px; height: 150px; margin: 10px;"}
:::
:::

## {auto-animate=true auto-animate-easing="ease-in-out"}

::: {.r-stack}
::: {data-id="box1" style="background: #2780e3; width: 350px; height: 350px; border-radius: 200px;"}
:::

::: {data-id="box2" style="background: #3fb618; width: 250px; height: 250px; border-radius: 200px;"}
:::

::: {data-id="box3" style="background: #e83e8c; width: 150px; height: 150px; border-radius: 200px;"}
:::
:::

애니메이션 설정

전체 프레젠테이션, 슬라이드별, 또는 각 애니메이션 요소별로 이징과 지속 시간 같은 특정 애니메이션 설정을 재정의할 수 있습니다. 다음 구성 속성으로 특정 슬라이드나 요소의 설정을 변경할 수 있습니다:

속성 기본값 설명
auto-animate-easing ease CSS easing function.
auto-animate-unmatched true 매칭되는 auto-animate 대상이 없는 요소를 페이드 인할지 결정합니다. false로 설정하면 즉시 표시됩니다.
auto-animate-duration 1.0 애니메이션 지속 시간(초).
auto-animate-delay 0 애니메이션 지연 시간(초, 슬라이드 레벨이 아니라 특정 요소에만 설정 가능).
auto-animate-id absent auto-animate 슬라이드를 묶는 id.
auto-animate-restart absent 인접한 두 auto-animate 슬라이드를 분리합니다(같은 id라도).

이징, unmatched, duration의 전역 기본값은 다음과 같이 재정의할 수 있습니다:

---
title: "My Slide"
format:
  revealjs:
    auto-animate-easing: ease-in-out
    auto-animate-unmatched: false
    auto-animate-duration: 0.8
---

Fragments

Fragments는 슬라이드의 개별 요소를 강조하거나 점진적으로 표시하는 데 사용됩니다. fragment 클래스를 가진 모든 요소는 다음 슬라이드로 넘어가기 전에 단계적으로 표시됩니다.

여기서 설명하는 fragments는 비교적 고급 형태의 점진적 콘텐츠 표시입니다. 점진적 글머리표 목록 생성과 콘텐츠 일시 정지 삽입은 점진적 목록을 참고하세요.

기본 fragment 스타일은 처음에 보이지 않다가 페이드 인합니다. fragment에 다른 클래스를 추가해 스타일을 변경할 수 있습니다. 예:

::: {.fragment}
Fade in
:::

::: {.fragment .fade-out}
Fade out
:::

::: {.fragment .highlight-red}
Highlight red
:::

::: {.fragment .fade-in-then-out}
Fade in, then out
:::

::: {.fragment .fade-up}
Slide up while fading in
:::

Fragment 클래스

사용 가능한 fragment 클래스는 다음과 같습니다:

이름 효과
fade-out | 보이는 상태에서 페이드 아웃 |
fade-up | 위로 이동하면서 페이드 인 |
fade-down | 아래로 이동하면서 페이드 인 |
fade-left | 왼쪽으로 이동하면서 페이드 인 |
fade-right | 오른쪽으로 이동하면서 페이드 인 |
fade-in-then-out | 페이드 인 후 다음 단계에서 페이드 아웃 |
fade-in-then-semi-out | 페이드 인 후 다음 단계에서 50%까지 페이드 아웃 |
grow | 확대 |
semi-fade-out | 50%까지 페이드 아웃 |
shrink | 축소 |
strike | 취소선 |
highlight-red | 텍스트를 빨간색으로 |
highlight-green | 텍스트를 녹색으로 |
highlight-blue | 텍스트를 파란색으로 |
highlight-current-red | 텍스트를 빨간색으로 만든 뒤 다음 단계에서 원래대로 |
highlight-current-green | 텍스트를 녹색으로 만든 뒤 다음 단계에서 원래대로 |
highlight-current-blue | 텍스트를 파란색으로 만든 뒤 다음 단계에서 원래대로 |

중첩 Fragments

같은 요소에 여러 fragment를 순차적으로 적용하려면 감싸면 됩니다. 다음 예시는 첫 단계에서 텍스트를 페이드 인, 두 번째에서 빨간색으로 변경, 세 번째에서 부분 페이드 아웃합니다:

::: {.fragment .fade-in}
::: {.fragment .highlight-red}
::: {.fragment .semi-fade-out}
Fade in > Turn red > Semi fade out
:::
:::
:::

Fragment 순서

기본적으로 fragment는 DOM에 나타나는 순서대로 진행됩니다. fragment-index 속성으로 표시 순서를 변경할 수 있습니다. 여러 요소가 같은 인덱스를 가질 수도 있습니다:

::: {.fragment fragment-index=3}
Appears last
:::

::: {.fragment fragment-index=1}
Appears first
:::

::: {.fragment fragment-index=2}
Appears second
:::

사용자 정의 Fragments

.fragment.effectname와 .fragment.effectname.visible에 대한 CSS 스타일을 지정해 사용자 정의 효과를 만들 수 있습니다. visible 클래스는 프레젠테이션 중 fragment가 표시될 때마다 적용됩니다. 각 fragment에 custom 클래스를 추가하면 reveal.js가 기본 페이드 인 스타일을 적용하지 않도록 할 수 있습니다.

예를 들어 다음은 요소가 처음에는 흐릿하다가 단계적으로 표시될 때 선명해지는 fragment 스타일을 정의합니다.

::: {.fragment .custom .blur}
First item to be unblurred
:::

::: {.fragment .custom .blur}
Second one to be revealed
:::

다음은 blur 클래스에 대한 스타일 CSS입니다.

.reveal .slides section .fragment.blur {
  filter: blur(5px);
}

.reveal .slides section .fragment.blur.visible {
  filter: none
}

패럴랙스 배경

패럴랙스 스크롤 배경을 사용하려면 parallax-background-image와 parallax-background-size 옵션을 추가하세요. 예:

---
title: "Presentation"
format:
  revealjs:
     parallax-background-image: background.png
     parallax-background-size: "2100px 900px"
     parallax-background-horizontal: 200
     parallax-background-vertical: 50
---

parallax-background-horizontal과 parallax-background-vertical 옵션은 필수는 아닙니다(지정하지 않으면 위 기본값이 사용됩니다).

수직 슬라이드

Reveal은 기본적으로 전통적인 선형 슬라이드 내비게이션을 사용합니다. 원한다면 하나의 최상위 슬라이드 안에 여러 슬라이드를 중첩해 수직 스택을 만들도록 내비게이션을 구성할 수 있습니다.

navigation-mode 옵션으로 Reveal 내비게이션 동작을 미세 조정할 수 있습니다:

내비게이션 모드 동작
linear 좌/우 화살표 키로 모든 슬라이드(수평/수직)를 순차 이동합니다.
vertical 좌/우 화살표 키로 수평 슬라이드, 상/하 화살표 키로 수직 슬라이드를 이동합니다. 스페이스 키는 모든 슬라이드를 순차 이동합니다.
grid 활성화하면 수직 스택에서 인접한 수직 스택으로 좌/우 이동할 때 동일한 수직 인덱스로 이동합니다.

vertical 또는 grid 내비게이션을 사용하는 경우, 수평 축은 수준 1 제목, 수직 축은 수준 2 제목으로 슬라이드를 구성해야 합니다. 예:

---
title: "Presentation"
format:
  revealjs:
    navigation-mode: vertical
---

# Slide 1

## Slide 1.1

## Slide 1.2

# Slide 2

## Slide 2.1

## Slide 2.2

슬라이드 컨트롤

vertical 또는 grid 내비게이션을 활성화하면 프레젠테이션에서 현재 위치를 보여주는 컨트롤이 표시됩니다(예: 아래에 수직 슬라이드가 있으면 아래쪽 컨트롤이 표시됨).

기본적으로 컨트롤은 프레젠테이션의 가장자리에 표시되며, controls-layout 옵션으로 오른쪽 아래에 배치할 수 있습니다. controls-tutorial 옵션으로 컨트롤이 사용 가능함을 시각적으로 더 안내할 수도 있습니다. 예:

---
title: "Presentation"
format: 
  revealjs:
    navigation-mode: vertical
    controls-layout: bottom-right
    controls-tutorial: true
---

controls-layout: bottom-right는 logo를 포함하는 경우와 호환되지 않습니다(로고도 오른쪽 아래에 표시되기 때문).

controls: false로 컨트롤을 완전히 비활성화할 수도 있습니다.

Warning

수직 슬라이드는 전통적인 선형 모델보다 유연하지만, 실제로는 최종 사용자에게 매우 혼란스럽습니다(대부분 예상치 못하기 때문입니다). 사용자는 수직 콘텐츠가 있는지 모르기 때문에 자주 건너뜁니다.

콘텐츠가 수직 구성을 통해 이점을 얻는다면(예: 프레젠테이션 주요 흐름에 포함하고 싶지 않은 선택적 상세 콘텐츠가 있는 경우) 수직 모드를 사용해도 좋습니다. 다만 슬라이드를 배포하면 사용자가 수직 콘텐츠를 보지 않을 가능성이 큽니다.

터치 내비게이션

터치가 가능한 기기에서는 스와이프하여 프레젠테이션을 탐색할 수 있습니다.

이를 비활성화하려면 touch 옵션을 false로 설정하세요:

---
title: "Presentation"
format:
  revealjs:
    touch: false
    controls: true
---

휴대폰이나 태블릿에서는 키보드를 사용할 수 없으므로 controls도 함께 활성화합니다.

Reveal 플러그인

Revealjs 플러그인을 사용하려면 구성 파일(plugin.yml)이 있는 디렉터리로 패키징해야 합니다. 구성 파일은 플러그인을 프레젠테이션에 어떻게 주입할지(예: 포함할 스크립트 및/또는 CSS 파일, 기본 구성 등)를 Quarto에 알려줍니다.

예시는 Quarto Reveal에 내장된 플러그인의 소스 코드를 참고하세요:

https://github.com/quarto-dev/quarto-cli/tree/main/src/resources/formats/revealjs/plugins

플러그인을 사용하려면 revealjs-plugins 목록에 해당 디렉터리를 참조로 추가하면 됩니다. 예:

---
title: "Presentation"
format:
  revealjs:
    revealjs-plugins:
      - myplugin
---

많이 쓰이는 Reveal 플러그인 상당수는 Quarto 버전의 Reveal에 이미 포함되어 있으므로 별도로 포함할 필요가 없습니다. 내장 플러그인은 다음과 같습니다:

예시

fullscreen 플러그인 예시를 살펴봅니다. Quarto HTML 프레젠테이션에서 이 플러그인을 사용하기 위한 단계는 다음과 같습니다:

  1. 플러그인 이름으로 사용할 폴더를 만듭니다. 여기서는 fullscreen이라고 하겠습니다.

  2. 생성한 폴더에 플러그인 파일을 다운로드합니다. 이 플러그인은 plugin.js라는 JS 파일 하나뿐이며, rajgoel/reveal.js-plugins 저장소에서 찾을 수 있습니다. 이름을 그대로 사용하거나 fullscreen.js처럼 변경할 수 있습니다.

  3. 해당 폴더에 Quarto Reveal 예제처럼 plugin.yml 파일을 추가합니다.

    • name은 필수 필드이며, JS 플러그인이 정의하는 JS 함수 이름이어야 합니다. 다운로드한 JS 스크립트를 열어 확인하세요.
    • 다른 필드는 사용할 리소스입니다. 이 예에서는 JS 스크립트만 있으므로 script를 사용합니다.

우리의 plugin.yml은 다음과 같습니다:

``` yaml
name: RevealFullscreen
script: [fullscreen.js]
```

  1. 생성한 폴더 경로를 사용해 문서 YAML 헤더에 플러그인 참조를 추가합니다:

    format: 
 revealjs:
   revealjs-plugins:
     - fullscreen

  2. 사용자 정의 플러그인이 프레젠테이션에 로드되어 사용할 수 있습니다. fullscreen 플러그인 문서는 섹션에 속성을 추가하고 콘텐츠에 stretch를 적용해 슬라이드에 지도 전체 화면을 추가하는 예시를 보여줍니다. 이는 .qmd 파일에서 다음과 같은 슬라이드가 됩니다:

    ## {fullscreen=true}

<iframe class="stretch" data-src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d61206.89156051744!2d-151.77366863890407!3d-16.50433878928727!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sde!4v1467468929561"></iframe>

더 알아보기

Reveal 사용에 대해 더 알아보려면 다음 문서를 참고하세요:

  • Reveal 기본: 프레젠테이션 생성의 기본을 다룹니다.
  • 슬라이드 발표: 슬라이드 탐색, PDF 인쇄, 칠판 기능으로 슬라이드에 그리기, 멀티플렉스 프레젠테이션 생성 등을 설명합니다.
  • Reveal 테마: 기존 테마 사용/사용자 지정과 새 테마 생성 방법을 설명합니다.