본문 바로가기
Dev.FrontEnd/ETC

[마크다운] Markdown 문법 기본 및 확장, Quick Reference

by breezyday 2023. 11. 7.

1. Markdown 이란?

마크다운(Markdown)마크업 언어의 일종으로 파일의 확장자는. md,. markdown을 사용한다.

 

2004년 존그루버에 의해 만들어졌으며 쉽게 쓰고 읽을 수 있고 HTML로 변환이 가능하다.

 

특수기호문자를 이용매우 간단한 구조의 문법을 사용하여 웹에서도 보다 빠르게 콘텐츠를 작성하고 보다 직관적으로 인식할 수 있다.

 

https://www.markdownguide.org/

2. Markdown 문법 : 기본

요소 (Element) Markdown 문법
제목 Heading

# H1
## H2
### H3
#### H4
##### H5
###### H6
This line is H1
======

This line is H2
------
문단 줄바꿈 2 번


들여쓰기 한줄씩 띄어 써야 한다.

This line is normal block

    This line is indent block

This line is normal block
강제 개행 [줄끝에 공백 2 칸 이상   ]

역슬래시`\` : 모든 앱에서 지원하지 않을 수 있음
진하게 Bold **bold text**
__bold text__
이탤릭 Italic *italicized text*
_italicized text_
Bold & Italic ***bold & Italic text***
**_bold & Italic text_**
__*bold & Italic text*__

___bold & Italic text___
인용 Blockquote


인용 구문 앞뒤로 빈줄 삽입.

> blockquote
> next line
>
> next block

중첩

> blockquote
>> nested blockquote
다른 마크 다운과 혼용 가능

> ### H3 line
>  
> - first Item
> - second Item
>
> *Everything* is going according to **plan**.
번호목록 Ordered List 1. first item 
2. second item
3. third item
글머리목록 Unordered List `*`, `+`, `-` 사용 가능

- first item
- second item
- third item
List 들여쓰기 기호는 섞어서 사용할 수 있다.


* first item
    - second item
        + third item
코드 Code `code`
가로줄 Horizontal Rule ---
- - -
***
* * *
링크 Link [title](https://www.example.com)
이미지 Image ![alt text](image.jpg) 

크기 조절
<img src="/myimage.jpg"
          width="200px" height="150px"
          title="제목 설정" alt="alt 설정 />

 

3. Markdown 문법 : 확장

요소 (Element) Markdown 문법
Table | Syntax | Description |
| --------- | ---------- |
| Header | Title |
| Paragraph | Text |

Fenced Code Block ```
{
    "name" : "John Smith",
    "age" : 25
}
```
Footnote Here's a sentence with a footnote. [^1]

[^1]: This is the footnote.
Heading ID ### My Great Heading {#custom-id}
Definition List term
: definition
Striketherough ~~The world is flat.~~
Task List - [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
Emoji That is so funny! :joy:
Highlight I need to highlight these ==very important words==.
Subscript H~2~O
Superscript X^2^

 

4. Escaping Characters

특수 문자`\`백슬래시를 사용하여 표현할 수 있습니다.

Character Name
\ backslash
` backtick
* asterisk
_ underscore
{ } curly braces
[ ] brackets
< > angle brackets
( ) parentheses
# pund sign
+ plus sign
- minus sign (hyphen)
. dot
! exclamation mark
| pipe

 

 

 

 

 

참고사항

https://www.markdownguide.org/cheat-sheet/

https://www.markdownguide.org/basic-syntax/

https://namu.wiki/w/%EB% A7%88% ED%81% AC% EB% 8B% A4% EC% 9A% B4

 

댓글