Markdown 문법 사용법

Updated:

🔎 Markdown 총정리

Markdown 을 공부하면서 문법 및 사용법을 정리해 보았습니다.

✔️ 1. 특징

  1. 장점

    • 문법이 간결하다!
    • 관리가 쉽다!
    • 지원 가능한 플랫폼과 프로그램이 다양하다!
  2. 단점

    • 표준이 없다!
    • 모든 HTML 마크업을 대신하지 못한다!

✔️ 2. 제목, 문장, 줄바꿈

# 제목(Header)

<!-- # 뒤어 띄어 쓰기를 넣어야됨 -->

# 제목 1

## 제목 2

### 제목 3

#### 제목 4

<!-- 문장에 그냥 이어져서 나옴 -->

# 문장 (Paragraph)

동해물과 백두산이 마르고 닳고록
하나님이 보우하사 우리나라 만세

<!--  줄바꿈은 함 2번 함 or Enter 두번 -->
<!-- 혹시 안될 경우에는 html <br/> 사용함 -->

# 줄바꿈 (Line Breaks)

동해물과 백두산이 마르고 닳고록  
하나님이 보우하사 우리나라 만세<br/>
무궁화 삼처리 화려강산

  • 실행 결과

제목(Header)

제목 1

제목 2

제목 3

제목 4

문장 (Paragraph)

동해물과 백두산이 마르고 닳고록 하나님이 보우하사 우리나라 만세

줄바꿈 (Line Breaks)

동해물과 백두산이 마르고 닳고록
하나님이 보우하사 우리나라 만세
무궁화 삼처리 화려강산

✔️ 3. 강조, 목록

# 강조 (Emphasis)

_italic_  
**strong**  
**_italic + string_**  
~~취소선~~  
<u>underline</u>

# 목록(List)

<!-- 순서대로 자동으로 계산 해줌 -->
<!-- <ol></ol> 와 같은거 -->
<!-- sub list는 tap 2번 space 기준 4번 해줘야함 -->

1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
   1. 순서가 필요한 목록
   1. 순서가 필요한 목록
   1. 순서가 필요한 목록
1. 순서가 필요한 목록

- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
  - 순서가 필요하지 않은 목록
  - 순서가 필요하지 않은 목록
  - 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록

  • 실행 결과

강조 (Emphasis)

italic
strong
italic + string
취소선
underline

목록(List)

  1. 순서가 필요한 목록
  2. 순서가 필요한 목록
  3. 순서가 필요한 목록
    1. 순서가 필요한 목록
    2. 순서가 필요한 목록
    3. 순서가 필요한 목록
  4. 순서가 필요한 목록
  • 순서가 필요하지 않은 목록
  • 순서가 필요하지 않은 목록
    • 순서가 필요하지 않은 목록
    • 순서가 필요하지 않은 목록
    • 순서가 필요하지 않은 목록
  • 순서가 필요하지 않은 목록
  • 순서가 필요하지 않은 목록

✔️ 4. 링크, 이미지

# 링크(Link)

[GOOGLE](https://google.com){:target="\_blank"}

[GOGGLE](https://google.com "Go to Google"){:target="\_blank"}

# 이미지(Inage)

![](https://cdn.pixabay.com/photo/2021/01/21/17/58/herbstastern-5938056_960_720.jpg)

[![Pixabay](https://cdn.pixabay.com/photo/2021/01/21/17/58/herbstastern-5938056_960_720.jpg)](htttp://pixabay.com)

  • 실행 결과

링크(Link)

GOOGLE

GOGGLE 로 이동

이미지(Inage)

Pixabay

✔️ 5. 인용문, 코드 강조

# 인라인(inline) 코드 강조

<!-- ` ` backtic key 사용 -->
<!-- 많이 사용됨!! -->

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

# 블록(block 코드 강조)

image


  • 실행 결과

인라인(inline) 코드 강조

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

블록(block 코드 강조)

<a href="http://www.google.com" target="_blank">Google</a>
.list > li {
  position: absolute;
  top: 40px;
}
function func() {
  let a = "AAA";
  return a;
}
$ git commit - m 'strudy markdown'
동해물과 백두산이 마르고 닳고록
하나님이 보우하사 우리나라 만세

✔️ 6. 표

# 표(Table)

<!-- 기본은 왼쪽 정렬 -->
<!-- :--: 가운데 정렬 -->
<!-- --: 오른쪽 정렬 -->

| 값       |       의미        | 기본값 |
| -------- | :---------------: | -----: |
| static   |     기준없음      |      0 |
| relative |   요소 자기자신   |      X |
| absolute | 위치 상 부모 요소 |      X |
| fixed    |      뷰포트       |      X |
의미 기본값
static 기준없음 0
relative 요소 자기자신 X
absolute 위치 상 부모 요소 X
fixed 뷰포트 X

✔️ 7. 원시 HTML, 수평선

  • Markdown으로 한계가 있는 기능은 HTML 속성을 어느정도 사용하여 Markdown에 적용하여 사용할 수 있습니다. (줄바꿈, 이미지 크기 조절 등..)
# 원시 HTML (Raw HTML)

동해물과 <u>백두산</u>이 마르고 닳고록 <br/>
하나님이 보우하사 우리나라 만세

---

<!-- 이미지의 크기를 조절해서 올릴수 있음. -->
<img width="70" src="https://cdn.pixabay.com/photo/2021/01/21/17/58/herbstastern-5938056_960_720.jpg" alt="pixabay">

<!-- 수평선(Horizontal Rule) -->

---

---

---

원시 HTML (Raw HTML)

동해물과 백두산이 마르고 닳고록
하나님이 보우하사 우리나라 만세


pixabay




Leave a comment