MarkDown 이란?

마크다운(MarkDown)은 일반 텍스트 기반의 경량 마크업 단어입니다.
일반 마크업 언어에 비해 문법이 쉽고 간단합니다.
현재 Sun0te 공부 블로그의 포스팅파일은 .md 확장자 파일이며, 마크다운 문법으로 포스팅할 수 있습니다.

MarkDown 문법 정리

제목은 <h1> 부터 <h6> 까지 표현이 가능합니다.
각 제목마다 permalink가 있습니다.

# h1
## h2
### h3
#### h4
##### h5
###### h6

h1 제목

h2 제목

h3 제목

h4 제목

h5 제목

h6 제목

minimal-mistakes 테마에서는 h2 header에 구분선이 그어지게 디자인되어 있습니다.

2️. List (목록)

HTML의 <ol>, <ul> 태그와 같은 기능으로 작성할 수 있습니다.
순서가 있는 리스트와 없는 리스트로 작성할 수 있습니다.
순서가 있는 서브 리스트와 없는 서브 리스트도 작성 가능합니다.
순서가 없는 리스트 생성 시 사용 가능한 기호들이 있습니다.

순서가 있는 리스트
1. 순서 리스트 첫 번째
2. 순서 리스트 두 번째
3. 순서 리스트 세 번째
    1. 순서가 필요한 서브 리스트

순서가 없는 리스트
* 리스트 첫 번째
* 리스트 두 번째
* 리스트 세 번째
    - 순서가 없는 서브 리스트

순서가 없는 리스트 생성 시 사용 가능한 기호
- hyphen '-'
* asterisks '*'
+ plus sign '+'

순서가 있는 리스트

순서 리스트 첫 번째
순서 리스트 두 번째
순서 리스트 세 번째
1. 순서가 필요한 서브 리스트

순서가 없는 리스트

리스트 첫 번째
리스트 두 번째
리스트 세 번째
- 순서가 없는 서브 리스트

순서가 없는 리스트 생성 시 사용 가능한 기호

hyphen ‘-‘
asterisks ‘*’
plus sign ‘+’

List 참조 블로그 👉 HEROPY Tech 블로그

3. New line (개행) - 줄바꿈

줄바꿈을 위해서는 문장을 마치고 [SpaceBar] 두 번 + [Enter]키를 입력하면 됩니다.
HTML 태그인 <br> 태그를 사용할 수 있습니다.

1) 줄바꿈을 해보겠습니다.  
스페이스 바 두 번 + 엔터 키를 누르시면 됩니다.

2) 줄바꿈을 해보겠습니다. <br> HTML 테그를 이용하여 줄바꿈을 하면 됩니다. 

1) 줄바꿈을 해보겠습니다.
스페이스 바 두 번 + 엔터 키를 누르시면 됩니다.

2) 줄바꿈을 해보겠습니다.
HTML 테그를 이용하여 줄바꿈을 하면 됩니다.

4. New line (개행) - 단락바꿈

포스팅을 작성하면서 문단을 나눌 때에는 한 줄의 공백을 입력하면 됩니다.

첫 번째 문단입니다.  
문단을 구분하겠습니다.

두 번째 문단입니다.  
한 줄의 공백으로 구분합니다.

첫 번째 문단입니다.
문단을 구분하겠습니다.

두 번째 문단입니다.
한 줄의 공백으로 구분합니다.

5. Code Block (코드 블록)

1) 인라인(Inline) 코드
1번키 왼쪽에 위치한 ` 키 (Grave 키) 사이에 키워드를 입력합니다.

 `인라인 코드` 입니다.

인라인 코드 입니다.

2) 코드 블록
주로 code를 입력할 때 이 코드 블록 안에 기입합니다.

` 키 를 세 번 입력 후 코드 언어는 소문자로 입력
코드입력
` 키 를 세 번 입력 하여 코드 블록 닫기

Tab 키를 두 번 입력하여 코드 블럭을 생성할 수 있습니다.

ex)

```python
n = int(input())

for i in range(1,n+1):
print(‘‘i+’ ‘(2n-i2)+’‘i)
for j in range(n-1,0, -1):
print(‘‘j+’ ‘(2n-j2)+’‘j)
```

[tab 키][tab 키]간편하게 코드블럭 생성

n = int(input())

for i in range(1,n+1):
    print('*'*i+' '*(2*n-i*2)+'*'*i)
for j in range(n-1,0, -1):
    print('*'*j+' '*(2*n-j*2)+'*'*j)

    간편하게 코드블럭 생성

6. \ BackSlash 키로 문법 보여주기

Inline (인라인) 코드 블록 밖에서 코드만 그대로 보이고 싶을 때 코드 앞에 \ 백슬래시 키를 입력합니다.

\<u> 태그는 밑줄로 텍스트를 강조하는 태그입니다.</u>

<u> 태그는 밑줄로 텍스트를 강조하는 태그입니다.</u>

7. Emphasis (강조)

굵게 강조, 기울여서 강조, 밑줄, 취소선으로 텍스트를 강조할 수 있습니다.

**별표로 (asterisks) 굵게 강조** 또는 __언더바로(underscore) 굵게 강조__ 

*아틸릭체, 별표로 (asterisks) 기울여서 강조* 또는 _언더바로(underscore) 기울여서 강조_ 

***굵음, 기울여서 강조를 동시에 사용***  

\<u>태그를 이용하여 <u>밑줄</u>로 강조 

~~물결표시 (tilde)로 취소선~~ 사용

별표로 (asterisks) 굵게 강조 또는 언더바로(underscore) 굵게 강조

아틸릭체, 별표로 (asterisks) 기울여서 강조 또는 언더바로(underscore) 기울여서 강조

굵음, 기울여서 강조를 동시에 사용

<u>태그를 이용하여 밑줄로 강조

~~물결표시 (tilde)로 취소선~~ 사용

8. Style (폰트 스타일 변경)

Markdown은 CSS Style을 지원하지 않지만 ** 태그**를 사용하여 입력한 글의 색상, 글꼴 두께, 크기를 변경할 수 있습니다.
몇몇 기능은 <mark>, <div>태그를 사용합니다.

<span style="color:Aquamarine;">
 폰트 색상을 변경
</span>

<span style="font-weight:770;">
 폰트 굵기를 변경
</span>

<span style="font-size:25px;">
 폰트 크기를 변경
</span>

<span style="color:Aquamarine;font-weight:770;font-size:25px">
    폰트의 스타일을 변경합니다.
</span>

<mark >하이라이트 텍스트</mark>입니다.  

<mark style="background-color: #F0E68C">CSS 스타일 하이라이트 텍스트</mark>입니다.  

<div style="background-color: #11999e">렌더링 강조 표시된 텍스트</div>입니다.  

폰트 색상을 변경

폰트 굵기를 변경

폰트 크기를 변경

폰트 스타일을 변경합니다.

하이라이트 텍스트입니다.

CSS 스타일 하이라이트 텍스트입니다.

렌더링 강조 표시된 텍스트

입니다.

font Style 참조 사이트 👉 w3schools.io

Color-Values 참조 사이트 👉 w3schools.com - HTML Color Values

9. Links (링크)

Inline 링크
< > 꺾쇠 괄호 안에 URL을 넣어 링크를 입력합니다.
[ ] 대괄호를 사용하여 링크 주소를 텍스트로 변경할 수 있습니다.
이때는 ( ) 괄호 안에 링크를 기입합니다.
상대 경로로 이동, 같은 md파일 내의 이동에도 ( ) 괄호를 입력합니다.

1. 주소만 기입  
    <https://sun0te.github.io>  

2. 링크 설명과 주소 기입  
[Sun0te 블로그](https://sun0te.github.io)   

3. 상대경로 링크 - 현재 위치는 _posts 폴더 안의 Blog 폴더에 있는 \.md 파일  
[카테고리 페이지로 이동](../../categories/)
[\[JAVA\] 인터페이스 - 1 페이지 이동](../../java/Interface_01)

4. 같은 \.md 파일 내 다른 Header로 이동  
[6. backslash 키로 문법 보여주기로 이동](#6--backslash-키로-문법-보여주기)  

주소만 기입
https://sun0te.github.io
링크 설명과 주소 기입
Sun0te 블로그
상대경로 링크 - 현재 위치는 _posts 폴더 안의 Blog 폴더에 있는 .md 파일

카테고리 페이지로 이동

[JAVA] 인터페이스 - 1 페이지 이동

상대 경로는 주소창의 경로를 참고하여 이동하면 된다.

- 현재 폴더에서 이동 : ./이동할 파일명
- 상위 폴더 : ../이동할 파일명
같은 .md 파일 내 다른 Header로 이동

6. backslash 키로 문법 보여주기로 이동

( ) 괄호안의 헤더를 직접 입력할 시
대문자는 소문자로, 띄어쓰기는 - 키(Hyphen 키)로 변경한다.
또한 특수문자(점표, 콤마…)들은 생략해야 한다.

VSCode에 포스트를 작성할 시 괄호 안에 #키를 누르면
현재 md파일 내의 헤더가 미리보기로 나열된다.
화살표 키로 이동 후 tab키로 선택해보자.

10. Blockquotes (인용구) 삽입

인용구는 >키를 입력 후 SpaceBar키로 공백을 입력하여 작성하면 <blockquote>로 변환됩니다.

중첩된 인용구를 생성할 수 있습니다.

인용구 생성
> 첫 번째 Blockquote text 입니다.  

중첩 인용구 생성  
> 두 번째 Blockquote text 입니다.  
>> Nested Blockquote text 입니다.

인용구 생성

첫 번째 Blockquote text 입니다.

중첩 인용구 생성

두 번째 Blockquote text 입니다.

Nested Blockquote text 입니다.

11. Images (이미지) 삽입

그림을 삽입할 때는 맨 앞에 !(느낌표) 가 붙습니다.
보통 업로드할 이미지를 오른쪽마우스로 클릭하여 이미지주소를 복사해 넣어주면 됩니다.
로컬파일 경로도 사용이 가능합니다.

![image 업로드 실패 시 대체 택스트](이미지 주소 입력 “링크설명”)
또는 <img src=”이미지 주소 입력” width=”너비” height=”높이”>

이미지 삽입  
![github-image](https://www.freeiconspng.com/thumbs/github-icon/github-icon-9.png "깃허브")
이미지 삽입 - 로컬파일 경로  
![github-image](\images\2022-05-11-markdown\github-icon-38976.png)

링크 걸린 이미지 삽입  
[![github-image-link](\images\2022-05-11-markdown\github-icon-38976.png)](https://github.com)

이미지 크기 조정    
<img src="/images/2022-05-11-markdown/github-icon-38976.png" width="200" height="100">

이미지 중앙 정렬  
<center> <img src="/images/2022-05-11-markdown/github-icon-38976.png" width="200" height="100"> </center>

이미지 삽입

이미지 삽입 - 로컬파일 경로

링크 걸린 이미지 삽입

이미지 크기 조정

이미지 중앙 정렬

✨Github blog 이미지 업로드 TIP✨

Github Repositories 에 이동하여 상단에 있는 Issue 메뉴를 클릭한다.
[New issue] 버튼을 클릭, Bug Report의 [Get started] 버튼을 누른다.
글을 쓰는 창에 삽입할 이미지의 주소를 붙여넣거나, 저장된 이미지를 드로그해서 가져가 넣는다.
자동으로 markdown 문법으로 변경된 이미지 링크를 복사해 작성하는 md 파일에 삽입할 이미지를 붙여넣는다.
- 마크다운 문볍으로 변경된 이미지 주소
```
![github-icon-38976](https://user-images.githubusercontent.com/50590124/168144501-549fe09b-afde-47bc-943f-110f9db35690.png) 
```

12. Expander control (접기/펼치기) 만들기

마크다운 자체에는 없는 기능이지만 HTML의 **

태그**를 사용하여 생성이 가능합니다.

<details>
<summary>Expander control 만들기</summary>
<div markdown="1">

| 태그 | 내용 |
|--|--|
|\<summmary>|접고 펼치는 버튼의 텍스트를 입력합니다|
|<div markdown="1">|Jekyll에서 html 사이에 markdown을 인식 하기 위한 코드입니다|

</div>
</details>

Expander control 만들기

태그	내용
<summmary>	접고 펼치는 버튼의 텍스트를 입력합니다
<div markdown="1">	Jekyll에서 html 사이에 markdown을 인식 하기 위한 코드입니다

Expander control 참조 블로그 👉 손끝으로 만드는 세상

13. Table (표) 만들기

일반적인 표를 생성 할 때는 -키와 |키를 사용합니다.
columns(컬럼)을 | (Pipes 키)로 구분하고, - (Dash 키)를 최소 세 개 이상 입력하여 Header와 구분합니다.
: 키로 표를 정렬할 수 있습니다.

왼쪽 정렬 :—
가운데 정렬 :—:
오른쪽 정렬 —:

일반적인 표 생성  

|Header1|Header2|Header3|
|---|---|---|
|text1|text2|text3|
|텍스트1|텍스트2|텍스트3|  

정렬된 표 생성 

|왼쪽 정렬|가운데 정렬|오른쪽 정렬|
|:---|:---:|---:|
|Align left|Centre align|Align right|
| \:--- | \:---: | \---: |

일반적인 표 생성

Header1	Header2	Header3
text1	text2	text3
텍스트1	텍스트2	텍스트3

정렬된 표 생성

왼쪽 정렬	가운데 정렬	오른쪽 정렬
Align left	Centre align	Align right
:—	:—:	-–:

✨Markdown 표 자동생성 TIP✨

Table Genderator 에서 Markdown 문법으로 자동 생성되는 표의 코드를 생성할 수 있습니다.

14. Horizontal Rules (수평선) 만들기

-키, *키, _키 중 하나를 3개 이상 입력하면 구분선을 출력할 수 있습니다.
- 키로 구분선을 입력할 시 바로 윗 줄에 텍스트가 입력되면 Header 로 인식합니다.

---  
___  
***

15. Notice Boxes (문자 박스) 만들기

Notice boxes 를 생성할 때는 {: .notice} 태그를 사용합니다.
사용 가능한 notice boxes 타입은 다음과 같습니다.

Avaliable notice box type
{: .notice}
{: .notice–primary}
{: .notice–info}
{: .notice–warning}
{: .notice–danger}
{: .notice–success}

notice box type | button type 참조 블로그 👉 Fabrizio Musacchio

**Notice:** 문자박스를 생성합니다
{: .notice}
**primary Notice:** 문자박스를 생성합니다
{: .notice--primary}
**Info Notice:** 문자박스를 생성합니다
{: .notice--info}
**Warning Notice:** 문자박스를 생성합니다
{: .notice--warning}
**Danger Notice:** 문자박스를 생성합니다
{: .notice--danger}
**Success Notice:** 문자박스를 생성합니다
{: .notice--success}

Notice: 문자박스를 생성합니다

primary Notice: 문자박스를 생성합니다

Info Notice: 문자박스를 생성합니다

Warning Notice: 문자박스를 생성합니다

Danger Notice: 문자박스를 생성합니다

Success Notice: 문자박스를 생성합니다

16. Buttons (버튼) 만들기

Button을 생성할 때는 {: .btn} 태그를 사용합니다.

[Button name](#link){: .btn}

button Class
.btn
.btn .btn–primary
.btn .btn–success
.btn .btn–warning
.btn .btn–danger
.btn .btn–info
.btn .btn–inverse
.btn .btn–light-outline
.btn .btn–primary .btn–x-large
.btn .btn–primary .btn–large
.btn .btn–primary
.btn .btn–primary .btn–small

[맨 위로 이동](#){: .btn .btn--primary}
[맨 아래로 이동](#footer){: .btn .btn--warning}

[버튼만들기](#16-buttons-버튼-만들기){: .btn .btn--info .btn--large}

맨 위로 이동 맨 아래로 이동

버튼만들기

17. Checkbox (체크박스) 만들기

Checkbox를 생설할 때는 - [ ] 기호로 생성합니다. check 가 되어있는 checkbox를 생성하려면 대괄호 안에 X를 기입하여 - [X]로 생성합니다.

- [ ] 체크가 되지 않는 checkbox 

- [X] 체크가 되어 있는 checkbox

체크가 되지 않는 checkbox
체크가 되어 있는 checkbox

18. Icon (아이콘) 사용하기

fontawesome 홈페이지에서 원하는 아이콘의 HTML을 복사해서 가져오면 됩니다.
가져온 아이콘을 고정하거나 크기를 조정할 때는 https://fontawesome.com/v4/examples/ 에서 조정하면 됩니다.

icon 참조 블로그 👉 haehwan.github.io

아이콘 생성  
<i class="fab fa-markdown"></i>

아이콘 활용하기
> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> exclamation 아이콘입니다.  

> **<i class="fa fa-question-circle"></i> 질문 :** 답변입니다. 

> *<i class="fa fa-info-circle" aria-hidden="true"></i> 정보 :* info 아이콘입니다.  

아이콘 생성

아이콘 활용하기

exclamation 아이콘입니다.

질문 : 답변입니다.

정보 : info 아이콘입니다.

코드 참조 블로그 👉 마크다운 문법 인용구 (Blockquotes)

🌞 정보 : 공부 기록용 블로그입니다. 오타나 내용 오류가 있을 경우 알려주시면 감사하겠습니다.