마크다운 기본

콰르토의 마크다운 문법은 존 그루브(John Grube)의 오리지날 마크다운이 아니라 판독(Pandoc) 마크다운 문법을 사용한다. 판독 마크다운은 확장 프로그램을 사용자가 만들어 기능을 추가할 수 있으므로 훨씬 더 다양한 기능을 지원한다는 장점이 있다. 다만 일반적으로 사용되는 마크다운과는 일부 문법이 다르므로 사용에 주의가 필요하다.

글자 강조

글자를 강조할 때는 단어의 앞과 뒤에 별 기호(*) 또는 밑줄 기호(_)를 붙인다. 기호의 개수에 따라 강조 스타일이 달라진다.

별 기호 자체를 표시해야 할 경우에는 앞에 백슬래시를 사용한다.

sample/c02/markdown/02_markdown_text.qmd 코드

보통 글자

*이탤릭체 글자*  _이탤릭체 글자_

**볼드체 글자** __볼드체 글자__

***이탤릭 + 볼드*** ___이탤릭 + 볼드___

*단어*의 **중간**에 ***기호***가 있어도 가능

\*별표\* 자체를 \*\*표시\*\*할 수 있다.

sample/c02/markdown/02_markdown_text.qmd 결과

보통 글자

이탤릭체 글자 이탤릭체 글자

볼드체 글자 볼드체 글자

이탤릭 + 볼드 이탤릭 + 볼드

단어의 중간에 기호가 있어도 가능

*별표* 자체를 **표시**할 수 있다.

첨자

윗첨자와 아랫첨자는 각각 ^ 기호와 ~ 기호로 둘러싼다. ^ 기호나 ~ 기호 사이의 첨자는 기본적으로 공백이 없어야 한다. 공백이 필요한 경우에는 공백 앞에 백슬래시 기호 \를 붙여야 한다.

sample/c02/markdown/02_markdown_script.qmd 코드

글자^첨자^

글자~첨자~

글자^윗\ 첨자^

글자~아랫\ 첨자~

sample/c02/markdown/02_markdown_script.qmd 결과

글자^첨자

글자_첨자

글자^윗 첨자

글자_{아랫 첨자}

줄

글자에 아래에 밑줄을 표시하려면 해당 부분을 대괄호 기호([, ])로 감싸고 바로 뒤에 {.underline}라는 스타일 표시를 추가한다. 형광펜(하이라이트) 효과를 위해서는 해당 부분을 대괄호 기호([, ])로 감싸고 바로 뒤에 {.mark}라는 스타일 표시를 추가한다. 글자의 가운데에 취소선을 표시하려면 ~~ 기호로 둘러싼다.

sample/c02/markdown/02_markdown_line.qmd 코드

일부 [단어]{.underline}에 밑줄을 치거나 [강조 표시]{.mark}

~~취소 기호~~

sample/c02/markdown/02_markdown_line.qmd 결과

일부 단어에 밑줄을 치거나 강조 표시

취소 기호

그대로 표시

기호나 소스 코드의 변수명 등을 그대로 표시하려면 백틱(backtick) 기호(`)를 사용한다.

sample/c02/markdown/02_markdown_verbatim.qmd 코드

`*단어*의 **중간**에 ***기호***`

`variable_name_01`

sample/c02/markdown/02_markdown_verbatim.qmd 결과

*단어*의 **중간**에 ***기호***

variable_name_01

수식

인라인(inline) 수식은 \(\alpha = 2^{\beta}\)와 같이 $ 기호 사이에 레이텍(LaTeX) 수식을 넣으면 된다. 디스플레이(display) 수식은 $$ 기호를 사용한다.

sample/c02/markdown/02_markdown_equation.qmd 코드

인라인(inline) 수식은 $\alpha = 2^{\beta}$와 같이 `$` 기호 사이에 레이텍(LaTeX) 수식을 넣으면 된다.

디스플레이(display) 수식은 `$$` 기호를 사용한다.

$$
\alpha = 2^{\beta}
$$

sample/c02/markdown/02_markdown_equation.qmd 결과

인라인(inline) 수식은 \(\alpha = 2^{\beta}\)와 같이 $ 기호 사이에 레이텍(LaTeX) 수식을 넣으면 된다.

디스플레이(display) 수식은 $$ 기호를 사용한다.

\[ \alpha = 2^{\beta} \]

하이퍼링크

단순한 하이퍼링크(hyperlink)는 인터넷주소(URL)을 < 기호와 > 기호로 둘러싼다. 실제 링크 주소와 표기가 다른 경우에는 [표기](실제 링크 주소) 형식을 사용한다. 링크 뒤에 {}를 덧붙여서 target 등의 추가적인 속성을 넣을 수 있다.

sample/c02/markdown/02_markdown_link.qmd 코드

기본 하이퍼링크: <https://quarto.org>

링크와 표기가 다른 하이퍼링크: [Quarto](https://quarto.org)

링크 사이트가 새 탭에서 열리는 하이퍼링크: [Quarto](https://quarto.org){target="_blank" style="color: red;"}

sample/c02/markdown/02_markdown_link.qmd 결과

기본 하이퍼링크: https://quarto.org

링크와 표기가 다른 하이퍼링크: Quarto

링크 사이트가 새 탭에서 열리는 하이퍼링크: Quarto

스팬

하이퍼링크와 같이 본문 중에 대괄호를 사용하면 HTML 스팬(span)요소가 된다. 바로 뒤에 중괄호를 덧붙여 스팬의 속성을 지정할 수 있다. # 기호로 아이디를, . 기호로 클래스를 정의할 수도 있다.

sample/c02/markdown/02_markdown_span.qmd 코드

본문 중에 [대괄호]{#span1 style="color:red;"}를 사용하면 HTML 스팬(span) [요소]{#span2 style="font-weight:bold; color:blue;"}가 된다.

sample/c02/markdown/02_markdown_span.qmd 결과

본문 중에 대괄호를 사용하면 HTML 스팬(span) 요소가 된다.

DIV

콜론 3개(:::) 이상을 사용하면 HTML DIV 요소를 정의할 수 있다. 앞부분 콜론 뒤에 중괄호를 사용하여 DIV 요소의 속성을 정의할 수 있고 스팬 요소와 마찬가지로 # 기호로 아이디를, . 기호로 클래스를 정의할 수 있다.

sample/c02/markdown/02_markdown_div1.qmd 코드

콜론 3개(`:::`)를 사용하면 HTML DIV 요소를 정의할 수 있다.


::: {.border style="background-color:orange; padding:1em;"}
여기가 DIV 요소의 내용이다.
:::


앞부분 콜론 뒤에 중괄호를 사용하여 DIV 요소의 속성을 정의할 수 있다.

sample/c02/markdown/02_markdown_div1.qmd 결과

콜론 3개(:::)를 사용하면 HTML DIV 요소를 정의할 수 있다.

여기가 DIV 요소의 내용이다.

앞부분 콜론 뒤에 중괄호를 사용하여 DIV 요소의 속성을 정의할 수 있다.

DIV는 중첩하여 사용할 수 있으며 이 경우 콜론의 개수로 특정 DIV의 시작과 끝을 정의한다.

sample/c02/markdown/02_markdown_div2.qmd 코드

:::: {style="background-color:orange; padding:1em;"}
바깥쪽 DIV 내용입니다.

::::: {style="background-color:red"}
안쪽 DIV 내용입니다.
:::::

::::

sample/c02/markdown/02_markdown_div2.qmd 결과

바깥쪽 DIV 내용입니다.

안쪽 DIV 내용입니다.

제목

첫줄에 # 기호를 쓰면 제목이 된다. # 기호가 1개 인 경우 1 단계 제목이 되고 # 기호가 증가할수록 단계가 올라간다.

sample/c02/markdown/02_markdown_heading.qmd 코드

# 1 단계 제목

## 2 단계 제목

### 3 단계 제목

#### 4 단계 제목

##### 5 단계 제목

###### 6 단계 제목

sample/c02/markdown/02_markdown_heading.qmd 결과

1 단계 제목

2 단계 제목

3 단계 제목

4 단계 제목

5 단계 제목

6 단계 제목

번호 없는 목록

번호 없는 목록을 표시할 때는 -, +, * 기호를 사용한다. 두 칸 이상 들여쓰기를 하면 목록 수준을 바꾼다. 세가지 기호 중 아무것이나 섞어서 사용해도 되지만 같은 수준의 이웃 목록 기호는 같은 것을 사용해야 한다.

sample/c02/markdown/02_markdown_list1.qmd 코드

- 1 단계
  - 2 단계
  - 2 단계

* 1 단계
  - 2 단계
    * 3 단계
  - 2 단계
    + 3 단계
    + 3 단계

sample/c02/markdown/02_markdown_list1.qmd 결과

• 1 단계
  • 2 단계
  • 2 단계
• 1 단계
  • 2 단계
    • 3 단계
  • 2 단계
    • 3 단계
    • 3 단계

번호 있는 목록

번호 있는 목록을 표시할 때는 숫자 또는 # 기호의 뒤에 마침표(.) 또는 닫는 소괄호())를 붙이거나 앞뒤로 소괄호를 붙인다. 실제 목록의 숫자는 코드의 숫자와 아무런 관계없이 순서대로 매겨진다.

번호를 다시 시작하려면 사이에 하나의 문단이 있어야 한다.

sample/c02/markdown/02_markdown_list2.qmd 코드

1. 하나
2. 둘
1. 하나
3. 셋
#. 하나
#. 둘

1) 하나
1) 둘
   (1) 하나
   (1) 둘


(#) 하나
(#) 둘

문단

(#) 새 항목
(#) 새 항목

sample/c02/markdown/02_markdown_list2.qmd 결과

1. 하나
2. 둘
3. 하나
4. 셋
5. 하나
6. 둘

1. 하나
2. 둘
   1. 하나
   2. 둘

1. 하나
2. 둘

문단

1. 새 항목
2. 새 항목

각주

문장에 있는 각주(footnote)는 [^주석숫자]의 형태로 사용한다. 문장내에서는 각주 표시만 하고 나중에 다음과 같이 각주의 내용을 덧붙이면 페이지 하단에 각주가 생성된다. 주석숫자는 주석에 대한 이름 역할만 할 뿐이며 실제 주석에 표시되는 숫자는 주석숫자와 상관없이 순서대로 매겨진다.

sample/c02/markdown/02_markdown_note.qmd 코드

문장에 있는 각주[^1]는 `[^주석숫자]`의 형태로 사용한다.

[^1]: 문장내에서는 각주 표시만 하고 나중에 다음과 같이 각주의 내용을 덧붙이면 페이지 하단에 각주가 생성된다.

주석숫자[^3]는 표시한 숫자와 상관없이 순서대로 번호가 매겨진다.

[^3]: 각주의 내용을 어디에 넣더라도 페이지 하단에 표시한다.

sample/c02/markdown/02_markdown_note.qmd 결과

문장에 있는 각주¹는 [^주석숫자]의 형태로 사용한다.

주석숫자²는 표시한 숫자와 상관없이 순서대로 번호가 매겨진다.

Footnotes

1. 문장내에서는 각주 표시만 하고 나중에 다음과 같이 각주의 내용을 덧붙이면 페이지 하단에 각주가 생성된다.

2. 각주의 내용을 어디에 넣더라도 페이지 하단에 표시한다.