Markdown 문법

Posted Nov 23, 2023

By gyeong3un2 12 min read

MarkDown 정리

마크다운의 장점

문법이 쉽다.
관리가 쉽다.
지원 가능한 플랫폼과 프로그램이 다양하다.

마크다운의 단점

표준이 없어 사용자마다 문법이 상이할 수 있다.
모든 HTML 마크업을 대신하지 못한다.

마크다운 문법(syntax)

<h1>부터 <h6>까지 제목을 표현할 수 있다.

# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6

h1(제목 1)과 h2(제목 2)는 다음과 같이 표현할 수 있다.

제목 1
=====

제목 2
-----

강조(Emphasis)

각각 <em>, <strong>, <del> 태그로 변환된다.

기울게는 *강조할 내용* 혹은 _강조할 내용_을 사용한다.
두껍게는 **강조할 내용** 혹은 __강조할 내용__을 사용한다.
**_강조할 내용_**처럼 기울게와 두껍게를 같이 사용할 수 있다.

취소선은 ~~강조할 내용~~를 사용한다.
밑줄은 <u>강조할 내용</u>를 사용한다.

이 결과는 다음과 같다.
기울게는 강조할 내용 이렇게 결과가 나온다.
두껍게는 강조할 내용 이렇게 결과가 나온다.
기울게와 두껍게는 강조할 내용 이렇게 같이 사용 가능하다.
취소선은 ~~강조할 내용~~ 이렇게 결과가 나온다.
밑줄은 강조할 내용 이렇게 결과가 나온다.

글자 색상

<span style="color: red">red</span>
<span style="color: #0000FF">파랑</span>
<span style="color: #008000">초록</span>
<span style="color: #2D3748; background-color: #fff5b1;">Strong</span>
<span style="color: #808080">그레이</span>
<span style="color: #ffd33d">노랑</span>

이 결과는 다음과 같다.
red
파랑
초록
Strong
그레이
노랑

형광펜

<span style="background-color: #fff5b1;">노란 형광펜</span>  
<span style="background-color: #f6f8fa;">회색 형광펜</span>  
<span style="background-color: #f1f8ff;">파랑 형광펜</span>  
<span style="background-color: #ffdce0;">빨강 형광펜</span>  
<span style="background-color: #dcffe4;">초록 형광펜</span>  
<span style="background-color: #f5f0ff;">보라 형광펜</span>  
<span style="background-color: #f7ddbe;">주황 형광펜</span>  

이 결과는 다음과 같습니다.

노란 형광펜
회색 형광펜
파랑 형광펜
빨강 형광펜
초록 형광펜
보라 형광펜
주황 형광펜

목록(List)

각각 <ol>, <ul> 목록 태그로 변환된다.

1. 순서가 필요한 목록
1. 순서가 필요한 목록
  - 순서가 필요하지 않은 목록(서브) 
  - 순서가 필요하지 않은 목록(서브) 
1. 순서가 필요한 목록
  1. 순서가 필요한 목록(서브)
  1. 순서가 필요한 목록(서브)
1. 순서가 필요한 목록

- 순서가 필요하지 않은 목록에 사용 가능한 기호
  - 내용 1
  * 내용 2
  + 내용 3

이 결과는 다음과 같다.

순서가 필요한 목록
순서가 필요한 목록
- 순서가 필요하지 않은 목록(서브)
- 순서가 필요하지 않은 목록(서브)
순서가 필요한 목록
순서가 필요한 목록(서브)
순서가 필요한 목록(서브)
순서가 필요한 목록

순서가 필요하지 않은 목록에 사용 가능한 기호
- 내용 1
- 내용 2
- 내용 3

링크(Links)

<a>로 변환된다.

[GOOGLE](https://google.com)

[NAVER](https://naver.com "링크 설명(title)을 작성하세요.")

[상대적 참조](../users/login)

[Dribbble][Dribbble link]

[GitHub][1]

문서 안에서 [참조 링크]를 그대로 사용할 수도 있습니다.

다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(`< >`, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.
구글 홈페이지: https://google.com
네이버 홈페이지: <https://naver.com>

[Dribbble link]: https://dribbble.com
[1]: https://github.com
[참조 링크]: https://naver.com "네이버로 이동합니다!"

이 결과는 다음과 같다.

문서 안에서 참조 링크를 그대로 사용할 수도 있다.

다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(< >, Angle Brackets)안의 URL은 자동으로 링크를 사용한다.
구글 홈페이지: https://google.com
네이버 홈페이지: https://naver.com

이미지(Images)

이미지에 링크

마크다운 이미지 코드를 링크 코드로 묶어준다.

[![Vue](/images/vue.png)](https://kr.vuejs.org/)

이 결과는 다음과 같다.

코드(Code) 강조

<pre>, <code>로 변환된다. 숫자 1번 키 왼쪽에 있는 `를 입력한다.

인라인(inline) 코드 강조

`background`혹은 `background-image` 속성으로 요소에 배경 이미지를 삽입할 수 있다.

블록(block) 코드 강조

`를 3번 이상 입력하고 코드 종류도 적다.

```html
GOOGLE
```

```css
.list > li {
  position: absolute;
  top: 40px;
}
```

```javascript
function func() {
  var a = 'AAA';
  return a;
}
```

```bash
$ vim ./~zshrc
```

```python
s = "Python syntax highlighting"
print s
```

```
No language indicated, so no syntax highlighting. 
But let's throw in a tag.
```

표(Table)

<table> 태그로 변환됩니다.
헤더 셀을 구분할 때 3개 이상의 - 기호가 필요하다
헤더 셀을 구분하면서 : 기호로 셀(열/칸) 안에 내용을 정렬할 수 있다.
가장 좌측과 가장 우측에 있는 | 기호는 생략 가능하다.

값 | 의미 | 기본값
---|:---:|---:
`static` | 유형(기준) 없음 / 배치 불가능 | `static`
`relative` | 요소 **자신**을 기준으로 배치 |
`absolute` | 위치 상 **_부모_(조상)요소**를 기준으로 배치 |
`fixed` | **브라우저 창**을 기준으로 배치 |

이 결과는 다음과 같다.

값	의미	기본값
`static`	유형(기준) 없음 / 배치 불가능	`static`
`relative`	요소 자신을 기준으로 배치
`absolute`	위치 상 부모(조상)요소를 기준으로 배치
`fixed`	브라우저 창을 기준으로 배치

인용문(BlockQuote)

<blockquote> 태그로 변환된다.

인용문(blockQuote)

> 남의 말이나 글에서 직접 또는 간접으로 따온 문장.
> _(네이버 국어 사전)_

BREAK!

> 인용문을 작성하세요!
>> 중첩된 인용문(nested blockquote)을 만들 수 있습니다.
>>> 중중첩된 인용문 1
>>> 중중첩된 인용문 2
>>> 중중첩된 인용문 3

이 결과는 다음과 같다.

인용문(blockQuote)

남의 말이나 글에서 직접 또는 간접으로 따온 문장. (네이버 국어 사전)

BREAK!

인용문을 작성하세요!
중첩된 인용문(nested blockquote)을 만들 수 있습니다.
중중첩된 인용문 1 중중첩된 인용문 2 중중첩된 인용문 3

원시 HTML(Raw HTML)

마크다운 문법이 아닌 원시 HTML 문법을 사용할 수 있다.

<u>마크다운에서 지원하지 않는 기능</u>을 사용할 때 유용하며 대부분 잘 동작합니다.

<img width="150" src="http://www.gstatic.com/webp/gallery/4.jpg" alt="Prunus" title="A Wild Cherry (Prunus avium) in flower">

![Prunus](http://www.gstatic.com/webp/gallery/4.jpg)

이 결과는 다음과 같다.

마크다운에서 지원하지 않는 기능을 사용할 때 유용하며 대부분 잘 동작합니다.

Prompts

> An example showing the `tip` type prompt.
{: .prompt-tip }

> An example showing the `info` type prompt.
{: .prompt-info }

> An example showing the `warning` type prompt.
{: .prompt-warning }

> An example showing the `danger` type prompt.
{: .prompt-danger }

이 결과는 다음과 같다.

An example showing the tip type prompt.

An example showing the info type prompt.

An example showing the warning type prompt.

An example showing the danger type prompt.

수평선(Horizontal Rule)

각 기호를 3개 이상 입력하세요.

---
(Hyphens)

***
(Asterisks)

___
(Underscores)

(Hyphens)

(Asterisks)

(Underscores)

줄바꿈(Line Breaks)

동해물과 백두산이 마르고 닳도록 
하느님이 보우하사 우리나라 만세   <!--띄어쓰기 2번-->
무궁화 삼천리 화려 강산<br>
대한 사람 대한으로 길이 보전하세

이 결과는 다음과 같다.

동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세

참고자료

마크다운 참고:
https://heropy.blog/2017/09/30/markdown/
마크다운 글자 색상 참고:
https://geniewishescometrue.tistory.com/entry/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4-%EA%B4%80%EB%A0%A8-%ED%8C%81-%EA%B8%80-%EC%83%89%EC%83%81-%ED%98%95%EA%B4%91%ED%8E%9C

Blog

Markdown 문법

MarkDown 정리

마크다운의 장점

마크다운의 단점

마크다운 문법(syntax)

제목(Header)

강조(Emphasis)

글자 색상

형광펜

목록(List)

링크(Links)

이미지(Images)

이미지에 링크

코드(Code) 강조

인라인(inline) 코드 강조

블록(block) 코드 강조

표(Table)

인용문(BlockQuote)

원시 HTML(Raw HTML)

Prompts

수평선(Horizontal Rule)

줄바꿈(Line Breaks)

참고자료

Trending Tags