마크다운(Markdown) 문법 사용하여 글쓰기

개발을 공부하며 자연스레 깃허브(github)를 사용하게 되고 마크다운(Markdown)의 필요성을 느끼게 된다.

깃허브에 자신이 올린 레포지토리에 관한 설명을 적을때나, 도큐멘테이션 작업을 할 때 마크다운을 사용하게 된다.

문서를 정리하는데 깔끔하며 티스토리에도 사용할 수 있다.

이 글에서는 마크다운으로 문서를 작성할 때 꼭 필요한 문법들을 정리해 보겠다.

 

제목 (Heading)

문서를 작성할 때 가장 기본이 되는 제목은 HTML의 <h1> ~ <h6> 태그와 유사하다. #의 개수에 따라 글자의 크기가 달라진다. # 은 <h1>, ###은 <h3>, ###### 은 <h6> 이런 식이다. 

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

Heading

Heading

Heading

 

본문(paragraph)

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

 

인용(Blockquotes)

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

> 이 글은 인용문 입니다.
>> 이 글을 두번째 인용문 입니다.

이 글은 인용문 입니다.

이 글을 두번째 인용문 입니다.

 

리스트

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

*또는 - 를 사용해서 순서가 없는 리스트를 작성할 수 있다.

tab 또는 2칸 띄어쓰기를 통해 중첩된 항목을 작성할 수 있다.

* Frontend
  * HTML
  * CSS
  * JavaScript
    * Vue.js
- Frontend
  - HTML
  - CSS
  - JavaScript
    - Vue.js

• Frontend

  • HTML

  • CSS

  • JavaScript

    • Vue.js

• Frontend

  • HTML

  • CSS

  • JavaScript

    • Vue.js

 

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

1. HTML
2. CSS
3. JavaScript

1. HTML
2. CSS
3. JavaScript

 

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

1. Frontend

   1. HTML

   2. CSS

   3. javaScript

      1. Vue.js

2. Backend

 

코드블럭(Code blocks)

코드블럭은 일반 문장 사이에 단어, 짧은 문장 단위로 표현할 수 있는 방법과 여러줄의 코드를 삽입하는 방법이 있다.

단어나 한줄의 코드를 감싸는 경우 ` 를 앞뒤로 감싼다.

마크다운은 코드블럭을 `<pre>` 와 `<code>` 로 감쌉니다.

마크다운은 코드블럭을 <pre> 와 <code> 로 감쌉니다

  

여러줄의 코드를 나타내는 코드블럭의 경우 코드블럭의 시작과 끝을 ``` 으로 감싸고 내부에 코드를 작성하면 된다.

function test(n) {
    return n;
}

 

수평선(Horizontal Rules)

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

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

---

---

---

---

---

 

링크(Links)

HTML의 하이퍼링크와 같은 링크는 다음과 같이 작성합니다. title은 생략이 가능합니다.

[example](http://example.com "title")
검색엔진은 [구글](http://www.google.com "구글")을 사용합니다.

example

검색엔진은 구글을 사용합니다.

 

강조(Emphasis)

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

취소선은 ~~ 를 사용한다.

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

강조한 텍스트

강조한 텍스트

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

강조한 텍스트

강조한 텍스트

~~취소~~한 텍스트

취소한 텍스트

 

이미지 삽입(Images)

이미지는 역시 HTML의 <img> 태그와 동일하게 작동한다.

대체 텍스트를 삽입할 수 있으며, 링크 또는 로컬의 이미지파일을 연결할 수 있다.

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

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

 

![Github](https://assets-cdn.github.com/images/modules/open_graph/github-octocat.png)

 

이상으로 마크다운의 기본 문법들에 대해서 알아보았다.

 

추가적으로 이 글도 마크다운으로 작성했다.

티스토리에서 여러가지 과정을 거치면 마크다운으로 작성을 할 수는 있지만 깃허브에서처럼 이쁘게 표시되지 않는 것 같다. 

다른 방법이 있는지 알아봐야겠다.