웹사이트 내비게이션

개요

웹사이트 내비게이션을 제공하는 방법에는 다음과 같이 다양한 옵션이 있습니다:

상단 내비게이션(내비게이션 바)을 사용하고 필요하면 하위 메뉴를 추가.
페이지 계층을 가진 사이드 내비게이션 사용.
상단과 사이드 내비게이션을 결합(상단 내비게이션이 사이트의 섹션으로 이동하고 각 섹션에 고유한 사이드 내비게이션을 제공).

또한 상단 또는 사이드 내비게이션 인터페이스에 전체 텍스트 검색을 추가할 수 있습니다.

상단 내비게이션

웹사이트에 상단 내비게이션을 추가하려면 _quarto.yml의 website 설정에 navbar 항목을 추가합니다. 예:

website:
  navbar:
    background: primary
    search: true
    left:
      - text: "Home"
        href: index.qmd
      - talks.qmd
      - about.qmd

이 설정은 다음과 같은 내비게이션 바로 표시됩니다:

위 예시는 left 옵션으로 내비게이션 바 왼쪽 항목을 지정했습니다. right 옵션으로 오른쪽 항목을 지정할 수도 있습니다.

내비게이션 바 항목의 텍스트는 대상 문서의 제목에서 가져옵니다. 위 예시에서 index.qmd에 대해 text: "Home"을 지정했음을 참고하세요.

menu(left/right와 동일한 형태의 항목 목록)를 포함하면 내비게이션 바 메뉴를 만들 수 있습니다. 예:

left:
  - text: "More"
    menu:
      - talks.qmd
      - about.qmd

상단 내비게이션에 사용할 수 있는 모든 옵션은 다음과 같습니다:

Option	Description
`title`	내비게이션 바 제목(지정하지 않으면 `site: title` 사용). 내비게이션 바에 제목을 표시하지 않으려면 `title: false`를 사용합니다.
`logo`	제목 왼쪽에 표시할 로고 이미지.
`logo-alt`	로고 이미지 대체 텍스트.
`logo-href`	내비게이션 바 로고/제목의 링크 대상. 기본적으로 로고와 제목은 사이트 루트(`/index.html`)로 링크됩니다.
`background`	배경색(“primary”, “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, 또는 hex 색상).
`foreground`	전경색(“primary”, “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, 또는 hex 색상). 내비게이션 바에 표시되는 내비게이션 요소, 텍스트, 링크의 색상으로 사용됩니다.
`search`	검색 상자 포함 여부(true 또는 false).
`tools`	내비게이션 바 도구 목록(예: GitHub/Twitter 링크 등). 자세한 내용은 Navbar Tools 참고.
`left` / `right`	내비게이션 바 왼쪽/오른쪽에 표시할 항목 목록.
`pinned`	내비게이션 바를 항상 표시(true 또는 false). 기본값 false이며, 사용자가 위로 스크롤할 때 내비게이션 바를 자동으로 표시하는 headroom.js를 사용합니다.
`collapse`	화면이 좁아지면 내비게이션 바 항목을 햄버거 메뉴로 접기(기본값 true).
`collapse-below`	내비게이션 바 항목을 햄버거 메뉴로 접는 반응형 기준점(“sm”, “md”, “lg”, “xl”, 또는 “xxl”, 기본값 “lg”).
`toggle-position`	반응형 모드에서 햄버거 메뉴 위치(“left” 또는 “right”, 기본값 “left”).
`tools-collapse`	화면이 좁아지면 도구를 내비게이션 바 메뉴로 접기.

개별 내비게이션 항목에 사용할 수 있는 옵션은 다음과 같습니다:

Option	Description
`href`	프로젝트 내 파일 또는 외부 URL 링크.
`text`	내비게이션 항목에 표시할 텍스트(제공하지 않으면 문서 `title` 기본값 사용).
`icon`	표준 Bootstrap 5 아이콘 이름(예: “github”, “twitter”, “share” 등).
`aria-label`	내비게이션 항목의 접근성 레이블.
`rel`	rel 속성 값. 공백으로 구분한 여러 값 허용.
`target`	target 속성 값. 예: `_blank`는 새 탭에서 열기.
`menu`	드롭다운 메뉴를 구성할 내비게이션 항목 목록.

HTML 테마로 내비게이션 바 모양을 제어하는 방법은 HTML Themes - Navigation을 참고하세요.

내비게이션 바 도구

일반 내비게이션 외에도 내비게이션 바에는 도구 세트를 표시할 수 있습니다(예: 소셜 액션, GitHub 보기/편집 등). 도구 정의는 아이콘 이름과 클릭 시 이동할 href로 구성됩니다. 아이콘은 1,300개 이상의 Bootstrap Icons 이름을 사용할 수 있습니다.

예:

website:
  navbar:
    tools:
      - icon: twitter
        href: https://twitter.com
      - icon: github
        menu:
          - text: Source Code
            href:  https://code.com
          - text: Report a Bug
            href:  https://bugs.com

Quarto 내비게이션 바 오른쪽에 Twitter와 Github 로고가 표시된 모습. Github 로고를 선택하면 'Source Code'와 'Report a Bug' 메뉴가 나타납니다

내비게이션 바에 지정한 도구는 오른쪽에 표시됩니다. 다크 테마나 리더 모드를 지정한 경우 해당 옵션의 컨트롤도 도구와 함께 표시됩니다.

내비게이션 바가 작은 화면에서 메뉴로 접히면 도구는 메뉴 하단에 배치됩니다.

사이드 내비게이션

사이트에 문서가 몇 개 이상 있다면, 임의의 깊이로 계층을 구성할 수 있는 사이드 내비게이션이 편리합니다.

데스크톱 장치에서 이 페이지를 읽고 있다면 왼쪽에 기본 사이드 내비게이션이 표시됩니다(그 외에는 상단 제목 바를 클릭/터치하여 내비게이션을 펼 수 있음).

웹사이트에 사이드 내비게이션을 추가하려면 _quarto.yml의 website 섹션에 sidebar 항목을 추가합니다. 예:

website:
  sidebar:
    style: "docked"
    search: true
    contents:
      - text: "Introduction"
        href: introduction.qmd
      - section: "Basics"
        href: basics-summary.qmd
        contents:
          - index.qmd
          - basics-knitr.qmd
          - basics-jupyter.qmd
      - section: "Layout"
        contents:
          - layout.qmd
          - layout-knitr.qmd
          - layout-jupyter.qmd
      - section: advanced.qmd
        contents:
          - raw-code.qmd
          - custom-theme.qmd
      - acknowledgment.qmd

사이드 내비게이션에는 두 가지 스타일이 있습니다: “docked”(배경색이 구분되는 사이드바)와 “floating”(본문에 더 가까이 배치). 아래는 각각의 모습입니다:

사이드 내비게이션에 사용할 수 있는 모든 옵션은 다음과 같습니다:

Option	Description
`id`	선택적 식별자(아래 하이브리드 내비게이션에서만 사용).
`title`	사이드바 제목(지정하지 않으면 프로젝트 제목 사용).
`logo`	선택적 로고 이미지.
`logo-alt`	로고 이미지 대체 텍스트.
`logo-href`	사이드바 로고의 링크 대상. 기본적으로 로고와 제목은 사이트 루트(`/index.html`)로 링크됩니다.
`search`	검색 상자 포함 여부(true 또는 false). 상단 내비게이션 바에 검색 상자가 이미 있으면 사이드바에는 표시되지 않습니다.
`tools`	사이드바 도구 목록(예: GitHub/Twitter 링크). 다음 섹션 참고.
`contents`	표시할 내비게이션 항목 목록(일반적으로 상위 항목에 하위 항목 목록이 포함됨).
`style`	“docked” 또는 “floating”.
`type`	“dark” 또는 “light”(배경색과 반대되는 텍스트 색상 힌트).
`background`	배경색(“none”, “primary”, “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, 또는 “white”). 기본값 “light”.
`foreground`	전경색(“primary”, “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, 또는 hex 색상). 사이드바에 표시되는 내비게이션 요소, 텍스트, 링크에 사용됩니다.
`border`	사이드바 테두리 표시 여부. “true” 또는 “false”.
`alignment`	정렬(“left”, “right”, 또는 “center”).
`collapse-level`	기본적으로 사이드바 내비게이션을 접어서 표시할지 여부. 기본값 2는 상위 2단계를 펼치고 3단계 이후를 접습니다.
`pinned`	화면이 좁을 때 사이드바를 펼치는 제목 바를 항상 표시(true 또는 false). 기본값 false이며, 사용자가 위로 스크롤할 때 내비게이션 바를 자동으로 표시하는 headroom.js를 사용합니다.

id나 title이 없는 단일 sidebar 항목은 모든 페이지에 적용되는 전역 사이드바가 됩니다. id나 title이 있는 사이드바는 해당 사이드바의 contents에 포함된 페이지나 sidebar id를 지정한 페이지에만 적용됩니다.

특정 페이지 또는 페이지 그룹에 사이드바를 사용하려면 페이지 프론트매터 또는 _metadata.yml에 sidebar ID를 지정합니다. 예를 들어 id: tutorials 사이드바를 페이지에 포함하려면 다음을 추가합니다:

sidebar: tutorials

HTML 테마로 사이드 내비게이션 모양을 제어하는 방법은 HTML Themes - Navigation을 참고하세요. 사이드바 너비를 제어하려면 Page Layout - Grid Customization을 참고하세요.

자동 생성

위에서는 사이드바 contents를 명시적으로 채우는 방법을 설명했습니다. 파일 시스템에서 사이드바 내비게이션을 자동 생성할 수도 있습니다. 가장 간단한 방법은 contents를 다음과 같이 지정하는 것입니다:

sidebar:
  contents: auto

루트 수준에서 contents: auto를 사용하면 웹사이트의 모든 문서가 내비게이션에 포함됩니다(홈 페이지는 제목 링크로 이동 가능). 내비게이션은 다음 규칙으로 구성됩니다:

내비게이션 항목 제목은 문서의 title 필드에서 읽습니다.
하위 디렉터리는 섹션을 만들고 디렉터리 이름을 기반으로 자동 제목을 생성합니다(대문자화 및 대시/언더스코어를 공백으로 변환). 자동 제목이 마음에 들지 않으면 해당 디렉터리의 index.qmd에 명시적인 title을 제공하세요.
문서 메타데이터에 숫자 order 필드가 없으면 파일명 알파벳 순서입니다.

자동 내비게이션은 하위 디렉터리 항목을 자동으로 포함합니다. 이를 원하지 않으면 루트 디렉터리의 문서만 포함하도록 /*를 사용하세요:

sidebar:
  contents: /*

모든 문서를 포함하는 대신 디렉터리 이름이나 glob 패턴을 지정할 수도 있습니다. 예를 들어 contents의 다음 값들은 모두 유효합니다(두 번째 reports 형태는 비재귀적임):

sidebar:
  contents: reports
  
sidebar:
  contents: reports/*
  
sidebar:
  contents: "*.ipynb"

YAML에서는 *로 시작하는 문자열을 따옴표로 감싸야 합니다(위의 *.ipynb처럼).

사이드바 계층 어디든 자동 생성된 contents를 넣을 수 있습니다. 예를 들어 디렉터리에서 자동 생성되는 섹션을 추가할 수 있습니다:

sidebar:
  contents:
    - about.qmd
    - contributing.qmd
    - section: Reports
      contents: reports

일반 항목 목록 중간에 자동 생성 항목을 넣으려면 auto 속성이 있는 항목을 포함하면 됩니다. 예:

sidebar:
  contents:
    - about.qmd
    - contributing.qmd
    - auto: "*-report.qmd"

auto 항목에 *가 있으므로 올바르게 파싱되도록 따옴표로 감쌉니다.

사이드바 도구

일반 내비게이션 외에도 사이드바에는 도구 세트를 표시할 수 있습니다(예: 소셜 액션, GitHub 보기/편집 등). 도구 정의는 아이콘 이름과 클릭 시 이동할 href로 구성됩니다. 아이콘은 1,300개 이상의 Bootstrap Icons 이름을 사용할 수 있습니다.

예:

website:
  sidebar:
    tools:
      - icon: twitter
        href: https://twitter.com
      - icon: github
        menu:
          - text: Source Code
            href:  https://code.com
          - text: Report a Bug
            href:  https://bugs.com

하이브리드 내비게이션

수십 또는 수백 페이지가 있는 웹사이트라면 상단과 사이드 내비게이션을 함께 사용하는 것이 좋습니다. 상단 내비게이션은 섹션으로 이동하고, 각 섹션에는 고유한 사이드 내비게이션이 있습니다.

이를 위해 sidebar 항목 그룹을 제공하고, navbar 항목에서 각 그룹의 title을 매칭해 연결합니다. navbar에서 링크하는 페이지를 해당 사이드바 그룹의 첫 번째 content로 지정합니다. 예를 들어 Diátaxis Framework를 사용하는 경우 튜토리얼, 하우투, 설명, 레퍼런스 섹션을 다음과 같이 구성할 수 있습니다.

하이브리드 내비게이션에서는 예를 들어 Tutorials를 클릭하면 다음과 같은 페이지로 이동합니다.

이 레이아웃을 구현하려면 사이트 설정이 다음과 같아야 합니다:

website:
  title: ProjectX
  navbar:
    background: primary
    search: true
    left:
      - text: "Home"
        href: index.qmd
      - text: "Tutorials"
        href: tutorials.qmd
      - text: "How-To"
        href: howto.qmd
      - text: "Fundamentals"
        href: fundamentals.qmd
      - text: "Reference"
        href: reference.qmd

  sidebar:
    - title: "Tutorials"
      style: "docked"
      background: light
      contents:
        - tutorials.qmd
        - tutorial-1.qmd
        - tutorial-2.qmd

    - title: "How-To"
      contents:
        - howto.qmd
        # navigation items

    - title: "Fundamentals"
      contents:
        - fundamentals.qmd
        # navigation items

    - title: "Reference"
      contents:
        - reference.qmd
        # navigation items

첫 번째 사이드바 정의에 포함된 옵션(예: style, background)은 다른 사이드바에 자동으로 상속됩니다.

다른 접근 방식으로는 navbar 항목에 드롭다운 메뉴로 사이드바 항목을 제공하는 방법이 있습니다. 이를 위해 각 sidebar 항목에 id를 지정하고, navbar에서 이를 참조합니다.

Note

어떤 사이드바에도 나타나지 않는 페이지는 id나 title이 없는 첫 번째 사이드바를 상속해 표시합니다. 페이지에서 사이드바를 숨기려면 프론트매터에 sidebar: false를 설정하세요.

이 구성을 구현하려면 다음과 같이 설정합니다:

website:
  title: ProjectX
  navbar:
    background: primary
    search: true
    left:
      - text: "Home"
        href: index.qmd
      - sidebar:tutorials
      - sidebar:howto
      - sidebar:fundamentals
      - sidebar:reference

  sidebar:
    - id: tutorials
      title: "Tutorials"
      style: "docked"
      background: light
      collapse-level: 2
      contents: 
        # navigation items
        
    - id: howto
      title: "How-To"
      contents:
        # navigation items
        
    - id: fundamentals
      title: "Fundamentals"
      contents: :
        # navigation items
        
    - id: reference
      title: "Reference"
      contents: 
        # navigation items

브레드크럼

기본적으로 사이드바 내비게이션에서 두 단계 이상 깊은 페이지에는 페이지 제목 위에 브레드크럼이 표시됩니다. 예를 들어 다음 sidebar 정의가 있다면:

website:
  sidebar:
    - contents:
      - section: "Tutorials"
        contents:
          - text: "Tutorial Landing"
            href: tutorials.qmd

tutorials.html 페이지에는 다음과 같은 브레드크럼이 표시됩니다:

웹사이트에서 브레드크럼을 비활성화하려면 bread-crumbs 옵션을 사용합니다:

_quarto.yml

website:
  bread-crumbs: false

개별 페이지에서 브레드크럼을 비활성화할 수도 있습니다:

document.qmd

---
title: Page without breadcrumbs
bread-crumbs: false
---

페이지 네비게이션

여러 페이지가 섹션/하위 섹션에 있는 website라면, 방금 읽은 페이지의 하단에서 다음(또는 이전) 페이지로 이동할 수 있게 하는 것이 편리합니다. 다음 설정으로 활성화할 수 있습니다:

_quarto.yml

website:
  page-navigation: true

활성화되면 다음 또는 이전 페이지가 있을 때(다음/이전 섹션 포함) 페이지 하단에 네비게이션이 표시됩니다. 이 옵션은 책에서는 기본 활성화지만 웹사이트에서는 기본 비활성화입니다.

페이지 수준에서 YAML 헤더에 page-navigation을 지정해 네비게이션을 활성화/비활성화할 수도 있습니다. 예:

basics.qmd

---
page-navigation: false
---

디렉터리 내 모든 페이지의 네비게이션을 제어하려면 _metadata.yml에 page-navigation을 지정합니다:

_metadata.yml

page-navigation: false

구분자

사이드바에 페이지 구분자를 포함하면(섹션 사이 또는 항목 사이), 페이지 내비게이션 컨트롤은 구분자를 넘어서 페이지 순서를 이어 표시하지 않습니다. 예:

website:
  sidebar:
    contents:
      - section: "First Section"
        contents:
          - href: document1.qmd
          - href: document2.qmd
          - href: document3.qmd
      - text: "---"
      - section: "Second Section"
        contents:
          - href: document4.qmd
          - href: document5.qmd
          - href: document6.qmd

사용자가 document3.qmd 하단에 도달하면 이전 문서(document2.qmd)로 돌아가는 내비게이션은 보이지만, document4로 이동하는 다음 내비게이션은 표시되지 않습니다. 이는 섹션 간 자연스러운 순서가 없을 때 유용합니다. 사이드바의 구분선으로 이를 표현해 페이지네이션을 분리하세요.

맨 위로

back-to-top-navigation 옵션을 사용하면 웹사이트 문서 하단에 “맨 위로” 링크를 포함할 수 있습니다. 예:

website:
  back-to-top-navigation: true

페이지별로 back-to-top-navigation: false를 지정해 비활성화할 수도 있습니다.

페이지 푸터

page-footer 옵션을 사용하면 website의 모든 페이지에 공통 푸터를 제공할 수 있습니다. 가장 단순한 푸터는 가운데 정렬되어 더 연한 서체로 표시되는 텍스트를 제공합니다:

_quarto.yml

website:
  page-footer: "Copyright 2021, Norah Jones"

또는 푸터의 left, right, center 영역을 개별적으로 지정할 수 있습니다:

_quarto.yml

website:
  page-footer: 
    left: "Copyright 2021, Norah Jones" 
    right: 
      - icon: github
        href: https://github.com/
      - icon: twitter 
        href: https://twitter.com/

위 예시에서 right 영역에는 텍스트 대신 GitHub와 Twitter로 이동하는 탐색 항목을 포함했습니다. 푸터의 어떤 영역에도 탐색 항목을 포함할 수 있습니다.

background, foreground, border 옵션으로 푸터의 모양을 더 세밀하게 제어할 수 있습니다. 기본적으로 푸터에는 배경색이 없고 상단 테두리가 있습니다. 테두리를 제거하려면 다음과 같이 설정합니다:

_quarto.yml

website:
  page-footer:
    border: false

밝은 배경(예: 내비게이션 바와 맞추기)을 사용하려면 다음과 같이 설정합니다:

_quarto.yml

website:
  page-footer:
    background: light

명시하지 않는 한, 푸터에 표시되는 요소의 색상(foreground)은 푸터 배경과 대비되는 색으로 자동 결정됩니다.

내비게이션 숨기기

완전히 사용자 정의 레이아웃이 필요한 일부 페이지는 내비게이션(navbar, sidebar 또는 둘 다)을 숨길 수 있습니다. 이 경우 페이지 프론트매터에 다음을 추가합니다:

# Hides the sidebar on this page
sidebar: false

# Hides the navbar on this page
navbar: false

리더 모드

사용자가 사이드 내비게이션과 목차를 숨기고 더 집중된 읽기 경험을 원한다면 reader-mode를 활성화할 수 있습니다. 활성화되면 reader-mode 토글이 내비게이션 바(있다면) 또는 사이드바에 표시됩니다. 토글을 누르면 사이드바와 목차가 접힙니다.

상단 내비게이션에 표시된 리더 모드 토글.

reader-mode를 활성화하려면 프로젝트에서 다음을 설정합니다:

website:
  reader-mode: true

사이트 검색

site-navbar 또는 site-sidebar 설정에 search: true를 포함해 사이트 검색을 추가할 수 있습니다. 예:

website:
  sidebar:
    style: "docked"
    search: true
    contents:
      - section: "Basics"
        contents:
          - index.qmd
          - basics-jupyter.md
        # etc

GitHub 링크

사이트 소스 코드가 호스팅된 GitHub 저장소로 연결되는 링크(예: 페이지 편집, 이슈 보고 등)를 추가할 수 있습니다. 이를 위해 repo-url과 repo-actions의 하나 이상의 액션을 지정합니다. 예:

website:
  repo-url: https://github.com/quarto-dev/quarto-demo
  repo-actions: [edit, source, issue]

링크는 페이지 목차 바로 아래에 표시됩니다:

Quarto 문서 스크린샷. 오른쪽 목차 아래에 'Edit this page', 'View source', 'Report an issue' 옵션이 있으며, 'Edit this Page' 왼쪽에 Github 아이콘이 있습니다.

저장소 링크 동작을 사용자 정의할 수 있는 옵션은 다음과 같습니다:

Option	Description
`repo-subdir`	소스 파일이 포함된 저장소 하위 디렉터리(기본값 루트).
`repo-branch`	소스 파일이 있는 저장소 브랜치(기본값 `main`)
`issue-url`	‘Report an Issue’ 액션의 명시적 URL.
`repo-link-target`	저장소 액션 링크에 사용할 `target` 속성. 예: 새 탭/창으로 열려면 “_blank”.
`repo-link-rel`	저장소 액션 링크에 사용할 `rel` 속성.

특정 페이지에서 GitHub 링크를 숨기려면 문서 YAML에 repo-actions: false를 설정합니다:

page.qmd

---
repo-actions: false
---

리디렉션

사이트의 페이지 이름을 바꾸거나 이동하면 기존 링크가 깨지지 않도록 이전 URL에서 새 URL로 리디렉션을 만들 수 있습니다. aliases를 추가해 이전 페이지에서 새 페이지로 매핑합니다.

Note

리디렉션은 aliases에 지정한 경로에 직접 생성되는 HTML 파일입니다. 원본 페이지의 .md 또는 .qmd 확장자가 아닌 .html 확장자를 사용해야 합니다.

예를 들어 page.qmd를 renamed-page.qmd로 이름 변경했다면, renamed-page.qmd에 다음 aliases 항목을 추가해 리디렉션을 만들 수 있습니다:

renamed-page.qmd

---
title: "Renamed Page"
aliases:
  - page.html
---

이는 사이트의 콘텐츠를 다른 디렉터리 구조로 재구성하거나, 큰 문서를 여러 개로 나누는 경우에도 유용합니다.

새 디렉터리 구조로 재구성할 때는 선행 /가 있는 절대 경로를 지정해야 할 수 있습니다. 예를 들어 /old-directory/index.md를 /new-directory/index.md로 이동했다면:

/new-directory/index.md

---
title: "Reorganized page"
aliases: 
  - "/old-directory/index.html"
---

큰 문서를 여러 개로 나눌 때는 새 페이지로 분리한 섹션의 URL 해시를 aliases에 포함할 수 있습니다. 예:

learning-more.qmd

---
title: "Learning More"
aliases:
  - overview.html#learning-more
---

Tip

배포 환경에 따라 패턴 기반 리디렉션을 정의할 수 있는 더 강력한 도구가 있을 수 있습니다. 예: Netlify _redirects 파일 또는 .htaccess 파일. 사용하는 호스트 문서에서 “redirects”를 검색해 사용 가능한 도구가 있는지 확인하세요.

404 페이지

브라우저가 요청한 웹페이지를 찾지 못하면 파일을 찾을 수 없다는 404 오류를 표시합니다. 기본 404 페이지는 다소 건조할 수 있으므로, 더 친절한 메시지와 안내를 제공하는 사용자 정의 페이지를 만들 수 있습니다.

대부분의 웹 호스팅 플랫폼(예: Netlify, GitHub Pages 등)은 웹사이트 루트의 404.html 파일을 사용자 정의 오류 페이지로 사용합니다. Quarto 웹사이트에서는 프로젝트 루트에 404.qmd 마크다운 파일을 만들어 사용자 정의 404 페이지를 포함할 수 있습니다. 예:

---
title: Page Not Found
---

The page you requested cannot be found (perhaps it was moved or renamed).

You may want to try searching to find the page's new location.

원하는 모양과 레이아웃을 얻기 위해 404.qmd 파일에서 마크다운과 함께 HTML을 사용할 수도 있습니다.

404 페이지는 사이트의 크롬(글꼴, CSS, 레이아웃, 내비게이션 등) 안에 표시됩니다. 이는 404 오류를 보았을 때 사용자가 사이트를 완전히 떠난 느낌을 받지 않도록 하기 위함입니다. 이런 동작을 원하지 않는다면 404.qmd 대신 404.html을 제공하세요.

인기 있는 웹사이트들의 404 페이지 예시는 https://blog.fluidui.com/top-404-error-page-examples/에서 확인할 수 있습니다.

루트가 아닌 사이트 경로

웹사이트가 도메인 루트(예: https://example.com/)에서 제공되는 경우 위에서 설명한 404.qmd만 있으면 사용자 정의 404 페이지가 만들어집니다.

하지만 웹사이트가 도메인 루트가 아니라면 404 페이지에서 리소스(예: CSS)가 올바르게 해석되도록 추가 설정이 필요합니다.

예를 들어 사이트가 https://example.com/mysite/에서 제공된다면 _quarto.yml의 website 설정에 다음을 추가합니다:

website:
  title: "My Site"
  site-path: "/mysite/"

이미 site-url을 제공하고 있다면(사이트 맵 및 소셜 메타데이터 미리보기 이미지를 생성하는 데 필요), site-url에 경로를 포함하는 것만으로 충분합니다:

website:
  title: "My Site"
  site-url: "https://example.com/mysite/"