Callout 블록

Callout은 특정 개념을 강조하거나, 부가 정보/특정 상황에만 적용됨을 명확히 알리는 데 유용합니다.

Callout 유형

Callout은 총 다섯 가지 유형을 제공합니다.

  • note
  • warning
  • important
  • tip
  • caution

선택한 유형에 따라 색상과 아이콘이 달라집니다. HTML 출력에서 각 유형은 다음과 같습니다.

Note

note, tip, warning, caution, important 다섯 가지 유형이 있습니다.

Warning

Callout은 이 경고처럼 주의를 환기하는 간단한 방법입니다.

Important

Callout 제목은 유형에 따라 자동으로 제공됩니다(예: Note, Warning, Important, Tip, Caution 등).

Tip제목이 있는 Tip

제목을 포함한 Callout 예시입니다. 제목은 선택 사항입니다.

사용자가 펼칠 수 있는 접힌 Callout 예시입니다. collapse="true"로 기본 접힘, collapse="false"로 기본 펼침 상태의 접기 기능을 만들 수 있습니다.

이 기능은 아직 Revealjs 프레젠테이션에서 지원되지 않습니다(이슈 #1328 참고).

마크다운 문법

Callout은 아래와 같은 문법으로 작성합니다(콜아웃 내부 첫 번째 제목이 콜아웃 제목으로 사용됨).

::: {.callout-note}
Callout 유형은 `note`, `warning`, `important`, `tip`, `caution` 다섯 가지입니다.
:::

::: {.callout-tip}
## 제목이 있는 Tip

제목을 포함한 Callout 예시입니다.
:::

::: {.callout-caution collapse="true"}
## 펼쳐서 접기 기능 알아보기

사용자가 펼칠 수 있는 접힌 Callout 예시입니다. `collapse="true"`로 기본 접힘, `collapse="false"`로 기본 펼침 상태를 지정할 수 있습니다.
:::

위 예시에서는 콜아웃 상단에 제목을 두었지만, title 속성으로 지정할 수도 있습니다.

::: {.callout-tip title="제목이 있는 Tip"}
제목이 포함된 Callout입니다.
:::

Customizing Appearance

Collapse

collapse 속성을 설정하면 사용자가 펼칠 수 있는 접기 형태의 Callout을 만들 수 있습니다. collapse=true이면 기본적으로 접힌 상태, collapse=false이면 기본적으로 펼쳐진 상태에서 접기 기능을 제공합니다.

외관

Callout은 세 가지 외관 모드를 제공합니다.

default 색상이 있는 헤더와 아이콘을 포함한 기본 스타일
simple 헤더 배경색 없이 가벼운 스타일
minimal 테두리만 적용하고 헤더 배경색·아이콘이 없는 최소 스타일

Callout 외관은 문서/프로젝트 YAML에서 전역으로 설정하거나,

callout-appearance: simple

Callout에 appearance 속성으로 개별 지정할 수 있습니다.

::: {.callout-note appearance="simple"}

## Pay Attention

Callout을 사용하면 독자가 유의해야 할 내용을 효과적으로 강조할 수 있습니다.

:::

렌더링 결과:

NotePay Attention

Callout을 사용하면 독자가 유의해야 할 내용을 효과적으로 강조할 수 있습니다.

아이콘

외관 설정과 별도로 아이콘을 숨길 수도 있습니다. 문서/프로젝트 YAML에서 전역적으로,

callout-icon: false

Callout 속성으로 개별 설정할 수도 있습니다.

::: {.callout-note icon=false}

## Pay Attention

Callout을 사용하면 독자가 유의해야 할 내용을 효과적으로 강조할 수 있습니다.

:::

렌더링 결과:

NotePay Attention

Callout을 사용하면 독자가 유의해야 할 내용을 효과적으로 강조할 수 있습니다.

지원 포맷

다음 포맷에서는 위와 같이 Callout이 렌더링됩니다.

  • format: html
  • format: pdf
  • format: typst
  • format: docx
  • format: epub
  • format: revealjs (without collapse option)

format: html에서 기본 테마를 비활성화(theme: none)하면 Callout 렌더링이 적용되지 않습니다. 또한 접기 기능처럼 일부 기능은 Bootstrap을 사용하는 문서에서만 작동합니다.

대상 포맷이 Callout을 지원하지 않으면 제목이 볼드 처리된 단순 인용 블록으로 표시됩니다.

Cross-References

Callout을 참조하려면 해당 유형에 맞는 접두사(표 Table 1 참고)로 시작하는 ID를 부여한 뒤, 일반적인 @ 문법으로 참조하면 됩니다. 아래 예에서는 Callout에 #tip-example ID를 추가하고 이를 다시 참조합니다.

::: {#tip-example .callout-tip}
## Cross-Referencing a Tip

Add an ID starting with `#tip-` to reference a tip.
:::

See @tip-example...

렌더링 결과:

Tip 1: Cross-Referencing a Tip

Add an ID starting with #tip- to reference a tip.

See Tip 1…

Callout 유형별 접두사는 다음과 같습니다.

Table 1: Callout 크로스레퍼런스 접두사
Callout Type Prefix
note #nte-
tip #tip-
warning #wrn-
important #imp-
caution #cau-