마크다운은 텍스트 기반의 마크업언어로 특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서도 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있다. (최종적으로는 HTML로 변환)

Github의 문서를 작성하거나 velog에 글을 작성할때 우리는 마크다운(Markdown)을 사용하여 글을 작성하는 경우가 아주 많다.

그래서 그럴때마다 참고할 수 있는 마크다운 문법을 정리해 보려고한다.

제목(Heading)

제목부분은 HTML의 <h1>~<h6> 태그와 비슷하다. #의 개수에 따라 글자의 크기가 달라진다.
#은 <h1>, ###은 <h3> ######은 <h6>처럼!

# Heading
### Heading
###### Heading

위의 결과는 아래가 된다.

Heading

Heading

Heading

본문(paragraph)

HTML의 <p>와 같은 본문은 텍스트를 그대로 작성하면 된다.

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit

인용(Blockquotes)

인용은 >를 넣어서 작성한다.

> Lorem ipsum dolor sit amet, consectetur adipisicing elit
>> Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit

리스트

순서가 없는 리스트(Unordered List)

* 또는 -를 사용해서 순서가 없는 리스트를 작성할 수 있다.
tab 또는 2칸 띄어쓰기를 통해 중첩된 항목을 작성할 수 있다.

* Frontend
  * HTML
  * CSS
  * JavaScript
    * React.js

- Frondend
  - HTML
  - CSS
  - JavaScript
    - React.js

• Frontend
  • HTML
  • CSS
  • JavaScript
    • React.js

• Frondend
  • HTML
  • CSS
  • JavaScript
    • React.js

순서가 있는 리스트(Ordered List)

1. HTML
2. CSS
3. JavaScript

1. HTML
2. CSS
3. JavaScript

1. HTML
1. CSS
1. JavaScript

1. HTML
2. CSS
3. JavaScript

1. Frontend
    1. HTML
    2. CSS
    3. JavaScript
        1. React.js
2. Backend

1. Frontend
   1. HTML
   2. CSS
   3. JavaScript
      1. React.js
2. Backend

코드블럭(Code blocks)

개발자 블로그에서 가장 중요한 코드블럭!

코드블럭의 시작과 끝을 ```(언어이름)으로 감싸고 내부에 코드를 작성하면 된다.

```javascript
     function square(n) {
        return n * n;
     }
    ```

function square(n) {
  return n * n;
}

수평선(Horizontal Rules)

문단과 문단 사이를 나눌 때 등 사용되는 수평선은 HTML의 <hr> 태그와 같이 동작한다.

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

---

---

---

---

---

링크(Links)

HTML의 하이퍼링크와 같은 링크는 다음과 같이 작성한다.

[example](http://example.com)

검색엔진은 [구글](https://www.google.com)을 사용하라.

example

검색엔진은 구글을 사용하라.

강조(Emphasis)

HTML의 <em>태그와 같은 동작을 하는 강조는 *, _가 있고 <strong>은 **와 __를 사용한다.
취소선은 ~~을 사용한다.

*강조*한 텍스트
_강조_한 텍스트

강조한 텍스트

**강조**한 텍스트
__강조__한 텍스트

강조한 텍스트

~~취소~~한 텍스트

취소한 텍스트

이미지 삽입(Images)

이미지는 역시 HTML의 <img>태그와 동일하게 작동한다. 대체 텍스트를 삽입할 수 있으며, 링크 또는 로컬의 이미지파일을 연결할 수 있다.

![대체 텍스트](/경로/example.jpg)
![대체 텍스트](링크)

![Github](./public/img/3/github.png)

![Github](https://velog.velcdn.com/images%2Fhuurray%2Fpost%2Fd1cc1855-d642-4406-bf95-161769468482%2Fgit.png)

참고문헌

• 존 그루버의 Markdown: Syntax