Markdown 문법 알아보기

Updated:

이 글은 GitHub Pages 블로그 따라하기 시리즈의 다섯번째 글로 markdown 문법에 대해 살펴볼 것이다. markdown 문법에 대해 알고 있거나 일단 블로그 세팅 완료를 먼저 하고 싶다면 이 글을 건너뛰어도 된다.

1. markdown 특징

markdown은 텍스트 기반의 마크업 언어이다. 문법이 간단한 것이 특징이다. 간단한만큼 가독성이 좋고 배우기가 쉽다. GitHub를 많이 사용해보았다면 README 파일이 모두 markdown으로 작성되었음을 보았을 것이다. GiuHub가 markdown을 사용하면서 markdown이 널리 쓰이는 계기가 되었다.

텍스트(Text)로 기반으로 작성되기 때문에 특별한 형태의 에디터가 필요가 없고 파일 사이즈가 작다. 텍스트로 이뤄져서 GitHub에서 버전관리가 용이하다.

2. 마크다운 문법

기본적인 마크다운 문법을 정리하였다. markdown 문법을 먼저 표기하고 그 뒤로 html으로 표시되는 결과를 표시하였다.

2.1. 텍스트 줄바꿈

기본적인 텍스트 표기 방식이다.
마크다운은 줄바꿈을 인식하지 않는다.

줄바꿈을 하기 위해서는 라인 끝에 스페이스를 2번  
표기해야 한다.

여러가지 강조 표시가 존재한다. 첫번째로 *single asterisks*,
두번째로 _single underscores_, 세번째로 **double asterisks**,
네번째로 __double underscores__, 다섯번째로 ~~cancelline~~가 있다.

기본적인 텍스트 표기 방식이다. 마크다운은 줄바꿈을 인식하지 않는다.

줄바꿈을 하기 위해서는 라인 끝에 스페이스를 2번
표기해야 한다.

여러가지 강조 표시가 존재한다. 첫번째로 single asterisks, 두번째로 single underscores, 세번째로 double asterisks, 네번째로 double underscores, 다섯번째로 cancelline가 있다.

2.2. 글머리 달기

# This is a H1

This is a H1

## This is a H2

This is a H2

### This is a H3

This is a H3

#### This is a H4

This is a H4

##### This is a H5
This is a H5
###### This is a H6
This is a H6

2.3. 인용

인용문을 사용할때는 > 블럭 인용 문자를 사용하면, 단계별 깊이를 지원한다.

> This is a blockqute.

This is a blockqute.

단계별 인용

> This is a first blockqute.
>> This is a second blockqute.
>>> This is a third blockqute.

This is a first blockqute.

This is a second blockqute.

This is a third blockqute.

2.4. 정렬 목록

1. 봄
2. 여름
3. 가을
4. 겨울
  1. 여름
  2. 가을
  3. 겨울

2.4. 비정렬 목록

* 과자
  * 라면
    * 사탕
  • 과자
    • 라면
      • 사탕
+ 과자
  + 라면
    + 사탕
  • 과자
    • 라면
      • 사탕
- 과자
  - 라면
    - 사탕
  • 과자
    • 라면
      • 사탕

2.5. 코드 인용

```
function test() {
  console.log("notice the blank line before this function?");
}
```
function test() {
  console.log("notice the blank line before this function?");
}

2.6. 코드 인용(언어 별 문법 하이라이트)

  • 루비
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
  • C
```c
int main() {
  int y = SOME_MACRO_REFERENCE;
  int x = 5 + 6;
  cout << "Hello World! " << x << std::endl();
}
```
int main() {
  int y = SOME_MACRO_REFERENCE;
  int x = 5 + 6;
  cout << "Hello World! " << x << std::endl();
}
  • C++
```cpp
int main() {
  int y = SOME_MACRO_REFERENCE;
  int x = 5 + 6;
  cout << "Hello World! " << x << std::endl();
}
```
int main() {
  int y = SOME_MACRO_REFERENCE;
  int x = 5 + 6;
  cout << "Hello World! " << x << std::endl();
}
  • Python
```python
s = "Python syntax highlighting"
print s
```
s = "Python syntax highlighting"
print s

2.7. 수평선

모두 수평선을 만드는 여러가지 표기법이다.

* * *
***
*****
- - -
---------------------------------------





2.8. 링크

- 링크 표시법 : [Title](link)
[Google 페이지 링크](https://google.com)

Google 페이지 링크

  • 주소 직접 표시법
<https://google.com>

https://google.com

2.9. 이미지 삽입

![](https://devinlife.com/assets/images/bio-photo-keyboard-small.jpg)

![](https://devinlife.com/assets/images/bio-photo-keyboard-small.jpg){: .align-center}

![키보드 사진](https://devinlife.com/assets/images/bio-photo-keyboard-small.jpg "내 키보드 사진"){: .align-center}

키보드 사진

2.10. 표 만들기

  • 표 내용 중앙 정렬
    | 항목 | 가격 | 개수 |
    |:---:|:----:|:----|
    | 라면 | 800원 | 10개 |
    | 과자 | 900원 | 20개 |
    
항목 가격 개수
라면 800원 10개
과자 900원 20개
  • 표 내용 좌측 정렬-중앙 정렬-우측 정렬
    | 항목 | 가격 | 개수 |
    |:----|:----:|----:|
    | 라면 | 800원 | 10개 |
    | 과자 | 900원 | 20개 |
    
항목 가격 개수
라면 800원 10개
과자 900원 20개

여기까지 마크다운의 기본적인 문법을 알아보았다. 이 정도 문법을 알고 있으면 블로그 작성할때 문제가 되지 않을 것이다.




Leave a comment