포스트

마크다운 (Markdown)

게시 업데이트
By hantaejun 13 분읽는 시간

마크다운(Markdown) 이란?

Markdown은 텍스트 기반의 마크업언어로 2004년 존그루버에 의해 만들어졌으며 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다. 특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서도 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있다. 마크다운이 최근 각광받기 시작한 이유는 깃헙(https://github.com) 덕분이다. 깃헙의 저장소Repository에 관한 정보를 기록하는 README.md는 깃헙을 사용하는 사람이라면 누구나 가장 먼저 접하게 되는 마크다운 문서였다. 마크다운을 통해서 설치방법, 소스코드 설명, 이슈 등을 간단하게 기록하고 가독성을 높일 수 있다는 강점이 부각되면서 점점 여러 곳으로 퍼져가게 된다.

마크다운(Markdown) 기본문법

Header : 제목

제목을 만들려면 #단어나 구문 앞에 숫자 기호( )를 추가해야한다.
사용하는 숫자 기호의 수는 제목 수준과 일치해야 한다.
예를 들어 제목 수준 3( <h3>)을 만들려면 세 개의 숫자 기호(예: ### My Header)를 사용해야 한다.

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

<h1> 1단계 제목</h1>
<h2> 2단계 제목</h2>
<h3> 3단계 제목</h3>
<h4> 4단계 제목</h4>
<h5> 5단계 제목</h5>
<h6> 6단계 제목</h6>
# 1단계 제목
## 2단계 제목
### 3단계 제목
#### 4단계 제목
##### 5단계 제목
###### 6단계 제목

1단계 제목

2단계 제목

3단계 제목

4단계 제목

5단계 제목
6단계 제목



현재 본인이 사용중인 테마인 jekyll-theme-chirpy에서는 3단계까지만 toc메뉴에 걸리게 되어있다.

1~3단계를 사용하는 중, toc메뉴에 걸리지 않도록 하고 싶다면 아래와 같이 작성해야한다.

1
2
3

<h1 data-toc-skip>이것은 1번째 제목인것</h1>

<h2 data-toc-skip>이것은 2번째 제목인것</h2>

참고사항 :
jekyll-theme-chirpy에서는 1~3단계 제목 수준을 지키더라도 제목 글이 숫자로 시작되면 toc메뉴에서 제외된다고함.

paragraph : 단락

단락을 만들려면 빈 줄을 사용하여 하나 이상의 텍스트 줄을 구분해야한다.

1
2
3
4
5
6
7

<p>이것은 첫번째 문장이다.</p>

<p>이것은 두번째 문장이다.</p>

이것은 첫번째 문장이다.

이것은 두번째 문장이다.

이것은 첫번째 문장이다.

이것은 두번째 문장이다.

line break : 줄바꿈

줄 바꿈이나 새 줄(<br>)을 만들려면 두 개 이상의 공백으로 줄을 끝내고 return을 입력해야한다.

1
2
3
4

<p>첫번째 줄<br>
두번째 줄</p>
첫번째 줄  
두번째 줄

첫번째 줄
두번째 줄

Emphasis : 글꼴

텍스트를 굵게 또는 기울임꼴로 만들어 강조를 추가할 수 있다.
여러가지 글꼴을 섞어서 쓸 수있다.

Bold : 굵게

텍스트를 굵게 표시하려면 단어나 문구 앞뒤에 별표나 밑줄 두 개를 추가해야한다.
강조하기 위해 단어 중간을 굵게 표시하려면 글자 주위에 공백 없이 별표 두 개를 추가해야한다.

1
2
3

이것은 <strong>굵은 글씨</strong>입니다
이것은 **굵은 글씨**입니다.
이것은 __굵은 글씨__ 입니다.

이것은 굵은 글씨입니다.
이것은 굵은 글씨 입니다.

Italic : 기울임꼴

텍스트를 기울임꼴로 표시하려면 단어나 구문 앞뒤에 별표나 밑줄을 추가해야한다.
강조하기 위해 단어 중간을 이탤릭체로 표시하려면 글자 주위에 공백 없이 별표 하나를 추가해야한다.

1
2
3

이것은 <em>기울임꼴</em>이다.
이것은 *기울임꼴*이다.
이것은 _기울임꼴_ 이다.

이것은 기울임꼴이다.
이것은 기울임꼴 이다.

strikethrough : 취소선

텍스트를 취소로 표시하려면 단어나 구문 앞뒤에 ~~나 <del></dev>을 추가해야한다.
강조하기 위해 단어 중간을 취소선으로 표시하려면 글자 주위에 공백없이 물결표시를 추가해야한다.

1
2

이것은 <dev>취소선</dev>이다.
이것은~~취소선~~이다.

이것은취소선이다.

underscore : 밑줄

텍스트를 밑줄로 표시하려면 단어나 구문 앞뒤에 <U></U>를 추가해야한다.

1

이것은 <u>밑줄</U>이다.

이것은 밑줄이다.

Blockquotes : 인용부호

인용문을 만들려면 >단락 앞에 를 추가하면된다.
응용하면 다양한 인용문을 만들수있다.

1
2
3

> 이것은 인용문이다.
>
>> 중첩되고 여러단락이 포함된 인용문이다.

이것은 인용문이다.

중첩되고 여러단락이 포함된 인용문이다.

Lists : 리스트

항목을 순서가 있는 목록과 순서가 없는 목록으로 구성할 수 있다.

Ordered Lists : 순서가 있는 리스트

순서가 지정된 목록을 만들려면 숫자와 마침표가 있는 항목을 추가해아한다.
숫자는 숫자 순서대로일 필요는 없지만 목록은 숫자 1부터 시작해야 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1. 첫번째 리스트
2. 두번째 리스트
3. 세번째 리스트
1. 네번번째 리스트
    1. 들여쓰기 첫번째 리스트
    1. 들여쓰기 두번째 리스트
<ol>
  <li>1번 항복</li>
  <li>2번 항목</li>
  <li>3번 항목
    <ol>
      <li>들여쓰기 1번 항목</li>
      <li>들여쓰기 2번 항목</li>
    </ol>
  </li>
  <li>4번 항목</li>
</ol>
  1. 첫번째 리스트
  2. 두번째 리스트
  3. 세번째 리스트
  4. 네번번째 리스트
    1. 들여쓰기 첫번째 리스트
    2. 들여쓰기 두번째 리스트
  1. 1번 항복
  2. 2번 항목
  3. 3번 항목
    1. 들여쓰기 1번 항목
    2. 들여쓰기 2번 항목
  4. 4번 항목

Unordered Lists : 순서가 없는 항목

순서가 지정되지 않은 목록을 만들려면 항목 앞에 대시( -), 별표( *) 또는 더하기 기호( +)를 추가해야한다.
하나 이상의 항목을 들여쓰기하여 중첩 목록을 만든다.

1
2
3
4
5
6

* 첫번째 리스트
+ 두번째 리스트
- 세번째 리스트
    - 들여쓰기 첫번째 리스트
    - 들여쓰기 두번째 리스트
- 네번째 리스트
  • 첫번째 리스트
  • 두번째 리스트
  • 세번째 리스트
    • 들여쓰기 첫번째 리스트
    • 들여쓰기 두번째 리스트
  • 네번째 리스트

Task list : 작업 목록

아래 코드를 사용하면 작업목록 체크리스트를 만들수 있다

1
2
3
4
5

- [ ] 이것은
  - [x] 목록
  - [ ] 이라고
    - [x] 하면
    - [ ] 될까요?
  • 이것은
    • 목록
    • 이라고
      • 하면
      • 될까요?

Description list : 설명 목록

아래 코드를 사용하면 설명이 적혀있는 목록을 만들수있다.

1
2
3
4
5

설명
  : 설명목록에 대한 설명임.

목록
  : 목록에 대한 설명임.
설명
설명목록에 대한 설명임.
목록
목록에 대한 설명임.

Link : 링크

하이퍼 링크이다 클릭시 해당페이지로 이동되는 기능을 구현할수있다.

1
2
3
4
5
6

깃허브 홈페이지: <https://github.com>

[Github](https://github.com)
[Github](https://github.com "마우스 오버시 링크에 대한 설명이 보인다.")

[마크다운(Markdown) 이란?](#마크다운(markdown)-이란? "클릭시 본문에 마크다운(Markdown) 이란?로 이동한다.")

깃허브 홈페이지: https://github.com

Github
Github설명추가

마크다운(Markdown) 이란?

horizon : 수평선

수평선을 만들려면 한 줄에 3개 이상의 별표( ***), 대시( —) 또는 밑줄( ___)을 단독으로 사용 해야한다.

1
2
3
4
5
6
7

***

---

___

이렇게 추가된다

이렇게 추가된다

image : 이미지

아래 코드를 이용하면 이미지를 추가할수있다.
이미지는 링크를 통해 외부 이미지를 불러올수있으며, 로컬 이미지를 불러오고 싶으면 경로를 지정해주면된다.
대게 assets/img경로에 이미지를 넣는다.
본인은 이미지 관리를 위해 게시물별로 폴더를 나눠 관리중이다.

1
2
3
4
5
6

![이미지라고한다.](/assets/img/posts/Markdown-ko/tomas.png)

![이미지라고한다.](https://han-tomas.github.io/assets/img/posts/Markdown-ko/tomas.png "이미지에 대한 설명 추가 가능")

사이즈를 조절하고 싶은 경우 `{: width="비율%" }`  코드를 뒤에 추가하면된다.  
![이미지라고한다.](/assets/img/posts/Markdown-ko/tomas.png "이미지에 대한 설명 추가 가능"){: width="50%" }

이미지라고한다.

이미지라고한다.

사이즈를 조절하고 싶은 경우 {: width="비율%" } 코드를 뒤에 추가하면된다.
이미지라고한다.

Code : 코드

단어나 구문을 코드로 표시하려면 백틱( `)으로 묶는다.

1
2

이것은 `코드`임
```markdown```

이것은 코드임

1

  😺Git, Git Blog
  깃 깃허브 블로그 블로그 만들기 마크다운 git github github blog markdown
 이 기사는 저작권자의  CC BY 4.0  라이센스를 따릅니다.