Reveal 테마

테마 사용

Reveal 프레젠테이션에는 11개의 기본 제공 테마가 있습니다(직접 테마를 만들 수도 있습니다). default와 dark 테마는 비교적 고전적인 타이포그래피와 색상 체계를 사용하며 시작하기에 좋습니다.

default 테마는 자동으로 사용됩니다. 다른 테마로 전환하려면 theme 옵션을 사용하세요. 예:

---
title: "Presentation"
format:
  revealjs: 
    theme: dark
---

사용 가능한 테마 전체 목록은 다음과 같습니다:

  • beige
  • blood
  • dark
  • default
  • dracula
  • league
  • moon
  • night
  • serif
  • simple
  • sky
  • solarized

테마 사용자 지정

테마 선언에 사용자 정의 Sass 테마 파일을 추가해 기본 제공 테마를 사용자 지정할 수 있습니다. 예:

---
title: "Presentation"
format:
  revealjs: 
    theme: [default, custom.scss]
---

custom.scss의 내용은 다음과 같을 수 있습니다:

/*-- scss:defaults --*/

$body-bg: #191919;
$body-color: #fff;
$link-color: #42affa;

/*-- scss:rules --*/

.reveal .slide blockquote {
  border-left: 3px solid $text-muted;
  padding-left: 0.5em;
}

테마 파일은 Sass를 사용하며(변수 등 확장 기능을 지원하는 CSS 변형), 섹션으로 나뉩니다.

  • /*-- scss:defaults --*/는 글꼴, 색상, 테두리 등에 영향을 주는 변수를 정의합니다(변수는 $로 시작).

  • /*-- scss:rules --*/는 CSS 규칙을 정의합니다. Reveal 콘텐츠를 대상으로 하는 CSS 규칙은 일반적으로 테마 기본 스타일을 덮어쓰려면 .reveal .slide 접두사를 사용해야 합니다.

사용자 지정 가능한 항목 목록은 Sass 변수 문서를 참고하세요.

테마 만들기

새 테마를 만드는 것은 기본 Sass 변수 중 하나 이상을 다시 정의하고(덮어쓰지 않을 값은 다시 지정할 필요 없음), 필요한 추가 CSS 규칙을 추가하는 일입니다.

테마에서 사용자 지정 가능한 항목 목록은 Sass 변수 문서를 참고하세요.

예를 들어 다음은 기본 제공 serif 테마의 소스 코드입니다:

/*-- scss:defaults --*/

// fonts
$font-family-sans-serif: "Palatino Linotype", "Book Antiqua", Palatino,
  FreeSerif, serif !default;

// colors
$body-bg: #f0f1eb !default;
$body-color: #000 !default;
$link-color: #51483d !default;
$selection-bg: #26351c !default;

// headings
$presentation-heading-font: "Palatino Linotype", "Book Antiqua", Palatino,
  FreeSerif, serif !default;
$presentation-heading-color: #383d3d !default;

/*-- scss:rules --*/

.reveal a {
  line-height: 1.3em;
}

이 테마 파일에서는 변수 정의 뒤에 !default 접미사가 붙어 있습니다. 이는 이 테마를 사용하는 사람이 변수 값을 덮어쓸 수 있도록 하기 위한 것입니다(!default가 없으면 덮어쓸 수 없는 값이 됩니다).

사용자 정의 테마는 theme 옵션에 지정하기만 하면 사용할 수 있습니다(모든 테마 파일은 default 테마를 암묵적으로 상속합니다). 예:

---
title: "Presentation"
format:
  revealjs: 
    theme: mytheme.scss
---

모든 기본 제공 테마의 소스 코드는 다음에 있습니다(영감과 예시용):

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

Sass 변수

Reveal 테마에서 사용하는 모든 Sass 변수(및 기본값) 목록은 다음과 같습니다. 일부 변수는 다른 변수를 사용해 정의되며, 일부 색상 변수는 lighten() Sass 함수를 사용해 다른 색상의 더 밝은 변형을 만듭니다.

색상

변수 기본값
$body-bg #fff
$body-color #222
$text-muted lighten($body-color, 50%)
$link-color #2a76dd
$link-color-hover lighten($link-color, 15%)
$selection-bg lighten($link-color, 25%)
$selection-color $body-bg
$light-bg-text-color #222
$light-bg-link-color #2a76dd
$light-bg-code-color #4758ab
$dark-bg-text-color #fff
$dark-bg-link-color #42affa
$dark-bg-code-color #ffa07a

글꼴

변수 기본값
$font-family-sans-serif “Source Sans Pro”, Helvetica, sans-serif
$font-family-monospace monospace
$presentation-font-size-root 40px
$presentation-font-smaller 0.7
$presentation-line-height 1.3

제목

변수 기본값
$presentation-h1-font-size 2.5em
$presentation-h2-font-size 1.6em
$presentation-h3-font-size 1.3em
$presentation-h4-font-size 1em
$presentation-heading-font $font-family-sans-serif
$presentation-heading-color $body-color
$presentation-heading-line-height 1.2
$presentation-heading-letter-spacing normal
$presentation-heading-text-transform none
$presentation-heading-text-shadow none
$presentation-heading-font-weight 600
$presentation-h1-text-shadow none

코드 블록

변수 기본값
$code-block-bg $body-bg
$code-block-border-color lighten($body-color, 60%)
$code-block-font-size 0.55em

인라인 코드

변수 기본값
$code-color var(–quarto-hl-fu-color)
$code-bg transparent

탭세트

변수 기본값
$tabset-border-color $code-block-border-color

레이아웃

변수 기본값
$border-color lighten($body-color, 30%)
$border-width 1px
$border-radius 3px
$presentation-block-margin 12px
$presentation-slide-text-align left
$presentation-title-slide-text-align center

콜아웃

변수 | 참고 |
$callout-border-width Callout의 왼쪽 테두리 너비. 기본값 0.3rem. |
$callout-border-scale Callout 색상을 이 값만큼 이동해 계산한 테두리 색. 기본값 0%. |
$callout-icon-scale Callout 색상을 이 값만큼 이동해 계산한 아이콘 색. 기본값 10%. |
$callout-margin-top Callout의 위쪽 여백. 기본값 1rem. |
$callout-margin-bottom Callout의 아래쪽 여백. 기본값 1rem. |
$callout-color-<type>

다양한 유형의 Callout 색상. 기본값: |

유형 기본값
note #0d6efd
tip #198754
caution #fd7e14
warning #ffc107
important #dc3545

콜아웃 스타일은 유형 색상을 왼쪽 테두리에 적용하고, 헤더 배경에는 해당 색상의 변형을 사용합니다. |

일부 Sass 변수에는 presentation- 접두사가 있고 일부에는 없습니다. presentation- 접두사가 붙은 변수는 프레젠테이션 전용이며, 나머지 변수는 표준 Quarto HTML 테마에서 사용하는 변수와 동일합니다.

모든 Quarto 테마는 동일한 Sass 형식을 사용하므로, HTML/웹사이트 문서와 프레젠테이션에 동일한 테마 파일을 사용할 수 있습니다.

더 알아보기

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

  • Reveal 기본: 프레젠테이션 생성의 기본을 다룹니다.
  • 슬라이드 발표: 슬라이드 내비게이션, PDF 인쇄, 칠판으로 슬라이드에 그리기, Multiplex 프레젠테이션 만들기를 설명합니다.
  • 고급 Reveal: 전환, 애니메이션, 고급 레이아웃과 배치, 프레젠테이션 사용자 지정 옵션을 다룹니다.
  • Quarto 테마 더 알아보기: 다른 SCSS 파일 및 _brand.yml과의 상호작용을 포함한 레이어링 시스템을 더 자세히 설명합니다.