Markdown 작성법

---

#1. Markdown 작성법

1. 마크다운이란?

Markdown은 텍스트 기반의 마크업 언어로 2004년 존그루버에 의해 만들어졌다. 특수 기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있다.

최근 깃헙(github) 에서 마크다운을 통해 설치방법, 소스코드 설명, 이슈들을 간단하게 기록하고 가독성을 높일 수 있다는 강점이 부각 되면서 많이 쓰이기 시작했다.

2. 마크다운 문법

1) Headers

• HTML의 Heading tag(H1~H6)와 유사하다.
• '#' 을 붙여서 제목의 크기를 나타낸다 (많이 붙을 수록 글씨 크기가 작아진다)

# hi H1
## hi H2
### hi H3
#### hi H4
##### hi H5
###### hi H6

출력결과 >

hi H1

hi H2

hi H3

hi H4

hi H5

hi H6

---

2) BlackQuote

• '>' 를 사용하여 인용문자를 나타낸다
• 안에 다른 마크다운 요소를 포함해서 사용할 수 있다

> ## This is Blackqute
> ㅎㅇㅎㅇ

출력결과 >

마크다운으로 작성시 출력된 모습

This is Blackqute

ㅎㅇㅎㅇ

---

3) 순서있는 목록(번호)

• 순서있는 목록은 숫자와 점을 사용한다
• 같은 숫자를 사용해도 결과는 번호 순서대로(내림차순) 나온다

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

1. 첫번째
1. 두번째
1. 세번째

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

출력결과 >

1. 첫번째

2. 두번째

3. 세번째

 

1. 첫번째

2. 두번째

3. 세번째

 

1. 첫번째

2. 세번째

3. 두번째

---

4) 순서없는 목록(*,+,-)

* 치킨
    * 햄버거
        * 곱창

+ 치킨
    + 햄버거
        + 곱창

- 치킨
    - 햄버거
        - 곱창

출력결과 >

혼합해서 사용하는 것도 가능하다

* 치킨
    - 햄버거
        + 곱창
            - 육회

출력결과 >

---

5) 줄바꿈(띄어쓰기)

• 마크다운은 줄바꿈을 할 때 한번의 줄바꿈으로는 인식이 안되고 두번 띄어야 줄바꿈으로 인식한다
• 마지막 글자 뒤에 3번의 공백을 넣으면 줄바꿈으로 인식한다.

이렇게 하면 
줄바꿈이 안된다.   .

이렇게 해야

줄바꿈이 된다.

출력결과 >

이렇게 하면 줄바꿈이 안된다.
.
이렇게 해야

줄바꿈이 된다.

---

6) 들여쓰기

• 4개의 공백 또는 한번의 탭으로 들여쓰기를 하면 아래와 같이 나타난다.
• 줄바꿈(띄어쓰기)를 안하면 인식이 안되는 문제가 발생한다.

this is a normal paragraph:

    this is a code block

end code block  

출력결과 >

this is a normal paragraph:

this is a code block

end code block

---

7) 코드블럭
코드 블럭은 2가지 방법으로 사용 할 수 있다.

• <pre><code>{코드내용}</code></pre> 이용방식

<pre>
<code>
const me = (state) => {
    console.log(`I'm so ${state}`};
}
me('hungry');
</code>
<pre>

출력결과 >

const me = (state) => {
    console.log(`I'm so ${state}`};
}
me('hungry');

• 코드블럭 코드(```)을 이용하는 방법

```
const me = (state) => {  
    console.log("I'm so ${state}"};  
}  
me('hungry');
```

출력결과 >

const me = (state) => {  
    console.log("I'm so ${state}"};  
}  
me('hungry');

깃헙 에서는 코드블럭 코드(```) 시작점에 사용하는 언어를 입력하여 문법강조 가 가능하다.

```javascript
const me = (state) => {  
    console.log("I'm so ${state}"};  
}  
me('hungry');
```

---

8) 수평선
수평선을 만들어 마크다운 문서를 출력할 때 페이지 나누기 용도로 많이 사용된다.

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

출력결과 >

---

---

---

---

---

---

9) 강조

* *이탤릭체*
* _이탤릭체_
* **볼드체**
* __볼드체__
* ~~취소선~~

출력결과 >

• 이탤릭체
• 이탤릭체
• 볼드체
• 볼드체
• 취소선

---

10) 링크 넣기

[구글링크](https://www.google.com)

출력결과 >

구글링크

<https://www.google.com>
<address@example.com>

출력결과 >

https://www.google.com
address@example.com

---

11) 이미지 넣기

![애플로고](/Users/apple.jpg)
(해당 파일의 이미지 경로를 지정해 주면 된다)

사이즈 조절 기능이 없기 때문에 img 태그를 사용해야한다.
<img src="/User/apple.jpg" width="200px" height="200px"></img>

출력결과 >

! 를 사용해서 넣은 이미지

img 태그를 활용해서 사진 크기 조절

---

12) 표 넣기

| 안녕 | 하세요 |   |
| --- | --- | --- |
| html | css | js |
| ts | react | node | 

출력결과 >

---

그 외 더 많은 기능들이 있지만,

마크다운 복습 겸 처음부터 끝까지 마크다운으로 작성해 보았더니 구현되지 않은 기능들이 몇개 있었다.

몇개는 사진으로 대체 하였고,

몇개는 작성하지 못해 아쉽다.