Jekyll 블로그를 만들고 이제 여러 글을 올리려고 하던 중, 문제가 발생했다. 게시물을 만들려면 .md 파일로 게시물을 작성해야 하는데, markdown(마크다운) 문법에 대해 아주 기본적인 것밖에 모른다는 것이다.
그래서 첫 블로그 포스트로 markdown 문법 및 markdown의 개조판인 kramdown에 대해 정리해볼려고 한다.
*글에서 markdown 또는 마크다운처럼 영어, 한글 혼용하는 것에 양해 부탁드립니다.

전체 내용

MarkDown(마크다운)언어란?
마크다운의 장단점
MarkDown 기본 문법
Header (H1 ~ )
Emphasis (강조)
Paragraphs (줄바꿈)
List (목록)
4.1 Ordered List
4.2 Unordered List
Table(테이블)
Block (블록)
6.1 BlockQuote (블록 인용구)
6.2 Code Block (코드 블록)
6.2+ Inline Code
6.2++ syntax color
Horizontal Rules (가로선)
Link (링크)
8.1 일반 링크
8.2 이미지
8.3 각주
HTML attribute (HTML요소 처리)
마무리
참고자료

MarkDown(마크다운)언어란?

마크다운은 텍스트 기반의 마크업언어로 2004년 John Gruber(존 그루버)에 의해 만들어졌으며, 쉽게 쓰고 읽을 수 있고 HTML로 변환이 가능하다. 특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서도 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있다.
마크다운이 최근 각광받기 시작한 이유는 깃허브(GitHub) 덕분이다. 깃헙의 ‘Repository(저장소)’에 관한 정보를 기록하는 ‘README.md’는 깃헙을 사용하는 사람이라면 누구나 가장 먼저 접하게 되는 마크다운 문서였다. 마크다운을 통해서 설치방법, 소스코드 설명, 이슈 등을 간단하게 기록하고 가독성을 높일 수 있다는 강점이 부각되면서 현재는 벨로그(velog), 티스토리(thistory) 등 다양한 블로그 플랫폼에서 지원하고 있다.

kramdown(크렘다운)은?

마크다운 역시 한계가 있기에, 이런 마크다운을 약간 개조한 것으로 Github-Flavored Markdown, GFM 등이 생겼고, Kramdown 역시 이들 같은 마크다운의 개조판이다. 이 블로그의 엔진인 Jekyll에서 채택한 마크다운 엔진이라, 알아보게 되었다.

마크다운의 장단점

장점

간결하다.
별도의 도구없이 작성가능하다.
다양한 형태로 변환이 가능하다.
텍스트(Text)로 저장되기 때문에 용량이 적어 보관이 용이하다.
텍스트파일이기 때문에 버전관리시스템을 이용하여 변경이력을 관리할 수 있다.
지원하는 프로그램과 플랫폼이 다양하다.

단점

표준이 없다.
표준이 없기 때문에 도구에 따라서 변환방식이나 생성물이 다르다.
모든 HTML 마크업을 대신하지 못한다.

MarkDown 기본 문법

1. Header (H1 ~ ) - `#`

code

# This is a H1

## This is a H2

### This is a H3

...

view
This is a H1
This is a H2
This is a H3

2. Emphasis (강조) - `*`, `_`, `~~`

code

*이것은 이텔릭, **진하게** *
_이것도 이텔릭, __진하게__ _
_이것은 이텔릭, ~~취소선~~ _

view

이것은 이텔릭, 진하게
이것도 이텔릭, 진하게
이것은 이텔릭, ~~취소선~~

3. Paragraphs (줄바꿈) - `^[space]`

code

같은 라인
같은 라인
다른 라인 //^[space]^[space]
다른라인

view

같은 라인 같은 라인
다른 라인
다른라인

4. List (목록)

4.1 Ordered List - [번호] + .

code & view

Ordered List1

1.  List Item 1
2.  List Item 2
3.  2번째인듯한 List Item 3
    ,다음줄인 듯한 3번째 뒷부분

Ordered List1
List Item 1
List Item 2
2번째인듯한 List Item 3 ,다음줄인 듯한 3번째 뒷부분

Ordered List2

1. List Item 1

  > with blockquote

  # with header

2. List Item 2

Ordered List2
List Item 1
with blockquote
with header
List Item 2

Ordered List3

List Item 1
Sub List Item 1
Sub List Item 2
Sub List Item 3
List Item 2

Ordered List3
List Item 1
Sub List Item 1
Sub List Item 2
Sub List Item 3
List Item 2

4.2 Unordered List - *, +, -

code

Unordered List1

* List Item 1
  * List Item 2

+ List Item 1
  + List Item 2

- List Item 1
  - List Item 2

(혼용 가능)
- List Item 1
  + List Item 2

view
Unordered List1
- List Item 1
  - List Item 2
- List Item 1
  - List Item 2
- List Item 1
  - List Item 2

5. Table(테이블)

<table>, <thead>, <tbody>, <tfoot>, <tr>, <td>의 table형식으로 만들어 줌
| 파이프 라인으로 컬럼을 구분
:-------로 헤더와 body를 구분해줌.
---- 테이블 body간을 구분
====로 테이블 foot을 구분

code

| 헤더1 | 헤더2 | 헤더3 |
|:--------|:-------:|--------:|
| 컬럼1   | 컬럼2   | 컬럼3   |
| 컬럼4   | 컬럼5   | 컬럼6   |
|----
| 컬럼1   | 컬럼2   | 컬럼3   |
| 컬럼4   | 컬럼5   | 컬럼6   |
|=====
| Foot1   | Foot2   | Foot3
{: rules="groups"}

view

헤더1 헤더2 헤더3
컬럼1 컬럼2 컬럼3
컬럼4 컬럼5 컬럼6
Foot1 Foot2 Foot3

헤더1	헤더2	헤더3
컬럼1	컬럼2	컬럼3
컬럼4	컬럼5	컬럼6
Foot1	Foot2	Foot3

6. Block (블록)

6.1 BlockQuote (블록 인용구) - >

code

> This is a first blockqute.
>
> > ### This is a second "H3" blockqute.
> >
> > > - This is a third "List" blockqute.

view
This is a first blockqute.
This is a second “H3” blockqute.
- This is a third “List” blockqute.

6.2 Code Block (코드 블록) - <Tab>(띄어쓰기 4개), `X3

code & view - `<Tab>`

    function sampleFunc(pram) {
      var pre = 'Hello!!';
      var nxt = 'Bye~';
      return pre + param + next;
    }

function sampleFunc(pram) {
  var pre = 'Hello!!';
  var nxt = 'Bye~';
  return pre + param + next;
}

code & view - `X3

```
function sampleFunc(pram) {
  var pre = 'Hello!!';
  var nxt = 'Bye~';
  return pre + param + next;
}
```

function sampleFunc(pram) {
  var pre = 'Hello!!';
  var nxt = 'Bye~';
  return pre + param + next;
}

6.2+ Inline Code - `

문장내의 `Inline Code` 사용
`` `code` `` 표시

문장내의 Inline Code 사용
`code` 표시

6.2++ syntax color - `X3 + `프로그래밍 언어명`

깃헙에서는 코드블럭 특수문자(```) 시작점에 사용하는 언어를 선언하여
문법강조(Syntax highlighting)가 가능하다

```javascript
function sampleFunc(pram) {
  var pre = "Hello!!";
  var nxt = "Bye~";
  return pre + param + next;
}
```

function sampleFunc(pram) {
	var pre = "Hello!!";
	var nxt = "Bye~";
	return pre + param + next;
}

7. Horizontal Rules (가로선) - `***`, `---`

code
```
  ***
  ---
```
view

블로그 css style 때문에 잘 안 보인다…

8. Link (링크)

8.1 일반 링크 - [키워드](url "툴팁")

code

  [외부링크](https://www.google.com "구글")

  이건 [참조링크]
  [참조링크]: https://dj-1087.github.io "Click!"

view

외부링크
이건 참조링크

8.2 이미지 - ![키워드](url "툴팁")

code

![고양이](http://drive.google.com/uc?export=view&id=1OrszOIhR1JR0dnNok9ExB1TXKoY0cDIC "cat")

view

8.3 각주

code

각주1[^1].
각주2[^2].

[^1]: 각주1에 대한 설명
[^2]: 각주 설명으로 돌아가기(클릭)

view
각주¹. 각주².

9. HTML attribute (HTML요소 처리)

아래와 같이 markdown문법에 임의의 html attribute, class, id 속성을 줄 수 있다.

```
> 블럭문구
{: title="Blockquote title"}

> 블럭문구
{: .class1 .class2}

> 블럭문구
{: #custom_id}
```

아래와 같이 둘러 쌓을 수도 있다.

```
{:refdef: .c1 #id .c2 title="title"}
둘러쌓아진 문단
다음줄
{: refdef}
```

마무리

마크다운은 기본문법만 알고있다면 일반 텍스트 편집기에서도 손쉽게 작성이 가능한 마크업 언어다. 또한 현재 마크다운 문법을 쉽게 적용할 수 있는 다양한 편집기와 플랫폼들이 등장했기에 더욱 간편하게 가독성이 높은 문서를 작성할 수 있게 되었고, 점점 널리 사용되고 있는 추세이다.

많은 개발자들이 깃허브를 이용하며 ‘README.md’를 통해 자신이 수행한 프로젝트 혹은 풀었던 알고리즘 문제 등을 정리해나간다. 그렇기에 차근차근 성장해 나가고 있는 주니어 개발자로써 마크다운 문법은 반드시 숙지해야 한다고 느꼈다.

P.S.

마크다운에 익숙하지 않아서 블로그 글 쓰는데 하룻밤을 새웠습니다ㅠㅠ
그래도 이렇게 한번 정리해놨으니 앞으로 저도 이 글을 참고하면서 계속해서 글을 쓰고 실력을 길러야겠네요 :)
이 글을 보신 여러분들도 제 글이 많은 도움이 되길 바랍니다ㅎㅎ
추후 더 찾게 되면 계속해서 추가겠습니다! 감사합니다!!
오늘의 명언
What you see is what you get - WYSIWYG(위즈윅) -

참고자료

마크다운(Markdown) 사용법 · GitHub
kramdown(마크다운) 사용하기 – IT Note
markdown vs kramdown 차이점 - NugiSquare
WYSIWYG 에디터

각주1에 대한 설명 ↩︎
각주 설명으로 돌아가기(클릭) ↩︎

전체 내용

MarkDown(마크다운)언어란?

kramdown(크렘다운)은?

마크다운의 장단점

장점

단점

MarkDown 기본 문법

1. Header (H1 ~ ) - #

code

view

This is a H1

This is a H2

This is a H3

2. Emphasis (강조) - *, _, ~~

code

view

3. Paragraphs (줄바꿈) - ^[space]

code

view

4. List (목록)

4.1 Ordered List - [번호] + .

code & view

with header

4.2 Unordered List - *, +, -

code

view

5. Table(테이블)

code

view

6. Block (블록)

6.1 BlockQuote (블록 인용구) - >

code

view

This is a second “H3” blockqute.

6.2 Code Block (코드 블록) - <Tab>(띄어쓰기 4개), `X3

code & view - <Tab>

code & view - `X3

6.2+ Inline Code - `

6.2++ syntax color - `X3 + 프로그래밍 언어명

7. Horizontal Rules (가로선) - ***, ---

code

view

8. Link (링크)

8.1 일반 링크 - [키워드](url "툴팁")

code

view

8.2 이미지 - ![키워드](url "툴팁")

code

view

8.3 각주

code

view

9. HTML attribute (HTML요소 처리)

마무리

P.S.

오늘의 명언

참고자료

Share this post

1. Header (H1 ~ ) - `#`

2. Emphasis (강조) - `*`, `_`, `~~`

3. Paragraphs (줄바꿈) - `^[space]`

4.1 Ordered List - [번호] + `.`

4.2 Unordered List - `*`, `+`, `-`

6.1 BlockQuote (블록 인용구) - `>`

6.2 Code Block (코드 블록) - `<Tab>`(띄어쓰기 4개), `X3

code & view - `<Tab>`

6.2++ syntax color - `X3 + `프로그래밍 언어명`

7. Horizontal Rules (가로선) - `***`, `---`

8.1 일반 링크 - `[키워드](url "툴팁")`

8.2 이미지 - `![키워드](url "툴팁")`