마크다운 쓰는 방법


이런 깃허브 페이지는 물론 Trello, Slack 과 같이 개발 관련된 곳이면 마크다운(markdown)을 많이 적용하고 있다. 깃허브를 돌아다니다보면 제일 처음 보게되는 README.md 파일처럼 .md 확장자를 쓴다. HTML 파일에서 자주 볼 수 있는 마크업(markup;태그를 이용해서 작성하는 언어)을 쉽게 대체할 수 있는 것으로 생각하면 되겠다.

마크다운의 장/단점

장점

1. 익숙해지면 쓰기가 엄청 쉽다.
2. 적은 노력으로 나름 잘 꾸밀 수 있다.
 	3. 개발 관련된 곳에서는 점점 사용/지원하는 곳이 많아지고 있다.

단점

1. 통일이 안 되어 있다;Trello에서 작성한 걸 Slack에 붙여넣으면 적용 안되는 게 몇 개씩 나온다
 	2. 처음 써본 사람은 또 공부 해야한다.

개인적으로 디자인 감각이 부족하기 때문에 2. 적은 노력으로 나름 잘 꾸밀 수 있다.(특히 개발 관련 문서) 라는 점이 엄청 마음에 들어서 계속 사용하려고 한다.


마크다운 작성법

마크다운 작성법은 조금씩 다를 수 있기 때문에 Github 기준으로 맞춰서 작성해보려고 한다.

  1. 머릿말
  2. 강조
  3. 코드 블럭
  4. 링크
  5. 목록
  6. 수평선
  7. 이미지

1. 머릿말

1. ===
2. ---
3. #(##은 좀 더 작은 헤더가 됨 )

1.Header

1.Header
===

2.Header

2.Header
---

3.Header

# 3.Header

2. 강조

1. **굵은 글씨**
2. ~~취소선~~
3. `강조할 단어`

1. 굵은 글씨

**1. 굵은 글씨**

2. 취소선

~~2. 취소선~~

3.강조할 단어

`3.강조할 단어`

3. 코드 블럭

1. ``` 소스 코드 ```(or ~~~ 소스 코드 ~~~ )

``` 이나 ~~~ 뭘 쓰든 똑같아 보여 하나만 작성한다. 아직 뭐가 다른건지 잘 모르겠음.


# Set your Google Analytics id to receive `pageview` events.
# To remove Google Anaylics from your page, remove the line below.
google_analytics:

# Setting a disqus shortname will enable the comment section on pages with `comments: true` in the front matter
disqus_shortname:
```
# Set your Google Analytics id to receive `pageview` events.
# To remove Google Anaylics from your page, remove the line below.
google_analytics:

# Setting a disqus shortname will enable the comment section on pages with `comments: true` in the front matter
disqus_shortname:
```

```html, ```javascript, ```c 처럼 ```뒤에 해당 언어를 써주면 그 언어에 맞게 코드가 이쁘게 나온다.

import React, {Component} from 'react';
import './Movie.css';

class Movie extends Component{  
    render() {
        return (     
                <tr  className = "Movie" >
                    <th><MovieRank rank={this.props.rank}/></th>
                    <th>{this.props.title}</th>
                </tr>
        )
    }
}
```html
import React, {Component} from 'react';
import './Movie.css';

class Movie extends Component{  
    render() {
        return (     
                <tr  className = "Movie" >
                    <th><MovieRank rank={this.props.rank}/></th>
                    <th>{this.props.title}</th>
                </tr>
        )
    }
}
```

4. 링크

1. [텍스트](링크)
2. [텍스트](#헤더-네임)

구글로 이동

[구글로 이동](https://google.com)

링크

코드 블럭

[링크](#4-링크)
[코드 블럭](#3-코드-블럭)

Github에서는 #을 이용해 작성한 헤더를 자동으로 링크할 수 있게 해주기 때문에 작성이 쉽다.

헤더에 빈 칸이 있을 경우 -로 연결 해줄 것!!

헤더가 3. 코드 블럭 처럼 숫자, 온점이 있으면 [코드 블럭](#3-코드-블럭) 이렇게 해줘야 한다.

5. 목록

  1. 목록1
  2. 목록2
1. 목록1
2. 목록2
  • 목록1
  • 목록2
- 목록1
- 목록2

6. 수평선







* * *

***

*****

- - -

---------------------------------------

7. 이미지

Blog

![설명글](이미지 주소)
![Blog](http://www.ybrikman.com/assets/img/blog/github-pages/github-pages.png)

많이 쓰일 것들만 작성해봤다.

추가로 주의할 점은 작성하다가 Enter키를 한 번 쓰면 단락 분리가 안된다. 두 번 써주거나 <br>태그 쓸 것.

이상 뿅.




© 2019. by Moonan

Powered by Moonan