왜 마크다운 문법이 블로그에 필요한가?

지킬 블로그는 포스트를 markdown을 이용하여 작성한다.

Tistory, Naver등 대중적인 블로그가 채용한 WISYWIG 에디터에 익숙한 사용자들에게는 마크다운 문법이 코딩처럼 어렵게 느껴질 수 있지만, 조금만 익숙해지면 오히려 WISYWIG에디터보다 편하다는 것을 알 수 있을 것이다.

이 포스트에서는 마크다운 문법의 기본을 설명한다.

마크다운 문법 사용 방법

1. 마크다운이란?

마크다운 (Markdown)은 마크업 언어의 일종으로, 존 그루버(John Gruber)아론 스워츠(Aaron Swartz)가 만들었다. 처음 이메일의 글쓰기 형식에 영감받아 python을 이용하여 html변환기를 만드면서 시작되었다. 마크다운 문법은 읽기도 쉽지만 쓰기도 쉽다는 장점이 있다. 그루버는 마크다운으로 작성한 문서를 HTML로 변환하는 펄 스크립트도 만들었다. 확장자는 .md를 쓴다.

즉, 마크다운은 텍스트를 HTML로 변환하는 언어이자 도구 이다. 그리고 다음과 같은 성질을 지닌다.

최근 많은 WYSIWYG에서도 Markdown을 지원하고 있다. 조금만 익숙해 진다면, 그 어떤 에디터보다 빠른 편집을 가능하게 해준다.

마크다운에 대한 자세한 사용법은 아래 링크를 참조하기 바란다.

jekyll기반 블로그에서 고려할 마크다운은 kramdown이다. 그 이유는 Github page에서는 작년 5월부터 kramdown만 지원하기 때문이다.



2.마크다운의 문법

2.1 문단 (Paragraph)

문장의 집합을 문단이라고 한다. 한 문단과 다음 문단 사이는 빈 줄로 구분된다.


1: 첫번째 문단의 첫번째 문장이다.
2: 첫번째 문단의 두번째 문장이다.

3: 두번째 문단의 첫번째 문장이다.
4: 두번째 문단의 두번째 문장이다.

1: 첫번째 문단의 첫번째 문장이다. 2: 첫번째 문단의 두번째 문장이다.

3: 두번째 문단의 첫번째 문장이다. 4: 두번째 문단의 두번째 문장이다.

드래그를 해 보면 알겠지만, 2:번째 줄과 3:번째 줄 사이는 드래그가 되지 않는다.


2.2 제목 (Header)

2.2.1 간편하게 설정하기 : === & ---

  마크다운 실행결과
큰 제목 Header H1
===
<h1>Header H1</h1>
작은 제목 Subheader H2
---
<h2>Subheader H2</h2>

2.2.2 # 으로 헤더 설정하기

마크다운 실행결과
<pre>#This is H1 <h1>This is H1
<pre>##This is H2 <h2>This is H2
<pre>###This is H3 <h3>This is H3
<pre>####This is H4 <h4>This is H4
<pre>#####This is H5 <h5>This is H5
<pre>######This is H6 <h6>This is H6
<pre>#######This is H7</pre>=>Not Supported! <h6>This is H7</h6>=>Not Supported!

2.3 블록 인용구 (Block quote) : >

    >This is block quote.
    >I can highlight lines
    >> And also do on multiple levels!

This is Block quote. I can highlight multiple lines

And also do on multiple levels!


2.4 코드 (Code)

  마크다운 실행결과
''' or \~\~~ ’’‘
This is code block
’’’
<pre>This is code block
\` | <pre>python은 \`print()\`를 사용한다. | python은 `print()`를 사용한다.    
blockquote <pre><blockquote>
\<p>This is code block\</p>
\<\/blockquote\>
<pre>This is code block
    int val = 10;
    printf(%s,"Hello, World!");

2.5 강조 (Emphasis) : \* or \_

    마크다운 실행결과
기울여쓰기(Italic) \* or \_ <pre>이것을 \*강조\*합니다. 이것을 _강조_합니다.
굵게 쓰기(Bold) \*\* or \_\_ <pre>이것을 \*\*강조\*\*합니다. 이것을 강조합니다.
트리플 강조구문 \*\*\* or \_\_\_ <pre> 이것을 \*\*\*강조\*\*\*합니다. 이것을 강조 합니다.

###2.6 구분선 (Horizontal Rules) : \*\*\* or --- or \_\_\_ \*\*\* or --- or \_\_\_를 사용하여 수평2.7선을 그립니다.

코드
***

실행결과 :



2.7 목록 (List)

2.7.1 번호 목록 (Ordered List)

번호 목록 뒤죽박죽 번호 중복되는 번호
1. First line
2. Second line
3. Third line
4. Last line
1. First line
4. Last line
3. Third line
2. Second line
1. First line
2. Second line

1. Third line
2. Last line

놀랍게도, 위 코드의 실행결과는 모두 아래와 같다.

  1. First line
  2. Second line
  3. Third line
  4. Last line

2.7.2 기호 목록 (Unordered List)

  • Level 1
    • Level 2
      • Level 3
  • Level 1
    • Level 2
      • Level 3
  • Level 1
    • Level 2
      • Level 3
  • Level 1
    • Level 2
      • Level 3

2.8 링크 (Link)

2.8.1 외부 링크 (External Link)

  마크다운 실행결과
인라인 링크 [Google](http://www.google.co.kr“구글”) Google
참조 링크 검색엔진은 [Google][1] 이 있다.
(…본문…)
[1]: http://google.com/ “구글”
검색엔진은 google이 있다.
url 링크 <http://www.google.co.kr> http://www.google.co.kr

2.8.2 내부 링크 (Internal Link)

  마크다운 실행결과
내부 링크 [링크](#id) 링크

2.9 표 (Table)

2.9.1 표의 구조 (Table Structure)

| First Header  | Second Header | Third Header         |
| :------------ | :-----------: | -------------------: |
| First row     | Data          | Very long data entry |
| Second row    | **Cell**      | *Cell*               |
| Third row     | Cell that spans across two columns  ||
[Table caption, works as a reference][section-mmd-tables-table1]
First Header Second Header Third Header
First row Data Very long data entry
Second row Cell Cell
Third row Cell that spans across two columns  

[Table caption, works as a reference][section-mmd-tables-table1]

2.9.2 표의 정렬 (Alignment)

표를 정렬하기 위해서는 : 를 헤더의 양쪽 혹은 한쪽에 삽입한다.

| Header One | Header Two | Header Three | Header Four |
| ---------- | :--------- | :----------: | ----------: |
| Default    | Left       | Center       | Right       |
Header One Header Two Header Three Header Four
Default Left Center Right

2.9.3 열 병합 (Column spanning)

| Column 1 | Column 2 | Column 3 | Column 4 |
| -------- | :------: | -------- | -------- |
| No span  | Span across three columns    |||
Column 1 Column 2 Column 3 Column 4
No span Span across three columns    

2.9.4 표 내부에 블럭 / 코드 삽입하기

표 내부에서 줄바꿈을 지원하지 않기 때문에, <\br>을 직접 입력해야 한다.

  마크다운 실행결과
블록 <pre>This is first.
This is second.
This is first.
This is second.
줄바꿈 <pre>\\<blockquote>This is block <blockquote>This is block
코드 <pre>\\<pre>\\This is code block | <pre>This is code block</pre>  

2.10 이미지 (Image) : `![이미지 이름](이미지 주소)`

이미지는 링크를 삽입하는 것과 매우 유사하다. 인라인, 링크, 참조 모두 사용 가능하다. 다만, !문자를 앞에 붙혀주면 된다.

  마크다운 실행결과
이미지 !(markdown_logo)(https://raw.github.com/dcurtis/markdown-mark/master/png/208x128.png) markdown_logo

2.11 이스케이프(Backslash Escape) : \\


2.12 주석 : \\<!-- & -->

주석은\\<!---->로 감싸주어서 <!-- 주석처리 -->와 같이 처리한다.


2.13 목차 생성하기 : \{:toc}

문서 내에 사용된 헤딩 태그들을 이용하여 ‘{:toc}’입력 시 목차가 자동 생성된다. 상단 목차 참고.


2.14. 각주 : [\^myfootnote]

각주란 본문의 어떤 부분을 설명하거나 보충하기 위해 본문 아래쪽에 별도로 작성하는 간단한 설명문으로서 주로 내용의 출처를 밝힐 때 사용된다.

에릭 레이먼드는 파이썬을 배운지 하루만에 원하는 프로그램을 작성할 수 있었다고 한다. [^myfootnote]

[^myfootnote]: 에릭 레이먼드는 프로그래밍 경험이 많은 구루 프로그래머이다. 보통 사람은 파이썬을 배우고 사용하는 데 1주일 정도의 적응 시간이 필요할 것이다.


[]test [x]test2

Comments

Eungbean Lee's Picture

About Eungbean Lee

Lee is a Student, Programmer, Engineer, Designer and a DJ

Seoul, South Korea https://eungbean.github.io