1
이것은 **마크다운**입니다.
2

3
<p style="color: blue;">이것은 HTML입니다.</p>
4

5
다시 마크다운으로 돌아왔습니다.

1
올바른 방법:
2

3
<div>
4
HTML 블록
5
</div>
6

7
다음 단락

1
<p>**이것은 굵게 되지 않습니다**</p>

1
이것은 <em>이탤릭</em>이고 이것은 **굵은** 텍스트입니다.

1
<img src="./image.jpg" width="300" height="200">

1
<img src="./image.jpg" width="50%">

1
<figure>
2
  <img src="./trail.jpg" alt="Albuquerque, New Mexico">
3
  <figcaption>뉴멕시코 앨버커키 외곽의 트레일</figcaption>
4
</figure>

1
![Albuquerque, New Mexico](./trail.jpg)
2
_뉴멕시코 앨버커키 외곽의 트레일_

1
<p style="text-align: center;">
2
  <img src="./image.jpg" width="300">
3
</p>

1
<img src="./image.jpg" width="300" style="float: right; margin: 10px;">

1
<p style="color: red;">빨간색 텍스트</p>
2
<p style="color: #0066cc;">파란색 텍스트 (16진수)</p>

1
<ins>밑줄 텍스트</ins>

1
<p style="text-align: center;">중앙 정렬된 텍스트</p>

1
    들여쓰기된 단락입니다.

1
여기는 보이는 단락입니다.
2

3
[이것은 주석입니다. 렌더링 결과에 나타나지 않습니다.]: #
4

5
다시 보이는 단락입니다.

1
> ⚠️ **Warning:** 빨간 버튼을 누르지 마세요.
2

3
> 📝 **Note:** 일출은 아름답습니다.
4

5
> 💡 **Tip:** 작은 것에 감사하세요.

1
> 💡 **Tip: 마크다운 학습법**
2
>
3
> 1. 기본 문법부터 시작
4
> 2. 실제로 써보면서 익히기
5
> 3. 확장 문법 학습
6
>
7
> 매일 조금씩 연습하면 금방 익숙해집니다!

1
© ® ™ € ← ↑ → ↓ ° π

1
© (저작권)
2
® (등록 상표)
3
™ (상표)
4
€ (유로)
5
← (왼쪽 화살표)
6
→ (오른쪽 화살표)
7
° (도)
8
π (파이)

1
<iframe width="560" height="315"
2
  src="https://www.youtube.com/embed/VIDEO-ID"
3
  frameborder="0"
4
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
5
  allowfullscreen>
6
</iframe>

1
[![비디오 제목](https://img.youtube.com/vi/VIDEO-ID/0.jpg)](https://www.youtube.com/watch?v=VIDEO-ID)

1
| 항목     | 설명                               |
2
| -------- | ---------------------------------- |
3
| 마크다운 | 첫 번째 단락.<br><br>두 번째 단락. |

1
| 기능      | 목록                                                    |
2
| --------- | ------------------------------------------------------- |
3
| 확장 문법 | <ul><li>테이블</li><li>코드 블록</li><li>각주</li></ul> |

1
[[TOC]]

1
[TOC]

1
## 목차
2

3
- [기본 문법](#기본-문법)
4
- [확장 문법](#확장-문법)
5
- [고급 활용](#고급-활용)
6

7
---
8

9
## 기본 문법
10

11
내용...
12

13
## 확장 문법
14

15
내용...
16

17
## 고급 활용
18

19
내용...

1
<p align="center">
2
  <img src="./logo.png" width="200">
3
</p>
4

5
<h1 align="center">프로젝트 이름</h1>
6

7
<p align="center">
8
  <img src="https://img.shields.io/badge/version-1.0.0-blue">
9
  <img src="https://img.shields.io/badge/license-MIT-green">
10
</p>
11

12
---
13

14
## 📋 목차
15

16
- [소개](#소개)
17
- [설치](#설치)
18
- [사용법](#사용법)
19

20
---
21

22
## 소개
23

24
> 💡 **Tip:** 이 프로젝트는 초보자에게 적합합니다.
25

26
프로젝트 설명...
27

28
---
29

30
## 설치
31

32
\`\`\`bash
33
npm install project-name
34
\`\`\`
35

36
> ⚠️ **Warning:** Node.js 18 이상이 필요합니다.
37

38
---
39

40
## 라이선스
41

42
<p style="color: #666;">
43
  © 2026 Project Name. All rights reserved.
44
</p>

1
---
2
title: "고급 마크다운 활용법"
3
published: 2025-12-31
4
---
5

6
<p style="text-align: center; color: #666; font-size: 0.9em;">
7
  마지막 업데이트: 2025년 12월 31일
8
</p>
9

10
---
11

12
## 주요 내용
13

14
<div style="background: #f5f5f5; padding: 20px; border-left: 4px solid #0066cc;">
15

16
**이 글에서 배울 내용:**
17

18
- HTML과 마크다운 혼합
19
- 이미지 고급 활용
20
- Admonitions 만들기
21

22
</div>
23

24
---
25

26
## 예제 코드
27

28
\`\`\`typescript
29
// 타입스크립트 예제
30
interface Config {
31
theme: 'light' | 'dark';
32
lang: string;
33
}
34
\`\`\`
35

36
[주석: 이 코드는 나중에 업데이트 예정]: #
37

38
---
39

40
## 참고
41

42
> 📝 **Note:** 자세한 내용은 [공식 문서](#)를 참고하세요.
43

44
<p style="text-align: center; margin-top: 40px;">
45
  ⬆️ <a href="#top">맨 위로 돌아가기</a>
46
</p>

1
# 마크다운 마스터 노트
2

3
<div style="background: #ffe6e6; padding: 15px; border-radius: 5px;">
4

5
⚠️ **중요 알림**
6

7
이 노트는 마크다운 고급 활용법을 정리한 문서입니다.
8

9
</div>
10

11
---
12

13
## 학습 체크리스트
14

15
- [x] 기본 문법 마스터
16
- [x] 확장 문법 익히기
17
- [x] HTML 혼합 사용
18
- [ ] 실전 프로젝트 적용
19

20
---
21

22
## 핵심 개념
23

24
마크다운 고급 활용
25
: HTML과 CSS를 결합하여 마크다운의 한계를 극복하는 기법
26

27
---
28

29
## 유용한 기호
30

31
자주 쓰는 기호: © ® ™ → ✓ ✗
32

33
수식: E = mc<sup>2</sup>, H<sub>2</sub>O
34

35
---
36

37
## 관련 노트
38

39
- [[마크다운 기본 문법]]
40
- [[Astro 블로그 설정]]
41
- [[옵시디언 플러그인]]
42

43
#마크다운 #고급활용 #실전