Post

[Github Blog] 마크다운(Markdown) 사용법

Posted
By Hoon
5 min read

자주 쓰이는 마크다운 문법을 정리한 글입니다.

헤더

문단별 제목

  • 예시

    1
2
3
4
5
6

    # 1단계 제목 (h1)
## 2단계 제목 (h2)
### 3단계 제목 (h3)
#### 4단계 제목 (h4)
##### 5단계 제목 (h5)
###### 6단계 제목 (h6)

  • 결과

    1단계 제목 (h1)

    2단계 제목 (h2)

    3단계 제목 (h3)

    4단계 제목 (h4)

    5단계 제목 (h5)
    6단계 제목 (h6)

폰트 스타일

굵게, 기울임꼴, 취소선, 밑줄

  • 예시

    1
2
3
4

    **굵게**
*기울임꼴*
~~취소선~~
<u>밑줄</u>

  • 결과

    굵게
    기울임꼴
    취소선
    밑줄

줄바꿈

HTML 태그를 활용

문장 끝에 <br> 입력

  • 예시

    1
2

    안녕<br>
하세요

  • 결과

    안녕
    하세요

공백을 활용

문장 끝에 띄워쓰기를 2번 입력하면 줄이 바뀜

  • 예시

    1
2

    안녕  
하세요

  • 결과

    안녕
    하세요.

인용구에서의 줄바꿈

인용구 끝에 \ 입력

  • 예시

    1
2
3

    > 안녕\
> 하세\
> 요

  • 결과

    안녕
    하세
    요

목록

요소를 나열

순서가 있는 목록

  • 예시

    1
2
3

    1. 첫번째 요소
1. 두번째 요소
1. 세번째 요소

  • 결과

    1. 첫번째 요소
    2. 두번째 요소
    3. 세번째 요소

순서가 없는 목록

*, +, - 활용

  • 예시

    1
2
3
4
5

    + 과일
  - 사과
  - 오렌지
  - 바나나
    * 원숭이

  • 결과

    • 과일
      • 사과
      • 오렌지
      • 바나나
        • 원숭이

체크 목록

* [ ] 활용

  • 예시

    1
2
3

    * [ ] TO DO LIST
  * [ ] Study
  * [x] Game

  • 결과

    • TO DO LIST
      • Study
      • Game

설명 목록

: 활용

  • 예시

    1
2
3

    DBMS (Database Management System)
  : 데이터베이스 관리 시스템  
  데이터베이스를 운영하고 관리하는 소프트웨어

  • 결과

    DBMS (Database Management System)
    데이터베이스 관리 시스템
    데이터베이스를 운영하고 관리하는 소프트웨어

인용구

일반 인용구

> 활용

  • 예시

    1
2
3

    > 인용구
>> 안의 인용구
>>> 안의 인용구

  • 결과

    인용구

    안의 인용구

    안의 인용구

프롬프트 메세지

  • 예시

    1
2
3
4
5
6
7
8
9
10
11

    > TIP
{: .prompt-tip}

> INFO
{: .prompt-info}

> WARNING
{: .prompt-warning}

> DANGER
{: .prompt-danger}

  • 결과

    TIP

    INFO

    WARNING

    DANGER

코드

인라인 코드

` 내용 입력 `

  • 예시

    1

    안녕하세요. `Hoon Blog` 입니다.

  • 결과

    안녕하세요. Hoon Blog 입니다.

코드 블럭

```언어명
내용 입력
```

  • 예시

    1
2
3

    ```javascript
let bar = 'foo';
```

  • 결과

    1

    let bar = 'foo';

테이블

  • 예시

    1
2
3
4

    |      | 점수 | 등급  |
| :--- | ---: | :---: |
| 수학 |  100 |   A   |
| 영어 |   65 |   C   |

  • 결과

     점수등급
    수학100A
    영어65C

링크

클릭 시 해당 페이지로 이동

  • 예시

    1
2
3
4
5
6

    <https://github.com/younghunkimm>  
[Link](https://github.com/younghunkimm)  
[Link](https://github.com/younghunkimm "마우스 오버 시 출력될 링크에 대한 설명")  
[새창으로 열기](https://github.com/younghunkimm){:target="_blank"}

[현재 페이지 안에서의 이동](#폰트-스타일)

  • 결과

    https://github.com/younghunkimm
    Github
    Github
    새창으로 열기

    현재 페이지 안에서의 이동
    ❗️ 사용법
    1. 특수문자를 제거
    2. 공백은 - 로 치환
    3. 모든 대문자를 소문자로 변경

이미지

마크다운 활용

![Description](Path){: style=”CSS”}

  • 예시

    1

    ![이미지](https://upload.wikimedia.org/wikipedia/commons/5/5f/Mahameru-volcano.jpeg "화산"){: style="border: 1px solid orange; border-radius:15px"}

  • 결과

    이미지

HTML 활용

이미지의 가로, 세로 길이를 설정할 수 있다.
<img src=”Path” width=”Width” height=”Height”>

  • 예시

    1

    <img src="https://upload.wikimedia.org/wikipedia/commons/5/5f/Mahameru-volcano.jpeg" width="30%" />

  • 결과

링크 삽입

[![Description](Path)](Link){Attribute}

  • 예시

    1

    [![이미지](https://upload.wikimedia.org/wikipedia/commons/5/5f/Mahameru-volcano.jpeg "화산")](https://ko.wikipedia.org/wiki/%ED%99%94%EC%82%B0){:target="_blank"}

  • 결과

    이미지

Markdown
마크다운 Markdown