개발하다보면 깃허브 리드미, velog, 지금 사용하고 있는 옵시디언(obsidian) 등 마크다운(Markdown)을 많이 쓰게 됩니다. Markdown 문법을 정리할 겸 블로그 글을 작성하게 되었습니다.

제목(Heading)

h1부터 h6까지 #를 붙여 사용 가능합니다.

# Heading1

## Heading2     

### Heading3

#### Heading4

##### Heading5

###### Heading6

결과)

Heading1

Heading2

Heading3

Heading4

Heading5

Heading6

일반 본문

---

강조(Text attributes)

아래와 같이 텍스트에 강조 효과를 줄 수 있습니다.

It is *wonderful* ==> 이탤릭

It is **wonderful**  ==> 굵게

It is ***wonderful*** ==> 굵게 + 이탤릭

It is ~~wonderful~~ ==> 취소선

It is <u>wonderful</u> ==> 밑줄

결과)

It is wonderful
It is wonderful
It is wonderful
It is wonderful
It is wonderful

---

인용문(Quote)

> 를 이용하며, 중첩해 사용하거나 안에서 다른 마크다운 요소를 쓸 수 있습니다.

> I'm queen!!!!

> I'm queen!!!!
>> I'm queen!!!!
>>> I'm queen!!!!

> #### Heading4
* List1
> > * List 2
>>> ##### CodeBlock
>>>```
CodeBlock
>>>```

이런 식으로 복잡하게 중첩해서 쓸 수도 있습니다.

결과)

I'm queen!!!!

I'm queen1

I'm queen2

I'm queen3

Heading4

• List1

  • List 2

    CodeBlock

    CodeBlock

---

목록(List)

• 순서 없는 목록(Bullet List)

  * , + , - 를 이용하며, 혼합해서 사용하는 것도 가능합니다.

Fruits:
* apple
* pear
* grapes
* mango

vegetables:
+ lettuce
+ green onion
+ cabbage
+ mushroom

other fruits:
* watermelon
	+ orange
		- plum

결과)



결과물이 velog에서는 제대로 나오지 않아서 마크다운 파일을 하나 생성해서 나온 결과 사진을 첨부했습니다.

---

• 순서 있는 목록(Numbered List)

  순서 있는 목록은 숫자와 점을 이용해 나타낼 수 있습니다.

1. first
2. second
3. third

1. first
2. second
3. third

번호의 순서가 틀리더라도 처음 시작한 숫자부터 내림차순으로 정의됩니다.

2. first
6. second
1. third

2. first
3. second
4. third
   
   

맨 처음 시작 숫자가 2이기 때문에 2 , 3 , 4로 나타나는 걸 볼 수 있습니다.

---

링크(Link)

Click [원하는 텍스트](링크)
This is [google](https://www.google.com/)

Click 원하는 텍스트
This is google

This is [google](https://www.google.com/ "구글로 이동")

위처럼 뒤에 설명을 붙이게 되면, 마우스를 가져다 댔을 때 아래처럼 뜨게 됩니다.

This is google

---

이미지(Image)

이미지도 링크와 같은 방법으로 삽입할 수 있습니다.

![이미지 설명](이미지 링크)

별도의 사이즈 조절 기능이 없기 때문에 이런 부분을 조정하고 싶다면 <img> 태그를 써야 합니다.

• 사이즈 조절
  <img src="이미지주소" width="" height=""></img>

예시)
<img src="이미지주소" width="800px" height="500px"></img>

---

테이블(Table)

| 문자와 - 문자로 표를 만들 수 있습니다.

|Header|Description|
|--|--|
|cell1|cell2|
|cell1|cell2|
|cell1|cell2|
|cell1|cell2|

Header	Description
cell1	cell2
cell1	cell2
cell1	cell2
cell1	cell2

: 문자를 사용하면 정렬을 할 수 있습니다.
아래의 예제는 cell1은 중앙정렬, cell2는 우측정렬을 해봤습니다.

|Header|Description|
|:--:|--:|
|cell1|cell2|
|cell1|cell2|
|cell1|cell2|
|cell1|cell2|

Header	Description
cell1	cell2
cell1	cell2
cell1	cell2
cell1	cell2

---

코드(Code)

마크다운으로 코드를 삽입하는 방법에는 인라인(Inline) 과 코드블럭(CodeBlock) 으로 삽입하는 2가지 방법이 있습니다.
두 방법 다 백틱(`) 을 이용하여 사용할 수 있습니다.

• 인라인(Inline) 코드 삽입

`console.log('inline')`
<code>console.log('inline')</code>

console.log('inline')
console.log('inline')

• 코드블럭(Code block) 삽입

  백틱(`) 3개를 위아래로 붙여 사용합니다.
  
  

```
console.log('block1')
console.log('block2')
console.log('block3')
```

console.log('block1')
console.log('block2')
console.log('block3')

``` 뒤에 사용하는 언어를 넣으면 문법 강조(Syntax highlighting) 가 가능합니다.

``` js
console.log('block1')
console.log('block2')
console.log('block3')
```

console.log('block1')
console.log('block2')
console.log('block3')

---

줄바꿈

줄 바꿈은 문장 마지막에서 3칸 이상을 띄어쓰기( )해야 합니다.

이 문장은 ___ 줄 바꿈 예시입니다.

이 문장은
줄 바꿈 예시입니다.

---

수평선

아래 있는 줄은 모두 수평선을 만듭니다.

***
---
----------- ----

---

---

---

참고

https://gist.github.com/ihoneymon/652be052a0727ad59601