콘텐츠 편집

시각 모드는 Pandoc 마크다운 전체 편집을 지원합니다. 표준 서식 명령(제목, 굵게, 기울임 등)은 일반 워드 프로세서와 동일하게 작동합니다.

핵심 편집 명령에 접근하는 방법은 편집기 사용 섹션을 참고하세요. 또한 모든 편집 명령은 키보드 단축키로도 접근할 수 있습니다.

링크, 이미지, 인용 블록, 목록, 표 등의 편집도 가능하며, Pandoc 속성 지정과 특수 문자/이모지 삽입도 지원합니다.

표 편집

Table 메뉴로 표를 삽입할 수 있습니다. 이후 메인 메뉴나 컨텍스트 메뉴에서 표의 행/열을 삽입하거나 삭제할 수 있습니다:

여러 행/열을 선택하면 삽입 또는 삭제 명령이 그에 맞게 동작합니다. 예를 들어 2행을 삽입하려면 먼저 2행을 선택한 뒤 삽입 명령을 사용하세요.

위처럼 여러 행/열을 선택하면 표 안에서 셀 그룹을 복사/붙여넣기할 수도 있습니다.

목록 편집

앞서 설명했듯이 빈 단락의 시작에 - 또는 1.을 입력하면 새 목록을 만들 수 있습니다. 목록에 항목을 추가하려면 목록 항목에서 Enter를 누르면 됩니다. 빈 목록 항목에서 Enter를 누르면 목록을 종료합니다.

이는 단순한 목록 편집 작업을 다루지만, 중첩 목록 만들기나 기존 목록 항목에 단락/코드 블록 추가 등 다양한 작업이 필요할 수 있습니다. 왼쪽의 빈 목록 항목에서 다음 키보드 제스처를 사용하면 됩니다:

빈 항목 (Enter로 목록 종료)	Tab (하위 목록 추가)	Backspace (블록 추가)

Shift+Tab을 사용하면 목록 항목을 상위 수준으로 올릴 수 있습니다.

촘촘한 목록

마크다운은 일반 목록과 촘촘한 목록을 구분하며, 촘촘한 목록은 항목 간 세로 간격이 더 좁습니다. 마크다운 소스에서는 목록 항목 사이에 빈 줄이 없으면 촘촘한 목록으로 지정됩니다.

시각 모드는 기본적으로 일반 목록을 만듭니다(편집기 옵션에서 이 동작을 변경할 수 있음). ⌥⌘ 9 단축키로 일반 목록과 촘촘한 목록을 전환할 수 있습니다. Format -> Edit Attributes 대화상자(또는 F4 단축키)로도 목록 유형을 변경할 수 있습니다. 마크다운 소스 파일에 이미 촘촘한 목록이 있다면 시각적 편집기에서도 그대로 유지됩니다.

Pandoc 속성

Pandoc의 여러 블록 유형(예: 제목, 코드 블록, div)은 사용자 정의 속성을 지정할 수 있습니다. 속성에는 ID와 클래스 이름, 그리고 출력 형식(예: HTML 태그 속성)으로 전달되는 임의의 키-값 쌍이 포함됩니다. 이러한 블록 유형에서는 커서가 블록 안에 있을 때 오른쪽 상단에 편집 버튼이 나타납니다:

ID와 첫 번째 클래스가 표시됩니다. 편집 버튼을 클릭하거나 F4 단축키를 사용해 속성을 편집할 수 있습니다.

특수 문자

강제 줄바꿈

Insert -> Special Characters -> Hard Line Break 명령 또는 ⇧ Enter 단축키로 강제 줄바꿈을 삽입할 수 있습니다.

줄바꿈 없는 공백

Insert -> Special Characters -> Non-Breaking Space 명령 또는 ⌃ Space 단축키로 줄바꿈 없는 공백을 삽입할 수 있습니다. 줄바꿈 없는 공백은 일반 공백과 구분되도록 다른 배경색으로 표시됩니다.

마크다운의 줄바꿈 없는 공백은 HTML 출력에서   문자로, LaTeX 출력에서 ~ 문자로 표현됩니다.

이모지

이모지를 삽입하려면 Insert 메뉴를 사용하거나 마크다운 단축키와 자동 완성을 사용할 수 있습니다:

Insert -> Special Characters -> Emoji…	마크다운 단축키

이모지의 텍스트 표현을 지원하는 마크다운 형식(예: :grinning:)에서는 텍스트 버전이 작성됩니다. 다른 형식에서는 이모지 문자가 그대로 작성됩니다. 현재 gfm과 hugo(사이트 설정에서 enableEmoji = true) 형식은 이모지 텍스트 표현을 지원합니다.

다른 Quarto 형식에 마크다운 이모지 출력을 추가하려면 문서 메타데이터의 from 옵션에 emoji 확장을 추가하면 됩니다. 예:

---
title: "My Document"
from: markdown+emoji
---

유니코드 기호

임의의 유니코드 문자를 삽입하려면 Insert -> Special Characters -> Unicode…를 사용하세요:

문자 이름으로 검색하거나 유니코드 코드 포인트(예: “U+0420”)를 직접 입력할 수 있습니다.

스마트 문장부호

Pandoc의 smart 확장이 활성화되어 있으면(기본 활성화) 직선 따옴표는 곡선 따옴표로, ---는 em 대시로, --는 en 대시로, ...는 줄임표로 해석됩니다. 또한 “Mr.” 같은 약어 뒤에는 줄바꿈 없는 공백이 삽입됩니다.

시각 모드는 같은 변환을 지원합니다(따라서 ---를 입력하면 em 대시로 변환됩니다). 이런 변환을 원하지 않았다면 백스페이스를 눌러 되돌리면 됩니다.

맞춤법 검사

RStudio의 실시간 맞춤법 검사가 활성화되어 있으면(Spelling 환경설정에서 설정 가능) 오탈자가 입력 중 밑줄로 표시됩니다:

오탈자를 해결하려면 단어를 오른쪽 클릭한 뒤 대체 철자를 선택하거나, 해당 단어를 무시(현재 문서에만 적용)하거나, 사용자 사전에 추가(모든 문서에 적용)할 수 있습니다.

실수로 단어를 무시했다면 다시 오른쪽 클릭해 무시를 해제하세요. 개인 사전을 편집하려면 Spelling 환경설정에 있는 Edit User Dictionary… 버튼을 사용합니다.

주석

문서를 검토할 때는 제안 수정 내용을 인라인으로 남기고 싶을 때가 많습니다. Quarto에서는 HTML 주석(모든 출력 형식에서 무시됨)을 사용해 이를 할 수 있습니다. 시각 모드에는 HTML 주석을 삽입하는 명령과, 주변 텍스트와 구분되도록 하는 특별한 하이라이트 표시가 포함됩니다.

주석에 사용된 # 접두사는 특수 배경 강조 표시를 트리거합니다. #를 제거해도 HTML 주석은 유효하지만 위와 같은 강조 표시가 되지 않습니다.

도구 모음의 Comment 버튼 또는 ⇧⌘ C 단축키로 HTML 주석을 삽입할 수 있습니다. HTML 주석은 렌더링 출력에 나타나지 않으므로 검토용뿐 아니라 문서 내 할 일 메모를 남기는 데도 적합합니다.

CSS 스타일

마크다운으로 작성하면 콘텐츠를 다양한 형식으로 쉽게 배포할 수 있습니다. 이는 마크다운이 콘텐츠 구조와 의미에 초점을 두게 하고, 구체적인 모양을 직접 다루지 않아도 되게 하는 제약 덕분입니다.

하지만 HTML로 배포할 것을 알고 있고, 모양을 더 세밀하게 제어하고 싶을 때가 있습니다. 이 경우 CSS (Cascading Style Sheets)를 마크다운과 함께 사용해 커스텀 서식을 적용할 수 있습니다. 이 섹션에서는 다음을 다룹니다:

문서에 CSS 스타일 정의
문서 내 엔터티에 스타일 적용

CSS가 처음이라면 진행하기 전에 기본을 복습하는 것이 좋습니다.

CSS 스타일은 HTML 출력에만 적용되며 PDF나 MS Word 같은 다른 출력 형식의 서식에는 영향을 주지 않습니다.

스타일 정의

CSS 스타일을 포함하는 가장 좋은 방법은 외부 스타일시트(예: styles.css)를 만든 뒤 문서의 출력 옵션에 포함하는 것입니다. 예:

---
title: "CSS Demo"
format:
  html:
    css: styles.css
---

styles.css 파일은 다음과 같이 생겼을 수 있습니다:

.important {
  color: maroon;
}

.illustration {
  border: 1px solid rgb(230, 230, 230); 
}

CSS 코드 청크로 인라인 스타일을 정의할 수도 있지만, 관리 편의성을 위해 외부 파일 사용을 권장합니다.

마크다운 문서 안에서는 제목, 이미지, div, span 등 다양한 문서 엔터티에 하나 이상의 CSS 클래스를 적용할 수 있습니다. CSS 클래스는 pandoc 속성으로 적용합니다. 엔터티에 클래스를 적용하면 해당 클래스의 CSS 속성에 따라 서식이 결정됩니다.

제목

제목에 CSS 클래스를 추가하려면 커서가 제목에 있을 때 오른쪽 상단에 나타나는 편집 버튼을 사용하거나 F4 단축키를 사용하세요:

Edit Attributes 대화상자에 .important 클래스가 표시됩니다.

제목에 적용한 CSS 클래스는 제목 아래 모든 콘텐츠에 영향을 줍니다(Pandoc가 내용에 HTML <section> 태그를 감싸기 때문). 따라서 제목 클래스는 문서의 전체 섹션에 커스텀 스타일을 적용하는 데 유용합니다.

시각적 편집기는 CSS 클래스로 적용한 스타일을 현재는 렌더링해서 보여주지 않으므로 편집 중에는 커스텀 서식이 보이지 않습니다. 대신 문서를 렌더링해 HTML로 미리볼 때 확인할 수 있습니다.

이미지

표준 Image 대화상자를 사용해 이미지에 CSS 클래스를 적용할 수 있습니다(예: 특별한 테두리를 추가). 이미지를 더블 클릭(또는 이미지를 선택한 상태에서 F4 단축키)하고 원하는 클래스를 적용하세요:

시각적 편집기에서는 CSS 클래스가 적용된 이미지가 표시되지 않지만, HTML로 렌더링할 때는 적용된 스타일이 표시됩니다.

Div

Div는 문서의 특정 영역에 식별자와/또는 스타일을 적용하는 특수 엔터티입니다. Div는 단락과 같은 블록 요소입니다.

Insert -> Div 명령으로 div를 만들 수 있으며, 제목에 속성을 적용하는 것과 동일한 방식(편집 버튼 클릭 또는 F4 단축키)으로 div에 속성(CSS 클래스 포함)을 적용할 수 있습니다:

Div Attributes 대화상자에 .important 클래스가 표시됩니다.

Span

Span은 텍스트 영역에 식별자와/또는 스타일을 적용하는 특수 엔터티입니다. Span은 굵게/기울임과 같은 인라인 서식 표시입니다.

텍스트를 선택한 뒤 Format -> Span 명령으로 span을 만들 수 있습니다:

여기서는 “customize PDF reports” 텍스트에 span을 적용하고 .important CSS 클래스를 사용했습니다. 제목과 이미지와 마찬가지로 시각적 편집기에서는 서식이 표시되지 않지만, 문서를 렌더링하면 확인할 수 있습니다.