본문으로 건너뛰기

⌨️ 마크다운(Markdown) 정리

Chanho Lee

오랜만에 블로그를 다시 시작하다 보니 마크다운에 익숙하지 않은 모습이 보여 문서화 하면서 연습한다.

Markdown이란?​

마크다운(markdown)은 일반 텍스트 문서의 양식을 편집하는 문법이다. GitHub의 README 파일이나 온라인 문서, 혹은 일반 텍스트 편집기로 문서들을 편집할 때 쓰인다. 마크다운을 이용해 작성된 문서는 쉽게 HTML 등 다른 문서형태로 변환이 가능하다. 즉, 개발자들이 쉽게 문서화를 할 수 있도록 도와주는 언어이다.

문법을 그대로 보여주고 싶을 때​

마크다운 문법 앞에 \를 붙여주면 문법 그대로를 보여준다.

\### 안녕

### 안녕

코드 블록​

```언어 이름
코드
```

#include <stdio.h>

int main(void)
{
    printf("Hello World!");
}

텍스트​

*이탤릭체(기울게)*
_이탤릭체(기울게)_
**굵게**
__굵게__
~~취소선~~

이탤릭체 이탤릭체 굵게 굵게 취소선

밑줄이나 글씨 색은 HTML, CSS를 사용하자.

헤더​

# ~ ######로 h1 ~ h6까지의 제목 크기를 표기할 수 있다.

# This is a h1
## This is a h2
### This is a h3
#### This is a h4
##### This is a h5
###### This is a h6

This is a h1

This is a h2​

This is a h3​

This is a h4​

This is a h5​
This is a h6​

######## This is a h7 -> 지원하지 않는다.

h2를 보면 아래에 구분선이 그어지는 모습을 확인할 수 있는데 minimal-mistakes 테마의 scss에서 정의되고 있기 때문이다. 이 부분은 이대로 놔둘지 수정할지 고민 중이다.

리스트​

순서 있는 리스트​

  1. 1번
  2. 2번
  3. 3번
1. 1번
1. 2번
1. 3번

1.처럼 평소 쓰던대로 쓰면 된다. 그렇지만 위의 코드 블록의 예시처럼 같은 숫자를 연속해서 쓰더라도 내림차순으로 표기된다.

순서 없는 목록(글머리 기호: *, +, -)​

- 나는
  + 회를
  * 치킨을
    + 먹고싶다.
  • 나는
    • 회를
    • 치킨을
      • 먹고싶다.

글머리 기호를 한 문자로 해도 되며 위의 예시처럼 혼합해서 사용하는 것도 가능하다.

개행 또는 줄바꿈​

HTML에서는 <br>를 사용하지만 Markdown에서는 Space bar를 2번 누른 후 Enter를 누르면 개행이 된다.

배고프다  
먹고싶다

배고프다
먹고싶다

수평선​

HTML에서의 <hr>이다. 글을 쓰다가 구분하는 선으로 많이 쓰인다. 즉, 페이지 나누기 용도이다. ---, ***로 쓰이지만 아래와 같이 조금 이상한 문법도 허용해주는 것 같다.

* * * 
***
******
- - -
---
___

인용문​

>를 사용하여 표기할 수 있다. 예시와 같이 중첩된 인용문에서 개행을 하고 싶다면 위에서 사용한 것처럼 개행을 사용하면 된다.

> 인용문
>> 인용문 안의 인용문   
2번째 인용문으로 들어갈래
>>> 인용문 안의 인용문 안의 인용문

인용문

인용문 안의 인용문
2번째 인용문으로 들어갈래

인용문 안의 인용문 안의 인용문

링크​

문서에 링크를 추가하는 방법이다. 이 방법들 이외에도 다른 방법들이 존재할 수 있다.

URL을 보여주는 링크: <https://www.google.com/>  

설명안에 URL이 포함되어 있는 링크: [Google](https://www.google.com/)  

동일 파일 내에서 헤더 이동 링크: [인용문](#인용문)

<https://www.google.com/\>
Google
인용문

헤더로 이동하는 링크 만드는 방법

  1. 헤더를 제외하고 제목 문자열을 복사한다.

  2. 특수 문자를 제거한다.

  3. 공백을 -로 변경한다.

  4. 대문자는 소문자로 변경한다.

  5. 문자열의 가장 앞에 #을 붙여준다.

e.g. "## 문법이 기억나지 않거나 응용하고 싶을 때" -> "#문법이-기억나지-않거나-응용하고-싶을-때"

이미지​

![프로필](profile.jpg)

<img src="profile.jpg" width="300" height="200">

[![프로필](profile.jpg)](https://teddygood.github.io/)

연필

연필

이미지는 내가 직접 대학에서 찍은 달.

테이블​

|와 -의 조합으로 테이블을 만들 수 있다.

  • 정렬
    • 왼쪽 정렬 |:—|
    • 오른쪽 정렬 |—:|
    • 가운데 정렬 |:—:|
음식가격평가
치킨+치즈볼25000맛있어
쌀국수7000맛없어

문법이 기억나지 않거나 응용하고 싶을 때​

이럴 때는 Markdown과 HTML/CSS를 섞어 쓰면 된다. 예를 들어 줄바꿈이 적용이 안 된다면 <br> 태그를 사용하면 된다. 이외에도 글씨의 색을 바꾸거나 밑줄 등을 사용하고 싶으면 HTML과 CSS를 사용하면 된다.

References​