Markdown 마크다운 문법의 기본적인 사용 방법 정리

글을 자주 쓰다 보니 노트 앱 과 에디터등에 관심이 많습니다. 그래서 다양한 블로그 서비스 또는 노트 앱등을 꽤 많이 사용 해 왔습니다.

그런데 이렇게 이런 저런 서비스를 이용하면서 느낀 점은 '마크다운 이라는 언어는 참 쓰기가 편하다'는 것 입니다.

이런 이유 때문인지 최근에 각광 받고 있는 노트 앱들의 주된 노트 작성 방식이 마크다운 형식을 취하고 있습니다.

그래서 오늘은 마크다운 언어가 어떤 것인지 그리고 사용하는 방법은 어떤 내용이 있는지에 대해서 알아 봅니다.

해당 포스트는 충분한 테스트 및 검증 후 작성 되었지만 이것이 내용의 정확성이나 신뢰성에 대해 보증을 하는 것은 아니니 단순 하게 참고용으로 봐주시길 바랍니다.

마크다운

옵시디언 Obsidian 링크 형식 변경하기

마크다운이란

일반적으로 널이 사용 되는 워드프로세서는 마이크로소프트 오피스의 워드(Word) 입니다. 하지만 이런 워드 파일을 복사 (  Ctrl +  C ) 해서 텍스트(일반적인 메모장) 문서에 붙여넣기 (  Ctrl +  V ) 하게 되면 기존에 적용 된 서식 등이 모두 사라지게 됩니다.

하지만 이 마크다운을 사용해서 작성 하면 일반 적인 텍스트 기호를 사용해 서식 등이 적용 되기 때문에 위와 같이 플랫폼간 가공이 아주 용이 합니다. .md 확장자로 저장하면 보관도 매우 용이 합니다.

뭐 누가 만들고 이런 기본적인 부분은 조금만 검색 하더라도 다양한 정보들이 많이 있기 때문에 이번에는 따로 다루지는 않습니다.

마크다운 장점 과 단점

마크다운 장점

  • 단순하고 간결 합니다.
  • 별다른 도구(에디터) 없이 어디서든 작성이 가능 합니다.
  • 텍스트 기반 입니다.
    • 용량이 작고 백업이 간편 합니다.
    • 버전 관리 시스템(Git, svn 등)에서 사용이 용이 합니다.
  • 마크다운으로 작성한 글을 다양한 포맷으로 손쉽게 변경 할 수 있습니다.
  • 사용 범위가 점점 더 확대 되고 있습니다. (필자의 경우 마크다운이 적용 되지 않는 노트앱은 사용을 하지 않습니다.)

마크다운 단점

  • 표준이 없습니다.
    • 오늘 다룰 내용에도 포함되어 있지만 기본 마크다운 서식 과 추가 된 서식이 같이 존재 하고 이 또한 정해진 규약이 없습니다.
    • 그래서 어디서는 사용이 되고 반대로 어디서는 사용이 되지 않는 상황이 발생 할 수 있습니다.
    • 동일한 문법이지만 아예 다른 방식으로 출력(Rendered Output) 되는 경우도 더러 있습니다.
  • 모든 HTML의 문법을 대신하지 못 합니다.
    • 색상 코드를 적용 할 수 없는 등 완벽하게 지원되지 않습니다.
  • 추가적인 마크다운 기호를 입력 해야 하기 때문에 누군가에게는 번거롭다고 느껴 질 수 있습니다.
옵시디언 Obsidian 링크 형식 변경하기

기본 서식

마크다운의 기본적인 서식을 정리 합니다. 이해를 돕기 위해 HTML 문법이 추가 된 경우도 있습니다.

제목(Headings)

마크다운

# Thisis Heading level 1
## Thisis Heading level 2
### Thisis Heading level 3
#### Thisis Heading level 4
##### Thisis Heading level 5
###### Thisis Heading level 6

기본적인 제목 표기 방식입니다.

Thisis Heading level 1
===============


Thisis Heading level 2
---------------

level 1 과 level 2 수준의 경우 이렇게 사용해도 동일 하게 제목을 설정 할 수 있습니다.

HTML

<h1>Thisis Heading level 1</h1>	
<h2>Thisis Heading level 2</h2>	
<h3>Thisis Heading level 3</h3>	
<h4>Thisis Heading level 4</h4>	
<h5>Thisis Heading level 5</h5>	
<h6>Thisis Heading level 6</h6>

Rendered Output

Headings_제목
Headings 제목
Obsidian 옵시디언 다운로드 및 설치 방법

볼드(Bold)

마크다운

This is **bold text**
This is __bold text__

기본적인 볼드 문법입니다.

This is**bold text** 지원
This is__bold text__ 미지원

언더 라인으로 작성 시 띄어쓰기에 유의해야 합니다.

HTML

This is <strong>bold text</strong>
This is <strong>bold text</strong>

Rendered Output

볼드
볼드

이탤릭(Italic)

마크다운

This is *italic text*
This is _italic text_

기본적인 이탤릭 문법입니다.

This is*italic text* 지원
This is_italic text_ 미지원

언더 라인으로 작성 시 띄어쓰기에 유의해야 합니다.

HTML

This is <em>italic text<em>
This is <em>italic text<em>

Rendered Output

이탤릭
이탤릭
Obsidian 옵시디언 다운로드 및 설치 방법

순서있는 목록(Ordered Lists)

마크다운

1. First item
2. Second item
3. Third item
    1. Indented item
    2. Indented item
4. Fourth item

순서있는 목록의 기본적인 사용 문법입니다.

1. First item
1. Second item
1. Third item
1. Fourth item


1. First item
8. Second item
3. Third item
5. Fourth item

순번이 다르더라도 결과에 반영되지 않고 순서대로 표기 됩니다.

HTML

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item
    <ol>
      <li>Indented item</li>
      <li>Indented item</li>
    </ol>
  </li>
  <li>Fourth item</li>
</ol>

Rendered Output

순서있는_목록
순서있는 목록

순서없는 목록(Unordered Lists)

마크다운

- First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item

순서없는 목록의 기본적인 문법입니다.

* First item
* Second item
* Third item
* Fourth item


+ First item
+ Second item
+ Third item
+ Fourth item

이와 같이 사용 해도 동일하게 적용됩니다.

HTML

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item
    <ul>
      <li>Indented item</li>
      <li>Indented item</li>
    </ul>
  </li>
  <li>Fourth item</li>
</ul>

Rendered Output

순서없는_목록
순서없는 목록
옵시디언 Obsidian 링크 형식 변경하기

인용(BlockQuote)

기본

마크다운
> This is BlockQuote1
>> This is BlockQuote2
>> This is BlockQuote2

인용의 기본적인 문법입니다.

Rendered Output
인용
인용

응용

> This is BlockQuote
> 
> This is BlockQuote

위와 같이 빈 줄이 포함되어 도 정상적으로 적용 됩니다.

> This is 'Code' in BlockQuote
> - This is list in BlockQuote
> * This is BlockQuote & list in BlockQuote
> This is *Italic* & **Bold** in BlockQuote

인용 블럭에는 다른 서식을 사용할 수 있습니다.

인라인 코드(Inline Code)

마크다운

This is `inlinecode'

HTML

This is <code>inlinecode</code>

Rendered Output

인라인_코드
인라인 코드
옵시디언 Obsidian 링크 형식 변경하기

코드 블럭(Code Blocks)

단락 또는 전체 코드를 사용해야 하는 경우 인라인 코드로는 처리 되지 않습니다. 이 경우 코드블럭을 사용 합니다.

코드 블럭의 들여쓰기와 관련 된 내용은 확장 된 마크다운 문법 의 코드 블럭(Code Blocks) - 들여쓰기 를 확인 합니다.

마크다운

This is a normal paragraph

[공백][공백][공백][공백]<html>
[공백][공백][공백][공백][공백]<head>
[공백][공백][공백][공백][공백][공백]<title>Thisis Codeblock</title>
[공백][공백][공백][공백][공백]</head>

This is a normal paragraph

코드 블록을 생성하려면 블록의 모든 행을 최소 4개의 공백 또는 하나의 탭만큼 들여씁니다

This is a normal paragraph
```
 <html>
   <head>
     <title>Thisis Codeblock</title>
   </head>
```
This is a normal paragraph

백틱(`) 3개를 블럭의 앞과 뒤로 감싸도 적용 됩니다. 백틱은 일반적인 키보드 자판 중 ~ 키와 함께 위치한 키입니다.

This is a normal paragraph

 <html>
   <head>
     <title>Thisis Codeblock</title>
   </head>
    
This is a normal paragraph

4개의 공백 또는 하나의 탭으로 들여쓰기를 만나면 들여쓰지 않은 행을 만날때까지 코드블럭으로 인식 됩니다.

HTML

<code> 
 <html>
   <head>
     <title>Thisis Codeblock</title>
   </head>
<code>

Rendered Output

코드블럭
코드블럭

수평선(Horizontal Rules)

마크다운

기본

This is a normal paragraph

---

This is a normal paragraph


***
_________________

기본적으로 언더스코어(_) 또는 별 (*) 기호를 3번 또는 그 이상 입력하면 단락 구분을 위한 수평선이 추가됩니다.

주의
This is a normal paragraph
---
This is a normal paragraph

위와 같이 수평선 앞뒤 공백 줄(Line) 이 없는 경우 적용 되지 않을 수 있습니다.


This is a normal paragraph

---

This is a normal paragraph

호환성을 위해 이와 같이 수평선 앞뒤로 공백을 적용 합니다.

HTML

<hr></hr>

Rendered Output

수평선
수평선
옵시디언 Obsidian 링크 형식 변경하기

문단 줄바꿈(Line Breaks)

마크다운

This is the first line.[공백][공백][공백]  
And this is the second line.

단락이 바뀌는 줄 바꿈, 단락을 유지 하면서 줄만 바뀌는 줄 바꿈 이렇게 두 가지가 있습니다. 단락이 바뀌는 줄바꿈을 위해서는 아래 중 한 가지가 포함되어야 합니다.

  • 문장 마지막에 3칸 이상의 공백(후행 공백)을 포함 후 Enter 를 입력합니다.다.
  • Enter 를 2회 입력 시 적용 되기도 합니다. ( 1회 입력 시 단락 변경 은 안됩니다. )
  • 편집기 상에서 공백이 표기 되지 않기 때문에 사용에 어려움이 있을 수 있습니다. 일부 Outliner 의 경우 Bullet 으로 구분 하거나, HTML 을 지원 하는 편집기의 경우 <br> 태그를 사용 하는 것이 좋습니다.

HTML

<p>This is the first line.<br>
And this is the second line.</p>

Rendered Output

줄_바꿈
줄 바꿈

기본 서식 - 링크

기본 서식 중 링크는 세부 내용이 더 있어 따로 정리 합니다. 자동 생성 링크는 아래 확장 된 마크다운 문법에서 자동 생성 링크 내용을 확인 합니다.

주의: 마크다운 문법에서 링크 사용 시 URL 중간에 공백이 포함되면 적용 되지 않습니다.

옵시디언 Obsidian 링크 형식 변경하기

참조 링크

마크다운

Google: [1]  
Google: [Google]


[1]: http://www.google.co.kr
[Google]: http://www.google/co.kr

외부 링크

마크다운

This is [Google](http://www.google/co.kr) Link

가장 일반적으로 사용 하는 방식이라고 생각합니다. 외부 주소를 괄호([]())로 감싸 적용 할 수 있습니다.

Rendered Output

This is Google

Obsidian 옵시디언 다운로드 및 설치 방법

이미지(Images) 링크

마크다운

![이미지 설명](/path/to/img.jpg)

![이미지 설명](/path/to/img.jpg "이미지제목")

이미지 파일이 위치한 경로 또는 링크를 위의 형식으로 추가하면 렌더링 된 상태에서 이미지가 출력됩니다.

  • 이미지 제목: Title 태그 라고도 하며 이미지 제목을 표시합니다.
  • 이미지 설명: Alt 태그 또는 Alt 속성 이라고 하며 이미지의 설명이 됩니다. (이미지가 출력 되지 않는 경우 시각이 불편한 사용자를 위해 대체 되어 출력 되는 용도로 사용됩니다. 이 사이트에서는 모든 이미지에 포함되어 있습니다.)

HTML

<img src="/path/to/img.jpg" width="400px" height="300px" title="이미지 제목" alt="설명"></img><br/>

<img src="/path/to/img.jpg" width="40%" height="30%" title="이미지 제목" alt="설명"></img>

마크다운에서는 이미지 사이즈를 특정 할 수 없기 때문에 특정 규격의 이미지로 출력 되어야 하는 경우 HTML 을 사용해야 합니다.

탈출(Escaping Characters)

마크다운에서 사용 되는 서식(기호) 들을 표기 (Rendered Output) 해야 하는 경우가 있습니다. 이 때 Escaping Characters 인 \ 백슬래시를 사용해 정상적으로 출력 할 수 있습니다.

기호명칭1명칭2
\백슬래시backslash
`백틱backtick
*별표asterisk
_밑줄underscore
{ }중괄호Curly braces
[ ]괄호brackets
< >꺾쇠 괄호angle brackets
( )괄호parentheses
#샾 기호pound sign
+더하기 기호plus sign
-빼기 기호(하이픈)minus sign (hyphen)
.점dot
!느낌표exclamation mark
|파이프pipe
Obsidian 옵시디언 다운로드 및 설치 방법

일반적인 탈출

\* This is just asterisk

위 기호들을 기본적으로 \ (백슬래시) 를 사용해서 탈출할 수 있습니다. 일부 환경에서는 \ 가 '원' 기호로 표기 될 수 있습니다.

* This is just asterisk

이와 같이 목록 형태로 전환 되지 않고 단순하게 별 기호로 표기됩니다.

백틱 탈출

마크다운

``Use `code` in your Markdown file.``

코드로 표시하려는 단어나 구에 하나 이상의 역 따옴표(백틱)가 포함된 경우 단어나 구를 이중 역 따옴표(``)로 묶어 탈출할 수 있습니다. 백틱은 일반적인 키보드 자판 중 ~ 키와 함께 위치한 키입니다.

HTML

<code>Use `code` in your Markdown file.</code>

Rendered Output

Use `code` in your Markdown file.
Obsidian 옵시디언 다운로드 및 설치 방법

확장된 마크다운 문법

기본적인 마크다운 문법은 아니지만 필요에 의해 추가 된 문법 입니다. 이 기능은 일부 마크다운을 사용하는 응용프로그램에서 적용 되거나 그렇지 않을 수 있습니다.

표(Tables)

마크다운(일반)

| Title1      | Title2      |
| ----------- | ----------- |
| Paragraph   | Paragraph   |
| Paragraph   | Paragraph   |

좌측 정렬 상태의 표를 만들 수 있습니다.

마크다운(정렬)

| Title1      | Title2      | Title3      |
|    :---     |    :---:    |     ---:    |
| Paragraph   | Paragraph   | Paragraph   |
| Paragraph   | Paragraph   | Paragraph   |

헤더 라인 구분 기호를 통해 :--- 좌측 정렬이 아닌 특정 방향으로 정렬 할 수 있습니다.

마크다운(정렬) - Rendered Output

Title1Title2Title3
ParagraphParagraphParagraph
ParagraphParagraphParagraph
Obsidian 옵시디언 다운로드 및 설치 방법

코드 블럭(Code Blocks) - 들여쓰기

들여쓰기

This is a normal paragraph

 <html>
   <head>
     <title>Thisis Codeblock</title>
   </head>
    
This is a normal paragraph

앞서 설명한 내용입니다. 기본 Markdown 구문을 사용하면 4개의 공백(or 1개의 탭) 으로 줄을 들여쓰기 할 수 있습니다. 일부 편집기에서는 ``` 로 감싸면 적용 됩니다.

들여쓰기 제외

This is a normal paragraph
```
{
     <html>
   <head>
     <title>Thisis Codeblock</title>
   </head>
}
```
This is a normal paragraph

들여쓰기가 적용되지 않도록 하고 싶다면 대괄호({}) 를 이용해 코드 블럭을 감싸면 됩니다. 일부 마크다운 버전 또는 응용프로그램 에디터에서는 글에 적용 되는 내용입니다.

들여쓰기 제외 - Rendered Output
This is a normal paragraph
{
<html>
<head>
<title>Thisis Codeblock</title>
</head>
}
This is a normal paragraph

코드 블럭(Code Blocks) - Syntax Highlighting

일부 마크다운 버전 또는 응용프로그램 에디터에서는 글에 Syntax Highlighting(구문 강조 표시)를 적용 하는 경우 언어를 추가하면 됩니다.

```json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```
```css
{
color: red;
}
```

위와 같이 코드 블럭 이 시작 되는 백틱 (```) 뒤에 사용 되는 언어를 지정해주면 언어에 맞게 구문이 강조 되어 표시 됩니다. 백틱은 일반적인 키보드 자판 중 ~ 키와 함께 위치한 키입니다.

Obsidian 옵시디언 다운로드 및 설치 방법

각주(Footnotes)

This is a normal paragraph.  This is a first Footnotes.[^1]
This is a Second Footnotes.[^Second]


[^1]: This is the first footnote.
[^Second]: This is a Second Footnotes.

일부 마크다운 버전 또는 응용프로그램 에디터에서는 글에 각주를 추가할 수 있습니다.

위 첨자(Superscript)

마크다운

This is a normal paragraph^This is a Superscript^.

글에 위 첨자를 추가할 수 있습니다.

Rendered Output

This is a normal paragraphThis is a Superscript.
Obsidian 옵시디언 다운로드 및 설치 방법

헤딩 아이디(Heading IDs)

마크다운

### This is Heading {#custom-id}

일부 마크다운 에서는 헤딩의 아이디를 추가 할 수 있습니다.

HTML

<h3 id="custom-id">This is Heading</h3>

취소선(Strikethrough)

마크다운

This is ~~Strikethrough~~

일부 마크다운에서는 취소선을 적용할 수 있습니다.

Rendered Output

This is Strikethrough
Obsidian 옵시디언 다운로드 및 설치 방법

할일 목록(Task Lists)

마크다운

- [x] This is Task Lists1
- [ ] This is Task Lists2
- [ ] This is Task Lists3

Rendered Output

체크박스
체크박스

이모티콘 (Emoji)

마크다운

This is tent :tent:
That is joy! :joy:

일반적으로 이미티콘을 그대로 붙여넣기 하면 적용 할 수 있으며, 일부 마크다운에서는 단축코드를 사용해 손쉽게 적용할 수 있습니다.

Rendered Output

This is tent ⛺That is joy! 😂

Obsidian 옵시디언 다운로드 및 설치 방법

하이라이트 (Highlight)

마크다운

This is ==Highlight==

일부 마크다운에서는 특정 영역을 형광펜처럼 하이라이트 처리할 수 있습니다.

Rendered Output

하이라이트
하이라이트

자동생성 링크

자동 URL 링크를 생성 하고 싶지 않은 경우 백틱으로 감싸 인라인 코드로 변경 합니다. 백틱은 일반적인 키보드 자판 중 ~ 키와 함께 위치한 키입니다.

마크다운

http://www.example.com


address@example.com

많은 Markdown 프로세서 또는 응용프로그램의 에디터에서는 []() 등의 입력 없이 자동으로 URL 주소를 링크로 변경 해줍니다.

Rendered Output

http://www.example.comaddress@example.com

자동 링크 비활성화

`http://www.example.com`


`address@example.com`

자동 링크로 전환 되면 안되는 경우 백틱 (`) 으로 감싸 인라인 코드로 인식 시켜주면 됩니다. 백틱은 일반적인 키보드 자판 중 ~ 키와 함께 위치한 키입니다.

옵시디언 Obsidian 링크 형식 변경하기

마무리

이렇게 , 마크다운에 대한 기본적인 내용과 사용하는 방법에 대해 알아 보았습니다.

개인적으로 너무나 애정하는 글쓰기 문법이기 때문에 이렇게 별도의 글로 정리 해 보았습니다. 최근에 각광받고 있는 에디터, 메모앱들은 대부분 마크다운을 기본으로 사용 하고 있으니 필요 한 경우 위내용을 참고해 사용 해 보시길 바랍니다.

참고

본 글의 저작권은 comeinsidebox.com에 있습니다. comeinsidebox.com의 사전 서면 동의 없이 본 글의 전부 또는 일부를 무단으로 전재, 게시, 배포하는 것을 금지합니다.
댓글로 남기기 어려운 내용은 Contact Form 에서 개별적으로 문의 할 수 있습니다. 해당 글과 연관 된 내용은 Copy를 이용해 현재 페이지의 주소를 복사 후 문의 폼에 입력시 보다 정확한 답을 얻을 수 있습니다.

Leave a Comment