목차

• Part 1. 기본 레이아웃 (default · center · cover · section · quote · blank · end)
• Part 2. 컬럼 레이아웃 (two-cols · two-cols-header · three-cols · 비율 변형)
• Part 3. 이미지 레이아웃 (image-left · image-right · image-full)
• Part 4. 배경 시스템 (bg-color · bg-gradient · bg-image · bg-blend)
• Part 5. 디렉티브 (single-line · multi-line · align · justify · color · padding)
• Part 6. 콘텐츠 기능 (Speaker Notes · Positioned Slots · Progressive Build · Mermaid)
• Part 7. 유틸리티 클래스 (text-* · dense · relaxed · items-* · no-margin)
• Part 8. 덱 수준 설정 (Frontmatter · Transition · Per-slide Override)

Part 1

기본 레이아웃

layout: default — 기본 레이아웃

layout 디렉티브를 생략하면 default가 적용됩니다.

---

## 슬라이드 제목

- 항목 1
- 항목 2
- 항목 3

• 콘텐츠가 세로·가로 중앙 배치
• 가장 자주 사용되는 레이아웃
• ---로 슬라이드를 구분

layout: center

모든 콘텐츠가 수평·수직 중앙에 배치됩니다.

핵심 메시지나 강조 슬라이드에 적합합니다.

layout: center + bg-color

배경색과 함께 조합하면 강조 효과가 극대화됩니다.

bg-color: #1e3a5f + color: white

layout: section

섹션 구분자 레이아웃 — 파트 이름·번호 표시에 사용

좋은 코드는 그 자체로 문서다. 나쁜 코드는 문서가 필요하다.

— Robert C. Martin

layout: blank

스타일 없는 빈 캔버스입니다.

완전한 커스텀 레이아웃이 필요할 때 사용합니다.

Part 2

컬럼 레이아웃

def calculate_total_price(items: list) -> float:
    """상품 목록의 총 가격을 계산합니다."""
    return sum(item.price * item.qty for item in items)

const response = await fetch('/api/data');
const json = await response.json();

# 명확한 이름
def get_user_by_email(email: str):
    return db.query(User).filter_by(email=email)

# 모호한 이름
def get(x):
    return db.q(U).f(e=x)

const result = transform(input);

Part 3

이미지 레이아웃

image-left — 이미지 왼쪽

왼쪽 이미지 + 오른쪽 텍스트 구성입니다.

• bg: 이미지 경로
• cols: 2:3 (기본값): 이미지 40%, 텍스트 60%
• 이미지와 설명을 함께 표시할 때 사용

image-right — 이미지 오른쪽

왼쪽 텍스트 + 오른쪽 이미지 구성입니다.

• cols: 3:2 (기본값): 텍스트 60%, 이미지 40%
• 텍스트를 먼저 읽도록 유도
• 좌→우 시선 흐름 활용

image-full — 전체 배경 + 오버레이 텍스트

배경 이미지 위에 텍스트를 오버레이합니다

bg-opacity: 0.25 · align: center · justify: end

Part 4

배경 시스템

bg-color — 단색 배경

bg-color: #0f172a + color: #e2e8f0

CSS 색상 값을 모두 지원합니다.

<!--
bg-color: #0f172a
color: #e2e8f0
-->

hex · rgb() · hsl() · named colors 모두 가능

bg-gradient — 선형 그라디언트

linear-gradient(135deg, #667eea 0%, #764ba2 100%)

CSS gradient 문법을 그대로 사용합니다.

bg-gradient — Radial Gradient + bg-color 레이어

radial-gradient(circle at 30% 50%, #1e3a8a 0%, transparent 60%)

bg-color와 함께 사용하면 레이어 효과를 만들 수 있습니다.

배경 이미지 — bg + 옵션 조합

• bg: 이미지 경로 (상대/절대 경로)
• bg-size: cover — 슬라이드를 꽉 채움 (contain · auto · 100% 가능)
• bg-position: center top — 이미지 기준점
• bg-opacity: 0.35 — 투명도 (0~1)

bg-blend — 이미지 + 색상 블렌딩

이미지와 bg-color를 CSS blend-mode로 합성합니다.

bg-blend: multiply

지원 값: multiply · screen · overlay · darken · lighten · color-burn 등

Part 5

디렉티브 & 옵션

디렉티브 — 단일 라인 (Single-line)

옵션 하나만 설정할 때는 한 줄로 작성합니다.

---

<!-- layout: center -->

# 내용

디렉티브 — 멀티 라인 블록 (Multi-line Block)

2개 이상의 옵션은 블록 형태로 작성합니다.

---

<!--
layout: two-cols
bg-color: #1e3a5f
cols: 2:1
color: white
-->

권장: 2개 이상의 디렉티브는 항상 멀티 라인 블록 사용

align: left + justify: start

• align: left — 텍스트 왼쪽 정렬
• justify: start — 콘텐츠 상단 배치

justify 가능 값: start · center (기본) · end · between

align: center + justify: between

• align: center — 텍스트 중앙 정렬
• justify: between — 첫/끝 항목을 양 끝으로

첫 번째 줄

마지막 줄 (between 효과로 위아래 배분)

color + padding 조합

• color: #f97316 — 텍스트 색상 오렌지
• padding: 3rem 5rem — 콘텐츠 여백 (CSS shorthand)

<!--
color: #f97316
padding: 3rem 5rem
-->

Part 6

콘텐츠 기능

발표자 노트 — Comment Block 방식

슬라이드 화면에는 표시되지 않습니다.

## 슬라이드 제목

내용...

<!-- notes
발표자 노트입니다.
**마크다운** 서식도 지원합니다.
- 기억해야 할 포인트
- 시간 목표: 2분
-->

발표자 노트 — Caret (^) 방식

^로 시작하는 줄이 발표자 노트가 됩니다.

## 슬라이드 제목

내용...

^ 첫 번째 발표자 노트
^ 두 번째 발표자 노트
^ **마크다운**도 지원합니다

두 방식을 혼합 사용할 수도 있습니다.

위치 슬롯 — top-right + bottom-left

슬롯은 메인 콘텐츠 흐름과 독립적으로 고정 위치에 배치됩니다.

🔖 Slots 데모

사진 출처: Unsplash

<!-- slot: top-right -->
🔖 **태그**
<!-- /slot -->

<!-- slot: bottom-left -->
*사진 출처: Unsplash*
<!-- /slot -->

9가지 위치: top-left · top-center · top-right bottom-left · bottom-center · bottom-right · center

위치 슬롯 — top-center + bottom-center

⬆ top-center 슬롯

⬇ bottom-center 슬롯

메인 콘텐츠 영역입니다.

슬롯은 메인 레이아웃 흐름에 영향을 주지 않습니다.

🎯 center 슬롯 데모

이 텍스트는 center 슬롯으로 배치됩니다

center 슬롯

<!-- slot: center -->
## 🎯 center 슬롯
<!-- /slot -->

layout: center와 조합하면 화면 정중앙에 배치됩니다.

Progressive Reveal — build: true

클릭할 때마다 항목이 하나씩 나타납니다.

• 첫 번째 항목
• 두 번째 항목
• 세 번째 항목
• 네 번째 항목

Progressive Reveal — build: first

첫 번째 항목은 즉시 보이고, 나머지가 순서대로 나타납니다.

• 이미 보이는 첫 번째 항목 ← 처음부터 표시
• 두 번째 항목 ← 클릭 후 등장
• 세 번째 항목 ← 클릭 후 등장
• 네 번째 항목 ← 클릭 후 등장

auto-scale-code — 코드 자동 축소

코드 블록이 슬라이드 영역에 맞게 자동으로 크기가 조정됩니다.

def very_long_function_name_to_demonstrate_auto_scaling(
    parameter_one: str,
    parameter_two: int,
    parameter_three: list[str],
    parameter_four: dict[str, any] | None = None,
) -> tuple[str, int]:
    """긴 코드가 슬라이드를 넘쳐도 자동으로 축소됩니다."""
    result = f"{parameter_one} - {parameter_two}"
    extra = [s.upper() for s in parameter_three]
    return result, len(extra)

Mermaid — Flowchart

flowchart LR
  A[요청 수신] --> B{인증 확인}
  B -->|성공| C[비즈니스 로직]
  B -->|실패| D[401 반환]
  C --> E[DB 조회]
  E --> F[응답 반환]

meta 옵션: width=75% · align=center · valign=center

Mermaid — Sequence Diagram

sequenceDiagram
  participant C as 클라이언트
  participant S as 서버
  participant D as DB

  C->>S: POST /login
  S->>D: 사용자 조회
  D-->>S: 사용자 정보
  S-->>C: JWT 토큰 반환

Mermaid — 옵션 정리

옵션	값	기본값	설명
width	CSS 단위 (60%, 500px)	100%	최대 너비
align	center · left · right	center	수평 정렬
valign	top · center · bottom	top	수직 정렬

` ` `mermaid width=60% align=center valign=center
flowchart TB
  A --> B
` ` `

Part 7

유틸리티 클래스

유틸리티 클래스 전체 목록

클래스	효과
text-center · text-left · text-right	텍스트 정렬
text-sm	글자 크기 0.85em
text-lg	글자 크기 1.15em
text-xl	글자 크기 1.3em
items-start	콘텐츠 상단 정렬
items-end	콘텐츠 하단 정렬
auto-scale-code	코드 블록 자동 축소
no-margin	마진 제거
dense	항목 간 간격 축소
relaxed	항목 간 간격 확대

여러 클래스 조합: <!-- class: text-center text-lg dense -->

text-sm — 작은 글자 (0.85em)

이 슬라이드는 <!-- class: text-sm -->이 적용되었습니다.

항목이 많거나 조밀한 내용을 담을 때 텍스트를 줄입니다.

• 항목이 많은 리스트 슬라이드
• 부가 설명이 필요한 경우
• 좁은 컬럼 내 가독성 향상
• 레퍼런스 표나 코드 주석
• 긴 URL이나 경로 표시

text-xl — 큰 글자 (1.3em)

핵심 메시지를 강조할 때 사용합니다.

<!-- class: text-xl -->

text-center — 텍스트 중앙 정렬

이 슬라이드의 모든 텍스트가 중앙 정렬됩니다.

<!-- class: text-center -->

제목, 인용문, 강조 메시지에 활용합니다.

dense — 항목 간 간격 축소

dense 클래스는 줄 간격을 줄입니다. 많은 항목을 한 슬라이드에 담을 때 사용합니다.

• 첫 번째 항목
• 두 번째 항목
• 세 번째 항목
• 네 번째 항목
• 다섯 번째 항목
• 여섯 번째 항목
• 일곱 번째 항목
• 여덟 번째 항목

relaxed — 항목 간 간격 확대

relaxed 클래스는 줄 간격을 늘려 여유로운 느낌을 줍니다.

• 첫 번째 항목

• 두 번째 항목

• 세 번째 항목

items-start — 콘텐츠 상단 정렬

콘텐츠가 슬라이드 상단에 배치됩니다. (기본값은 세로 중앙)

<!-- class: items-start -->

항목이 많아서 세로 중앙 정렬이 어색할 때 사용합니다.

items-end — 콘텐츠 하단 정렬

<!-- class: items-end -->

이 슬라이드의 콘텐츠는 하단에 배치됩니다.

특수한 강조 효과나 이미지 캡션 배치에 활용합니다.

text-center + no-margin + 배경 조합

여러 클래스와 디렉티브를 자유롭게 조합합니다.

<!-- class: text-center no-margin -->

<!--
class: text-center no-margin
bg-gradient: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%)
color: #a78bfa
-->

Part 8

덱 수준 설정

Frontmatter 전체 필드

---
title: "슬라이드 제목"
description: "설명 (1-2문장)"
created_at: 2026-03-24       # 생성일 (변경 불가)
updated_at: 2026-03-24       # 최종 수정일
published: false             # 발행 여부
version: 1                   # 콘텐츠 변경 시 +1
tags: [tag1, tag2]

theme: dark                  # dark / light
transition: push             # push / rise-fade / none
paginate: true               # 슬라이드 번호 표시

header: "**로고** | 제목"    # 전역 헤더 (마크다운 지원)
footer: "© 2026 이름"        # 전역 푸터

encrypted: false             # 암호화 여부
# password: "secret"         # encrypted: true 일 때
---

Transition 종류 비교

값	효과	용도
push (기본값)	슬라이드가 옆으로 밀려납니다	일반 프레젠테이션
rise-fade	아래서 올라오며 페이드	세련된 느낌
none	즉시 전환, 애니메이션 없음	기술 발표, 집중 필요 시

# 덱 전체 설정
transition: none

# 특정 슬라이드만 오버라이드
<!--
transition: rise-fade
-->

Per-slide 헤더/푸터 오버라이드

이 슬라이드는:

• header: "" — 전역 헤더를 숨겼습니다 (위를 보세요)
• footer: "⚠️ ..." — 커스텀 footer 적용 (아래를 보세요)

<!--
header: ""
footer: "⚠️ 이 슬라이드만 커스텀 footer 적용"
-->

빈 문자열("")로 설정하면 해당 슬라이드에서 숨깁니다.

Per-slide theme 오버라이드

덱 전체 테마와 다른 테마를 특정 슬라이드에 적용할 수 있습니다.

<!--
theme: light
-->

## 이 슬라이드만 라이트 테마

강조 슬라이드나 섹션 전환 시 시각적 대비 효과를 줄 수 있습니다.

문법 가이드 완료!

모든 문법을 직접 실험해보세요

bun run dev → /slides/2026/03/24/slide-syntax-samples