Web Maker

마크다운(Makrdown)표기법 총정리

인터넷의 웹문서 또는 블로그 등에서 효율적으로 문서를 기록하기 위한 Markdown 문법의 치트 시트를 소개해 보고자 한다.

여기에서 소개하는 문법은 GitHub Flavored Markdown을 기준으로 하며, 일부 확장된 기능도 포함하고 있다. 기본적으로 마크다운표기는 에디터에 따라 제공되는 그 기능이 차이가 있을 수 있으니 해당 에디터에서 지원하는지 확인이 필요하다.

마크다운 표기법

목차

  • 마크다운(Makrdown)표기법 총정리
  • Text Format
    • Header (헤더/제목)
    • Emphasis / Strong (강조)
  • List
    • List

텍스트 서식 - Text Format

Header(헤더/제목)

markdown
# H1제목## H2제목### H3제목#### H4제목
표시결과

H1제목

H2제목

H3제목

H4제목

Emphasis / Strong (강조)

markdown
오늘은 *일요일* 입니다.오늘은 **불금** 입니다
표시결과

오늘은 일요일 입니다.

오늘은 불금 입니다

Strikethrough (취소선)

markdown
이번주 ~~수요일~~ 목요일에 만나요.
표시결과

이번주 수요일 목요일에 만나요.

Blockquotes (인용)

markdown
> 지난주 부탁했던 내용에 관해서 > 이번주까지 부탁드립니다.
표시결과

지난주 부탁했던 내용에 관해서

이번주까지 부탁드립니다.

리스트 서식 - List Format

Bullet List (순서 없는 리스트)

문장 서두에 * + - 중 하나를 선택해서 작성하면 순서가 없는 리스트가 된다.

markdown
- 사과 2개- 콜라 1병- 의자 2개
표시결과
  • 사과 2개
  • 콜라 1병
  • 의자 2개

Ordered List (순서 리스트)

문장 서두에 1. 2. 등 숫자와 . 을 넣으면 순서 리스트가 된다.

markdown
1. 사과 2개 2. 콜라 1병 3. 의자 2개
표시결과
  1. 사과 2개
  1. 콜라 1병
  1. 의자 2개

Check List (채크 리스트)

Html의 Input type Checkbox 와 같은 역활을 한다

markdown
- [x] 사과 2개 - [x] 콜라 1병 - [ ] 의자 2개
표시결과
  • 사과 2개
  • 콜라 1병
  • 의자 2개

Memo 메모

markdown
:::note info 인포 info는 생략가능합니다 :::
표시결과

:::note info 인포 info는 생략가능합니다 :::

Link (링크)

a 테그에 해당하는 링크

markdown
[링크에 표시할문자](https://web-maker.net/)
표시결과 
링크에 표시할문자

Horizontal rules (수평선)

hr 테그 역활인 수평선에 해당한다.

markdown
---
표시결과

Images (이미지)

img 테그 와 같이 이미지와 그 대체 텍스트를 표시 가능하다.

markdown
![마크다운 이미지](https://fitsys2.blob.core.windows.net/web-maker/web-maker.webp "마크다운에 관해서")![마크다운 이미지 대체 텍스트](https://fitsys2.blob.core.windows.net/web-maker/web-maker2.webp "마크다운에 관해서")
표시결과

마크다운 이미지

마크다운 이미지 대체 텍스트

Table (테이블)

img 테그 와 같이 이미지와 그 대체 텍스트를 표시 가능하다.

markdown
  | Left align | Right align | Center align |
  |:-----------|------------:|:------------:|
  | This       | This        | This         |
표시결과
Left align Right align Center align
This This This