Markdown 문법 사용법
Updated:
🔎 Markdown 총정리
Markdown 을 공부하면서 문법 및 사용법을 정리해 보았습니다.
✔️ 1. 특징
-
장점
- 문법이 간결하다!
- 관리가 쉽다!
- 지원 가능한 플랫폼과 프로그램이 다양하다!
-
단점
- 표준이 없다!
- 모든 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)
- 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
✔️ 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)
이미지(Inage)
✔️ 5. 인용문, 코드 강조
# 인라인(inline) 코드 강조
<!-- ` ` backtic key 사용 -->
<!-- 많이 사용됨!! -->
CSS에서 `Backgroud` 혹은 `background-image` 속성으로 요소에 배경 이미지를 삽입할 수 있습니다.
# 블록(block 코드 강조)
- 실행 결과
인라인(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)
동해물과 백두산이 마르고 닳고록
하나님이 보우하사 우리나라 만세
Leave a comment