마크다운(Markdown)은 일반 텍스트 문서의 양식을 편집하는 문법입니다.
README파일이나 온라인 문서, 혹은 일반 텍스트 편집기로 문서 양식을 편집할 때 쓰입니다.
마크다운을 이용해 작성된 문서는 쉽게 HTML 등 다른 문서형태로 변환이 가능합니다.
존 그루버는 2004년에 문법 면에서 에런 스워츠와
중대한 협업을 통해 마트다운 언어를 만들었으며, 사람들이 일기 쉽고 쓰기 쉬운 플레인 텍스트 포맷을 사용하여 쓸 수 있으면서 구조적으로 유효한 HTML로 선택적 변환이 가능합니다.John Gruber
(DaringFireball).
읽기 쉽다.확실히 마크다운은 다른 마크업 언어에 비해 가독성이 좋습니다. 문법도 단순하고, HTML은 작성하면서 브라우저에서 어떻게 보여 질지 예상하는게 쉽지 않지만, 마크다운을 사용한 텍스트는 브라우저에 보여질 내용을 쉽게 상상할 수 있습니다.익히기 쉽다.존 그루버는 사람들이 많이 사용하는 것은 마크다운으로 사용하고, 복잡한 것은 HTML로 사용하기 바랬습니다. 그래서 문법이 매우 간단합니다. 그리고 마크다운으로 글을 작성할 때, 제한적인 기능 몇 개를 제외하고 HTML을 함께 사용해도 상관없습니다.모바일 친화적이다.단순히 텍스트만 작성하는 것이 아닌 에디터를 이용해 모바일로 작성하는 것은 쉽지 않습니다. 하지만 마크다운을 이용하면 모바일에서도 태그로 쉽게 서식을 넣을 수 있어서, 에디터보다 훨씬 편합니다.
문법이 너무 단순하다.문법이 단순한 나머지 결국에는 HTML을 써야하는 경우가 생깁니다. 테이블 정렬 기능은 있지만, 이미지 정렬 기능이 없어서 HTML의 img 태그를 사용해야합니다. 태그에 클래스 지정등이 불가능하기 때문에, 클래스나 id를 지정하려면 HTML을 사용해야합니다.표준이 없어 사용자마다 문법이 상이할 수 있다.문법이 단순하다 보니, 이러한 점을 해결하기 위해 확장문법들이 생겼고, 이러한 것들 때문에 한 곳에서 작동하는 마크다운 문서가 다른 곳에서는 잘 작동하지 않는 경우가 생기기도 합니다.
1. Headers 헤더
2. Emphasis 강조
3. Blockquotes 인용
4. Lists 목록
5. Backslash Escapes 백슬래쉬 이스케이프
6. Images 이미지
7. Links (Anchor) 링크
8. Fenced Code Blocks 코드 블럭
9. Task Lisk 체크 리스트
10. Horizontal Rules 수평선
11. Emoji 이모티콘
12. Table 테이블
13. Line Breaks 줄바꿈
14. Reference 참고 링크
#으로 시작하는 텍스트.#은 하나부터 여섯개까지 가능.#이 늘어날때마다 제목의 스케일 낮아집니다.- H1은
===로도 만들 수 있습니다. - H2는
---로도 만들 수 있습니다.
This is an H1
===
This is an H2
---
# This is an H1
## This is an H2
### This is an H3
#### This is an H4
##### This is an H5
###### This is an H6
- 기울여 쓰기(italic) :
*또는_로 감싼 텍스트. - 두껍게 쓰기(bold) :
**또는__로 감싼 텍스트. - 취소선 :
~~로 감싼 텍스트. - 이탤릭체와 두껍게를 같이 사용할 수 있습니다.
*This text will be italic*
_This will also be italic_
**This text will be bold**
__This will also be bold__
~~This is canceled~~
*You **can** combine them*
This text will be italic
This will also be italic
This text will be bold
This will also be bold
This is canceled
You can combine them
>으로 시작하는 텍스트.>는 3개까지 가능합니다.1개는 인용문.2개는 인용문 안에 인용문.3개는 인용문 안에 인용문 안에 인용문.
As Grace Hopper said:
> I’ve always been more interested in the future than in the past.
> This is a first blockquote.
> > This is a second blockquote.
> > > This is a third blockquote.
As Grace Hopper said:
I’ve always been more interested in the future than in the past. This is a first blockquote.
This is a second blockquote.
This is a third blockquote.
*,+,-를 이용해서 순서가 없는 목록을 만들 수 있습니다.- 들여쓰기를 하면 모양이 바뀝니다.
- 숫자를 기입하면 순서가 있는 목록이 됩니다.
- 들여쓰기를 하면 모양이 바뀝니다.
* Item 1
* Item 2
* Item 1
* Item 2
* Item 1
* Item 2
1. Item 1
2. Item 2
3. Item 3
1. Item 1
2. Item 2
3. Item 3
1. Item 1
2. Item 2
3. Item 3
- Item 1
- Item 2
- Item 1
- Item 2
- Item 1
- Item 2
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
- 특수문자를 표현할 때, 표시될 문자 앞에
\를 넣고 특수문자를 쓰면 됩니다. - 주의할 점은 앞과 뒤에가 형식이 똑같이 백슬래쉬 뒤에 특수문자입니다.
감싸는 형태가 아닙니다. - 백슬래쉬는 아래의 특수문자를 표현할 수 있습니다.
- \ backslash, \ backtick, * asterisk, _ underscore, {} curly braces, [] square brackets, () parentheses, # hash mark, + plus sign, - minus sign (hyphen), . dot, ! exclamation mark
\*literal asterisks\*
\#hash mark\#
\[squre brackets\]
*literal asterisks*
#hash mark#
[squre brackets]
로 변환됩니다.
- 링크와 비슷하지만 앞에
!가 붙습니다. - 인라인 이미지 
- 링크 이미지 
- 이미지의 사이즈를 변경하기 위해서는
<img width="OOOpx" height="OOOpx"></img>와 같이 표현합니다.
인라인 링크: [링크](http://example.com "링크 제목")
url 링크: <example.com>, <example@example.com>; 꺽쇠 괄호 없어도 자동으로 링크를 사용
[Google](http://www.google.com "구글")
[Naver](http://www.naver.com "네이버")
[Github](http://www.github.com "깃허브")
구글 www.google.com; 꺽쇠없음
네이버 <www.naver.com>; 꺽쇠있음
My mail <jinkyukim.dev@gmail.com>
Google
Naver
Github
구글 www.google.com
네이버 <www.naver.com>
My mail jinkyukim.dev@gmail.com
[보여지는 내용](#이동할 헤드(제목))
괄호 안의 링크를 쓸 때는 띄어쓰기는 -로 연결, 영어는 모두 소문자로 작성
[1. Headers 헤더](#1-headers-헤더)
[2. Emphasis 강조](#2-emphasis-강조)
[3. Blockquotes 인용](#3-blockquotes-인용)
1. Headers 헤더
2. Emphasis 강조
3. Blockquotes 인용
- 간단한 인라인 코드는 텍스트를 앞뒤로 `기호로 감싸면 됩니다.
- ``` 혹은 ~~~ 코드.
- 첫 줄과 마지막 줄에 Back quote ( ` ) 또는 물결( ~ ) 3개 삽입.
- 코드가 여러 줄인 경우, 줄 앞에 공백 네 칸을 추가하면 됩니다.
- ``` 옆에 언어를 지정해주면 syntax color가 적용됩니다.
```
This is code blocks.
```
~~~
This is code blocks.
~~~
4 spaces
```javascript
function test() {
console.log("look ma’, no spaces");
}
```
This is code blocks.
This is code blocks.
4 spaces
function test() {
console.log("look ma’, no spaces");
}- 줄 앞에
- [x]를 써서 완료된 리스트 표시. - 줄 앞에
- [ ]를 써서 미완료된 리스트 표시. - 체크 안에서 강조 외에 여러 기능을 사용할 수 있습니다.
- [x] this is a complete item
- [ ] this is an incomplete item
- [x] @mentions, #refs, [links](),
**formatting**, and <del>tags</del>
supported
- [x] list syntax required (any
unordered or ordered list
supported)
- this is a complete item
- this is an incomplete item
- @mentions, #refs, links,
formatting, and
tagssupported - list syntax required (any unordered or ordered list supported)
- - 또는 * 또는 _ 을 3개 이상 작성.
- 단, -을 사용할 경우 header로 인식할 수 있으니 이 전 라인은 비워두어야 합니다.
* * *
***
*****
- - -
-------------------
- 마크다운을 이용해 이모티콘을 표현가능.
- 깃허브도 적용가능.
- 더 많은 리스트는 아래의 사이트로 방문.
- www.emoji-cheat-sheet.com
GitHub supports emoji!
:+1: :sparkles: :camel: :tada:
:rocket: :metal: :octocat:
GitHub supports emoji! :+1: :sparkles: :camel: :tada: :rocket: :metal: :octocat:
- 헤더와 셀을 구분할 때 3개 이상의
-(hyphen/dash) 기호가 필요합니다. - 헤더 셀을 구분하면서 :(Colons) 기호로 셀(열/칸) 안에 내용을 정렬할 수 있습니다.
- 가장 좌측과 가장 우측에 있는 |(vertical bar) 기호는 생략 가능합니다.
테이블 생성
헤더1|헤더2|헤더3|헤더4
---|---|---|---
셀1|셀2|셀3|셀4
셀5|셀6|셀7|셀8
셀9|셀10|셀11|셀12
테이블 정렬
헤더1|헤더2|헤더3
:---|:---:|---:
Left|Center|Right
1|2|3
4|5|6
7|8|9
테이블 생성
| 헤더1 | 헤더2 | 헤더3 | 헤더4 |
|---|---|---|---|
| 셀1 | 셀2 | 셀3 | 셀4 |
| 셀5 | 셀6 | 셀7 | 셀8 |
| 셀9 | 셀10 | 셀11 | 셀12 |
테이블 정렬
| 헤더1 | 헤더2 | 헤더3 |
|---|---|---|
| Left | Center | Right |
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
<br>를 활용해서 줄바꿈을 할 수 있습니다.
Oh my my my oh my my my
You got me high so fast <br>
네 전부를 함께하고 싶어
Oh my my my oh my my my <br>
You got me fly so fast
이제 조금은 나 알겠어 <br>
Oh my my my oh my my my
You got me high so fast
네 전부를 함께하고 싶어
Oh my my my oh my my my
You got me fly so fast
이제 조금은 나 알겠어