Markdown 문법 및 사용법

Markdown

• 텍스트 기반의 마크업 언어
• 특수기호와 문자를 이용한 간단한 문법 구조
• HTML 변환가능(웹에서 사용가능)

장점

• 간결하고 쉬운 문법
• 편리한 에디터가 다양
• 용량이 적다

단점

• 표준이 없다
• 변환방식이나 결과물이 다를 수 있음.
• 모든 html 의 마크업을 대체할 수 없음
  • 티스토리 블로그의 경우 지원하지 않는 형식이 존재
• 글자 색상, 같은 문단의 글자크기 변경의 기능 없음
  • html 의 기능 혼합사용하면 가능

사용

• Github 의 .md 의 파일 확장자, Atom, Typora, Wordpress 등등

작성자 본인은 Typora 애용

---

Markdown 사용법

개인적으로 자주 사용하는 것 같은 문법들 순으로 정리해보았다.

1. header (헤더)

# h1
h1
=====
## h2
h2
-----
### h3
#### h4
##### h5
###### h6 (h5와 크기는 동일, 명암이 다름)
####### h7(지원하지 않음)

• h1과 h2 는 바로 아래 수평선이 생성된다. (티스토리에선 생성 안되는 듯)
  • '='와 '-'의 정해져 있는 개수 없음
• h1 ~ h6 까지만 지원

h1

h2

h3

h4

h5

h6 (h5와 크기는 동일, 명암이 다름)

####### h7(지원하지 않음)

2. Emphasis (강조)

*Italics*:
_Italics_

**thick**
__thick__

_**thick Italic**_

~~cancle~~

<u>underline</u>

Italics:
Italics

thick
thick

thick Italic

cancle

underline

3. List (목차)

3-1. 순서 없는 목록

• list
  • list
    • list
• list
  • list
    • list
• list
  • list
    • list

* list
  * list
    * list

+ list
  + list
    + list

- list
  - list
    - list

3-2. 순서 있는 목록

1. 첫번째
2. 두번째
3. 세번째
   1. 첫번쨰
   2. 두번째
      1. 첫번째

1. 첫번째
2. 두번째
3. 세번째
   1. 첫번쨰
   2. 두번째
      1. 첫번째

4. Code (코드)

4-1. Inline code Syntax highlighting (인라인(같은줄)코드 강조)

Inline code emphasize 같은 줄 코드 강조

`Inline code emphasize` 같은 줄 코드 강조

`은 숫자 1 옆에 ~와 함께 있는 기호

4-2. Code block

Code block
코드블럭

```markdown
Code block
코드블럭
​```

• ``` code type ``` : 코드 종류를 기입하면, Syntax highlighting(문법에 따라 색깔 구분) 가능
  • 지원 안하는 플랫폼 있을 수 있음

5. Blockquote (인용문)

> first blockqute.
>> second blockqute.
>>> third blockqute.

first blockqute.

second blockqute.

third blockqute.

• Blockquote (인용블럭)안에서 다른 markdown 문법요소 사용 가능

인용문

• 리스트

code

codeblock

6. horizontal line (수평선)

---
***
___

---

---

---

• 개수는 3개 이상이면 상관없다

7. Line break (줄바꿈)

* This is linebreak<br>next line

• This is linebreak
  next line

8. Link (링크연결)

8-1. 페이지 전환

문법:

1. [link keyword][link URL "title(link info)"]
   • "title" is optional(타이틀은 선택사항이다.)
2. <link ID>

[dilee의 Tistory](https://dilee.tistory.com "dilee tistory blog link")
DI-LEE github : <https://github.com/DI-LEE>

dilee의 블로그

DI-LEE github : https://github.com/DI-LEE

8-2. 새 탭으로 열기

문법:

[link keyword](link URL){:target = "_blank"}

[dilee의 Tistory](https://dilee.tistory.com){:target="_blank"}

dilee의 Tistory{:target="_blank"}

지원을 안해주는 플랫폼들이 존재하기에 html 을 이용 할 수 있다.

html의 <a> 사용

<a href="https://www.google.com/" target="_blank">dilee의 tistory</a>
<a href="https://github.com/DI-LEE" target = "_blank">DI-LEE github</a>

dilee의 tistory

DI-LEE github

새 탭으로 열리는 것을 확인할 수 있다.

9. Image (이미지)

• 링크연결과 같은 문법에 앞에 !를 추가해주면 된다.
  • image에서 title은 마우스커서를 대고 있으면 보인다.
• ![keyword](link URL "title is optional")
• 링크와 유사하게 웹주소를 사용해야 한다.
• 웹에 이미지를 가지고 있지 않다면, 본인 github에 올리는 것을 추천

![myimage](https://tistory2.daumcdn.net/tistory/4832947/attach/6fd8873749114adaae67a4112f28716c "myprofileimage")

사이즈 조절

• Markdown 문법에서는 사이즈 조절 기능이 없기 때문에 html 문법을 사용해야 한다.
• html의 <img width="" height=""></img> 사용

<img src="https://tistory2.daumcdn.net/tistory/4832947/attach/6fd8873749114adaae67a4112f28716c " width="450px" height="300px" title="px(픽셀) 크기 설정" alt="Mydesk"></img>
<img src="https://tistory2.daumcdn.net/tistory/4832947/attach/6fd8873749114adaae67a4112f28716c " width="40%" height="30%" title="px(픽셀) 크기 설정" alt="Mydesk"></img>

10. 표작성

|제목|내용|설명|
|------|---|---|
|테스트1|테스트2|테스트3|
|테스트1|테스트2|테스트3|
|테스트1|테스트2|테스트3|

제목	내용	설명
테스트1	테스트2	테스트3
테스트1	테스트2	테스트3
테스트1	테스트2	테스트3

정렬

|제목|내용|설명|
|:---|---:|:---:|
|왼쪽정렬|오른쪽정렬|중앙정렬|
|왼쪽정렬|오른쪽정렬|중앙정렬|
|왼쪽정렬|오른쪽정렬|중앙정렬|

제목	내용	설명
왼쪽정렬	오른쪽정렬	중앙정렬
왼쪽정렬	오른쪽정렬	중앙정렬
왼쪽정렬	오른쪽정렬	중앙정렬