[GitHub Blog] Markdown 정리

Posted: 2021.05.10 Updated: 2021.05.10

Markdown(마크다운)

존 그루버와 에런 스워츠의 협업을 통해 탄생한 마크업 언어이다. 일반적인 마크업 언어보다 작성이 쉽고 간단한 것이 특징이며, HTML 등의 문서로 쉽게 변환할 수 있다. Github의 README 파일 작성, 온라인 게시물에 주로 사용된다.

Markdown 문법

Headers(제목)

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

h1부터 h6까지 표현할 수 있다.

h1

h2

h3

h4

h5

h6

h2 아래에는 수평선이 자동으로 설정되어 있다.

h1
===
h2
---

h1과 h2는 위 방식으로도 표현이 가능하다.

h1

h2

------ 는 수평선과 기능이 동일하다. 하단 참조.

✔ h1과 h2를 위 방법으로 사용할 때, h1 바로 다음 줄에 h2를 작성한다면 h1의 ====== 다음에 빈 줄을 하나 두고 h2를 작성한다. 붙여서 작성했더니 h2가 정상적으로 출력되지 않았다.
✔ =와 -를 각각 3개 이상 사용하면 헤더가 적용된다.

수평선

---

수평선은 이렇게 사용한다.

✔ 평범한 문장 뒤에 수평선을 사용할 때 문자의 앞 뒤로 엔터를 한 번 쳐서 빈 줄을 만들어 주자. 빈 줄 없이 문장과 붙여 사용하면 h2가 된다.

수평선을 사용하는 다른 방법

***
--------

✔ - 대신 *를 사용해도 된다.
✔ 문자를 3개 이상 사용하면 수평선이 적용된다.

엔터(줄 바꿈), 단락 구분

띄어쓰기 두 번으로  
줄 바꿈이 가능하다.

띄어쓰기 두 번으로
줄 바꿈이 가능하다.

✔ 띄어쓰기 두 번 뒤에 엔터를 한 번 쳐서 다음 줄에 내용을 작성해야 성공적으로 줄이 바뀐다.

코드 작성

앞, 뒤의 줄과 엔터로 공간을 띄운 뒤에

    스페이스 바 네 번

으로 내용을 작성한다.

앞, 뒤의 줄과 엔터로 공간을 띄운 뒤에

스페이스 바 네 번

으로 내용을 작성한다.

이탤릭으로 강조

이탤릭으로 강조할 때는 *별표*  
또는 _언더 바_ 를 사용한다.

이탤릭으로 강조할 때는 별표
또는 언더 바 를 사용한다.

두꺼운 글씨로 강조

두껍게 강조할 때는 **별표 두 개**
또는 __언더 바 두 개__ 를 사용한다.

두껍게 강조할 때는 별표 두 개
또는 언더 바 두개 를 사용한다.

이탤릭과 두껍게 강조를 함께 사용할 수 있다.

_이탤릭_ 과 **두껍게** 를
**_함께 사용_** 할 수 있다.

*이탤릭* 과 __두껍게__ 를
*__함께 사용__* 할 수 있다.

이탤릭 과 두껍게 를
함께 사용 할 수 있다.

이탤릭 과 두껍게 를
함께 사용 할 수 있다.

✔ 강조를 사용하지 않는 단어와 붙여서 쓸 경우 강조가 적용되지 않을 수 있다.

취소선

물결 표시로 ~~취소선~~ 을 나타낼 수 있다.

물결 표시로 ~~취소선~~ 을 나타낼 수 있다.

밑줄

<u>밑줄</u>은 이렇게 나타낸다.

밑줄은 이렇게 나타낸다.

인라인 코드 강조

`인라인 코드` 강조를 할 수 있다.

인라인 코드 강조를 할 수 있다.

✔ 인라인 코드 강조에 쓰이는 건 Tap키 위의 `(억음부호)이며 ‘(작은따옴표)와 다르다.

인용구

> 인용구 작성
>> 중복 사용도 가능하다.

인용구 작성

중복 사용도 가능하다.

1. 순서 있는 목록
  - 순서 없는 목록
1. 순서 있는 목록
  - 순서 없는 목록
  + 순서 없는 목록
1. 순서 있는 목록
  - 순서 없는 목록
  + 순서 없는 목록
  * 순서 없는 목록

- 첫 번째 수준
  + 두 번째
    * 세 번째
      - 네 번째
        + 다섯 번째

순서 있는 목록은 1. 을 사용하며, 순서 없는 목록은 -, +, * 중 무엇을 사용해도 상관이 없다.

순서 있는 목록
- 순서 없는 목록
순서 있는 목록
- 순서 없는 목록
- 순서 없는 목록
순서 있는 목록
- 순서 없는 목록
- 순서 없는 목록
- 순서 없는 목록

첫 번째 수준
- 두 번째
  - 세 번째
    - 네 번째
      - 다섯 번째

✔ 세 번째 수준부터 모양이 똑같다.
✔ 띄어쓰기 두 번(탭 한 번)으로 수준을 구분한다.

이미지 넣기

첫 번째 방법

![image](/assets/images/21051001/21051001_cafe.jpg)

✔ 대괄호와 소괄호를 붙여서 작성해야 정상적으로 링크가 적용된다.
✔ 이미지의 크기를 조절할 수 없다.

두 번째 방법

<img src="/assets/images/21051001/21051001_cafe.jpg" width="50em" height="50em">

HTML 태그로 작성하는 방법이다.

✔ 이미지의 크기를 조절하기 위해 사용한다.

링크

[Done is better than perfect](https://betterjeong.github.io "설명 입력")
<https://betterjeong.github.io>

위와 같은 방식으로 링크를 걸 수 있다.

Done is better than perfect
https://betterjeong.github.io

✔ 링크가 걸린 텍스트 위에 마우스를 올리면 ““(큰 따옴표)안의 내용이 표시된다.

게시글 내 이동

[Headers에 관한 설명으로 이동](#headers제목)

Headers에 관한 설명으로 이동

✔ 괄호 안에는 사용한 header명에 #을 붙여 입력한다. 특수문자는 제거하고, 대문자는 소문자로 변경, 스페이스는 -로 대체하여 작성한다.

이미지에 링크 넣기

[![image](/assets/images/21051001/21051001_cafe.jpg)](https://betterjeong.github.io/about/)

이미지 위치에 링크를 적용하면 된다.

Better Jeong