# 마크다운 문법

## _마크다운이란?_
마크다운은 일반 텍스트 문서에 서식 요소를 추가하는 데 사용할 수 있는 가벼운 마크업 언어입니다. 2004년 존 그루버 가 만든 마크다운은 현재 세계에서 가장 인기 있는 마크업 언어 중 하나입니다.

마크다운을 사용하는 것은 WYSIWYG 편집기를 사용하는 것과 다릅니다 . Microsoft Word와 같은 애플리케이션에서는 버튼을 클릭하여 단어와 구문을 포맷하고 변경 사항을 즉시 볼 수 있습니다. 마크다운은 그렇지 않습니다. 마크다운 포맷 파일을 만들 때 텍스트에 마크다운 구문을 추가하여 어떤 단어와 구문이 다르게 보여야 하는지 표시합니다.

예를 들어, 제목을 나타내려면 제목 앞에 숫자 기호를 추가합니다(예: # Heading One). 또는 문구를 굵게 표시하려면 문구 앞뒤에 별표 두 개를 추가합니다(예: ). 특히 WYSIWYG 애플리케이션에 익숙한 경우 텍스트에서 Markdown 구문을 보는 데 익숙해지는 데 시간이 걸릴 수 있습니다. 아래 스크린샷은 Visual Studio Code 텍스트 편집기**this text is bold** 에 표시된 Markdown 파일을 보여줍니다.

## _왜 마크다운을 사용하나요?_
사람들이 WYSIWYG 편집기 대신 마크다운을 사용하는 이유가 궁금할 것입니다. 인터페이스에서 버튼을 눌러 텍스트를 서식 지정할 수 있는데 왜 마크다운으로 글을 써야 할까요? 밝혀진 바에 따르면 사람들이 WYSIWYG 편집기 대신 마크다운을 사용하는 데에는 여러 가지 이유가 있습니다.

- 마크다운은 모든 것에 사용할 수 있습니다. 사람들은 그것을 사용하여 웹사이트 , 문서 , 노트 , 책 , 프레젠테이션 , 이메일 메시지 , 기술 문서 를 만듭니다 .

- 마크다운은 이식성이 뛰어납니다. 마크다운 포맷의 텍스트가 포함된 파일은 사실상 모든 애플리케이션을 사용하여 열 수 있습니다. 현재 사용 중인 마크다운 애플리케이션이 마음에 들지 않으면 마크다운 파일을 다른 마크다운 애플리케이션으로 가져올 수 있습니다. 이는 Microsoft Word와 같은 워드 프로세싱 애플리케이션과는 대조적으로 콘텐츠를 독점 파일 포맷으로 고정합니다.

- 마크다운은 플랫폼에 독립적입니다. 모든 운영 체제를 실행하는 모든 기기에서 마크다운 포맷의 텍스트를 만들 수 있습니다.

- 마크다운은 미래에 대비합니다. 사용 중인 애플리케이션이 언젠가 작동을 멈추더라도 텍스트 편집 애플리케이션을 사용하여 마크다운으로 포맷된 텍스트를 읽을 수 있습니다. 이는 무기한 보존해야 하는 책, 대학 논문 및 기타 이정표 문서의 경우 중요한 고려 사항입니다.

- 마크다운은 어디에나 있습니다. Reddit 과 GitHub 같은 웹사이트는 마크다운을 지원하고, 많은 데스크톱과 웹 기반 애플리케이션도 마크다운을 지원합니다.

## _어떻게 작동하나요?_
Dillinger는 마크다운으로 글을 쓰기 쉽게 만들어줍니다. 왜냐하면 마크다운은 화면 뒤에서 일어나는 일을 숨기기 때문입니다. 하지만 이 프로세스가 전반적으로 어떻게 작동하는지 알아보는 것도 가치가 있습니다.

마크다운으로 글을 쓸 때 텍스트는 .mdor .markdown확장자를 가진 일반 텍스트 파일에 저장됩니다. 하지만 그 다음에는 어떻게 될까요? 마크다운 포맷의 파일은 어떻게 HTML이나 인쇄 가능한 문서로 변환될까요?

간단히 말해서 Markdown 파일을 처리할 수 있는 Markdown 애플리케이션이 필요합니다 . 사용 가능한 애플리케이션은 많습니다. 간단한 스크립트부터 Microsoft Word처럼 보이는 데스크톱 애플리케이션까지 다양합니다. 시각적인 차이에도 불구하고 모든 애플리케이션은 같은 작업을 수행합니다. Dillinger와 마찬가지로 모두 Markdown 포맷의 텍스트를 HTML로 변환하여 웹 브라우저에 표시할 수 있습니다.

마크다운 애플리케이션은 마크다운 프로세서 (일반적으로 "파서" 또는 "구현"이라고도 함) 라는 것을 사용하여 마크다운 포맷의 텍스트를 가져와 HTML 포맷으로 출력합니다. 그 시점에서 문서를 웹 브라우저에서 보거나 스타일 시트와 결합하여 인쇄할 수 있습니다. 아래에서 이 프로세스의 시각적 표현을 볼 수 있습니다.

[Image]: ../assets/images/markdown.png "MarkDown 개요"

요약하자면, 이것은 4단계로 구성된 과정입니다.

- 텍스트 편집기나 전용 마크다운 애플리케이션을 사용하여 마크다운 파일을 만듭니다. 파일에는 .md또는 .markdown확장자가 있어야 합니다.
- 마크다운 애플리케이션에서 마크다운 파일을 엽니다.
- Markdown 애플리케이션을 사용하여 Markdown 파일을 HTML 문서로 변환합니다.
- 웹 브라우저에서 HTML 파일을 보거나 마크다운 애플리케이션을 사용하여 PDF와 같은 다른 파일 형식으로 변환합니다.

귀하의 관점에서 보면, 프로세스는 사용하는 애플리케이션에 따라 다소 다를 것입니다. 예를 들어, Dillinger는 기본적으로 1-3단계를 단일의 매끄러운 인터페이스로 결합합니다. 왼쪽 창에 입력하기만 하면 렌더링된 출력이 오른쪽 창에 마법처럼 나타납니다. 하지만 정적 웹사이트 생성기가 있는 텍스트 편집기와 같은 다른 도구를 사용하면 프로세스가 훨씬 더 눈에 띄는 것을 알게 될 것입니다.

### 장단점
마크다운은 다음과 같은 장단점을 가집니다.
- 문법이 쉽습니다.
- 관리가 간편합니다.
- 지원 가능 플랫폼 및 프로그램이 다양합니다.
- 표준이 없어 사용자마다 작성 문법이 조금씩 다를 수 있습니다.
- 모든 HTML 마크업을 대체하지 못합니다.

### 사용처
메모장부터 전용 에디터까지 많은 곳에서 활용할 수 있습니다.
문법이 쉬워 꼭 에디터를 사용할 필요는 없지만, VS Code 같은 코드 에디터에서 편집하는 것을 추천합니다.
마크다운 문법은 지원하는 모든 곳에서 사용할 수 있으며, 
일반 블로그나 워드프레스 외 슬랙(Slack)이나 노션(Notion) 등의 서비스에서 메세지를 작성하듯 사용할 수도 있습니다.

그리고 마크다운의 각 문법은 HTML로 변환되어 CSS와 함께 출력되기 때문에, 화면에 표시되는 모양은 사용하는 곳의 스타일 구성에 따라 달라집니다.
따라서 눈에 보이는 스타일이 아닌 각 문법의 의미에 맞게 사용해야 합니다.

### 문법
각 마크다운 문법은 HTML 태그로 변환되어 브라우저에 출력됩니다.
모든 HTML 태그를 대체하지 않으며, 일부 중요한 문법만을 제공합니다.
또한 일부 문법만 지원하는 플랫폼도 있습니다.

#### 제목
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 태그로 변환되는 '제목(Header)'을 표현합니다.

- #으로 시작하는 텍스트.
- #은 하나부터 여섯개까지 가능.
- #이 늘어날때마다 제목의 스케일 낮아집니다.
- H1은 ===로도 만들 수 있습니다.
- H2는 ---로도 만들 수 있습니다.

This is an H1
===
This is an H2
---


#### 강조
각각 <em>(기울임), <strong>(두꺼움), <del>(취소선) 태그로 변환되는 '강조(Emphasis)'를 표현합니다.
마크다운에서 지원하지 않는 밑줄을 추가하려면, <u></u>(밑줄) 태그를 직접 사용할 수 있습니다.

이텔릭체는 *별 기호(Asterisks)* 혹은 _언더바 기호(Underscore)_ 를 사용하세요.
두껍게는 **별 기호(asterisks)** 혹은 __언더바 기호(underscore)__ 를 2번씩 사용하세요.
__*이텔릭체*와 두껍게__ 를 혼용할 수도 있습니다.

취소선은 ~~물결 기호(tilde)~~ 를 사용하세요.
<u>밑줄</u>은 마크다운에서 지원하지 않기에, 직접 `<u></u>` 태그를 사용하세요.

#### 목록
<ol>, <ul>, <li> 태그로 변환되는 '목록(List)'을 표현합니다.
1. 로 시작하는 항목을 작성하면 <ol>로 변환되며, -로 시작하는 항목을 작성하면 <ul>로 변환됩니다.
들여쓰기를 통해 하위 목록을 작성할 수 있습니다.

`-`로 시작하는 순서가 없는 목록으로 구분합니다.

```markdown
1. 순서가 있는 항목
1. 순서가 있는 항목
    1. 순서가 없는 항목
    1. 순서가 없는 항목
1. 순서가 있는 항목
1. 순서가 있는 항목

- 순서가 없는 항목
- 순서가 없는 항목
    - 순서가 없는 항목
    - 순서가 없는 항목
```    

#### 링크

<a>로 변환되는 '링크(Links)'를 표현합니다.

[이름](링크)
[이름](링크 "설명")
[이름][참조]

[참조]: 링크
[참조]: 링크 "설명"

[GOOGLE](https://google.com)

[NAVER](https://naver.com "링크 설명(title)을 작성하세요.")

[상대적 참조](../users/login)

[Dribbble][Dribbble Link]

[GitHub][1]

문서 안에서 [참조 링크]를 그대로 사용할 수도 있습니다.
다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(`< >`, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.

구글 홈페이지: https://google.com
네이버 홈페이지: <https://naver.com>

[Dribbble Link]: https://dribbble.com
[1]: https://github.com
[참조 링크]: https://naver.com "네이버로 이동합니다!"

#### 이미지
<img>로 변환되는 '이미지(Images)'를 표현합니다.
링크과 비슷하지만, 앞에 !를 추가해야 합니다.

![대체텍스트](이미지주소)
![대체텍스트](이미지주소 "설명")
![대체텍스트][참조]

[참조]: 이미지주소
[참조]: 이미지주소 "설명"

![대체 텍스트(Alternative Text)](https://picsum.photos/1000/400 "링크 설명(Title)")
![이미지입니다!][Image]

[Image]: https://picsum.photos/500/300 "이미지입니다!"

#### 이미지에 링크 추가
[![INHWAN.DEV](../assets/images/inhwan.jpeg)](https://github.com/InHwanGil)

#### 코드 강조
(<pre>, <code> 태그로 변환되는 '코드(code)'를 표현합니다.)
(`(백틱) 기호를 사용합니다.)

#### 블록
`를 3번 이상 입력하고 언어(코드) 이름을 명시해, 코드 '블록(Block)'를 표현합니다.
코드 블록의 시작 ` 개수와 종료 ` 개수는 같아야 합니다.

// 연속 백틱 3개 시작, 종료 구조
```언어이름
내용
```

// 연속 백틱 4개 시작, 종료 구조
````언어이름
내용
````
```html
<a href="https://www.google.co.kr/" target="_blank">GOOGLE</a>
```

```css
.list > li {
  position: absolute;
  top: 40px;
}
```

```javascript
function add(a, b = 1) {
  console.log(a, b)
  return a + b
}
```

```bash
$ npm run dev
```
 
```python
s = "Python syntax highlighting"
print s
```
 
```plaintext
No language indicated, so no syntax highlighting. 
But let's throw in a <b>tag</b>.
```

#### 백틱 기호 사용
마크다운에서 백틱(`) 기호는 코드 강조를 표현할 때 사용하는 문법 기능을 가지므로, 백틱 기호 자체를 출력하려면 기호에 이스케이프(Escape) 처리가 필요합니다.

다음과 같이 \ 기호와 함께 작성하면, 백틱 기호를 출력할 수 있습니다.
또는 `에서 인라인 코드 강조를 하기 위해, <code> 태그를 활용할 수도 있습니다.

\`
<code>\`</code>

#### 표
<table> 태그로 변환되는 '표(Table)'를 표현합니다.
테이블 헤더를 구분하기 위해, 3개 이상의 -(hyphen/dash) 기호를 사용합니다.
테이블 헤더를 구분하며 :(Colons) 기호를 추가해 셀(열/칸) 안에 내용을 정렬할 수 있습니다.

- ---, :---: 좌측 정렬
- :---:: 가운데 정렬
- ---:: 우측 정렬

가장 좌측과 가장 우측에 있는 |(vertical bar) 기호는 생략 가능합니다. (플랫폼에 따라 생략 불가한 경우도 있습니다)


| 헤더 | 헤더 | 헤더 |
|---|---|---|
| 셀 | 셀 | 셀 |
| 셀 | 셀 | 셀 |

헤더 | 헤더 | 헤더
---|---|---
셀 | 셀 | 셀
셀 | 셀 | 셀


| 값 | 의미 | 기본값 |
|---|:---:|---:|
| `static` | 유형(기준) 없음 / 배치 불가능 | `static` |
| `relative` | 요소 자신을 기준으로 배치 |  |
| `absolute` | 위치 상 부모(조상)요소를 기준으로 배치 |  |
| `fixed` | 브라우저 창을 기준으로 배치 |  |
| `sticky` | 스크롤 영역 기준으로 배치 |  |

값 | 의미 | 기본값
---|:---:|---:
`static` | 유형(기준) 없음 / 배치 불가능 | `static`
`relative` | 요소 자신을 기준으로 배치 |
`absolute` | 위치 상 부모_(조상)요소를 기준으로 배치 |
`fixed` | 브라우저 창을 기준으로 배치 |
`sticky` | 스크롤 영역 기준으로 배치 |


#### 버티컬바 기호 사용
마크다운에서 버티컬바(|) 기호는 테이블을 표현할 때 사용하는 문법 기능을 가집니다.
만약 테이블 안에서 버티컬바 기호 자체를 출력하려면, \ 기호와 함께 작성하는 이스케이프(Escape) 처리가 필요합니다.

| 값 | 의미 |
|---|---|
| 버티컬바 출력 | \| |
| 인라인 코드 강조 | `\|` |


#### 인용문
<blockquote> 태그로 변환되는 '인용문(BlockQuote)'을 표현합니다.

> 인용문 - 남의 말이나 글에서 직접 또는 간접으로 따온 문장.
> _(네이버 국어 사전)_

BREAK!

> 인용문을 작성하세요!
>> 중첩된 인용문(nested blockquote)을 만들 수 있습니다.
>>> 중중첩 인용문 1
>>> 중중첩 인용문 2
>>> 중중첩 인용문 3


#### 원시 HTML
마크다운 문법 대신, HTML을 직접 사용(Raw HTML)할 수 있습니다.
앞서 살펴본 밑줄 추가와 같이, 마크다운 문법에서 지원하지 않는 기능을 사용할 때 유용합니다.

마크다운에서 <u>밑줄</u>은 지원하지 않습니다.

<img width="150" src="http://gstatic.com/webp/gallery/4.jpg" alt="Prunus" title="마크다운은 이미지의 크기를 지정할 수 없으므로, 크기 지정을 위해서는 <img> 태그를 사용해야 합니다.">

![Prunus](http://www.gstatic.com/webp/gallery/4.jpg)


#### 수평선
---, ___, *** 각 기호를 3개 이상 입력해, <hr> 태그로 변환되는 '수평선(Horizontal Rule)'을 표현합니다.

---

***

___


#### 줄바꿈
줄바꿈(Line Breaks)을 위해서는 문장 마지막에서 <br> 태그를 직접 입력하거나, 문장 마지막에서 띄어쓰기를 2번 이상 입력합니다.
플랫폼 자체에서 자동 줄바꿈을 지원하는 경우, 이러한 방식이 필요하지 않을 수 있습니다.


동해물과 백두산이 마르고 닳도록 
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산   <!--띄어쓰기 2번-->
대한 사람 대한으로 길이 보전하세<br>
끝!


#### 주석
<!-- -->, [//]: # 기호를 사용해, 주석(Comment)을 표현합니다.

-- 시작 --

<!-- 안녕하세요. -->
[//]: # (안녕하세요.)
[//]: # "안녕하세요."
[//]: # '안녕하세요.'

-- 종료 --

출저 : https://www.heropy.dev/p/B74sNE
출처 : https://inpa.tistory.com/entry/MarkDown-📚-마크다운-문법-💯-정리 [Inpa Dev 👨‍💻:티스토리]
출저 : https://www.markdownguide.org/getting-started/