티스토리 뷰

옵시디언 사용기2 - 마크다운 문법

Kimyo 2022. 9. 2. 00:43
옵시디언 사용기 관련 문서
  1. 옵시디언 장점 및 단점
  2. 마크다운 문법
  3. 단축키 극한 활용
  4. 플러그인 총집합
  5. 메타데이터 관리(프론트매터)
  6. 별칭 및 태그 관리
  7. 검색 문법
  8. 데이터뷰
  9. 데이터뷰(인라인함수)
  10. 템플릿(서식) 플러그인

옵시디언이 매력적인 이유 중에 하나는 마크다운 기반의 편집기란 것입니다. 마크다운은 그 자체로도 가독성이 좋은 문서일 뿐만 아니라 마크업(Markup: HTML 로의 전환)을 통해 원하는 디자인의 문서로 변신할 수도 있습니다.

다만, 제대로 사용하기 위해서는 약간의 학습이 필요한데요. 아래 부분에 마크다운에 필요한 내용을 정리해보았습니다.

목차

    마크다운(Markdown)이란?

    마크다운은 어느 정도 디자인이 가미된 문서를 빠르고 가볍게 작성하기 위한 마크업 언어입니다. 한글(HWP)이나 워드(WORD) 프로그램을 사용하면 복잡하고 예쁜 문서를 만들 수 있지만, 용량도 크고 전용 프로그램이 없으면 확인이 불가능합니다.

    마크다운 문서는 기본적으로 텍스트(txt) 문서이지만, 간단한 서식(제목, 글머리기호, 강조)에 관한 기호들을 포함하고 있습니다.

    • 마크다운 문서를 HTML 문서로 변환하여 주고, 여기에 스타일(CSS)을 입힐 수 있는 적절한 뷰어가 있다면 마크다운은 매우 가벼우면서도 깔끔한 문서를 보여줍니다.
    • 그리고 기본적으로 텍스트 문서이기 때문에 뷰어가 없더라도 내용 확인이 가능합니다.

    예를 들어, 지금 작성한 부분을 마크업되기 이전의 마크다운 상태로 보면 다음과 같습니다.

    ## 마크다운(Markdown)이란?

마크다운은 어느 정도 **디자인이 가미된 문서**를 빠르고 가볍게 작성하기 위한 **마크업 언어**입니다. 한글(HWP)이나 워드(WORD) 프로그램을 사용하면 복잡하고 예쁜 문서를 만들 수 있지만, 용량도 크고 전용 프로그램이 없으면 확인이 불가능합니다.

마크다운 문서는 **기본적으로 텍스트(txt) 문서**이지만, 간단한 서식(제목, 글머리기호, 강조)에 관한 기호들을 포함하고 있습니다.

* 마크다운 문서를 HTML 문서로 변환하여 주고, 여기에 스타일(CSS)을 입힐 수 있는 적절한 뷰어가 있다면 마크다운은 매우 가벼우면서도 깔끔한 문서를 보여줍니다. 
* 그리고 기본적으로 텍스트 문서이기 때문에 뷰어가 없더라도 내용 확인이 가능합니다. 

예를 들어, 메모장만 있어도 마크다운으로 작성한 문서는 다음과 같이 읽을 수 있습니다.

    그런데, 이 문서를 마크업(HTML으로 전환)해서 적당한 CSS 테마를 입혀서 보면 또 아래와 같습니다.

    이처럼 마크업되기 이전에도 가독성 좋은 문서를 작성할 수 있으며, 마크업 이후에는 다양한 디자인이 가능해지기 때문에 마크다운은 원하는 문서를 매우 신속하게 작성할 수 있습니다.

    마크다운(Markdown) 문법 총정리 (12가지)

    마크다운에 안타까운 점은 모두가 인정하는 표준이 없다는 점입니다. 때문에 마크다운은 다양한 버전이 존재하고, 어느 한 쪽에서 잘 작동하는 문법이 다른 한 쪽에서는 작동하지 않을 수도 있습니다.

    초기의 마크다운은 콘솔(DOS) 환경에서도 읽기 좋은 문서를 작성하기 위한 수단에 불과했습니다. 그 때문에 #, *, +, -, _ 와 같이 간단한 기호들로 문서를 보기좋게 만들수만 있으면 뭐든 그만이었습니다.

    따라서 누구는 글머리 기호에 * 를 쓰고, 누구는 + 를 쓰는 등 편한데로 쓰던 구석이 있었기 때문에 통일된 문법이 아직 만들어지지 않은 것입니다.

    이제부터 정리할 마크다운 문법은 마크다운 문법 중에서도 가장 자주 쓰이며 범용적으로 쓰이는 문법들입니다. 대부분의 마크다운 편집기에서 통용되지만, 일부 작동하지 않는 편집기가 있음을 감안해야합니다.

    1. 제목(h1, h2, h3 등)에 관한 문법

    제목 표시 방법은 크게 2가지가 있습니다. #(sharp) 기호를 사용하는 방법과 -(대시) 기호를 사용하는 방법입니다.

    < 마크다운 >

    # 제목 1은 # 1개로 표시합니다.
## 제목 2는 # 2개로 표시합니다.
### 제목 3은 # 3개로 표시합니다.

최대 샵 6개로 제목 6까지 표시할 수 있습니다.

    < 마크업 표현 >

    제목1과 제목2는 대시(-)와 등호(=) 로도 표시할 수 있습니다. 그런데 저는 샵(#)으로 표현하는 게 더 좋은 것 같습니다.

    밑에 등호(=)를 연속으로 표시하면, 제목1이 됩니다.
=============================================

밑에 대시(1)를 연속으로 표시하면, 제목2가 됩니다.
---------------------------------------------

>> 그런데?! 저는 샵(#)을 써서 잘 안 씁니다.

    2. 강조에 관한 문법

    강조에는 굵게와 기울임, 취소선, 하이라이트 등이 있습니다. 사용하는 기호는 별표(*) 또는 언더바(_), 물결선(~), 등호(=) 입니다.

    < 마크다운 표현 >

    **별표 2개** 또는 __언더바 2개__로 감싸면 굵게 표시됩니다.
 *별표 1개*  또는  _언더바 1개_ 로 감싸면 기울여 표시됩니다.
~~물결선 2개~~ 로 감싸면 취소선으로 표시됩니다.
==등호 2개== 로 감싸면 형광펜으로 표시됩니다.

    < 마크업 표현 >

    굵게와 기울이기는 거의 모든 편기에서 잘 작동합니다. 반면, 취소선이나 하이라이트는 편집기에 따라서 작동이 다를 수 있습니다.

    • 티스토리 편집기는 물결(~) 기호 1개가 취소선으로 작동합니다. 일반적인 물결표시가 취소선 명령으로 인식되어 매우 곤란합니다.
    • 티스토리 편집기는 하이라이트 문법이 작동하지 않습니다. 하이라이트를 넣기 위해서는 HTML 로 background-color: yellow; 와 같이 스타일을 입력해줘야 합니다.

    3. 리스트에 관한 문법

    HTML의 순서가 있는 리스트(ol)와 순서가 없는 리스트(ul)에 대응하는 문법입니다.

    순서가 있는 리스트

    먼저 순서가 있는 문법에 대해 알아보겠습니다.

    < 마크다운 >

    1. 이렇게
4. 아무 숫자나
3. 쓴 뒤
5. 점(.)을 찍으면
9. 순서가 있는 리스트로 인식합니다.

    < 마크업 >

    숫자의 순서에 상관없이 아무 숫자만 적고 점을 찍으면 1.부터 5.까지 차례대로 나열됩니다. 왜냐하면 어차피 HTML 문법으로 변환 될 때, 알아서 <ol><li></li><li></li><li></li><ol>로 변환되기 때문입니다.

    즉, 위 예시를 HTML 문서로 옮기면 다음과 같습니다.

    <ol>
    <li>이렇게</li>
    <li>아무 숫자나</li>
    <li>쓴 뒤</li>
    <li>점(.)을 찍으면</li>
    <li>순서가 있는 리스트로 인식합니다.</li>
</ol>

    계층이 중첩된 리스트를 작성하고 싶으면 들여쓰기를 이용합니다.

    < 마크다운 >

    1. 계층1 은 들여쓰기 없이 작성하고
    1. 계층2 는 들여쓰기를 줘서 작성합니다.
    2. 쭉쭉 작성하고
2. 들여쓰기를 닫으면 계층화된 리스트를 작성할 수 있습니다.

    < 마크업 >

    순서가 없는 리스트

    순서가 없는 리스트는 문장 처음에 별표(*), 대시(-), 더하기(+) 기호와 띄어쓰기 한 칸을 적어주면 됩니다.

    어떤 기호를 사용하든 상관 없지만 기왕이면 별표는 쓰지 않는게 좋습니다. 굵게(**), 기울임(*) 등에도 쓰여 가독성이 떨어지기 때문입니다.

    계층은 순서가 있는 리스트와 마찬가지로 들여쓰기로 구분하면 됩니다. 저는 가독성 좋은 문서를 작성하려면 계층 1은 + 기호로, 계층 2는 - 기호로 작성합니다.

    < 마크다운 >

    + 가독성 있는 마크다운 리스트 작성을 위한 방법입니다.
    - 우선, 별표는 강조 표현과 겹치므로 사용하지 않습니다.
    - 계층을 내린 경우 대시(-) 기호를 통해 표현합니다.
+ 위와 같이 작성하면 가독성 있는 마크다운 목록을 작성할 수 있습니다.

    < 마크업 >

    4. 인용에 관한 문법

    인용은 꺽쇠키(Angle Bracket, >)를 통해 할수 있습니다. 계층은 꺽쇠키를 여러개 써서 조절합니다.

    < 마크다운 >

    > 인용문입니다.
>> 꺽쇠 2개를 쓰면 인용 속에 인용을 합니다.
>>> 꺽쇠 3개를 스면 인용속에 인용 속에 인용을 합니다.

    < 마크업 >

    5. 코드(code)에 관한 문법

    작성중인 문단 중간에 코드를 넣는 Inline Code 기능과 아예 별도 영역을 생성하여 장문의 코드를 적는 Code Block 기능이 있습니다.

    인라인 코드

    문단 중간에 문자를 코드로 인식시키는 기능을 inline 코드라고 합니다. 키보드 모양으로 CSS를 편집해서 단축키를 설명하려 하거나, 영어로 된 명령어 등을 강조할 때 사용하면 좋습니다.

    < 마크다운 >

    인라인 코드는 강조하고 싶은 부분을 `backtick` 으로 감싸면 작동합니다.
여기서 백틱은 따옴표가 아니라 물결표시(~) 와 함께 있는 기호를 말합니다.

    < 마크업 >

    백틱으로 감싼 부분은 HTML 에서 <code> </code> 문법에 대응합니다. 따라서 code 태그에 대해 CSS 를 편집하면 원하는 방식으로 강조할 수 있습니다.

    코드블록

    아예 일정 영역을 코드를 위한 공간으로 쓰고 싶다면 코드블록을 생성해야 합니다. 코드블록을 생성하는 방법은 크게 2가지가 있습니다.

    (1) 백틱(`) 3개를 연달아 써서 열고 닫는 방법

    백틱(`) 3개를 연달아 쓰는 방식으로 코드블록을 만들 수 있습니다.
```
이렇게 백틱 3개를 작성해 코드블록을 개시합니다.
마무리는 역시 백틱 3개를 연달아 써서 합니다.
```

    (2) 문단에서 한 줄을 띄우고, 모든 줄에 탭을 들여쓰는 방법

    공백을 한 줄 준 뒤,
    모든 문장을 한 탭 씩
    띄워서
    적으면
    해당 부분이 코드블록으로 인식됩니다.

    6. 수평선

    밑줄(_) 또는 별표(*)를 3개 이상 적으면 수평선이 생성됩니다. 수평선은 HTML 에서 <hr></hr>에 대응합니다.

    7. 줄바꿈(br)

    문단을 바꾸는 <p> </p>가 아니라 문단을 유지한 채 줄만 바꾸는 <br> </br> 태그를 넣는 방법입니다.

    문장을 작성하는 도중에 마지막 부분에 공백을 3칸 포함합니다.___
그리고 줄을 바꿔서 문장을 작성하면 문단(<p>)은 동일하나___
개행(<br>)은 실시된 문서가 작성됩니다.

    위 예시에서 언더바(_) 로 표시한 부분이 공백이어야 한다고 생각하시면 됩니다.

    8. 참조 및 링크에 관한 문법

    한 줄에 끝내는 외부링크(External Link) 방식과 주석 방식으로 작성하는 참조링크(Reference Link) 방식으로 나뉩니다. 이름이 왜 이렇게 붙었는지는 잘 모르겠습니다.

    외부링크 방식

    대괄호([]) 사이에는 축약어를 넣고, 괄호(())사이에는 주소를 쓰는 방식입니다. 가장 보편적으로 많이 사용하는 방식입니다.

    < 마크다운 >

    [네이버로 Go](https://www.naver.com)

    < 마크업 >

    네이버로 Go

    참조링크 방식

    참조링크 방식은 외부링크 방식에서 주소((https://www.naver.com))가 들어갈 자리에 별칭을 적고 문서의 뒤쪽에 별칭에 해당하는 주소를 적어주는 방식으로 작동합니다.

    참조링크 방식을 사용하면 본문 중간에 있는 링크에 대해서도 가독성이 유지됩니다. 마크다운의 본질에 더 가까운 방법이라 볼 수 있습니다.

    < 마크다운 >

    예를 들어 이렇게 문서 중간에 링크가 있는 경우, [네이버로 Go][별칭] >> 참조링크 방식을 써야 훨씬 가독성이 좋습니다.

[별칭]: https://www.naver.com

    < 마크업 >

    9. 이미지 표현에 관한 문법

    이미지를 추가하기 위해서는 느낌표 기호로 이미지를 불러오면 됩니다.

    ![ALT 설명](이미지 주소 "이미지 제목")

    이 때, ALT 설명이나 이미지 제목은 생략될 수 있습니다.

    단, 마크다운으로는 이미지의 크기를 지정해 줄 수가 없으니 이 점 유의해야 합니다.

    10. 표를 그리는 문법

    엔터키 위에 있는 버티컬바(|)와 대시(-) 를 통해 표를 만들기 시작합니다. 위 예시에서 제목줄과 구분줄까지만 작성하여도 표는 만들어집니다.

    역시, 마크다운 상태로도 표 형태를 알아볼 수 있습니다.

    열 별로 정렬 방식을 선택할 수 있는데, 대시(-) 주변에 콜론(:)을 붙이면 됩니다.

    • 좌측 정렬은 :---
    • 우측 정렬은 ---:
    • 가운데 정렬은 :---:

    < 마크다운 >

    | 열 제목1          | 열 제목2          |
| ---------------  | ---------------  |
| 항목1-1           | 항목1-1          |
| 항목2-1           | 항목2-2          |

    < 마크업 >

    열 제목1 열 제목2
    항목1-1 항목1-1
    항목2-1 항목2-2

    👍티스토리 주의사항 마크다운 문법으로 작성한 표를 티스토리에 그대로 옮기면 이상하게 옮겨집니다. 티스토리 블로그의 경우, 아래와 같이 `` 없이 ``부터 표가 시작되게 되어 있기 때문입니다. 이에 대한 해결방법은 별도 포스팅에 정리하였습니다.

    <table>
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

    11. 각주를 넣는 문법

    문서 중간에 [^별칭] 기호를 넣고, 문서 마지막에 [^별칭]: 설명을 추가하여 각주를 작성할 수 있습니다.

    즉, 이런 식으로 작성하다가[^asdf] 주석을 달아줍니다. 그리고 문서 마지막 부분에 다음과 같이 설명을 추가해줍니다.

[^asdf]: 별칭은 중복이 있으면 안 됩니다.

    별칭은 어떻게 달아도 1, 2, 3, 4 순서로 정렬됩니다.

    12. 할 일 목록을 만드는 문법

    할 일 목록을 표현하는 문법도 있습니다.

    - [ ] 대시(-) 뒤와 대괄호([]) 사이에 공백이 있어야 합니다
- [X] X 표시를 해주면 완료한 목록이 됩니다.
- [O] X 대신 아무 문자를 넣어도 작동하는 편집기도 있습니다.

    O를 넣어야 완료일 것 같은데, X를 넣는 게 조금 더 보편적인 방식입니다. (외국감성일까요?)

    참고사항

    이상으로 주요 마크다운 문법에 대해 알아보았습니다. 편집기마다 작동되는 방식이 다르기 때문에 자신이 주로 사용하는 편집기에서 어떻게 사용하는지 익혀두는 것이 좋습니다.

    저작자표시