[Markdown] 마크다운 문법 - 마크다운으로 할 수 있는 다양한 것들

📆 Created: 2021.12.11 Sat

🗓️ Updated: 2024.12.19 Thu

Reading time ~9 minutes

0. 목차

1. 제목
2. 내용
3. 수평선
4. 인용문
5. 목록
6. 링크
7. ID
8. 코드
9. 표
10. 수식
11. 이미지
12. Emoji
13. 다이어그램
14. HTML, CSS, JS
참고

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

h1

h2

h3

h4

h5

h6

            
h1
===

h2
---

h1

h2

2. 내용(Context)

2.1. 강조(Emphasize)

            
                이탤릭체: *이탤릭체*, _italic letters_, <i>이탤릭체</i>, <em>italic letters</em>  
두껍게: **두껍게**, __bold letters__ , <b>두껍게</b>, <strong>bold letters</strong>  
이탤릭체와 두껍게 같이: ***같이 사용하기***
취소선: ~~취소선~~ , <del>strikethrough</del>  
밑줄: <u>밑줄</u>, <ins>underline</ins>  
<acronym title="텍스트 가리키면 나오는 텍스트">텍스트</acronym>  
<abbr title="텍스트 가리키면 나오는 텍스트">줄 쳐진 텍스트</abbr>

이탤릭체: 이탤릭체, italic letters, 이탤릭체, italic letters
두껍게: 두껍게, bold letters , 두껍게, bold letters
굵은 이탤릭체: 같이 사용하기
취소선: ~~취소선~~ , ~~strikethrough~~
밑줄: 밑줄, underline
텍스트 가리키면 나오는 텍스트 1
텍스트 가리키면 나오는 텍스트 2

2.2. 정렬

            
                <center>중앙</center>  
<div style="text-align: center"> 중앙 </div>  
<div style="text-align: left"> 왼쪽 </div>  
<div style="text-align: right"> 오른쪽 </div>

중앙

왼쪽

오른쪽

2.3. 첨자

~~Jekyll에서 적용 안 되는 듯~~

            
                H~2~O
X^2^

H~2~O
X^2^

            
                텍스트<sup>윗첨자</sup>  
텍스트<sub>밑첨자</sub>

텍스트^윗첨자
텍스트_밑첨자

2.4. 주석

2.5. 다음 줄로 넘어가기(New Line)

            
                C/C++  <!-- 스페이스 두 번 -->
JAVA  <!-- 스페이스 두 번 -->
PYTHON  <!-- 스페이스 두 번 -->
R  <!-- 스페이스 두 번 -->
JAVA SCRIPT<br>
HTML<br>
CSS<br>
GO<br>

C/C++ JAVA PYTHON R JAVA SCRIPT
HTML
CSS
GO

2.6. 하이하이트

안녕하세요. ==jekyll==에서는 적용 안 되는 듯하다.

안녕하세요. ==jekyll==에서는 적용 안 되는 듯하다.

안녕하세요. 이 부분에 <mark>하이라이트</mark>를 할 겁니다.

안녕하세요. 이 부분에 하이라이트를 할 겁니다.

3. 수평선(Horizon)

            
                ***
---
___

4. 인용문(Block Quote)

            
                > text
>> text
>>> text
> # text

text

text

text

text

5. 목록(List)

5.1. Unordered List

            
                * non-ordered list
    * 순서 없는 서브 목록
    + 순서 없는 서브 목록
    - 순서 없는 서브 목록
+ 순서 없는 목록
- 순서 없는 목록

non-ordered list
- 순서 없는 서브 목록
- 순서 없는 서브 목록
- 순서 없는 서브 목록
순서 없는 목록
순서 없는 목록

            
                <ul>
    <li>Coffee</li>
    <li>Tea
        <ul>
        <li>Black tea</li>
        <li>Green tea</li>
        </ul>
    </li>
    <li>Milk</li>
</ul>

Coffee
Tea
- Black tea
- Green tea
Milk

5.2. Ordered List

            
                1. ordered sub list
순서 있는 서브 목록
순서 있는 서브 목록
순서 있는 서브 목록
순서 있는 목록 <!-순서가 차례대로 자동으로 매겨짐>

ordered sub list
1. 순서 있는 서브 목록
2. 순서 있는 서브 목록
3. 순서 있는 서브 목록
순서 있는 목록

            
                <ol>
    <li>Coffee</li>
    <li>Tea
        <ol>
        <li>Black tea</li>
        <li>Green tea</li>
        </ol>
    </li>
    <li>Milk</li>
</ol>

Coffee
Tea
1. Black tea
2. Green tea
Milk

5.3. Definition List

            
                First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

First Term: This is the definition of the first term.
Second Term: This is one definition of the second term.; This is another definition of the second term.

            
                <dl>
    <dt>First Term</dt>
    <dd>This is the definition of the first term.</dd>
    <dt>Second Term</dt>
    <dd>This is one definition of the second term. </dd>
    <dd>This is another definition of the second term.</dd>
</dl>

First Term: This is the definition of the first term.
Second Term: This is one definition of the second term.; This is another definition of the second term.

5.4. Task List

            
                - [x] 순서없는 리스트에서
- [ ] 대괄호를 추가하고
- [ ] 체크는 X로 하면 된다.

순서없는 리스트에서
대괄호를 추가하고
체크는 X로 하면 된다.

6. 링크(Link)

            
        
            
                * 주소를 보여주고만 싶을 때: https://google.com  
* 링크만 있는 inline 링크: <http://www.naver.com>  
* [설명 있는 inline 링크 1](https://google.com)  
* <a href="http://www.youtube.com">설명 있는 inline 링크 2</a>  
* [갖다 대면 텍스트 뜨는 inline 링크 1](https://www.youtube.com "유튜브")  
* <a href="http://www.youtube.com" title="Youtube">갖다 대면 텍스트 뜨는 inline 링크 2</a>  
* [내가 작성한 다른 post로 넘어가고 싶을 때](./2021-11-30-github%EB%B8%94%EB%A1%9C%EA%B7%B8_%EB%8A%90%EB%82%80%EC%A0%90.md)  
* [갖다 대면 텍스트 뜨는 설명 있는 inline 링크인데 링크를 다른 곳에 빼 놓음]  
* [링크 다른 곳에 써놓기 1][Naver Link]  
* [링크 다른 곳에 써놓기 2][1]  

[Naver Link]: https://www.naver.com/
[1]: https://github.com/
[갖다 대면 텍스트 뜨는 설명 있는 inline 링크인데 링크를 다른 곳에 빼 놓음]: https://google.com "구글"

            
            
            
                

주소를 보여주고만 싶을 때: https://google.com
링크만 있는 inline 링크: http://www.naver.com
설명 있는 inline 링크 1
설명 있는 inline 링크 2
갖다 대면 텍스트 뜨는 inline 링크 1
갖다 대면 텍스트 뜨는 inline 링크 2
내가 작성한 다른 post로 넘어가고 싶을 때
갖다 대면 텍스트 뜨는 설명 있는 inline 링크인데 링크를 다른 곳에 빼 놓음
링크 다른 곳에 써놓기 1
링크 다른 곳에 써놓기 2

7. Heading IDs

### My Great Heading {#custom-id}

위처럼 쓰면 html에서 이렇게 적용된다.

            
                <h3 id="custom-id">My Great Heading</h3>

7.1. 응용(ID로 링크 걸기)

            
        
            
                * [1. 제목](#1-제목header)
* [2. 내용](#2-내용context)
* [3. 수평선](#3-수평선horizon)
* [4. 인용문](#4-인용문block-quote)
* [5. 목록](#5-목록list)
* [6. 링크](#6-링크link)
* [7. ID](#7-heading-ids)
* [8. 코드](#8-코드code)
* [9. 표](#9-표table)
* [10. 수식](#10-수식)
* [11. 이미지](#11-이미지image)
* [12. 다이어그램](#12-다이어그램---mermaid)
* [13. HTML, CSS, JS](#13-html-css-js)
* [참고](#참고)

            
            
            
                

1. 제목
2. 내용
3. 수평선
4. 인용문
5. 목록
6. 링크
7. ID
8. 코드
9. 표
10. 수식
11. 이미지
12. 다이어그램
13. HTML, CSS, JS
참고

8. 코드(Code)

8.1. 인라인(inline)

`print("Hello, World!")`

print("Hello, World!")

8.2. 블록(block)

Highlighting을 적용시키기 위해서는 ``` 옆에 알맞는 language를 적어주면 된다.

            
                ``` python
while (True):
    print("마크다운 나 짜증나게 하지마")
```

            
                while (True):
    print("마크다운 나 짜증나게 하지마")

            
                ``` java
public static void main(String[] args) {
    while (true) {
        System.out.println("마크다운 나 짜증나게 하지마");
    }
}
```

            
                public static void main(String[] args) {
    while (true) {
        System.out.println("마크다운 나 짜증나게 하지마");
    }
}

            
                ``` c
#include <stdio.h>

for (int i = 0; i++; i>10) {
    printf("Hello World!");
}

return 0;
```

            
                #include <stdio.h>

for (int i = 0; i++; i>10) {
    printf("Hello World!");
}

return 0;

8.3. HTML tag

            
                <code>
print("Hello, World!")
</code>

print("Hello, World!")

            
                <pre>
print("Hello, World!")
</pre>

print("Hello, World!")

9. 표(Table)

            
                | 1st | 2nd | 3rd |
| --- | --- | --- |
| 한자 | 심리학 | 수치해석학 |
| 선형대수학 | 통계학 | 이산수학 |
| 컴퓨터 구조 | 토익 | 파이썬 |

1st	2nd	3rd
한자	심리학	수치해석학
선형대수학	통계학	이산수학
컴퓨터 구조	토익	파이썬

            
                | 1st | 2nd | 3rd |
| :--- | :---: | ---: |
| 좌로 정렬 | 가운데 정렬 | 우로 정렬 |
| 선형대수학 | 통계학 | 이산수학 |
| 컴퓨터 구조 | 토익 | 파이썬 |

1st	2nd	3rd
좌로 정렬	가운데 정렬	우로 정렬
선형대수학	통계학	이산수학
컴퓨터 구조	토익	파이썬

            
        
            
                <table>
    <thead>
        <tr>
            <th>1st</th>
            <th>2nd</th>
            <th>3rd</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan = "2">2열 병합</td>
            <!-- <td>가운데 정렬</td> -->
            <td style = "text-align: right">우로 정렬</td>
        </tr>
        <tr>
            <td rowspan = "2">2행 병합</td>
            <td style = "text-align: center">가운데 정렬</td>
            <td style = "text-align: left">좌로 정렬</td>
        </tr>
        <tr>
            <!-- <td>컴퓨터 구조</td> -->
            <td>토익</td>
            <td>파이썬</td>
        </tr>
    </tbody>
</table>

            
            
            
                

1st	2nd	3rd
2열 병합		우로 정렬
2행 병합	가운데 정렬	좌로 정렬
2행 병합	토익	파이썬

10. 수식

~~수식 같은 경우에는 다른 프로그램에서 수식을 작성하고 캡처해서 사진으로 붙여넣는 게 빠르다~~

            
                $$f(x)= if x < x_{min} : (x/x_{min})^a$$  
$$otherwise : 0$$  
$$P(w)=U(x/2)(7/5)/Z$$  
$$p_{\theta}(x) = \int p_{\theta}(2z)p_{\theta}(y\mid k)dz$$  
$$x = argmax_k((x_t-x_u+x_v)^T*x_m)/(||x_b-x_k+x_l||)$$

\(f(x)= if x < x_{min} : (x/x_{min})^a\)
\(otherwise : 0\)
\(P(w)=U(x/2)(7/5)/Z\)
\(p_{\theta}(x) = \int p_{\theta}(2z)p_{\theta}(y\mid k)dz\)
\(x = argmax_k((x_t-x_u+x_v)^T*x_m)/(||x_b-x_k+x_l||)\)

11. 이미지(Image)

이미지의 빠른 로딩을 위해 CDN을 적용해주는 것이 좋다.
CDN 적용 사이트: JSDELIVR

            
                ![첫 번째 이미지](https://cdn.pixabay.com/photo/2023/01/25/08/59/bird-7742845_960_720.jpg "링크 설명(title)")

첫 번째 이미지

            
                ![두 번째 이미지](https://cdn.pixabay.com/photo/2023/01/11/09/30/trees-7711283_960_720.jpg "두 번째 이미지")

두 번째 이미지

            
                ![세 번째 이미지][이미지 링크]

[이미지 링크]: https://cdn.pixabay.com/photo/2023/01/14/18/17/hot-air-balloon-7718789_960_720.jpg  "세 번째 이미지"

세 번째 이미지

            
                <!-- 이 넘은 사진 클릭하면 링크 탐 -->
[![네 번째 이미지](https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/368px-Google_2015_logo.svg.png)](https://www.google.no/)

이 넘은 사진 클릭하면 링크 탐

            
                <img src="https://cdn.pixabay.com/photo/2023/01/27/01/40/brothers-7747561_960_720.jpg" alt="대체 문구입니다" title="다섯 번째 이미지" />

대체 문구입니다

12. Emoji

정적 사이트 생성기를 사용하고 있다면, HTML page 인코딩을 UTF-8로 해야 한다.

12.1. Emoji 붙여넣기

Emojipedia: img 형태로 복사된다.
twitter-symbols: emoji 형태로 복사된다 🙃

12.2. Shortcode 사용하기

~~Jekyll에서 적용 안 되는 듯~~

            
                Gone camping! :tent: Be back soon.
That is so funny! :joy:

Gone camping! :tent: Be back soon.
That is so funny! :joy:
Emoji Shortcodes 목록

13. 다이어그램 -> mermaid

Pages는 Mermaid가 적용되지 않아서 HTML 요소를 사용해서 처리해야 한다 그렇기 때문에 포스트 맨 위와

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

맨 아래에

<script>
mermaid.initialize({startOnLoad:true});
window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
</script>

를 적용해줘야 한다

            
                ```mermaid
graph LR
A[Encoding/Decoding<br>인코딩/디코딩]
B(Encryption/Decryption<br>암호화/복호화) --> C(Hash<br>단방향 암호화)
B --> D(Encryption<br>양방향 암호화)
D --> E(대칭키)
D --> F(비대칭키)
```

graph LR
A[Encoding/Decoding<br>인코딩/디코딩]
B(Encryption/Decryption<br>암호화/복호화) --> C(Hash<br>단방향 암호화)
B --> D(Encryption<br>양방향 암호화)
D --> E(대칭키)
D --> F(비대칭키)

            
                ~~~ mermaid
graph LR
A[Encoding/Decoding<br>인코딩/디코딩]
B(Encryption/Decryption<br>암호화/복호화) --> C(Hash<br>단방향 암호화)
B --> D(Encryption<br>양방향 암호화)
D --> E(대칭키)
D --> F(비대칭키)
~~~

graph LR
A[Encoding/Decoding<br>인코딩/디코딩]
B(Encryption/Decryption<br>암호화/복호화) --> C(Hash<br>단방향 암호화)
B --> D(Encryption<br>양방향 암호화)
D --> E(대칭키)
D --> F(비대칭키)

            
                ``` mermaid
pie title What Voldemort doesn't have?
         "FRIENDS" : 2
         "FAMILY" : 3
         "NOSE" : 45
```

pie title What Voldemort doesn't have?
         "FRIENDS" : 2
         "FAMILY" : 3
         "NOSE" : 45

            
                ``` mermaid
sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?
```

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

            
                ``` mermaid
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D
```

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

            
                ``` mermaid
graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
     class sq,e green
     class di orange
```

graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
     class sq,e green
     class di orange

참고 사이트에 종류가 더 있으니 직접 확인하는 걸 추천한다

14. HTML, CSS, JS

마크다운에 HTML, CSS, JS 문법을 적용시킬 수 있다.
HTML의 각종 태그, <style>, <script>로 감싸고 그 안에 각각의 문법에 맞는 코드를 작성하면 된다.
태그로 감싸져 있는 부분은 마크다운 문법 적용이 안 된다.

참고