본문으로 건너뛰기

⌨️ 마크다운(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