상호 참조

개요

상호 참조는 그림, 표 등 다양한 요소에 번호가 붙은 참조와 하이퍼링크를 제공해 독자가 문서를 더 쉽게 탐색할 수 있도록 돕습니다. 상호 참조 가능한 모든 요소에는 상호 참조 유형이 접두사로 붙은 고유 레이블이 필요합니다(예: #fig-element). 다음은 상호 참조 가능한 그림 예시입니다.

![Elephant](elephant.png){#fig-elephant}

레이블(#fig-elephant)이 있으면 해당 그림을 다른 위치에서 참조할 수 있습니다. 예를 들어 다음 구문으로 그림을 가리킬 수 있습니다.

@fig-elephant 을 참고해 그림을 확인하세요.

HTML로 렌더링하면 다음과 같이 표시됩니다.

코끼리 선 그림 아래에 'Figure 1: Elephant' 캡션이 가운데 정렬로 표시된 예시

상호 참조 식별자는 반드시 유형(예: fig-, tbl-)으로 시작해야 합니다. 따라서 #fig-elephant는 유효한 상호 참조 식별자이지만 #elephant나 #elephant-fig는 허용되지 않습니다.

예약된 접두사

상호 참조를 만들지 않을 때는 코드 셀 레이블(예: label 코드 셀 옵션으로 지정)이나 요소 ID(속성에서 #으로 지정)에 예약된 접두사를 사용하지 마세요.

예약된 접두사는 fig, tbl, lst, tip, nte, wrn, imp, cau, thm, lem, cor, prp, cnj, def, exm, exr, sol, rem, alg, eq, sec입니다.

또한 레이블과 ID에는 밑줄(_)을 사용하지 않는 것이 좋습니다. LaTeX로 PDF를 렌더링할 때 문제가 발생할 수 있기 때문입니다.

Quarto에서는 그림, 표, 방정식, 섹션, 코드 목록, 정리, 증명 등 다양한 요소를 상호 참조할 수 있으며, Knitr와 Jupyter가 생성한 동적 출력에도 동일하게 적용됩니다.

이 페이지에서는 다음 내용을 다룹니다.

@ 구문으로 참조를 작성하는 다양한 방법
LaTeX / PDF 출력에서 참조 목록을 추가하는 방법

이후에는 참조하고 싶은 요소 유형별 구문을 정리합니다.

플로트: 그림, 표, 코드 목록
블록: 콜아웃, 정리와 증명, 방정식
섹션

제목과 참조에 사용되는 텍스트는 옵션으로 조정할 수 있습니다. 예를 들어 “Figure 1”을 “Fig 1” 또는 “fig. 1”로 바꿀 수 있습니다. 자세한 설정 방법은 옵션 문서를 참고하세요.

참조

이 페이지의 예시는 모두 인라인 참조 기본 구문(예: @fig-elephant)을 사용하며, 출력은 “Figure 1”, “Table 1”과 같이 표시됩니다.

인라인 참조 모양은 구문을 바꾸거나 옵션을 설정하여 조정할 수 있습니다. 아래는 여러 구문과 그 결과입니다.

유형	구문	출력
기본	`@fig-elephant`	Figure 1
대문자	`@Fig-elephant`	Figure 1
사용자 정의 접두사	`[Fig @fig-elephant]`	Fig 1
접두사 없음	`[-@fig-elephant]`	1

대문자 구문은 기본 출력에서는 차이가 없지만, 옵션(참조 참조)으로 기본 접두사를 소문자로 바꾼 경우 첫 글자를 대문자로 만들 수 있습니다.

이러한 구문 변형은 그림뿐 아니라 표, 방정식, 정리 등 Quarto의 모든 상호 참조 요소에 적용됩니다.

다음과 같이 여러 상호 참조를 묶어서 사용할 수도 있습니다.

[@fig-elephant; @fig-panther; @fig-rabbit]에서 볼 수 있듯이.

상호 참조 처리 방식을 세부적으로 조정할 수 있는 옵션도 다양합니다. 자세한 내용은 상호 참조 옵션을 참고하세요.

LaTeX / PDF 출력에서는 원시 LaTeX 명령 \listoffigures, \listoftables, \listoflistings를 사용해 문서에 포함된 그림, 표, 코드 목록 등을 차례대로 나열할 수 있습니다. 목록 제목은 lof-title, lot-title, lol-title 상호 참조 옵션으로 조정합니다.

예시는 다음과 같습니다.

---
title: "My Document"
crossref:
  lof-title: "List of Figures"
format: pdf
---

\listoffigures

기본 목록 제목은 위 예시처럼 “List of <유형>” 형식을 따릅니다.

플로트

그림, 표, 코드 목록은 모두 “플로트” 상호 참조로 분류됩니다. 플로트는 렌더링된 문서에서 정의된 위치와 다른 곳에 나타날 수 있으며 보통 캡션을 갖습니다.

플로트 상호 참조에는 간단한 기본 구문 외에도 div 구문을 사용할 수 있습니다. 예를 들어 비디오를 그림처럼 참조하고 싶을 때 div 구문이 유용합니다. 기본 예시는 아래 섹션에 포함되어 있으며, 더 복잡한 예시는 상호 참조 Div 구문에서 확인할 수 있습니다.

그림, 표, 코드 목록을 넘어서는 요소를 참조하려면 사용자 정의 플로트 상호 참조 유형을 만들 수도 있습니다. 자세한 내용은 사용자 정의 플로트 상호 참조를 참고하세요.

그림

개요에서 설명한 것처럼 다음 마크다운으로 상호 참조 가능한 그림을 만들고 참조할 수 있습니다.

![Elephant](elephant.png){#fig-elephant}

@fig-elephant 을 참고해 그림을 확인하세요.

상호 참조 식별자는 반드시 유형(예: #fig-)으로 시작하며 모두 소문자여야 합니다.

Div 문법으로 그림에 크로스레퍼런스를 걸려면 fig-로 시작하는 ID를 가진 fenced div를 만들고, 그 안에 이미지와 캡션을 넣습니다.

::: {#fig-elephant}

![](elephant.png)

An Elephant
:::

그림에서 div 구문을 사용하는 방법은 상호 참조 Div 구문을 참고하세요.

하위그림

여러 개의 하위그림로 구성된 그림이 필요하면 그림을 div로 감싸고(레이블과 캡션 포함) 하위그림마다 레이블과 캡션을 제공합니다. 그러면 전체 그림은 물론 하위그림 하나만 지정해서도 참조할 수 있습니다.

::: {#fig-elephants layout-ncol=2}

![Surus](surus.png){#fig-surus}

![Hanno](hanno.png){#fig-hanno}

유명한 코끼리
:::

@fig-elephants 를 참고해 예시를 살펴보세요. 특히 @fig-hanno 에 주목하세요.

HTML로 렌더링하면 다음과 같습니다.

왼쪽에는 수루스 그림과 '(a) Surus' 캡션, 오른쪽에는 한노 그림과 '(b) Hanno' 캡션이 있으며, 아래에 'Figure 1: Famous elephants'가 가운데 정렬로 표시된 예시

위 예시에서는 layout-ncol 속성을 사용해 두 열 레이아웃을 지정했습니다. 그림 패널 레이아웃에 대한 자세한 내용은 Figures를 참고하세요.

계산 결과

Jupyter와 Knitr가 생성한 그림도 상호 참조할 수 있습니다. 이를 위해 코드 블록 맨 위에 label과 fig-cap 옵션을 추가합니다.

```{python}
#| label: fig-plot
#| fig-cap: "플롯"

import matplotlib.pyplot as plt
plt.plot([1,23,2,4])
plt.show()
```

예를 들어 @fig-plot 을 참조하세요.

선형 플롯 아래 가운데에 'Figure 1: Plot'이 표시되고, 왼쪽 정렬로 'For example, see fig. 1' 텍스트가 이어지는 예시

```{r}
#| label: fig-plot
#| fig-cap: "플롯"

plot(cars)
```

예를 들어 @fig-plot 을 참조하세요.

cars 데이터셋의 속도 대 거리 산점도 아래에 'Figure 1: Plot', 그 아래 왼쪽 정렬로 'For example, see fig. 1'이 표시된 예시

계산된 캡션

동적으로 캡션을 생성해야 한다면 fig-cap 또는 tbl-cap 코드 셀 옵션 대신, 인라인 코드를 크로스레퍼런스 Div 문법과 함께 사용하세요.

한 코드 셀에서 여러 그림을 생성하고 하위그림로 참조할 수도 있습니다. 이때는 주 캡션에 fig-cap, 서브 캡션 목록에 fig-subcap을 지정합니다.

```{python}
#| label: fig-plots
#| fig-cap: "플롯 모음" 
#| fig-subcap:
#|   - "플롯 1"
#|   - "플롯 2" 
#| layout-ncol: 2

import matplotlib.pyplot as plt
plt.plot([1,23,2,4])
plt.show()

plt.plot([8,65,23,90])
plt.show()
```

예시는 @fig-plots 를 참조하세요. 특히 @fig-plots-2 를 확인해 보세요.

두 개의 선형 플롯이 나란히 있으며 각각 '(a) Plot 1', '(b) Plot 2' 캡션과 'Figure 1: Plots' 캡션이 표시된 예시

하위그림 참조 레이블은 메인 청크 레이블을 기반으로 자동 생성됩니다(예: @fig-plots-1, @fig-plots-2).

캡션 없이 식별자만 포함된 하위그림 캡션(예: “(a)”)이 필요하다면 fig-subcap에 배열을 전달하지 말고 true로 설정하면 됩니다.

```{python}
#| label: fig-plots
#| fig-cap: "플롯 모음" 
#| fig-subcap: true
#| layout-ncol: 2
```

표

마크다운 표의 경우, 표 아래에 캡션을 추가하고 캡션 끝에 중괄호로 #tbl- 레이블을 지정합니다. 예:

| Col1 | Col2 | Col3 |
|------|------|------|
| A    | B    | C    |
| E    | F    | G    |
| A    | G    | G    |

: My Caption {#tbl-letters}

See @tbl-letters.

HTML 렌더링 결과:

A table with 3 columns and four rows. The text 'Table 1: My Caption' is above the header column. The text 'See tbl. 1' is aligned to the left underneath the last column.

레이블 접두사

표를 상호 참조하려면 레이블이 반드시 tbl- 접두사로 시작해야 합니다.

Div 문법으로 표에 크로스레퍼런스를 걸려면 tbl-로 시작하는 ID를 가진 fenced div를 만들고, 그 안에 표와 캡션을 넣습니다.

::: {#tbl-letters}

| Col1 | Col2 | Col3 |
|------|------|------|
| A    | B    | C    |
| E    | F    | G    |
| A    | G    | G    |

My Caption

:::

표에서 div 구문을 사용하는 방법은 상호 참조 Div 구문을 참고하세요.

서브테이블

여러 개의 하위 표를 하나의 묶음으로 구성하려면, 기본 ID를 가진 div를 만들고 그 안에 있는 표마다 하위 ID(및 캡션)를 지정하세요. 예:

::: {#tbl-panel layout-ncol=2}
| Col1 | Col2 | Col3 |
|------|------|------|
| A    | B    | C    |
| E    | F    | G    |
| A    | G    | G    |

: First Table {#tbl-first}

| Col1 | Col2 | Col3 |
|------|------|------|
| A    | B    | C    |
| E    | F    | G    |
| A    | G    | G    |

: Second Table {#tbl-second}

Main Caption
:::

See @tbl-panel for details, especially @tbl-second.

HTML 렌더링 결과:

Two tables side-by-side. Both tables have 3 columns and 4 rows. The table on the left is titled '(a) First table'. The table on the right is titled '(b) Second Table'. Centered underneath both tables is the text 'Table 1: Main Caption'. The text 'See tbl. 2 for details, especially tbl. 2 (b)' is aligned to the left underneath that.

표의 “Main Caption”은 div 안 마지막 블록으로 제공된다는 점을 기억하세요.

계산 결과

계산을 통해 생성한 표도 상호 참조할 수 있습니다. 코드 블록에 label과 tbl-cap 옵션을 추가하면 됩니다.

```{r}
#| label: tbl-iris
#| tbl-cap: "아이리스 데이터"

library(knitr)
kable(head(iris))
```

계산된 캡션

동적으로 캡션을 생성해야 한다면 fig-cap 또는 tbl-cap 코드 셀 옵션 대신, 인라인 코드를 크로스레퍼런스 Div 문법과 함께 사용하세요.

한 코드 셀에서 여러 개의 표를 만들고 서브테이블로 참조할 수도 있습니다. tbl-subcap 옵션에 서브 캡션 배열을 지정하세요.

```{r}
#| label: tbl-tables
#| tbl-cap: "표"
#| tbl-subcap:
#|   - "자동차"
#|   - "압력"
#| layout-ncol: 2

library(knitr)
kable(head(cars))
kable(head(pressure))
```

캡션 없이 식별자만 있는 서브테이블(예: “(a)”)이 필요하면 tbl-subcap: true로 지정합니다.

```{r}
#| label: tbl-tables
#| tbl-cap: "표"
#| tbl-subcap: true
#| layout-ncol: 2

library(knitr)
kable(head(cars))
kable(head(pressure))
```

코드 목록

코드 블록을 참조하려면 #lst- 식별자와 함께 lst-cap 속성을 추가합니다.

```{#lst-customers .sql lst-cap="고객 조회"}
SELECT * FROM Customers
```

그다음 고객 데이터베이스를 조회합니다(@lst-customers).

Div 문법으로 코드 목록에 크로스레퍼런스를 걸려면 lst-로 시작하는 ID를 가진 fenced div를 만들고, 그 안에 코드 셀과 캡션을 넣습니다.

::: {#lst-customers}

```{.sql}
SELECT * FROM Customers
```

Customers Query

:::

코드 목록에서 div 구문을 사용하는 방법은 상호 참조 Div 구문을 참고하세요.

실행 가능한 코드 블록을 참조하려면 코드 셀 옵션 lst-label, lst-cap을 추가하세요. lst-label은 크로스레퍼런스 ID를 지정하며 코드 목록으로 인식되도록 반드시 lst- 접두사로 시작해야 합니다. lst-cap은 코드 목록의 캡션을 지정합니다. 예:

```{python}
#| lst-label: lst-import
#| lst-cap: Import pyplot

import matplotlib.pyplot as plt
```

@lst-import...

렌더링하면 다음과 같습니다.

Listing 1: Import pyplot

import matplotlib.pyplot as plt

Listing 1…

코드 셀이 그림이나 표를 생성한다면 lst- 옵션과 label, fig-cap/tbl-cap을 함께 사용해 코드와 결과 모두에 크로스레퍼런스를 걸 수 있습니다.

```{python}
#| label: fig-plot
#| fig-cap: Figure caption
#| lst-label: lst-plot
#| lst-cap: Listing caption

plt.plot([1,23,2,4])
plt.show()
```

The code in @lst-plot produces the figure in @fig-plot.

렌더링 결과:

Listing 2: Listing caption

plt.plot([1,23,2,4])
plt.show()

Listing 2 의 코드가 Figure 1 그래프를 생성합니다.

콜아웃

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-`

정리와 증명

정리는 수학 관련 글과 책에서 자주 사용됩니다. 상호 참조 가능한 정리를 추가하려면 #thm- 레이블(또는 아래에 설명된 다른 정리 유형 레이블)을 지정한 div를 만들고, 블록의 첫 번째 제목이나 name 속성으로 정리 이름을 제공합니다. div 내부에는 필요한 콘텐츠를 자유롭게 포함할 수 있습니다.

::: {#thm-line}

## 직선

임의의 직선(선형 방정식)은 다음과 같이 표현할 수 있습니다.

$$
y = mx + b
$$
:::

@thm-line 을 참고하세요.

'Thereom 1 (Line)... y = mx + b'가 표시된 LaTeX 예시와 'See thm. 1' 텍스트

LaTeX 출력에서는 정리를 조판하기 위해 amsthm 패키지를 사용합니다. 다른 형식에서는 그에 맞는 표현을 사용합니다(위 예시는 HTML 출력입니다).

지원되는 정리 변형은 다음과 같으며 각자 고유한 레이블 접두사를 사용합니다.

레이블 접두사	표시 이름	LaTeX 환경
`#thm-`	Theorem	theorem
`#lem-`	Lemma	lemma
`#cor-`	Corollary	corollary
`#prp-`	Proposition	proposition
`#cnj-`	Conjecture	conjecture
`#def-`	Definition	definition
`#exm-`	Example	example
`#exr-`	Exercise	exercise
`#sol-`	Solution	solution
`#rem-`	Remark	remark
`#alg-`	Algorithm	algorithm

proof 환경도 정리와 비슷한 형식으로 표현되지만 번호가 매겨지지 않으므로 상호 참조할 수 없습니다. 증명을 만들려면 div에 .proof 클래스를 추가하세요.

::: {.proof}
귀납법으로 증명합니다.
:::

정리와 마찬가지로 div의 첫 요소로 제목을 추가하거나 name 속성을 지정해 캡션을 제공할 수 있습니다(보통 환경 제목 뒤 괄호에 표시됨).

LaTeX 출력에서는 amsthm 패키지가 이러한 환경을 조판합니다. 다른 형식에서는 비슷한 표현을 사용하며, CSS로 추가 스타일을 적용할 수 있습니다.

방정식

방정식을 상호 참조하려면 방정식 뒤에 #eq- 레이블을 지정합니다.

Black-Scholes (@eq-black-scholes)은 파생상품, 특히 옵션의 거동을 설명하는 수학 모델입니다:

$$
\frac{\partial \mathrm C}{ \partial \mathrm t } + \frac{1}{2}\sigma^{2} \mathrm S^{2}
\frac{\partial^{2} \mathrm C}{\partial \mathrm S^2}
  + \mathrm r \mathrm S \frac{\partial \mathrm C}{\partial \mathrm S}\ =
  \mathrm r \mathrm C 
$$ {#eq-black-scholes}

Black-Scholes (Equation 1)은 파생상품, 특히 옵션의 거동을 설명하는 수학 모델입니다.

\[ \frac{\partial \mathrm C}{ \partial \mathrm t } + \frac{1}{2}\sigma^{2} \mathrm S^{2} \frac{\partial^{2} \mathrm C}{\partial \mathrm S^2} + \mathrm r \mathrm S \frac{\partial \mathrm C}{\partial \mathrm S}\ = \mathrm r \mathrm C \tag{1}\]

방정식 번호는 \qquad를 통해 방정식 오른쪽 여백에 포함됩니다.

섹션

섹션을 참조하려면 제목에 #sec- 식별자를 추가하세요.

## Introduction {#sec-introduction}

추가 맥락은 @sec-introduction 을 참고하세요.

섹션 상호 참조를 사용할 때는 독자가 번호를 볼 수 있도록 number-sections 옵션을 활성화해야 합니다.

---
title: "My Document"
number-sections: true
---