페이지 레이아웃

개요

Quarto는 많은 문서에 잘 맞는 HTML 페이지 기본 레이아웃을 제공합니다. 하지만 기본 레이아웃이 콘텐츠에 맞지 않으면 조정할 수 있습니다.

이 페이지에서 다음을 알아봅니다:

페이지 레이아웃

기본적으로 Quarto HTML 문서는 가독성에 최적화된 너비(보통 600px~900px)로 콘텐츠를 중앙에 표시합니다. 이는 전통적인 기사에 적합한 기본 레이아웃이지만, 다른 유형의 페이지(예: 랜딩 또는 인덱스 페이지)에는 다른 레이아웃을 사용하고 싶을 수 있습니다.

page-layout 옵션으로 사용 레이아웃을 제어할 수 있습니다. 예를 들어:

format: 
  html:
    page-layout: full

다양한 page-layout 옵션은 아래에 설명되어 있습니다.

Article

page-layout: article

Article 레이아웃은 페이지 기반 그리드 레이아웃으로 콘텐츠 영역을 제공하며 여백, 사이드바 영역, 읽기 너비에 최적화된 본문 영역을 포함합니다. 문서 영역의 정확한 크기는 사이드바(있다면)와 여백/복잡한 레이아웃 요소의 유무에 따라 약간씩 달라집니다. 자세한 내용은 Article 레이아웃 가이드를 참고하세요.

Full

page-layout: full

Full 레이아웃은 article 그리드 시스템을 사용하지만, 사이드바와 여백 영역에 콘텐츠가 없으면 해당 영역을 사용하도록 콘텐츠 영역을 자동으로 확장합니다. 이는 읽기 너비로 제한할 필요가 없고 추가 가로 공간의 이점을 누릴 수 있는 레이아웃(예: 랜딩 또는 인덱스 페이지)에 유용합니다.

Custom

page-layout: custom

Custom 레이아웃은 기본 그리드 시스템, 패딩, 여백이 없는 단순한 HTML 콘텐츠 컨테이너를 제공합니다. 제공되는 기본 HTML 프레이밍은 다음과 같습니다:

<div class="page-layout-custom">
  <!-- body content here -->
</div>

웹사이트에서 custom 레이아웃은 내비게이션 사이드바는 포함하지 않지만 사이트 내비게이션 바와 푸터는 포함합니다.

CSS Grid

page-layout: custom을 사용한다면 더 정교한 레이아웃을 만들기 위해 Bootstrap CSS Grid 레이아웃 시스템(Quarto 문서에서 기본 제공됨)을 활용하는 것이 좋습니다.

예를 들어 간단한 2열 그리드는 다음과 같습니다:

::: {.grid}

::: {.g-col-4}
이 열은 페이지의 1/3을 차지합니다
:::

::: {.g-col-8}
이 열은 페이지의 2/3을 차지합니다
:::

:::

Bootstrap CSS Grid 시스템은 반응형, 줄바꿈, 중첩, 열 동작의 세밀한 사용자 지정을 위한 기능을 포함합니다.

이는 기존 Bootstrap 버전에서 사용되던 전통적인 그리드가 아니라 CSS Grid 표준을 기반으로 Bootstrap 5.1에서 새롭게 도입된 레이아웃 시스템입니다. Quarto는 인쇄 문서에서 LaTeX가 제공하는 것과 유사한 더 정교한 레이아웃 기능을 제공하기 때문에 이 새로운 시스템을 사용합니다.

Bootstrap CSS Grid 문서에서 추가 정보를 확인하세요.

그리드 사용자 지정

YAML 옵션과 SCSS로 HTML 문서의 레이아웃 구성 요소 너비를 제어할 수 있습니다. 예를 들어 사이드바의 긴 항목이 줄바꿈된다면 사이드바 너비를 늘리는 것이 좋을 수 있습니다:

사이드바, 본문, 여백의 기본 레이아웃을 표시하는 Quarto 웹사이트 스크린샷.

기본 레이아웃

사이드바에 더 많은 공간을 할당한 변경된 레이아웃의 Quarto 웹사이트 스크린샷.

더 넓은 사이드바

이 변경은 _quarto.yml 파일에 grid 옵션을 추가하여 sidebar-width를 기본값 250px에서 늘려서 수행할 수 있습니다:

_quarto.yml
format:
  html:
    grid:
      sidebar-width: 350px

레이아웃의 네 구성 요소(사이드바, 본문, 여백, 거터)를 제어하는 네 가지 변수가 있습니다.

이 섹션의 나머지에서는 이 구성 요소들과 기본값, 그리고 YAML 또는 SCSS 변수로 사용자 지정하는 방법을 설명합니다. 사용자 지정의 실제 예시는 추가 예제에서 확인할 수 있습니다.

HTML 페이지 레이아웃

Quarto HTML 문서는 왼쪽 사이드바, 문서 본문, 오른쪽 여백, 그리고 이 요소 사이의 공간(거터)으로 구성된 구조로 배치됩니다. 아래 그림과 같습니다:

Quarto 문서 사이트 페이지 스크린샷으로, 사이드바, 본문, 여백 주변에 사각형이 표시되어 있고 요소 사이의 거터가 화살표로 표시됨.

이 네 구성 요소의 너비는 네 가지 변수로 제어됩니다. 이 변수와 기본값은 다음과 같습니다:

레이아웃 구성 요소 너비의 기본값
요소 크기
sidebar-width 250px
body-width 800px
margin-width 250px
gutter-width 1.5em

이 변수의 값은 해당 구성 요소의 표시 너비를 직접 지정하지 않고 최대 기준값을 지정합니다. 최대값은 최소값을 만들기 위해 스케일링되며, 서로 함께 사용되어 다양한 레이아웃 유형(고정 vs. 유동), 반응형 크기(대형 화면 vs. 모바일), 페이지 콘텐츠(여백 콘텐츠 유무)에 따라 각 구성 요소의 크기와 위치를 계산합니다.

구성 요소 너비 사용자 지정

YAML 또는 SCSS 변수로 구성 요소 너비 변수를 제어할 수 있습니다. YAML에서 이 옵션을 설정하려면 grid 옵션을 사용하세요:

format:
  html: 
    grid:
      sidebar-width: 300px
      body-width: 900px
      margin-width: 300px
      gutter-width: 1.5rem

마찬가지로 사용자 정의 테마 scss 파일에서 다음과 같은 변수를 설정할 수 있습니다:

// 왼쪽 사이드바
$grid-sidebar-width: 300px !default;

// 본문
$grid-body-width: 900px !default;

// 오른쪽 여백 바
$grid-margin-width: 300px !default;

// 위 열 사이에 표시되는 거터
$grid-column-gutter-width: 1.5rem !default;

sidebar-width, body-width, margin-width는 다른 크기를 계산할 때 사용되므로 픽셀(px) 단위로 지정해야 합니다. 픽셀 크기를 요구하는 것은 Quarto 레이아웃 접근 방식의 한계이지만, 전체 문서 너비는 보통 글꼴 크기나 다른 상대적 단위보다 브라우저 크기와 반응형 브레이크포인트에 연동되므로 일반적으로 타당합니다.

gutter-width는 픽셀 또는 문서 글꼴 크기에 반응하는 em, rem 같은 다른 단위로 지정할 수 있습니다.

추가 예제

여백에 많은 그림이나 표가 있는 웹사이트에서는 여백 너비를 늘리는 것이 유용할 수 있습니다. 예를 들어 다음 YAML은 margin-width를 기본값보다 200px 늘립니다:

format:
  html:
    grid:
      margin-width: 450px

사이드바, 본문, 여백의 기본 레이아웃을 표시하는 Quarto 웹사이트 스크린샷.

기본 레이아웃

여백에 더 많은 공간을 할당한 변경된 레이아웃의 Quarto 웹사이트 스크린샷.

더 넓은 여백

body-width를 변경하지 않고 margin-width를 변경하면 전체 페이지 너비가 증가합니다(페이지 좌우의 흰 공간이 줄어듭니다). 반대로 전체 페이지 너비를 동일하게 유지하려면 margin-width를 늘린 만큼 body-width를 줄일 수 있습니다:

format:
  html:
    grid:
      margin-width: 450px
      body-width: 600px

사이드바, 본문, 여백의 기본 레이아웃을 표시하는 Quarto 웹사이트 스크린샷.

기본 레이아웃

여백에 더 많은 공간을, 본문에 더 적은 공간을 할당한 변경된 레이아웃의 Quarto 웹사이트 스크린샷.

더 넓은 여백, 더 좁은 본문