상호 참조 Div 구문

개요

상호 참조가 가능한 그림, 표, 코드 목록은 모두 플로트 상호 참조로 분류됩니다. 플로트는 정의된 위치와 다른 위치에 나타날 수 있으며(즉, 떠다닙니다), 보통 캡션을 포함합니다.

Quarto는 자주 쓰이는 플로트 상호 참조에 쓸 수 있는 간결한 구문과 더불어, 보다 일반적인 div 구문도 제공합니다. 콘텐츠를 fence로 둘러싸고 해당 div에 참조 식별자를 속성으로 지정하면 상호 참조 가능한 플로트를 선언할 수 있습니다. 이 div 안의 마지막 문단이 캡션으로 처리됩니다.

Warning

현재 Quarto는 위에서 설명한 플로트에만 이 대체 구문을 지원합니다. 정리, 증명 같은 일부 상호 참조 가능 요소는 본래 div 구문을 사용하지만, block 수준 방정식에는 이 구문을 사용할 수 없습니다.

간단한 예시는 다음 QMD 조각입니다.

::: {#fig-example}

콘텐츠

캡션

:::

렌더링하면 다음(다소 우스운) 그림이 생성됩니다.

콘텐츠

Figure 1: 캡션

이제 이 그림은 @fig-example로 상호 참조할 수 있으며, Figure 1 과 같이 사용할 수 있습니다.

상호 참조로 인식되려면 식별자가 기본 플로트 유형(그림: fig-, 표: tbl-, 목록: lst-) 중 하나로 시작하거나, 사용자 정의 플로트 상호 참조 유형으로 정의되어 있어야 합니다.

그다음에는 @ 구문을 사용해 요소를 참조하면 됩니다.

@fig-example 은 다음 내용을 보여 줍니다...

콘텐츠는 어떤 Quarto 마크다운이든 사용할 수 있습니다. 예를 들어 Figure 2 은 마크다운 표이지만 그림으로 처리됩니다.

::: {#fig-table}

| A | B |
|---|---|
| C | D |

그림처럼 취급되는 표

:::
A B
C D
Figure 2: 그림처럼 취급되는 표

Table 1 은 이미지를 표처럼 취급한 예시입니다.

::: {#tbl-table}

![](table.png)

표처럼 취급되는 이미지

:::
Table 1: 표처럼 취급되는 이미지

Figure 3 는 코드 셀을 그림처럼 취급한 예시입니다.

::: {#fig-code}

```r
library(tidyverse)
starwars |> 
  ggplot(aes(height, mass)) + 
  geom_point()
```

그림처럼 취급되는 코드 셀입니다.

:::
library(tidyverse)
starwars |> 
  ggplot(aes(height, mass)) + 
  geom_point()
Figure 3: 그림처럼 취급되는 코드 셀입니다.

이 페이지에서는 그림, 표, 코드 목록의 일반적인 활용 사례를 살펴본 뒤 다음과 같은 div 구문 응용 방법을 소개합니다.

그림

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

::: {#fig-elephant}

![](elephant.png)

An Elephant
:::

실행 가능한 코드 셀로 만든 그림도 콘텐츠로 포함하면 상호 참조할 수 있습니다.

::: {#fig-line-plot}

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

선형 플롯
:::

위 예시에서는 @fig-line-plot으로 그림을 참조할 수 있지만, 코드가 인라인으로 표시되므로 코드를 참조할 수는 없습니다. 코드를 별도로 참조하려면 div 구문 대신 코드 청크 옵션을 사용하세요. 자세한 내용은 실행 가능한 코드 블록 상호 참조 섹션에서 확인할 수 있습니다.

표

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

::: {#tbl-letters}

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

My Caption

:::

표를 실행 가능한 코드 셀로 생성한다면 셀을 div 내부에 넣으면 됩니다.

::: {#tbl-planets}

```{python}
from IPython.display import Markdown
from tabulate import tabulate
table = [["Sun","696,000",1.989e30],
         ["Earth","6,371",5.972e24],
         ["Moon","1,737",7.34e22],
         ["Mars","3,390",6.39e23]]
Markdown(tabulate(
  table, 
  headers=["Astronomical object","R (km)", "mass (kg)"]
))
```

천체

:::

위 예시에서는 @tbl-planets로 표를 참조할 수 있지만, 코드가 인라인으로 표시되므로 코드를 참조할 수는 없습니다. 코드를 별도로 참조하려면 div 구문 대신 코드 청크 옵션을 사용하세요. 자세한 내용은 실행 가능한 코드 블록 상호 참조 섹션에서 확인할 수 있습니다.

목록

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

::: {#lst-customers}

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

Customers Query

:::

출력이 없는 실행 가능한 코드 셀에도 동일하게 적용됩니다.

::: {#lst-assign}

```{r}
x <- 1
```

R에서의 할당

:::

그러나 출력이 생기면 출력이 상호 참조의 콘텐츠로 간주되고, 코드는 별도로 인라인에 표시됩니다. 다음 코드 셀은 출력을 생성하는 예시입니다.

::: {#lst-assign-output}

```{r}
x <- 1
x
```

R에서의 할당

:::

@lst-assign-output

렌더링하면 코드가 먼저 나오고, 뒤이어 목록 콘텐츠로 출력이 표시됩니다.

코드 셀이 먼저 나오고, Listing 1에 출력이 들어간 화면 예시

코드와 출력을 모두 참조해야 한다면 display 블록과 echo: false 옵션을 준 코드 블록을 조합해 사용할 수 있습니다.

::: {#lst-assign-both}

```r
x <- 1
x
```

```{r}
#| echo: false
x <- 1
x
```

R에서의 할당

:::

출력이 그림이나 표라면 div 구문 대신 코드 셀 옵션을 사용해 코드와 출력을 개별적으로 참조할 수 있습니다. 자세한 내용은 실행 가능한 코드 블록 상호 참조를 참고하세요.

다이어그램

Div 문법으로 다이어그램에 크로스레퍼런스를 걸려면 그림과 동일하게 처리하면 됩니다. 예를 들어 Figure 4 는 다음과 같이 작성합니다.

::: {#fig-simple}

```{dot}
graph {
  A -- B
}
```

This is a simple graphviz graph
:::

A A B B A--B

Figure 4: This is a simple graphviz graph

다이어그램에 그림과는 다른 레이블·번호 체계를 부여하고 싶다면 사용자 정의 크로스레퍼런스 타입을 정의해 보세요.

비디오

비디오에 크로스레퍼런스를 추가하려면 크로스레퍼런스 Div 문법을 사용하고, 그림과 동일하게 취급하면 됩니다. 예:

::: {#fig-cern}

{{< video https://www.youtube.com/embed/wo9vZccmqwc >}}

The video "CERN: The Journey of Discovery"

:::

In @fig-cern...

렌더링 결과는 다음과 같습니다.

Screenshot that shows a YouTube video followed by the caption, 'Figure 1: The video CERN: The Journey of Discovery'. Below the caption is the text 'In Figure 1 ...'.

비디오에 그림과 다른 레이블·번호 체계를 사용하고 싶다면 사용자 정의 크로스레퍼런스 타입을 정의해 보세요.

서브 참조

Note

서브 콘텐츠가 모두 그림 또는 모두 표라면 약식 구문을 사용할 수 있습니다. 자세한 내용은 상호 참조 페이지의 하위그림 및 서브테이블 섹션을 참고하세요.

div를 중첩하면 서브 참조가 있는 요소를 만들 수 있습니다. 다음 예시에서 바깥 div는 fig-subrefs 참조와 기본 캡션을 정의하고, 안쪽 div 두 개는 각각 fig-first, fig-second와 해당 캡션을 정의합니다.

:::: {#fig-subrefs}

::: {#fig-first}

콘텐츠 1

첫 번째 캡션
:::

::: {#fig-second}

콘텐츠 2

두 번째 캡션
:::

주 캡션
::::

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

콘텐츠 1

(a) 첫 번째 캡션

콘텐츠 2

(b) 두 번째 캡션
Figure 5: 주 캡션

주 내용과 서브 콘텐츠 모두 텍스트에서 직접 참조할 수 있습니다.

@fig-subrefs, @fig-first, @fig-second

결과: Figure 5, Figure 5 (a), Figure 5 (b).

레이아웃 속성과 조합하면 각 요소를 참조할 수 있는 복잡한 혼합 콘텐츠 레이아웃을 만들 수 있습니다. 예를 들어 다음과 같습니다.

:::: {#fig-complex layout="[[1, 1], [1]]"}

::: {#fig-elephant}

![](images/elephant.jpg)

이미지 파일
:::

::: {#fig-scatterplot}

```{r}
#| echo: false
plot(1:10)
```

계산 결과로 생성된 그림
:::

::: {#fig-diagram}

```{dot}
//| fig-height: 2
digraph {
  rankdir = "LR";
  Transform -> Visualize
}
```

A diagram
:::

여러 유형의 콘텐츠를 조합한 예시 그림
::::

렌더링 결과는 다음과 같습니다.

두 줄로 구성된 그림 레이아웃 스크린샷. 위 줄에는 코끼리 이미지와 산점도가, 아래 줄에는 Transform에서 Visualize로 이어지는 다이어그램이 있으며 캡션에 (a)~(c)와 'Figure 1: Example figure combining different types of content.'가 표시되어 있음

계산된 캡션

캡션에 계산 결과를 포함하고 싶다면 상호 참조 div 구문과 인라인 코드 표현을 함께 사용하세요. 예시는 다음과 같습니다.

::: {#fig-box}

```{python}
#| echo: false
import matplotlib.pyplot as plt

x = [1, 2, 3, 4, 5, 10]
p = plt.boxplot(x)
plt.show()
```

이 데이터셋에는 `{python} len(x)`개의 관측값이 있습니다.

:::
::: {#fig-box}

```{r}
#| echo: false


x <- c(1, 2, 3, 4, 5, 10)
boxplot(x)

```

이 데이터셋에는 `{r} length(x)`개의 관측값이 있습니다.

:::

조건부 콘텐츠

상호 참조 div 구문과 조건부 콘텐츠를 조합하면 출력 형식에 따라 참조 내용을 다르게 구성할 수 있습니다. 예를 들어 HTML에서는 대화형 JavaScript 플롯을 보여 주고, 그 외 형식에서는 정적 플롯을 표시할 수 있습니다.


::: {#fig-scatterplot}  
  
:::: {.content-visible when-format="html"}

```{r}
# JavaScript 기반 플롯 생성 코드
```
::::

:::: {.content-visible unless-format="html"}

```{r}
# 정적 플롯 생성 코드
```
::::

산점도

:::

@fig-scatterplot