[MarkDown] 마크다운 문법 정리

sunny·2020년 12월 7일
0
post-thumbnail
맨날 헷갈려서 정리해보는 마크다운 문법🧐

마크다운이란?

텍스트 기반의 마크업언어로 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다. 특수기호와 문자를 이용한 간단한 구조의 문법을 사용하여 웹에서 보다 빠르게 컨텐츠를 작성하고 직관적으로 인식할 수 있다.


마크다운 문법


1. 제목

  • 1~6까지만 지원
# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6

✔️결과

제목 1

제목 2

제목 3

제목 4

제목 5
제목 6
  • =, -를 사용해 #를 대체할 수 있다.
h1
==
h2
--

하이픈을 여러 개 사용
----------

✔️결과

h1

h2

하이픈을 여러 개 사용


2. 수평선

  • *, -, _ 등을 3개 이상 입력하면 작성할 수 있다.
***
---
-----------

✔️결과






3. 줄바꿈

  • 문장 뒤에 띄어쓰기를 3번 이상 하거나 <br>, </br> 사용
줄바꿈<br>
줄바꿈

✔️결과
줄바꿈
줄바꿈


4. 폰트 스타일

__Bold__
**Bold**
_Italic_
*Italic*
~~Cancelline~~
<U>Underscore</U>

✔️결과
Bold
Bold
Italic
Italic
Cancelline
Underscore


5. 인용문

  • >의 갯수에 따라 중첩인용 가능
> 첫번째 인용문
>> 두번째 인용문
>>> 세번째 인용문

✔️결과

첫번째 인용문

두번째 인용문

세번째 인용문


6. 목록

6.1 순서있는 목록

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

✔️결과

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

  • 순서를 바꿔 입력해도 순서는 내림차순으로 표시된다.
1. 첫 번째
3. 두 번째
2. 세 번째

✔️결과

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

6.2 순서없는 목록

  • -, *, + 사용
  • Tab, space bar를 통해 들여쓰기를 할 수 있다.
* 목록1
  * 목록1.1
    * 목록1.2

- 목록2
		
        Tab 두번 하면 코드 블럭을 만들 수 있다.

+ 목록3
  + 목록3.1
    + 목록3.2

✔️결과

  • 목록1
    • 목록1.1
      • 목록1.2
  • 목록2
      Tab 두번 하면 코드 블럭을 만들 수 있다.
  • 목록3
    • 목록3.1
      • 목록3.2

7. 한줄코드

`console.log('한줄코드')`

✔️결과
console.log('한줄코드')


8. 코드블록

``` 
console.log('여러줄로')
console.log('이루어진')
console.log('코드블럭')
``` 

✔️결과

console.log('여러줄로')
console.log('이루어진')
console.log('코드블럭')
  • <pre><code>{code}</code></pre> 로도 사용 가능
<pre>
<code>
public class MarkDownTest {
  public static void main(String[] args) {
    System.out.println("Hello, MarkDown");
  }
}
</code>
</pre>

✔️결과


public class MarkDownTest {
  public static void main(String[] args) {
    System.out.println("Hello, MarkDown");
  }
}


9. 테이블

| Table Header1 | Table Header2 | Table Header3 |
|:----------|:----------:|----------:|
| **Cell** | Cell | ~~Cell~~ |
| Cell | Cell | Cell |
| Cell | Cell | Cell |

✔️결과

Table Header1Table Header2Table Header3
CellCellCell
CellCellCell
CellCellCell


10. 이미지

![이미지 설명](이미지 링크)
![쿼카](https://www.traveller.com.au/content/dam/images/g/u/n/q/h/0/image.related.articleLeadwide.620x349.gunpvd.png/1488330286332.png)

✔️결과

  • 이미지에 링크 걸기
[![이미지 설명](이미지 링크)](연결url)
[![쿼카](https://www.traveller.com.au/content/dam/images/g/u/n/q/h/0/image.related.articleLeadwide.620x349.gunpvd.png/1488330286332.png)](https://en.wikipedia.org/wiki/Quokka)

✔️결과


11. 체크박스

- [x] 청소하기
- [ ] 공부하기

✔️결과

  • 청소하기
  • 공부하기
profile
blog 👉🏻 https://kimnamsun.github.io/

0개의 댓글