MarkDown 사용법 총정리

September / 2017

asciidoc md markdown html

마크다운(MarkDown)에 대해서 알고 계신가요?

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

사용법이 매우 쉽고, 빠르게 문서를 정리할 수 있습니다.

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

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

30분이면 충분합니다.

마크다운(MarkDown)에 대해서
마크다운의 장점

문법이 쉽다.

관리가 쉽다.

지원 가능한 플랫폼과 프로그램이 다양하다.

마크다운의 단점

표준이 없어 사용자마다 문법이 상이할 수 있다.

모든 HTML 마크업을 대신하지 못한다.

마크다운의 사용

메모장부터 전용 에디터까지 많은 곳에서 활용할 수 있습니다.

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

마크다운 문법(syntax)
제목(Header)

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

MARKDOWN

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

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

MARKDOWN

제목 1
======

제목 2
------

강조(Emphasis)

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

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

MARKDOWN

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

이텔릭체는 별표(asterisks) 혹은 언더바(underscore)를 사용하세요.

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

목록(List)

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

MARKDOWN

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

- 순서가 필요하지 않은 목록에 사용 가능한 기호

- 대 쉬 (hyphen)
* 별 표 (asterisks)
+ 더 하 기 (plus sign)

순서가 필요한 목록

순서가 필요한 목록

순서가 필요하지 않은 목록(서브)

순서가 필요하지 않은 목록(서브)

순서가 필요한 목록

순서가 필요한 목록(서브)

순서가 필요한 목록(서브)

순서가 필요한 목록

순서가 필요하지 않은 목록에 사용 가능한 기호

대쉬(hyphen)

별표(asterisks)

더하기(plus sign)
링크(Links)

<a> 로 변환됩니다.

MARKDOWN

[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 "네 이 버 로 이 동 합 니 다 !"

GOOGLE

NAVER

상대적 참조

Dribbble

GitHub

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

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

이미지(Images)

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

MARKDOWN

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

![Kayak][logo]

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

이미지에 링크

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

MARKDOWN

[](https://kr.vuejs.org/)

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

인라인(inline) 코드 강조

MARKDOWN

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

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

블록(block) 코드 강조

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

MARKDOWN

```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.
```

HT ML

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

CSS

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

J A V A S C RI PT

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

BA SH

$ vim ./~zshrc

PYTHON

s = "Python syntax highlighting"

print s

YA ML

No language indicated, so no syntax highlighting.

But let's throw in a <b>tag</b>.

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

MARKDOWN

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

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

값 의미 기본값

static 유형(기준) 없음 / 배치 불가능 static

relative 요소 자신을 기준으로 배치

absolute 위치 상 부모(조상)요소를 기준으로 배치

fixed 브라우저 창을 기준으로 배치

인용문(BlockQuote)

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

MARKDOWN

인 용 문 (blockQuote)

> 남의 말이나 글에서 직접 또는 간접으로 따온 문장.

> _(네 이 버 국 어 사 전 )_

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

인용문(blockQuote)

남의 말이나 글에서 직접 또는 간접으로 따온 문장.

(네이버 국어 사전)

BREAK!

인용문을 작성하세요!

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

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

원시 HTML(Raw HTML)

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

MARKDOWN

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

<img width="150" src="http://www.gstatic.com/webp/gallery/4.jpg" alt="Prunus" title="A Wild Che


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

수평선(Horizontal Rule)

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

MARKDOWN

---
(Hyphens)

***
(Asterisks)

___
(Underscores)
(Hyphens)

(Asterisks)

(Underscores)

줄바꿈(Line Breaks)

MARKDOWN

동해물과 백두산이 마르고 닳도록

하느님이 보우하사 우리나라 만세 <!--띄 어 쓰 기 2번 -->
무 궁 화 삼 천 리 화 려 강 산 <br>
대한 사람 대한으로 길이 보전하세

동해물과 백두산이 마르고 닳도록

하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세

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

HEROPY의 다른 글

Snowpack, 더 빠른 웹 개발을 위 PixiJS와 Depth map으로 3D 이

한 새로운 방식의 프론트엔드 빌드 미지 만들기
도구

Postman에서 API 테스트 자동화 Jest와 Vue Test Utils(VTU)로 V

ue 컴포넌트 단위(Unit) 테스트
 ← 다음 글 이전 글 →

Webpack - 1 - 시작하기 / EJS /

SASS(SCSS)

HEROPY의 다른 댓글.

CSS Flex(Flexible Box) 내 NPM 패키지(모듈) 배 PixiJS와 D

완벽 가이드 포하기 Sass(SCSS) 완전 정복! 로 3D 이미

3년 전 • 댓글 35건 3년 전 • 댓글 12건 4년 전 • 댓글 2건 일년 전 • 댓글

많은 경우 float, inline-block, 개발을 위해 npm install xxx CSS는 상대적으로 배우기 PixiJS는 We
table 등의 도움을 받아서 수 로 설치하는 모듈이 많아지 쉽고 재미있습니다. 웹 개발 고속 HTML5
평 레이아웃을 … 면서 자주 사용하는 나의 … 초심자에게는 이만큼 … 브러리입니다

댓글 17건 HEROPY 🔒 Disqus' Privacy Policy 

1 로그인

 Favorite 33 t Tweet f 공유 인기순

토론 참여하기

다음으로 로그인
또는 디스커스에 가입하세요. ?

이름

도현 • 2년 전
많은 도움이 됬습니다.
감사합니다!!
2△ ▽ • 답글 • 공유 ›

motiveko • 6달 전
감사합니다 즐찾즐찾 해놓고갑니다~~!
1△ ▽ • 답글 • 공유 ›

덕구 • 9달 전
최고입니다. 가끔 마크다운 문법이 생각이 나질 않을 때, 항상 이 포스팅을 다시 한 번 읽어 봅니다!
1△ ▽ • 답글 • 공유 ›

김상우 • 일년 전
잘 정리되어 있어서 글에 집중이 잘 됩니다. 고맙습니다.
1△ ▽ • 답글 • 공유 ›

이런저런그런일 • 일년 전
좋은 내용 감사해요.
1△ ▽ • 답글 • 공유 ›

ChoSaJanag • 2년 전
안녕하세요~
마크다운 이해하는데 많은 도움이 되었습니다.
잘 보고 갑니다~^^
1△ ▽ • 답글 • 공유 ›

이재용 • 2년 전
감사합니다 잘 보고 갑니다
1△ ▽ • 답글 • 공유 ›

최상규 • 2년 전
감사합니다. 문법 참고에 많은 도움이 되었습니다.
페이지도 이쁘네요~~
1△ ▽ • 답글 • 공유 ›

김제상 • 2년 전
정리 잘 해주셔서 감사합니다.
1△ ▽ • 답글 • 공유 ›

Ben Koo • 3년 전
좋은글 감사합니다,
1△ ▽ • 답글 • 공유 ›

gene 0910 • 2년 전
자세한 설명 감사합니다.
Atom을 깔고 위의 글을 그대로 옮기면서 연습했습니다. 이페이지에 보이는 그대로를 담는게 목적이
였습니다.
그런데 2가지가 안되어서 질문드립니다.

1.
블록(block) 코드 강조 에서 인용문처럼 표시하고 싶은데... 앞뒤로 ```markdown, ```를 문단전체에 적
용하면 위의 인용문처럼 보이지 않습니다. 즉

```markdown

```html
GOOGLE
```

```css
.list > li {
position: absolute;
top: 40px;
더 보기

△ ▽ • 답글 • 공유 ›
 HEROPY 관리자 > gene 0910 • 2년 전
1번의 답변,
‘블록 코드 강조(```)’는 중첩될 수 없습니다.
쉽게 말씀드리면 ``` 범위 안에 또 다른 ```을 사용할 수 없습니다.
이 블로그에서는 어떻게 위 방식을 만들었는지 말씀드리면,
일반적인 경우 MarkDown을 컴파일하면 HTML 코드로 변환됩니다.
‘블록 코드 강조(```)’는 HTML의 PRE, CODE 태그로 변환되는데 그 변환 결과를 마크다운 ‘원
시 HTML(Raw HTML)’로 직접 작성해 범위를 만들었습니다.
또한 우측 상단의 ‘코드 종류 표시’의 경우, 별도의 스크립트를 작성해 코드 종류를 추출해 표시
하는 방법을 사용했습니다.
즉, 제가 만든 MarkDown 테마라고 생각하시면 됩니다.

2번의 답변,
MarkDown은 표준이 없습니다.
따라서 사용되는 컴파일러에 따라 나오는 결과가 조금씩 다를 수 있습니다.(특정 기능을 지원
하지 않는 컴파일러도 있겠죠)
‘띄어쓰기 2번’이 줄 바꿈이 되지 않는 컴파일러를 사용하는 환경이라면, 당연한 현상이라고 보
시면 됩니다.
더욱 완벽하게 줄 바꿈을 적용하고 싶으시면 BR 태그를 사용하시는 것을 추천드립니다.
참고로 제가 이 블로그에서 사용하는 테마는 ‘띄어쓰기 2번’이나 BR 태그 사용 없이도 일반적
인 줄 바꿈 환경을 그대로 컴파일하도록 설정되어 있습니다.
‘MarkDown은 표준이 없기 때문에 환경에 따라 결과가 다를 수 있다.’로 정리할 수 있겠네요.
△ ▽ • 답글 • 공유 ›

gene 0910 > HEROPY • 2년 전

답변 감사합니다.

궁금증이 싹~ 해결되었습니다.
1△ ▽ • 답글 • 공유 ›

꿈나라 • 2년 전 • edited
안녕하세요?
그누보드 홈페이지에서 마크다운에디터 ( https://sir.kr/cm_free/1522764 ) 를 보고 마크다운이 무엇인
가 찾아보다가 이곳을 들렀습니다.
매우 자세한 설명 덕분에 마크다운에 대한 개념은 확실히 잡았습니다.
감사합니다.^^
그런데 https://sir.kr/cm_free/1522764 과 마크다운의 차이가 뭔지 모르겠습니다.^^;;
△ ▽ • 답글 • 공유 ›

HEROPY 관리자 > 꿈나라 • 2년 전

혹시 공유하신 링크를 확인했을 때 보이는 에디터와 마크다운의 차이점을 질문하시는 건가요?
일반적으로 마크다운만 지원하는 전용 에디터가 아닌 이상, 에디터는 마크다운 외 다른 문법이
나 기능들을 지원할 수 있습니다.
에디터와 마크다운은 별개의 개념이고, 단지 '에디터가 마크다운 문법을 지원한다'로 이해하시
면 쉬울 듯하네요.
△ ▽ • 답글 • 공유 ›

꿈나라 > HEROPY • 2년 전

친절한 답변 감사합니다.^^
깔끔하고 자세한 게시글 덕분에 하나하나 이해하기가 쉽네요~~
항상 행복하세요~~^^
1△ ▽ • 답글 • 공유 ›
HEROPY 관리자 • 3년 전 • edited
@민경운
인라인 코드 강조를 사용하여 HTML로 변환할 경우 실제 <code> 태그로 내용이 랩핑됩니다.
그리고 code { color: orange; font-weight: bold; } 와 같이 CSS를 적용하면 원하는 형태로 수정하여 표시
할 수 있습니다.
△ ▽ • 답글 • 공유 ›

© 2021 | Proudly powered by Hexo

Theme by HEROPY