Markdown을 써보자
Markdown 이란
.md 의 확장자를 지닌 파일이 Markdown 문법으로 작성된 파일이다.
흔히 README.md 로 개발하면서 많이 볼 수 있는 문서!
문법이 간결하고 쉬우면서도 문서를 적당히 꾸밀 수 있다.
Markdown은 HTML의 마크업의 일부를 대신한다고 볼 수 있는데, 모든 것을 대신하지는 못하므로 한계가 존재하긴 한다.
그러나 지원하는 플랫폼도 많고(파생 문법들이 많으나 기본 문법은 대부분의 플랫폼에서 지원한다고 한다), 무엇보다 빠르게 배울 수 있으므로 종종 쓰게 될 것 같은 Markdown!
정리를 해보자.
메모장에다가 바로 작성할 수도 있지만 에디터가 있으면 조금 더 편리하다.
개인적으로는 VS Code를 사용하고 있는데, 여러 프로그램 깔기가 귀찮아서,,,ㅎㅎ
Markdown 문법
마크다운 문법에 대해 알아보자.
제목(Headings)
제목은 HTML의 h 태그로 변환된다.
h1~h6까지 각각 # 의 개수로 변환이 되는데, 예를 들어 h2 태그처럼 만들고 싶다면 `## 제목` 과 같이 쓰면 된다.
| Markdown | HTML | 결과 |
|---|---|---|
| # 제목1 | <h1>제목1</h1> | <h1>제목1</h1> |
| ## 제목2 | <h2>제목2</h2> | <h2>제목2</h2> |
| ### 제목3 | <h3>제목3</h3> | <h3>제목3</h3> |
| #### 제목4 | <h4>제목4</h4> | <h4>제목4</h4> |
| ##### 제목5 | <h5>제목5</h5> | <h5>제목5</h5> |
| ###### 제목6 | <h6>제목6</h6> | <h6>제목6</h6> |
제목(추가)
제목은 ===(level 1)나 —(level 2)를 추가해서도 표현할 수 있다.
=나 -의 개수는 상관이 없다.
| Markdown | HTML | 결과 |
|---|---|---|
| 제목 level 1 ====== |
<h1>제목 level 1</h1> | <h1>제목 level 1</h1> |
| 제목 level 2 —— |
<h2>제목 level 2</h2> | <h2>제목 level 2</h2> |
문단(Paragraphs)
문단은 빈 줄을 이용해서 표현하면 된다.(?!) 문단의 앞에 띄어쓰기나 탭으로 공간을 띄울 수는 없다.(들여쓰기 안됨!)
| Markdown | HTML | 결과 |
|---|---|---|
| 문단1 문단2 |
<p>문단1</p> <p>문단2</p> |
<p>문단1</p><p>문단2</p> |
줄 바꿈(Line Breaks)
줄바꿈은 두 개 이상의 띄어쓰기(공백)를 문장의 끝에 해주면 된다.
| Markdown | HTML | 결과 |
|---|---|---|
| 첫 번째 줄 두 번째 줄 |
<p>첫 번째 줄<br>두 번째 줄</p> | <p>첫 번째 줄 두 번째 줄</p> |
강조(Emphasis)
글을 쓸 때 굵게 하거나 기울임으로써 강조를 줄 수 있다.
굵게(Bold)
굵게 쓰기 위해서는 *나 _를 글 양 옆으로 두 개씩 삽입하면 된다.
| Markdown | HTML | 결과 |
|---|---|---|
| 글을 **굵게** 써보자. | 글을 <strong>굵게</strong> 써보자. | 글을 굵게 써보자. |
| 글을 __굵게__ 써보자. | 글을 <strong>굵게</strong> 써보자. | 글을 굵게 써보자. |
기울임(Italic)
글을 기울이기 위해서는 *나 _를 글 양 옆으로 한 개씩 삽입하면 된다.
| Markdown | HTML | 결과 |
|---|---|---|
| 글을 *기울여* 써보자. | 글을 <em>기울여</em> 써보자. | 글을 기울여 써보자. |
| 글을 _기울여_ 써보자. | 글을 <em>기울여</em> 써보자. | 글을 기울여 써보자. |
그렇다면 굵게 기울게는 어떻게 할까? 간단하다. *나 _를 글 양 옆으로 세 개씩 삽입하면 된다.
| Markdown | HTML | 결과 |
|---|---|---|
| 글을 ***굵고 기울게*** 해보자. | 글을 <strong><em>굵고 기울게</em></strong> 해보자. | 글을 굵고 기울게</strong> 해보자. |
| 글을 ___굵고 기울게___ 해보자. | 글을 <strong><em>굵고 기울게</em></strong> 해보자. | 글을 굵고 기울게 해보자. |
| 글을 __*굵고 기울게__* 해보자. | 글을 <strong><em>굵고 기울게</em></strong> 해보자. | 글을 굵고 기울게 해보자. |
| 글을 **_굵고 기울게**_ 해보자. | 글을 <strong><em>굵고 기울게</em></strong> 해보자. | 글을 굵고 기울게 해보자. |
인용(Blockquotes)
인용문을 써보고 싶다면, > 를 문단의 앞에 위치시키면 된다.
> 마크다운 인용문 넣어보기
위의 문장은 아래와 같이 나타난다.
마크다운 인용문 넣어보기
여러 문장(또는 문단)을 한 번에 인용시킬 수도 있는데, >를 계속 붙여주면 된다.
> 마크다운 인용문 넣어보기
>
> 인용문을 계속 넣어보기
이는 아래와 같이 나타난다.
마크다운 인용문 넣어보기
인용문을 계속 넣어보기
중첩 인용문(Neste Blockquotes)를 만들수도 있는데, >의 개수를 늘리면 인용문이 중첩된다.
> 마크다운 인용문 넣어보기
>
>> 중첩 인용문도 넣어보기
이는 아래와 같이 나타난다.
마크다운 인용문 넣어보기
중첩 인용문도 넣어보기
인용문 안에는 다른 마크다운 문법에서 사용되는 것들을 사용할 수 있다.(Lists, Heading, …)
목차(Lists)
번호나 기호를 이용해서 리스트 형태로 글을 작성할 때 쓸 수 있다. 번호를 넣으면 순서가 있고, 기호를 넣으면 순서 구분이 없다.
순서있는 목차(Ordered Lists)
번호를 넣어서 리스트를 만들 수 있는데, 번호를 매기는데 숫자의 순서가 중요하지는 않다. 다만 첫 시작이 숫자여야 제대로 작성된다.
| Markdown | HTML | 결과 |
|---|---|---|
| 1. 첫 번째 2. 두 번째 3. 세 번째 |
<ol> <li>첫 번째</li> <li>두 번째</li> <li>세 번째</li> </ol> |
<ol><li>첫 번째</li><li>두 번째</li><li>세 번째</li></ol> |
| 1. 첫 번째 1. 두 번째 1. 세 번째 |
<ol> <li>첫 번째</li> <li>두 번째</li> <li>세 번째</li> </ol> |
<ol><li>첫 번째</li><li>두 번째</li><li>세 번째</li></ol> |
| 1. 첫 번째 5. 두 번째 3. 세 번째 |
<ol> <li>첫 번째</li> <li>두 번째</li> <li>세 번째</li> </ol> |
<ol><li>첫 번째</li><li>두 번째</li><li>세 번째</li></ol> |
| 1. 첫 번째 2. 두 번째 1. 새끼 번호 1 2. 새끼 번호 2 3. 세 번째 |
<ol> <li>첫 번째</li> <li>두 번째 <ol> <li>새끼 번호 1</li> <li>새끼 번호 2</li> </ol> </li> <li>세 번째</li> </ol> |
<ol><li>첫 번째</li><li>두 번째<ol><li>새끼 번호 1</li><li>새끼 번호 2</li></ol><li>세 번째</li></ol> |
순서없는 목차(Unordered Lists)
순서없이 기호로만 리스트를 만드려면 -, *, +를 사용하면 된다.
| Markdown | HTML | 결과 |
|---|---|---|
| - 첫 번째 - 두 번째 - 세 번째 |
<ul> <li>첫 번째</li> <li>두 번째</li> <li>세 번째</li> </ul> |
<ul><li>첫 번째</li><li>두 번째</li><li>세 번째</li></ul> |
| * 첫 번째 * 두 번째 * 세 번째 |
<ul> <li>첫 번째</li> <li>두 번째</li> <li>세 번째</li> </ul> |
<ul><li>첫 번째</li><li>두 번째</li><li>세 번째</li></ul> |
| + 첫 번째 * 두 번째 - 세 번째 |
<ul> <li>첫 번째</li> <li>두 번째</li> <li>세 번째</li> </ul> |
<ul><li>첫 번째</li><li>두 번째</li><li>세 번째</li></ul> |
| - 첫 번째 - 두 번째 - 새끼 번호 1 - 새끼 번호 2 - 세 번째 |
<ul> <li>첫 번째</li> <li>두 번째 <ul> <li>새끼 번호 1</li> <li>새끼 번호 2</li> </ul> </li> <li>세 번째</li> </ul> |
<ul><li>첫 번째</li><li>두 번째<ul><li>새끼 번호 1</li><li>새끼 번호 2</li></ul><li>세 번째</li></ul> |
코드(Code)
코드 블록은 매 줄마다 네 칸 이상을 띄우거나 탭 하나 이상을 두고 입력하면 된다.
<html>
<head>
</head>
</html>
이는 아래와 같이 나타난다.
<html>
<head>
</head>
</html>
또 다른 방법으로는 `(tick)을 세 개 넣는 방법이다.
```
<html>
<head>
</head>
</html>
```
이렇게 쓰면 아래와 같이 나타난다.
<html>
<head>
</head>
</html>
```<언어 타입>
으로 syntax highlight를 줄 수 있다.(플랫폼 별 상이한듯?)
```html
<html>
<head>
</head>
</html>
```
이는 아래처럼 나타난다.
<html>
<head>
</head>
</html>
와! 더 이쁘다!
평행선(Horizontal Rules)
평행선은 세 개 이상의 *, -, _ 를 연속으로 붙여쓰면 만들 수 있다.
***
---
______
아래와 같은 줄이 생기는 것을 볼 수 있다.
이미지(Images)
이미지는 아래와 같은 형식으로 넣을 수 있다.
[] 안에는 대체 문구, () 안에는 이미지 파일의 경로를 넣으면 된다.
아래 처럼 사진이 나타나게 된다.
표(Table)
간단하게 표도 작성해 볼 수 있다.
HTML 에서는 <table> 코드가 되며 header cell 과 body cell 로 나누어서 작성하게된다.
헤더 셀에서 : 를 통해 좌/우/가운데 정렬을 지정할 수 있다.
|이름|종류|요약|
|:---|:---:|:---:|
|HTML|웹 언어|웹 페이지를 만드는데 사용|
|C++|범용 언어|C언어 + 객체지향|
|Javascript|웹 언어|웹 브라우저에서 사용하는 스크립트 언어|
| 가장 좌우측에 위치한 | 기호는 생략 가능하다. |
이름|종류|요약
:---|:---:|:---:
HTML|웹 언어|웹 페이지를 만드는데 사용
C++|범용 언어|C언어 + 객체지향
Javascript|웹 언어|웹 브라우저에서 사용하는 스크립트 언어
아래와 같이 표가 만들어지게 된다.
| 이름 | 종류 | 요약 |
|---|---|---|
| HTML | 웹 언어 | 웹 페이지를 만드는데 사용 |
| C++ | 범용 언어 | C언어 + 객체지향 |
| Javascript | 웹 언어 | 웹 브라우저에서 사용하는 스크립트 언어 |
Escaping Characters
지금까지 서술했듯이 여러 기호들은 기능을 가지고 있는 경우가 있다. 따라서 충돌이 일어나지 않게 하기 위해서는 \(백슬래시)를 이용해서 안전하게 글을 작성해보자.
링크(Links)
<https://younghk.github.io>
이렇게 일반적인 링크를 달 수도 있지만, 글자나 이미지에 링크를 달 수도 있다.
[블로그](https://younghk.github.io/)
예 : 블로그
공백(Spaces)
마크다운은 기본적으로 공백을 지원하지 않지만, HTML에서는 공백을 표현하기 위한 코드가 있다. 즉, 우회적으로 마크다운에서도 공백을 표현해 볼 수 있다.
| 공백 코드 | 내용 |
|---|---|
| \ | 한칸 공백 |
| \ | 두칸 공백 |
| \ | 네칸 공백 |
이 외에도 조금 기능이 더 있는데 추후에 쓸 일이 있거나 하면 추가해봐야겠다. ^_^
참고 : https://www.markdownguide.org/basic-syntax/
Leave a comment