티스토리 글쓰기 가이드 [MarkDown 사용법 총정리]

SMALL

마크다운은 2004년 존 그루버가 만든 text to HTML 컨버팅 도구입니다. 마크다운을 사용하면 많은 기능을 가지고 있는 에디터가 없어도, 복잡한 HTML 코드 작성없이도 형식을 갖춘 문서를 쉽게 작성할 수 있습니다. 물론 티스토리의 새로운 에디터는 강력한 기능을 가지고 있어 이런 도구가 필요없을지도 모릅니다. 하지만 마크다운은 단순 텍스트라 이력 관리가 쉽고 복사 붙여넣기에도 강점이 있어 티스토리에서는 마크다운 모드를 제공하기로 했습니다.

이제 마크다운으로 어떻게 글을 작성할 수 있을지 알아보도록 하겠습니다.

마크다운 기본 문법

글의 기본인 문단(<p>)은 아무런 기호를 사용하지 않고 작성하면 됩니다. 기본문법은 줄바꿈(<br>)을 사용하기 위해선 특별한 방법을 사용해야 하지만 후에 설명할 Github flavor 문법으로 인해 별다른 방법없이 줄바꿈을 사용할 수 있게 되었습니다.

문단을 나누기 위해서는 두번 줄바꿈을 해주면 됩니다. 이 방법은 작성할 때도 문단이 나뉜 것처럼 보이고 실제로도 문단이 나뉘기 때문에 아주 유용합니다. 문제는 문단 앞뒤 간격이 없도록 설정한 경우 마크다운에서 보는 문단의 모양과 미리보기로 보는 문단의 모양이 다르게 보인다는 것입니다. 따라서 마크다운 모드로 글을 쓰시는 경우 설정에서 문단 앞뒤 간격을 사용하실 것을 권장합니다.

제목(<h1>~<h6>)은 문단 앞에 단계에 해당하는 수의 #을 넣는 것으로 사용할 수 있습니다.

# h1 로 전환

## h2 로 전환

인용(<blockquote>) 은 문단 앞에 >을 넣는 것으로 사용할 수 있습니다. 인용 안에서 줄바꿈이나 문단구분을 사용하려면 새로운 줄 앞에 또 >를 넣어주어야 합니다.

> 인용문입니다.
>
> 인용문 안에서도 새로운 문단을 사용할 수 있고
>
> ## 제목도 사용할 수 있습니다.

리스트는 크게 순서없는 리스트(<ul>), 순서있는 리스트(<ol>) 2가지가 있습니다. 순서 없는 리스트는 -, *, +을 문단 앞에 사용하고 순서 있는 리스트는 1. 등으로 직접 숫자를 사용합니다.

* 섞어 써도 되는
+ 순서가 필요없는
- 리스트 

1. 첫번째
2. 두번째 
3. 세번째를 구분하는 리스트

마크다운에는 폰트를 변경하거나 글자크기를 변경하는 표현식은 없습니다. 강조, 밑줄, 취소 등의 표현만 가능합니다.

**강조** 와 또 다른 _강조_, ~~취소~~

<strong>강조</strong>와 또 다른 <em>강조</em>, <del>취소</del>

링크(<a>) 문서와 문서를 연결하는 HTML에서 가장 중요한 기능 중 하나입니다. 표시할 텍스트와 연결할 URL을 마크다운에서는 다음과 같이 표시합니다.

[티스토리 개발 이야기](https://tistory.io)

<a href="https://tistory.io">티스토리 개발 이야기</a>

테이블(<table>)은 블로그에 작성하는 글에는 그리 유용하진 않지만 일부 사용해야하는 경우가 있습니다. 테이블은 다음과 같이 사용합니다.

| 제목 | 내용 |
| ---- | ---- |
| 첫번째 | 내용입니다. |
| 두번째 | 내용입니다. |

<table>
<thead>
  <tr>
    <th>제목</th>
    <th>내용</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>첫번째</td>
    <td>내용입니다.</td>
  </tr>
  <tr>
    <td>두번째</td>
    <td>내용입니다.</td>
  </tr>
</tbody>
</table>

마지막으로 개발자들이 마크다운을 사랑하는 이유. 코드, 코드 블럭입니다. 이 문서에서도 아주 유용하게 사용 중인데요. `로 감싸면 inline 코드, ```로 감싸면 코드블럭이 됩니다.

    ```kotlin
    fun main(args: Array<String>) {
        println("Hello, world!")
    }
    ```

    <pre><code class="language-kotlin">
    fun main(args: Array<String>) {
        println("Hello, world!")
    }
    </code></pre>

Github Flavor 문법

2004년 존 그루버가 말한 마크다운은 지금과 같이 다양한 기능을 제공하지는 않았습니다. 테이블도 없었고 코드블럭도 들여쓰기를 사용해야만 했습니다. 이로 인해 다양한 확장이 나타났는데요. 티스토리는 가장 활발히 사용되고 있는 Github Flavor Markdown (GFM)을 사용하기로 했습니다. 100% 지원하는 것은 아닙니다. Github에서만 사용되는 것도 있으니까요. 하지만 대부분 지원하려고 노력하고 있으니 자세한 내용은 GFM 문서를 통해 확인해주세요.

MarkDown 사용법 총정리

asciidocmdmarkdownhtml

마크다운(MarkDown)에 대해서 알고 계신가요?
파일 확장자가 .md로 된 파일을 보셨나요?
웹 개발을 하면서 아마 README.md라는 이름의 파일을 한 번은 보셨을텐데, 이 파일이 마크다운 문법으로 작성된 파일 입니다.

사용법이 매우 쉽고, 빠르게 문서를 정리할 수 있습니다.
물론 모든 HTML 마크업을 대신할 수 없기 때문에 지나친 의존보다는 쉽고 빠르게 작성하는 용도로 사용하세요.
마크다운과 비슷한 형태로 문법이 좀 더 복잡하지만 확장자가 .adoc인 AsciiDoc 문법도 있습니다. 좀 더 다양한 형태의 문서를 만들 수 있지만, 문법이 좀 더 복잡하고 지원 플랫폼이 적습니다.

우선 문법이 쉽고 다양한 플랫폼을 지원하는 마크다운 문법을 배우세요.
30분이면 충분합니다.

마크다운(MarkDown)에 대해서

마크다운의 장점

문법이 쉽다.
관리가 쉽다.
지원 가능한 플랫폼과 프로그램이 다양하다.

마크다운의 단점

표준이 없어 사용자마다 문법이 상이할 수 있다.
모든 HTML 마크업을 대신하지 못한다.

마크다운의 사용

메모장부터 전용 에디터까지 많은 곳에서 활용할 수 있습니다.
문법이 쉽기 때문에 꼭 전용 에디터를 사용할 필요는 없습니다만, 마크다운 코드의 하이라이트 효과를 원한다면 전용 에디터가 좋은 선택이 될 것 같네요.
저는 평소 Atom을 사용하고 있습니다.
혹은 마크다운 문법을 지원하는 모든 곳에서 사용할 수 있으며, 일반 블로그나 워드프레스 외 Slack이나 Trello 같은 서비스에서 메세지를 작성하듯 사용할 수도 있습니다.
화면에 표현되는 스타일(CSS)은 설정에 따라 달라집니다.
HTML과 마찬가지로 눈에 보이는 스타일은 무시하고 각 문법의 의미로 사용하세요.

마크다운 문법(syntax)

제목(Header)

<h1>부터 <h6>까지 제목을 표현할 수 있습니다.

# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6

제목1(h1)과 제목2(h2)는 다음과 같이 표현할 수 있습니다.

제목 1
======

제목 2
------

강조(Emphasis)

각각 <em>, <strong>, <del> 태그로 변환됩니다.

밑줄을 입력하고 싶다면 <u></u> 태그를 사용하세요.

이텔릭체는 *별표(asterisks)* 혹은 _언더바(underscore)_를 사용하세요.
두껍게는 **별표(asterisks)** 혹은 __언더바(underscore)__를 사용하세요.
**_이텔릭체_와 두껍게**를 같이 사용할 수 있습니다.
취소선은 ~~물결표시(tilde)~~를 사용하세요.
<u>밑줄</u>은 `<u></u>`를 사용하세요.

이텔릭체는 별표(asterisks) 혹은 언더바(underscore)를 사용하세요.
두껍게는 별표(asterisks) 혹은 언더바(underscore)를 사용하세요.
이텔릭체와 두껍게를 같이 사용할 수 있습니다.
취소선은 ~~물결표시(tilde)~~를 사용하세요.
밑줄은 <u></u>를 사용하세요.

목록(List)

<ol>, <ul> 목록 태그로 변환됩니다.

1. 순서가 필요한 목록
1. 순서가 필요한 목록
  - 순서가 필요하지 않은 목록(서브) 
  - 순서가 필요하지 않은 목록(서브) 
1. 순서가 필요한 목록
  1. 순서가 필요한 목록(서브)
  1. 순서가 필요한 목록(서브)
1. 순서가 필요한 목록

- 순서가 필요하지 않은 목록에 사용 가능한 기호
  - 대쉬(hyphen)
  * 별표(asterisks)
  + 더하기(plus sign)

순서가 필요한 목록
순서가 필요한 목록
- 순서가 필요하지 않은 목록(서브)
- 순서가 필요하지 않은 목록(서브)
순서가 필요한 목록
1. 순서가 필요한 목록(서브)
2. 순서가 필요한 목록(서브)
순서가 필요한 목록

순서가 필요하지 않은 목록에 사용 가능한 기호
- 대쉬(hyphen)
- 별표(asterisks)
- 더하기(plus sign)

링크(Links)

<a>로 변환됩니다.

[GOOGLE](https://google.com)

[NAVER](https://naver.com "링크 설명(title)을 작성하세요.")

[상대적 참조](../users/login)

[Dribbble][Dribbble link]

[GitHub][1]

문서 안에서 [참조 링크]를 그대로 사용할 수도 있습니다.

다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(`< >`, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.
구글 홈페이지: https://google.com
네이버 홈페이지: <https://naver.com>

[Dribbble link]: https://dribbble.com
[1]: https://github.com
[참조 링크]: https://naver.com "네이버로 이동합니다!"

문서 안에서 참조 링크를 그대로 사용할 수도 있습니다.

다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(< >, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.

구글 홈페이지: https://google.com
네이버 홈페이지: https://naver.com

이미지(Images)

<img>로 변환됩니다.
링크과 비슷하지만 앞에 !가 붙습니다.

![대체 텍스트(alternative text)를 입력하세요!](http://www.gstatic.com/webp/gallery/5.jpg "링크 설명(title)을 작성하세요.")

![Kayak][logo]

[logo]: http://www.gstatic.com/webp/gallery/2.jpg "To go kayaking."

이미지에 링크

마크다운 이미지 코드를 링크 코드로 묶어 줍니다.

[![Vue](/images/vue.png)](https://kr.vuejs.org/)

코드(Code) 강조

<pre>, <code>로 변환됩니다.
숫자 1번 키 왼쪽에 있는 `(Grave)를 입력하세요

인라인(inline) 코드 강조

`background`혹은 `background-image` 속성으로 요소에 배경 이미지를 삽입할 수 있습니다.

background혹은 background-image 속성으로 요소에 배경 이미지를 삽입할 수 있습니다.

블록(block) 코드 강조

`를 3번 이상 입력하고 코드 종류도 적습니다.

```html
<a href="https://www.google.co.kr/" target="_blank">GOOGLE</a>
```

```css
.list > li {
  position: absolute;
  top: 40px;
}
```

```javascript
function func() {
  var a = 'AAA';
  return a;
}
```

```bash
$ vim ./~zshrc
```

```python
s = "Python syntax highlighting"
print s
```

```
No language indicated, so no syntax highlighting. 
But let's throw in a tag.
```

<a href="https://www.google.co.kr/" target="_blank">GOOGLE</a>

.list > li {
  position: absolute;
  top: 40px;
}

function func() {
  var a = 'AAA';
  return a;
}

$ vim ./~zshrc

s = "Python syntax highlighting"
print s

No language indicated, so no syntax highlighting. 
But let's throw in a <b>tag</b>.

표(Table)

<table> 태그로 변환됩니다.
헤더 셀을 구분할 때 3개 이상의 -(hyphen/dash) 기호가 필요합니다.
헤더 셀을 구분하면서 :(Colons) 기호로 셀(열/칸) 안에 내용을 정렬할 수 있습니다.
가장 좌측과 가장 우측에 있는 |(vertical bar) 기호는 생략 가능합니다.

| 값 | 의미 | 기본값 |
|---|:---:|---:|
| `static` | 유형(기준) 없음 / 배치 불가능 | `static` |
| `relative` | 요소 자신을 기준으로 배치 |  |
| `absolute` | 위치 상 부모(조상)요소를 기준으로 배치 |  |
| `fixed` | 브라우저 창을 기준으로 배치 |  |

값 | 의미 | 기본값
---|:---:|---:
`static` | 유형(기준) 없음 / 배치 불가능 | `static`
`relative` | 요소 **자신**을 기준으로 배치 |
`absolute` | 위치 상 **_부모_(조상)요소**를 기준으로 배치 |
`fixed` | **브라우저 창**을 기준으로 배치 |

값의미기본값

static	유형(기준) 없음 / 배치 불가능	static
relative	요소 자신을 기준으로 배치
absolute	위치 상 부모(조상)요소를 기준으로 배치
fixed	브라우저 창을 기준으로 배치

인용문(BlockQuote)

<blockquote> 태그로 변환됩니다.

인용문(blockQuote)

> 남의 말이나 글에서 직접 또는 간접으로 따온 문장.
> _(네이버 국어 사전)_

BREAK!

> 인용문을 작성하세요!
>> 중첩된 인용문(nested blockquote)을 만들 수 있습니다.
>>> 중중첩된 인용문 1
>>> 중중첩된 인용문 2
>>> 중중첩된 인용문 3

인용문(blockQuote)

남의 말이나 글에서 직접 또는 간접으로 따온 문장.
(네이버 국어 사전)

BREAK!

인용문을 작성하세요!

중첩된 인용문(nested blockquote)을 만들 수 있습니다.

중중첩된 인용문 1
중중첩된 인용문 2
중중첩된 인용문 3

원시 HTML(Raw HTML)

마크다운 문법이 아닌 원시 HTML 문법을 사용할 수 있습니다.

<u>마크다운에서 지원하지 않는 기능</u>을 사용할 때 유용하며 대부분 잘 동작합니다.

<img width="150" src="http://www.gstatic.com/webp/gallery/4.jpg" alt="Prunus" title="A Wild Cherry (Prunus avium) in flower">

![Prunus](http://www.gstatic.com/webp/gallery/4.jpg)

마크다운에서 지원하지 않는 기능을 사용할 때 유용하며 대부분 잘 동작합니다.

수평선(Horizontal Rule)

각 기호를 3개 이상 입력하세요.

---
(Hyphens)

***
(Asterisks)

___
(Underscores)

(Hyphens)

(Asterisks)

(Underscores)

줄바꿈(Line Breaks)

동해물과 백두산이 마르고 닳도록 
하느님이 보우하사 우리나라 만세   <!--띄어쓰기 2번-->
무궁화 삼천리 화려 강산<br>
대한 사람 대한으로 길이 보전하세

동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세

일반 줄비꿈이 동작하지 않는 환경(설정 및 버전에 따라)의 경우, ‘2번의 띄어쓰기’나 <br>를 활용할 수 있습니다.

감사합니다.

LIST

저작자표시

Auto-GPT스토리