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

2015. 10. 21. 18:36팁/Markdown

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




이전 포스트 : 마크다운 (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>


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


' > Markdown' 카테고리의 다른 글

마크다운 (Markdown)이란 무엇일까?  (2) 2015.10.20