기사 레이아웃

개요

Quarto는 다음 작업을 위한 다양한 페이지 레이아웃 옵션을 제공합니다.

본문 영역을 채우기
본문 영역을 넘어 확장하기
페이지 전체 폭 사용
문서 여백 활용
페이지너블 포맷에서 가로 모드 사용

Quarto는 페이지 레이아웃을 설명하기 위해 컬럼 개념을 사용합니다(본문 컬럼, 여백 컬럼 등). 아래에서 각 컬럼에 콘텐츠를 배치하는 방법을 설명합니다. 폭을 조정하려면 페이지 레이아웃 - 그리드 커스터마이징을 참고하세요.

여기 소개하는 레이아웃은 모두 HTML에서 작동하며 상당수는 PDF/LaTeX에서도 사용할 수 있습니다. 자세한 내용은 PDF/LaTeX 레이아웃 문서를 참고하십시오.

본문 컬럼

기본적으로 요소는 본문 컬럼에 배치되며, 아래처럼 콘텐츠 영역을 채웁니다.

.column-body

필요하다면 .column-body-outset 클래스를 사용해 본문 영역 바깥으로 약간 확장할 수 있습니다. 예:

:::{.column-body-outset}
Outset content...
:::

.column-body-outset

페이지 컬럼

콘텐츠 폭을 더 넓히고 싶다면 .column-page 클래스를 사용하세요. 전체 페이지를 다 차지하지는 않지만 본문보다 훨씬 넓어집니다.

.column-page

예를 들어 널찍한 이미지를 배치하려면:

:::{.column-page}
![](images/elephant.jpg)
:::

Three walking elephants in silhouette against the backdrop of a sunset.

계산 결과를 페이지 컬럼에 배치하려면 코드 셀 옵션에서 지정할 수 있습니다. 예:

```{r}
#| column: page

knitr::kable(
  mtcars[1:6, 1:10]
)
```

	mpg	cyl	disp	hp	drat	wt	qsec	vs	am	gear
Mazda RX4	21.0	6	160	110	3.90	2.620	16.46	0	1	4
Mazda RX4 Wag	21.0	6	160	110	3.90	2.875	17.02	0	1	4
Datsun 710	22.8	4	108	93	3.85	2.320	18.61	1	1	4
Hornet 4 Drive	21.4	6	258	110	3.08	3.215	19.44	1	0	3
Hornet Sportabout	18.7	8	360	175	3.15	3.440	17.02	0	0	3
Valiant	18.1	6	225	105	2.76	3.460	20.22	1	0	3

추가로 .column-page-inset 클래스를 사용하면 페이지 가장자리에서 약간 여백을 줄 수 있습니다.

.column-page-inset

스크린 컬럼

전체 페이지 폭을 여백 없이 사용하려면 .column-screen 클래스를 사용하거나 코드 셀 옵션에서 column: screen을 지정합니다. 예:

::: {.column-screen}
![A full screen image](/image.png)
:::

.column-screen

다음 코드는 페이지 전체에 Leaflet 지도를 표시합니다.

```{r}
#| column: screen

library(leaflet)
leaflet() %>%
  addTiles() %>%  # Add default OpenStreetMap map tiles
  addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R")
```

스크린 인셋

풀 폭 느낌을 유지하면서 여백을 남기려면 inset 또는 inset-shaded 수정자를 사용할 수 있습니다. 예:

::: {.column-screen-inset}
![A full screen image](/image.png)
:::

.column-screen-inset

screen-inset-shaded는 전체 폭에 연한 배경을 적용합니다. 예:

```{r}
#| column: screen-inset-shaded

library(leaflet)
leaflet() %>%
  addTiles() %>%  # Add default OpenStreetMap map tiles
  addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R")
```

screen-inset-shaded 같은 컬럼 레이아웃은 고급 그림 배치와도 호환됩니다. 예를 들어 여러 그림을 가로로 배치해 문서 전체에 펼칠 수 있습니다.

```{r}
#| column: screen-inset-shaded
#| layout-nrow: 1

plot(cars)
plot(iris)
plot(pressure)
```

여백 콘텐츠

Quarto 문서의 오른쪽 여백에 콘텐츠를 배치할 수 있습니다. 예를 들어 .column-margin 클래스로 이미지를 여백에 넣을 수 있습니다.

::: {.column-margin}
![A margin image](image.png)
:::

.column-margin

텍스트에도 사용할 수 있습니다.

::: {.column-margin}
We know from *the first fundamental theorem of calculus* that for $x$ in $[a, b]$:

$$\frac{d}{dx}\left( \int_{a}^{x} f(u)\,du\right)=f(x).$$
:::

We know from the first fundamental theorem of calculus that for \(x\) in \([a, b]\):

\[\frac{d}{dx}\left( \int_{a}^{x} f(u)\,du\right)=f(x).\]

여백 그림

코드 셀에서 생성한 그림은 column: margin 옵션으로 여백에 배치할 수 있습니다. 여러 그림을 생성한다면 각각 여백으로 이동합니다.

```{r}
#| label: fig-mtcars
#| fig-cap: "MPG vs horsepower, colored by transmission."
#| column: margin

library(ggplot2)
mtcars2 <- mtcars
mtcars2$am <- factor(
  mtcars$am, labels = c('automatic', 'manual')
)
ggplot(mtcars2, aes(hp, mpg, color = am)) +
  geom_point() +
  geom_smooth(formula = y ~ x, method = "loess") +
  theme(legend.position = 'bottom')
```

Figure 1: MPG vs horsepower, colored by transmission.

여백 테이블

column: margin을 지정하면 테이블도 여백에 배치할 수 있습니다.

```{r}
#| column: margin

knitr::kable(
  mtcars[1:6, 1:3]
)
```

	mpg	cyl	disp
Mazda RX4	21.0	6	160
Mazda RX4 Wag	21.0	6	160
Datsun 710	22.8	4	108
Hornet 4 Drive	21.4	6	258
Hornet Sportabout	18.7	8	360
Valiant	18.1	6	225

다중 출력

특정 출력 유형(예: 그림)을 여백에 배치할 수도 있습니다. 아래 코드는 mtcars 일부를 표로 보여 주고, 표 옆 여백에 그래프를 생성합니다.

```{r}
#| fig-column: margin

mtcars2 <- mtcars
mtcars2$am <- factor(
  mtcars$am, labels = c('automatic', 'manual')
)

knitr::kable(
  mtcars[1:6, 1:6]
)

library(ggplot2)
ggplot(mtcars2, aes(hp, mpg, color = am)) +
  geom_point() +
  geom_smooth(formula = y ~ x, method = "loess") +
  theme(legend.position = 'bottom')
```

	mpg	cyl	disp	hp	drat	wt
Mazda RX4	21.0	6	160	110	3.90	2.620
Mazda RX4 Wag	21.0	6	160	110	3.90	2.875
Datsun 710	22.8	4	108	93	3.85	2.320
Hornet 4 Drive	21.4	6	258	110	3.08	3.215
Hornet Sportabout	18.7	8	360	175	3.15	3.440
Valiant	18.1	6	225	105	2.76	3.460

페이지 분할

pagebreak 숏코드를 사용하면 문서에 네이티브 페이지 분할을 삽입할 수 있습니다(LaTeX의 \newpage, Word의 페이지 분할, HTML의 page-break-after: always CSS 등).

page 1

{{< pagebreak >}}

page 2

네이티브 페이지 분할은 HTML, LaTeX, ConTeXt, MS Word, Open Document, ePub에서 지원됩니다(그 외 포맷에는 폼 피드 문자 \f가 삽입됨).

여백 참고문헌

각주와 참고문헌은 일반적으로 문서 끝에 나타나지만, front matter에서 다음 옵션¹을 설정하면 여백에 배치할 수 있습니다.

¹ 참고문헌 위치는 블록/섹션/문서 하단 등 다른 위치로도 지정할 수 있습니다.

---
reference-location: margin
citation-location: margin
---

이 옵션을 사용하면 각주와 인용이 페이지 하단 대신 문서 여백에 배치됩니다. 예를 들어 Xie, Allaire, and Grolemund (2018) 을 인용하면 참고문헌 항목이 여백에 표시됩니다.

Xie, Yihui, J. J. Allaire, and Garrett Grolemund. 2018. R Markdown: The Definitive Guide. Boca Raton, Florida: Chapman; Hall/CRC. https://bookdown.org/yihui/rmarkdown.

가필 내용

가필(asides)은 본문 옆에 내용을 배치하는 방법입니다. 각주와 비슷하지만 숫자 표시는 없습니다.

이 예시는 aside 클래스를 사용해 여백에 배치했지만 각주 번호가 없습니다.

[This is a span that has the class `aside` which places it in the margin without a footnote number.]{.aside}

여백 캡션

그림과 표는 본문에 두되 캡션만 여백에 배치할 수도 있습니다. 코드 셀 또는 문서 front matter에서 cap-location: margin을 사용하세요. 예:

```{r}
#| label: fig-cap-margin
#| fig-cap: "MPG vs horsepower, colored by transmission."
#| cap-location: margin

library(ggplot2)
mtcars2 <- mtcars
mtcars2$am <- factor(
  mtcars$am, labels = c('automatic', 'manual')
)
ggplot(mtcars2, aes(hp, mpg, color = am)) +
  geom_point() +
  geom_smooth(formula = y ~ x, method = "loess") +
  theme(legend.position = 'bottom')
```

Figure 2: MPG vs horsepower, colored by transmission.

콘텐츠 확장

body, page, screen 컬럼의 right/left 변형을 사용하면 문서 좌·우 한쪽으로만 콘텐츠를 확장할 수 있습니다. 각 클래스는 아래와 같습니다.

.column-body-outset-right

.column-page-inset-right

.column-page-right

.column-screen-inset-right

.column-screen-right

.column-body-outset-left

.column-page-inset-left

.column-page-left

.column-screen-inset-left

.column-screen-left

위 클래스 중 하나를 div에 적용하면 해당 방향으로 콘텐츠를 넘길 수 있습니다. 실행 코드 셀에서는 column 옵션으로 동일하게 제어할 수 있습니다.

```{r}
#| column: screen-inset-right

library(leaflet)
leaflet() %>%
  addTiles() %>%  # Add default OpenStreetMap map tiles
  addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R")
```

옵션 참조

전역 옵션

일부 레이아웃 옵션은 문서 YAML에서 전역으로 설정할 수 있습니다. 예:

---
fig-cap-location: margin
reference-location: margin
---

아래 옵션은 현재 margin만 지원하며, 해당 요소를 여백에 배치하도록 지시합니다.

옵션 \| 설명
`reference-location`	각주 위치(기본값 `document`). [`document` \| `section` \| `block` \| `margin` ]
`citation-location`	인용 위치(기본값 `document`). [`document` \| `margin` ]
`cap-location`	그림·표 캡션 위치. 그림 기본값은 `bottom`, 표는 `top`입니다. [`top` \| `bottom` \| `margin`]
`fig-cap-location`	그림 캡션 위치(기본값 `bottom`). [`top` \| `bottom` \| `margin`]
`tbl-cap-location`	표 캡션 위치(기본값 `top`). [`top` \| `bottom` \| `margin`]

코드 셀 옵션

코드 셀별로 레이아웃 컬럼을 설정해 해당 셀의 출력 배치를 제어할 수 있습니다.

```{r}
#| column: page

plot(cars)
```

옵션	설명
`column`	코드 셀 출력에 사용할 컬럼(아래 컬럼 옵션 참고).
`fig-column`	코드 셀이 생성한 그림에 사용할 컬럼.
`tbl-column`	코드 셀이 생성한 표에 사용할 컬럼.
`cap-location`	해당 코드 셀이 생성한 그림/표 캡션 위치. 기본값은 그림 `bottom`, 표 `top`. [`top` \| `bottom` \| `margin`]
`fig-cap-location`	해당 코드 셀의 그림 캡션 위치(기본값 `inline`). [`inline` \| `margin`]
`tbl-cap-location`	해당 코드 셀의 표 캡션 위치(기본값 `inline`). [`inline` \| `margin`]

클래스 사용

전역 설정이나 코드 셀 옵션 외에도 .column- 접두사가 붙은 레이아웃 클래스를 div에 적용해 컬럼을 직접 사용할 수 있습니다.

::: {.column-margin}
This content will appear in the margin!
:::

사용 가능한 컬럼

사용 가능한 컬럼 지정자는 다음과 같습니다.

Column	Code Cell `column`	Class Name
Body	`column: body column: body-outset column: body-outset-left column: body-outset-right`	`.column-body .column-body-outset .column-body-outset-left .column-body-outset-right`
Page Inset	`column: page-inset column: page-inset-left column: page-inset-right`	`.column-page-inset .column-page-inset-left .column-page-inset-right`
Page	`column: page column: page-left column: page-right`	`.column-page .column-page-left .column-page-right`
Screen Inset	`column: screen-inset column: screen-inset-shaded column: screen-inset-left column: screen-inset-right`	`.column-screen-inset .column-screen-inset-shaded .column-screen-inset-left .column-screen-inset-right`
Screen	`column: screen column: screen-left column: screen-right`	`.column-screen .column-screen-left .column-screen-right`
Margin	`column: margin`	`.column-margin`

PDF/LaTeX 레이아웃

앞서 소개한 레이아웃 대부분은 HTML과 PDF 모두에서 작동하지만 일부는 HTML 전용입니다. HTML에서는 모든 컬럼을 사용할 수 있고, PDF/LaTeX로 렌더링할 때는 적절한 컬럼(주로 본문과 오른쪽 여백)에 자동으로 매핑됩니다. 매핑 방식은 다음과 같습니다.

Any column that uses the right margin (e.g. page, screen, screen-right, etc.) will be rendered as page-right in LaTeX.
Any column that uses the left margin will be rendered as normal body content.

페이지 여백

여백을 사용하거나 페이지를 가로지르는 콘텐츠가 있는 PDF를 렌더링할 때 Quarto는 기본 LaTeX 문서 클래스(KOMA scrartcl, scrreport, scrbook)의 페이지 여백을 자동으로 조정해 본문을 조금 좁히고 여백을 넓혀 줍니다. 표준 용지 크기에 맞춰 대부분 콘텐츠에 적합한 페이지 구성이 됩니다.

페이지 여백을 직접 제어하려면 front matter에서 geometry 옵션을 설정하세요. 예:

---
geometry:
  - left=.75in
  - textwidth=4.5in
  - marginparsep=.25in
  - marginparwidth=2.25in
---

이 옵션으로 내장 문서 클래스의 여백을 수정하거나 다른 클래스의 여백을 구성할 수 있습니다.

렌더링된 PDF에서 페이지 여백을 확인하려면 아래처럼 geometry 옵션에 showframe을 추가하세요.

---
geometry:
  - showframe
---

코드 블록

여백을 사용하는 PDF를 렌더링하면 Quarto가 코드 블록 스타일을 자동으로 조정해 배경 대신 왼쪽 테두리를 사용합니다.

이렇게 하면 코드 블록 배경이 여백으로 확장되지 않아도 코드가 여백을 넘길 수 있어 시각적 문제가 생기지 않습니다.

이 동작을 비활성화하려면 front matter에 code-block-border-left: false를 설정하세요.

가로 모드

docx, pdf, typst 포맷에서는 landscape 클래스를 가진 fenced div로 감싸면 해당 부분만 가로 모드로 전환할 수 있습니다.

---
format:
  docx: default
  typst: default
  pdf: default
---

This will appear in portrait mode.

::: {.landscape}

This will appear in landscape.

:::

This will appear in portrait mode again.

옵션 \| 설명
`reference-location`	각주 위치(기본값 `document`). [`document` \| `section` \| `block` \| `margin` ]
`citation-location`	인용 위치(기본값 `document`). [`document` \| `margin` ]
`cap-location`	그림·표 캡션 위치. 그림 기본값은 `bottom`, 표는 `top`입니다. [`top` \| `bottom` \| `margin`]
`fig-cap-location`	그림 캡션 위치(기본값 `bottom`). [`top` \| `bottom` \| `margin`]
`tbl-cap-location`	표 캡션 위치(기본값 `top`). [`top` \| `bottom` \| `margin`]