마크다운 문법을 정리합니다 !

깃허브 블로그에서는 마크다운 문법이 활성화되어 있습니다. 마크다운에서 사용하는 문법은 코드 블록으로 적었으며, 결과값은 그 아래 나타납니다.

1. Headings(제목)

h1 부터 h6 까지 # 기호를 통해 헤더(타이틀)의 층위를 변경시킬 수 있습니다. # 을 많이 붙일 수록 작아집니다.

# h1

## h2

### h3

#### h4

##### h5

###### h6

==== 결과 ====

h1

h2

h3

h4

h5

h6

============

2. Paragraphs(문단)

마크다운 문법은 한 줄 씩 띄어서 작성하는 것이 원칙이며 제목과 문단 조합을 사용하기 위해서는 다음과 같이 사용합니다.

# 제목

<p>제목에 해당하는 문단입니다.</p>

==== 결과 ====

제목

제목에 해당하는 문단입니다.

============

제목을 # 외에 = 혹은 - 를 사용하여 나타낼 수 있습니다.

h1
===============

h2
---------------

### h3

==== 결과 ====

h1

h2

h3

============

3. Line Breaks(개행)

문단 상에서 엔터를 여러 번 친다고 개행이 되지 않기 때문에 강제 개행을 위해서는
<br/> 태그를 사용해야 합니다.

## LILAC

오 라일락 꽃이 지는 날 goodbye<br/>
이런 결말이 어울려<br/>
안녕 꽃잎 같은 안녕<br/>

==== 결과 ====

LILAC

오 라일락 꽃이 지는 날 goodbye
이런 결말이 어울려
안녕 꽃잎 같은 안녕

============

4. Emphasis(강조)

- (Italic)이탤릭체

이탤릭체는 *Italic* 혹은 _Italic_ 처럼
하나의 '*' 혹은 '_'를 문자 양 옆에 사용합니다.

- (Bold)볼드체

볼드체는 **Bold** 혹은 __Bold__ 처럼
두 개의 '**' 혹은 '__'를 문자 양 옆에 사용합니다.

- (Italic & Bold)이탤릭 & 볼드체를 한 번에

이탤릭과 볼드체를 동시에 사용하기 위해
__*Italic & Bold*__ 사용해야 합니다

- (Underline)밑줄

밑줄은 <u>Highlight it!</u> 처럼
태그 <u>를 문자 양 옆에 사용해야 합니다.

- (Strikethrough)취소선

취소선은 ~~Cancel it!~~ 처럼
두 개의 물결 '~~'을 문자 양 옆에 사용합니다.

==== 결과 ====

-이텔릭체는 Italic 혹은 Italic

-볼드체는 Bold 혹은 Bold

-이탤릭과 볼드 Italic & Bold

-밑줄은 Highlight it!

-취소선은 ~~Cancel it!~~

============

그 외 Text 관련 구문

-인용문과 강조 Hello, Jeongmin!

-키보드 입력 텍스트 Hello, Jeongmin!

Escaping Characters (추후에 서술되는 11. Escaping Characters 참고)

`*` 와 `_` 를 문자로 사용하고 싶을 때

해당 문자를 이탤릭체가 아닌 텍스트 문자로 사용하고자 할 때는
이스케이프 문자 \를 이용합니다.

이스케이프 문자로 양 옆에 *과 _ 표시하기

\* Veritas Lux Mea \*
\__ Veritas Lux Mea \__

==== 결과 ====

* Veritas Lux Mea *

__ Veritas Lux Mea __

5. Blockquotes(인용구)

Markdowm의 인용구에는 단일인용과 중첩이용이 있습니다. 단일인용을 사용했을 때 문장이나 문단이 길어지면 영역이 제한되고 자동으로 스크롤 바가 생깁니다.

단일인용 : > 를 사용하여 표현합니다.
```
느낌이 오잖아 떨리고 있잖아 언제까지 눈치만 볼 거니 네 맘을 말해봐 딴청 피우지 말란 말이야 네 맘 가는 그대로 지금 내 손을 잡아
```
느낌이 오잖아 떨리고 있잖아 언제까지 눈치만 볼 거니 네 맘을 말해봐 딴청 피우지 말란 말이야 네 맘 가는 그대로 지금 내 손을 잡아
중첩인용 : > 를 중첩해서 사용합니다.
```
> 우연히 고개를 돌릴 때 마다 눈이 마주치는 건 몇일밤 내내 꿈속에 나타나 밤새 나를 괴롭히는 건
>> 그 많은 빈자리 중에서 하필 내 옆자릴 고르는 건 나도 모르게 어느새 실없는 웃음 흘리고 있다는 건
>>> 그럼 말 다했지 뭐 우리 얘기 좀 할까
>>>> 느낌이 오잖아 떨리고 있잖아 언제까지 눈치만 볼 거니 네 맘을 해봐 딴청 피우지 말란 말이야 네 맘 가는 그대로 지금 내 손을 잡아
```
우연히 고개를 돌릴 때 마다 눈이 마주치는 건 몇일밤 내내 꿈속에 나타나 밤새 나를 괴롭히는 건
그 많은 빈자리 중에서 하필 내 옆자릴 고르는 건 나도 모르게 어느새 실없는 웃음 흘리고 있다는 건
그럼 말 다했지 뭐 우리 얘기 좀 할까
느낌이 오잖아 떨리고 있잖아 언제까지 눈치만 볼 거니 네 맘을 해봐 딴청 피우지 말란 말이야 네 맘 가는 그대로 지금 내 손을 잡아

6. Lists(리스트)

순서가 있는 리스트(Ordered)

정렬된 숫자 뒤에 . 를 붙여 사용합니다. ( 0 이상의 정수여야 합니다. )

순서 1
순서 2
순서 3

순서 1
순서 2
순서 3

공백을 활용하여 중첩리스트를 표현합니다.

순서 1
순서 2
순서 3
순서 3-1
순서 3-2
순서 4

순서 1
순서 2
순서 3
1. 순서 3-1
2. 순서 3-2
순서 4

순서가 없는 리스트(Unordered) : 마커는 *, +, - 를 사용

`*` 표현

* 리스트 1
* 리스트 2

리스트 1
리스트 2

`+` 표현

+ 리스트 1
+ 리스트 2

리스트 1
리스트 2

`-` 표현

- 리스트 1
- 리스트 2

리스트 1
리스트 2

모두 동일하게 표현되기 때문에 어떤 것을 리스트의 마커로 사용하여도 무방합니다. 저는 보통 * 를 사용합니다. Markdown에서는 아래와 같이 중첩된 리스트 표현도 가능합니다.

중첩리스트 표현

2 개의 공백(space)만을 삽입하여 중첩리스트를 표현합니다.

- 리스트 1
(space)(space)- 리스트 2
(space)(space)(space)(space)- 리스트 3

리스트 1
- 리스트 2
  - 리스트 3
2 개를 사용하지 않고 1개의 공백을 사용하면 다음과 같이 하나의 계층으로 출력됩니다.

- 리스트 a
  - 리스트 b
   - 리스트 c
    - 리스트 d
     - 리스트 e 

리스트 a
- 리스트 b
- 리스트 c
- 리스트 d
- 리스트 e

리스트와 인용구를 활용하여 다음과 같이 작성이 가능합니다. 그러나 빈 리스트가 존재할 때는 해당 빈 리스트가 어느 상황에서든 출력되지 않습니다.

* 리스트 a
  > 리스트 b
  >
* 리스트 c

리스트 a
리스트 b
리스트 c

Task Lists

리스트를 활용하여 작업 목록 체크리스트를 대괄호 []를 리스트의 숫자 대신 붙여 작성할 수 있습니다.

- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported
- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item

@mentions, #refs, links, formatting, and ~~tags~~ supported
list syntax required (any unordered or ordered list supported)
this is a complete item
this is an incomplete item

7. Code(코드 작성)

Markdown에서 코드 작성은 Syntax highlighting 이라고도 하며 IDE와 동일하게 구문 강조 라이브러리 사용이 가능합니다.

type nano 즉, 백틱 기호를 쓰고자 하는 언어 앞과 뒤에 세 개를 붙이고 다음과 같이 작성합니다.

C 언어

``` c
#include <stdio.h>

int main(){

    printf("Hello World-!!");

}

==== 결과 ====

#include <stdio.h>

int main(){

    printf("Hello World-!!");

}

javascript

```javascript
    function fancyAlert(arg) {
     if(arg) {
    $.facebox({div:'#foo'})
  }
}

==== 결과 ====

    function fancyAlert(arg) {
     if(arg) {
    $.facebox({div:'#foo'})
  }
}

하지만 한글 폰트가 예쁘지 않고 줄표시가 안 되기 때문에 D2 Coding 폰트를 삽입하기 전 까지 Github gist 를 사용할 것 같습니다. 제가 열심히 css 를 수정해서 코드블록을 꾸며 봤는데 Color Scripter 의 확장스토어에서 어느 부분에 색상을 넣을지 미리 구성한 뒤 진행하였습니다. 신규 스타일패키지의 Mint 가 제가 만든 패키지입니다 ! 적용 방법은 해당 포스트 를 참고하세요.

8. Horizontal Rules(줄표 넣기)

줄표를 넣으려면 한 줄에 세 개 이상의 별표 *** , 대시 --- 또는 밑줄 __ 을 사용해야 합니다. 저는 보통 --- 를 사용합니다.

***
---
_________________

9. Links(링크 걸기)

링크 텍스트를 대괄호(예: [Twitch])로 묶은 다음 즉시 URL을 괄호 안에 삽입하는 것이 가능합니다.
예시로 제가 좋아하는 데드 바이 데이라이트 트위치 스트리머를 링크로 걸어보겠습니다.

[살인마협회장 - Twitch](https://www.twitch.tv/sal_gu)

살인마협회장 - Twitch

위 방법이 귀찮거나 더 빠른 방법을 원한다면 URL 및 이메일 주소에 꺾쇠를 사용합니다. 원래 Github 상의 Markdown에서는 꺾쇠를 붙이지 않고도 자동으로 링크가 형성이 되는데 깃허브 블로그는 안 되나 봅니다.

[꺾쇠 링크]
<https://www.ssunivs.com> <br>
<tangerine_t@naver.com>

[꺾쇠 링크]
https://www.ssunivs.com
tangerine_t@naver.com

10. Images(이미지)

형식

![Image id](url)

이미지 추가는 느낌표 ! 를 대체 텍스트의 대괄호 앞에 붙인 후, 경로 또는 URL을 괄호 안에 삽입하여 나타냅니다. 제가 가장 좋아하는 여자 솔로 가수이면서 배우이자 국힙 원탑 아이유의 정규 5집 앨범을 예시 이미지로 넣어보겠습니다.

![LILAC](https://user-images.githubusercontent.com/39428260/112938741-2695ad80-9165-11eb-850a-dfbe7c20fee0.jpg)

LILAC

11. Escaping Characters(탈출문자)

앞의 4. Emphasis에서 잠깐 언급한 바 있는데, 문법에서 사용되는 문자를 텍스트로 표현하기 위해 문자 앞에 백슬래시\를 추가하는 것을 말합니다.

[백슬래시 사용 전]
*백슬래시를 사용하여 (*)를 탈출시켜 보자!

[백슬래시 사용 후]
\*백슬래시를 사용하여 (*)를 탈출시켜 보자!

[백슬래시 사용 전]

백슬래시를 사용하여 ()를 탈출시켜 보자!

[백슬래시 사용 후]

*백슬래시를 사용하여 (*)를 탈출시켜 보자!

그 밖의 탈출문자를 사용해야 하는 문자들을 표로 만들어 두었습니다.

Character	Name
\	backslash 백슬래시
`	backtick 백틱(코드를 탈출시킬 때)
*	asterisk 별표
_	underscore 언더바
{}	curly braces 중괄호
[]	brackets 대괄호
<>	angle brackets 꺾쇠
()	parentheses 소괄호
#	pound sign 샵
+	plus sign 덧셈 기호
-	minus sign/hyphen 뺄셈 기호/하이픈
.	dot 온점
!	exclamation mark 느낌표

12. Tables(표)

Markdown에서는 앞서 정리한 탈출문자의 표에서 보았듯이 파이프 기호 | 와 하이픈 _ 을 사용하여 표를 나타냅니다.

| 동물 | 울음소리 |
| --- | --- |
| 고양이 | 야옹 |
| 닭 | 꼬꼬댁 |

동물	울음소리
고양이	야옹
닭	꼬꼬댁

정렬 기능 또한 구현이 가능한데 정렬은 칼럼을 두고 싶은 방향으로 콜론 : 기호를 추가하면 됩니다.

[왼쪽 정렬]
| 동물 | 울음소리 |
| :--- | :--- |
| 고양이 | 야옹 |
| 닭    | 꼬꼬댁 |
| 하마  |      |
|       | 멍멍 |

[오른쪽 정렬]
| 동물 | 울음소리 |
| ---: | ---: |
| 닭    | 꼬꼬댁 |
| 하마  |      |
|       | 멍멍 |

[가운데 정렬]
| 동물 | 울음소리 |
| :---: | :---: |
| 고양이 | 야옹 |
| 닭    | 꼬꼬댁 |
| 하마  |      |
|       | 멍멍 |

[왼쪽 정렬]

동물	울음소리
고양이	야옹
닭	꼬꼬댁
하마
	멍멍

[오른쪽 정렬]

동물	울음소리
고양이	야옹
닭	꼬꼬댁
하마
	멍멍

[가운데 정렬]

동물	울음소리
고양이	야옹
닭	꼬꼬댁
하마
	멍멍

13. HTML

HTML은 Markdown에서 자주 사용되는 언어이며 스크립트를 통해 가독성을 높일 수 있습니다.
Markdown에서 사용하는 방법은 새로운 줄에세 HTML 태그(예: \<div>, \<table>, \<pre>, \<p>)를 삽입해야 합니다.
주로 마크다운 문법에서 HTML을 사용하는 목적은 텍스트 색상, 이미지 너비를 변경하기 위함입니다.

- HTML 로 텍스트 변경

[텍스트 원본 : 마크다운]

강자에게 더 세게 I love gamble

[텍스트 수정 : HTML]

<span style = " font-size:1.5em;  color: plum;">
강자에게 더 세게 I love gamble
</span>

[텍스트 원본 : 마크다운]

강자에게 더 세게 I love gamble

[텍스트 수정 : HTML]

강자에게 더 세게 I love gamble

- HTML 로 이미지 너비 변경

[이미지 원본 : 마크다운]

![coin](https://user-images.githubusercontent.com/39428260/112941600-d4a35680-9169-11eb-8cfc-dbbe6b4bdf81.jpg)

[이미지 수정 : HTML]

<img src="https://user-images.githubusercontent.com/39428260/112941600-d4a35680-9169-11eb-8cfc-dbbe6b4bdf81.jpg" width="20%" height="20%" alt="Coin of IU">

[이미지 원본 : 마크다운]

coin

[이미지 수정 : HTML]

Coin of IU

하지만 마크다운 문법에서는 허용되지 않는 RAW HTML 태그가 존재합니다. 그렇기에 이를 해결하기 위해 GFM는 태그 필터를 사용하고 HTML 출력을 렌더링할 때 다음 HTML 태그가 필터링되는데 여기서 [사용불가] 처리한 태그는 마크다운 문법에서 사용할 수 없습니다.

GFM 이란 Github Flavored Markdown의 약자로 현재 Github.com과 Github Enterprise의 사용자 컨텐츠를 지원하는 Markdown의 한 종류 입니다.

<title>
<textarea>
<style>
<xmp> [사용불가]
<iframe>
<noembed> [사용불가]
<noframes> [사용불가]
<script>
<plaintext> [사용불가]

14. 기타 GFM 정리

- SHA 참조

Refs가 있으면 커밋을 찾기 쉬워지는데 SHA-1 hash 는 자동으로 GitHub에 커밋에 대한 링크로 변환해 주기도 합니다.

16c999e8c71134401a78d4d46435517b2271d6ac
mojombo@16c999e8c71134401a78d4d46435517b2271d6ac
mojombo/github-flavored-markdown@16c999e8c71134401a78d4d46435517b2271d6ac

- Emoji(이모지)

GitHub에서도 마크다운을 통해 이모티콘 사용이 가능합니다. 저는 Microsoft 이모지를 사용합니다. 옛날과 달리 업데이트가 되어 매우 귀엽습니다.
```
"상상이 현실이 된다!"
👐➡🦋✨
```

GitHub repository URL

https://github.com/jeongmint/software-engineering

참조

Markdown Guide Basic Syntax

Markdown Guide Extended Syntax - GFM

https://guides.github.com/features/mastering-markdown/

마크다운 위키백과 사이트

마크다운 문법을 정리합니다 !

1. Headings(제목)

h1

h2

h3

h4

h5

h6

2. Paragraphs(문단)

제목

h1

h2

h3

3. Line Breaks(개행)

LILAC

4. Emphasis(강조)

- (Italic)이탤릭체

- (Bold)볼드체

- (Italic & Bold)이탤릭 & 볼드체를 한 번에

- (Underline)밑줄

- (Strikethrough)취소선

그 외 Text 관련 구문

Escaping Characters (추후에 서술되는 11. Escaping Characters 참고)

* 와 _ 를 문자로 사용하고 싶을 때

5. Blockquotes(인용구)

6. Lists(리스트)

순서가 있는 리스트(Ordered)

순서가 없는 리스트(Unordered) : 마커는 *, +, - 를 사용

* 표현

+ 표현

- 표현

중첩리스트 표현

Task Lists

7. Code(코드 작성)

C 언어

javascript

8. Horizontal Rules(줄표 넣기)

9. Links(링크 걸기)

10. Images(이미지)

형식

11. Escaping Characters(탈출문자)

[백슬래시 사용 전]

[백슬래시 사용 후]

12. Tables(표)

[왼쪽 정렬]

[오른쪽 정렬]

[가운데 정렬]

13. HTML

- HTML 로 텍스트 변경

[텍스트 원본 : 마크다운]

[텍스트 수정 : HTML]

- HTML 로 이미지 너비 변경

14. 기타 GFM 정리

- SHA 참조

- Emoji(이모지)

GitHub repository URL

참조

`*` 와 `_` 를 문자로 사용하고 싶을 때

`*` 표현

`+` 표현

`-` 표현