4 분 소요

개요

마크다운은 간결한 문법으로 HTML 작성을 보조하는 도구입니다.

표준화 되지는 않았고, 제공되는 Editor에 따라 결과물이 다르기는 하나, wiki 작성시 유용합니다.

자세한 내용은 Markdown Guide(https://www.markdownguide.org)를 참고하면 됩니다.

마크다운은 헤더, 코드, 특수기호, 강조와 구분선, 인용, 목록, 체크박스, 접기/펼치기, 링크, 그림, 표로 구성됩니다.

개행

엔터 2개를 하거나, 문장뒤에 공백 2개 한뒤 엔터 1개 하면 개행이 됩니다.

1
2
3
4
5
6
7
8
9
10
11

**첫번째** 문장(엔터 1개)
두번째 문장

**첫번째** 문장(엔터 2개)

두번째 문장

**첫번째** 문장(공백 2개)  두번째 문장

**첫번째** 문장(공백 2개, 엔터 1개)  
두번째 문장

결과

첫번째 문장(엔터 1개) 두번째 문장

첫번째 문장(엔터 2개)

두번째 문장

첫번째 문장(공백 2개) 두번째 문장

첫번째 문장(공백 2개, 엔터 1개)
두번째 문장

헤더

제목등 강조를 할때 사용합니다. 각 헤더는 링크를 별도로 가질 수 있어, Github wiki에서 하위 제목으로 표시됩니다.

1
2
3
4
5

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

결과

h1

h2

h3

h4

h5

코드

코드 표시를 할때 <pre><code> 코드 </code></pre> 나 ``` 로 개행하여 감쌉니다. 코드 블록은 Github에서 복사하기가 지원됩니다.

```
if (int i = 0; i < 10; ++i) { 
   ...
}
```

결과

1
2
3

if (int i = 0; i < 10; ++i) { 
   ...
}

특정 언어의 문법을 강조하고 싶으면 시작 ``` 옆에 cpp, cs, java, javascript, python, bash, css, diff, html, http, ini, markdown 를 기재하시면 됩니다.

```cpp
for (int i = 0; i < 10; ++i) { 
   ...
}
```

결과

1
2
3

for (int i = 0; i < 10; ++i) { 
   ...
}

문장내에서 작성하고 싶으면 ` 로 감싸면 됩니다. 단, 문법강조는 지원되지 않습니다.

`for`문은 `cpp for (int i = 0; i < 10; ++i) {}` 와 같이 횟수를 지정하여 반복할 수 있습니다.

결과

for문은 for (int i = 0; i < 10; ++i) {} 와 같이 횟수를 지정하여 반복할 수 있습니다.

특수 기호

그대로 표시하고픈 특수기호 앞에 \ 를 사용 하면 됩니다.

강조와 구분선

다음과 같이 글꼴을 강조합니다.

1
2
3
4
5
6
7

*이텔릭체*
**볼드체**
__볼드체__
_이텔릭체_
~~취소선~~
<u>밑줄</u>
<span style="color:red">빨간색</span>

결과

이텔릭체 볼드체 볼드체 이텔릭체 취소선 밑줄 빨간색

* 과 _ 을 2개이상 사용하여 구분선을 표시합니다.

1
2

**
__

결과

인용

> 으로 이메일 인용형식으로 표시합니다.

1
2
3
4

> 인용입니다.
>> 들여쓰기된 인용입니다.
>>
>> **마크다운** 의 용법이 그대로 적용됩니다.

결과

인용입니다.

들여쓰기된 인용입니다.

마크다운 의 용법이 그대로 적용됩니다.

목록

순서있는 목록은 숫자뒤에 . 을 사용하고, 순서없는 목록은 *, +, -를 사용합니다. 목록에서 하위 항목을 만들려면 앞에 Tab을 추가하여 들여쓰기를 해야 합니다.

1
2
3
4
5
6
7
8
9
10

1. 목록입니다.
3. 목록 2번인데 3번이라 잘못 작성했지만, 마크다운은 순서대로 2번이라 보여줍니다.
2. 목록 3번인데 2번이라 잘못 작성했지만, 마크다운은 순서대로 3번이라 보여 줍니다.

*부모(띄어쓰기를 안하면 목록이 안됩니다.)  
* 부모(* 뒤에 띄어쓰기를 해야 합니다.)
 + 자식( + 앞에 띄어쓰기 1을 하니 하위 항목이 되지 않습니다.)
* 부모
   + 자식( + 앞에 Tab 1)
      - 손자( - 앞에 Tab 2)

결과

  1. 목록입니다.
  2. 목록 2번인데 3번이라 잘못 작성했지만, 마크다운은 순서대로 2번이라 보여줍니다.
  3. 목록 3번인데 2번이라 잘못 작성했지만, 마크다운은 순서대로 3번이라 보여 줍니다.

*부모(띄어쓰기를 안하면 목록이 안됩니다.)

  • 부모(* 뒤에 띄어쓰기를 해야 합니다.)
  • 자식( + 앞에 띄어쓰기 1을 하니 하위 항목이 되지 않습니다.)
  • 부모
    • 자식( + 앞에 Tab 1)
      • 손자( - 앞에 Tab 2)

목록에서의 하위 항목 들여쓰기 수준 맞추기

목록에서 하위 항목의 들여쓰기는 각 수준에 맞게 작성해야 합니다. 그렇지 않으면, 하위항목이 의도한 대로 해석되지 않을 수도 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

1. A

   A 의 하위 항목. Tab1을 사용했습니다.

   * A Child1. Tab1을 사용했습니다. 

   * A Child2. Tab2을 사용했습니다.

**(오류)** A Child2 하위항목인데 아무런 들여쓰기를 하지 않았습니다.

**(오류)** A의 하위항목인데 들여쓰기를 하지 않았습니다.(튀어 나와 보이고, Markdown 변환기에 따라 하기 2번째 목록이고, Markdown 변환기에 따라 하기 2번째 목록이 1로 초기화 될 수도 있습니다.)

2. **(오류)** B(숫자가 1이 될 수 있습니다.)

Markdown 변환기에 따라 오류 부분이 다르게 나올 수 있습니다.

  1. A

    A 의 하위 항목. Tab1을 사용했습니다.

    • A Child1. Tab1을 사용했습니다.

    • A Child2. Tab2을 사용했습니다.

(오류) A Child2 하위항목인데 아무런 들여쓰기를 하지 않았습니다.

(오류) A의 하위항목인데 들여쓰기를 하지 않았습니다.(튀어 나와 보이고, Markdown 변환기에 따라 하기 2번째 목록이고, Markdown 변환기에 따라 하기 2번째 목록이 1로 초기화 될 수도 있습니다.)

  1. (오류) B(숫자가 1이 될 수 있습니다.)

다음과 같이 들여쓰기를 맞추면 의도한 대로 해석됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

1. A

   A 의 하위 항목. Tab1을 사용했습니다.
   
   * A Child1. 탭을 사용했습니다.

   * A Child2. 탭을 사용했습니다.

      **(정상)** A Child2 하위항목이어서 Tab2

   **(정상)** A의 하위항목이어서 Tab1

2. **(정상)** B

  1. A

    A 의 하위 항목. Tab1을 사용했습니다.

    • A Child1. 탭을 사용했습니다.

    • A Child2. 탭을 사용했습니다.

      (정상) A Child2 하위항목이어서 Tab2

    (정상) A의 하위항목이어서 Tab1

  2. (정상) B

체크박스

-[ ] 과 x 로 체크박스를 표시합니다.

1
2

- [ ] 항목 1
- [x] 항목 2

결과

  • 항목 1
  • 항목 2

접기/펼치기

하기 태그로 접기/펼치기를 구성합니다.

1
2
3
4
5
6
7
8

<details>
<summary>접기/펼치기</summary>
<div markdown="1">
  
펼쳐졌을때 표시되는 내용
  
</div>
</details>

결과

접기/펼치기

펼쳐졌을때 표시되는 내용

링크

[LinkText](URL)로 화면에 표시되는 LinkText와 실제 이동할 URL을 기재합니다.

1

[Github](https://www.github.com)

결과

Github

그림

[ALTText](URL)로 그림 표시에 오류가 있을 때 대신 표시되는 ALTText와 실제 이미지가 있는 URL을 기재합니다.

1

![오드리햅번](https://github.com/tango1202/tango1202.github.io/assets/133472501/4f7fd3af-ac26-47d0-9198-780679d33dcd)

결과

오드리햅번

Github 그림 삽입 팁

실제 이미지를 등록하기 위해 URL을 작성하는게 쉽지는 않습니다. 이럴때 Github의 이슈 페이지를 활용하면 손쉽게 이미지를 wiki에 삽입할 수 있습니다.

  1. 원하는 이미지를 클립보드에 복사

  2. Github 이슈 탭에서 New Issue 버튼 클릭

    image

  3. 이슈 내용 입력란에 클립보드의 이미지 복사하면 Github에 등록된 이미지의 URL이 표시됨

    image

  4. 해당 URL을 마크다운에 작성

표

| 과 - 로 표를 구성합니다.

1
2
3
4
5

|항목|설명|비고|
|--|--|--|
|자동차|지상 이동수단||
|배|수상 이동수단||
|비행기|*항공* 이동수단|마크다운의 용법이 그대로 적용됩니다.|

결과

항목 설명 비고
자동차 지상 이동수단  
배 수상 이동수단  
비행기 항공 이동수단 마크다운의 용법이 그대로 적용됩니다.

|--|--|--|에 :을 추가하여 정렬 방식을 지정할 수 있습니다.

1
2
3
4
5

|왼쪽정렬|가운데정렬|오른쪽정렬|
|:--|:--:|--:|
|자동차|지상 이동수단||
|배|수상 이동수단||
|비행기|*항공* 이동수단|마크다운의 용법이 그대로 적용됩니다.|

결과

왼쪽정렬 가운데정렬 오른쪽정렬
자동차 지상 이동수단  
배 수상 이동수단  
비행기 항공 이동수단 마크다운의 용법이 그대로 적용됩니다.

댓글남기기