마크다운의 문법을 알아보자 (1편)

이 문서는 암묵적인 룰에 의해 마크다운으로 작성되었습니다

이전 포스트 : 마크다운 (Markdown)이란 무엇일까? 편을 보고 오시는 것을 추천합니다.

마크다운 문법

지난 포스트에서는 간단한 소개와 에디터를 작성했다.

이번 포스트에서는 마크다운의 문법을 나열하고, 그 문법에 하나하나 대응하는 html 태그들을 작성하려고 한다. 존 그루버가 만든 마크다운 문법 외에도 fletchetpenney.net에서 만든 MultiMarkdown, Github (Github.com)에서 만든 Github-Flavored Markdown이 있다.

필자는 하루패드(Haroopad)를 이용하여 작성하다보니 Haroopad Flavored Markdown도 추가하게 되었다.

제목

#의 개수로 html의 <h1>~<h6>까지 표현할 수 있다.

마크다운 문법	html 태그	설명	예제
#내용	<h1>내용</h1>	제목 1	제목1
##내용	<h2>내용</h2>	제목 2	제목2
###내용	<h3>내용</h3>	제목 3	제목3
####내용	<h4>내용</h4>	제목 4	제목4
#####내용	<h5>내용</h5>	제목 5	제목5
######내용	<h6>내용</h6>	제목 6	제목6

표현

마크다운 문법	html 태그	설명	예제	비고
**내용**	<b>내용</b>	굵게	굵게
*내용*	<i>내용<i>	기울이기	기울이기
++내용++	<u>내용</u>	밑줄	밑줄	MultiMarkdown
~~내용~~	<del>내용</del>	취소선	취소선	Github Flavored markdown
==내용==	<strong class='highlight'>내용</strong>	강조	강조	Haroopad Flavored Markdown
^내용^	<strong class='superscript'>내용</strong>	윗첨자	윗첨자
~내용~	<strong class='subscript'>내용</strong>	아랫첨자	아랫첨자
[링크](링크 주소)	<a href='링크 주소'>링크</a>	링크	링크
> 내용	<blockquote> 내용 </blockquote>	인용구	인용구

삽입 (이미지, 임베딩)

마크다운 문법	html 태그	설명	비고
	<img src='이미지 링크' alt='{설명}'>	이미지 첨부
@[설명](미디어 URL)	유튜브 등의 <embed>태그	미디어 삽입	Haroopad Flavored Markdown

[설명] 부분의 내용 작성여부는 상관없다.

이미지 예제

![마크다운 로고](https://t1.daumcdn.net/cfile/tistory/23364146562748C517)

임베딩 예제

![Capsule - Another World](https://www.youtube.com/watch?v=LZ6-PfPx0EM)

뜬금없는 캡슐

코드

마크다운 문법	html 태그	설명	예제	비고
`코드`	<code>코드</code>	인라인 코드	인라인 코드
``` 코드 ```	<pre><code>코드</code></pre>	팬스 코드 블럭		Github Flavored Markdown

팬스 코드 블럭 (Fence code block) 예제

```

<img src=https://t1.daumcdn.net/cfile/tistory/23364146562748C517>

```

<img src=https://t1.daumcdn.net/cfile/tistory/23364146562748C517>

마크다운 문법에 대한 레퍼런스

• John Gruber’s Markdown http://daringfireball.net/projects/markdown/syntax
• Github Flavored Markdown http://github.github.com/github-flavored-markdown
• MultiMarkdown http://fletcherpenney.net/multimarkdown
• Haroopad Flavored Markdown http://pad.haroopress.com/page.html?f=markdown