마크다운 완벽가이드 3편 - 고급 활용

요약#

이 글의 핵심 3가지

HTML 활용: 마크다운 한계를 HTML로 극복하는 방법

실전 테크닉: 이미지 크기 조정, 색상, 주석, Admonitions 등 고급 기능

고급 예제: GitHub README, Astro 블로그, 옵시디언 노트 실전 활용법

읽는 시간: 20분 | 난이도: 중급

출처#

이 글은 다음 자료를 바탕으로 작성되었습니다.

Markdown Guide - Hacks - 마크다운 활용 팁과 트릭
Markdown Guide - Cheat Sheet - 전체 문법 Cheatsheet

대상 독자: 기본/확장 문법을 익히고 마크다운을 더 자유롭게 활용하고 싶은 분

선수 학습:

마크다운 완벽가이드 1편 - 기초

마크다운 완벽가이드 2편 - 확장 문법

마크다운 고급 활용이란?#

기본 문법과 확장 문법만으로도 대부분의 작업은 가능합니다.

하지만 때로는 마크다운만으로는 부족한 순간이 있습니다.

이미지 크기를 조절하고 싶을 때
텍스트 색상을 바꾸고 싶을 때
중앙 정렬을 하고 싶을 때
주석을 추가하고 싶을 때
경고 박스를 만들고 싶을 때

이런 상황에서 HTML과 CSS를 활용하면 마크다운의 한계를 극복할 수 있습니다.

주의: 이 글의 테크닉들은 모든 마크다운 에디터에서 작동하지 않습니다.
Astro, 옵시디언, GitHub 등에서 먼저 테스트하세요.

HTML과 마크다운 혼합#

대부분의 마크다운 프로세서는 마크다운 안에 HTML을 섞어 쓸 수 있습니다.

기본 규칙#

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

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

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

결과:

이것은 마크다운입니다.

이것은 HTML입니다.

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

주의사항#

블록 레벨 요소 앞뒤로 빈 줄 추가

1
올바른 방법:
2

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

7
다음 단락

HTML 태그 안에서 마크다운 사용 불가

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

인라인 요소는 마크다운과 섞어 쓸 수 있음

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

이미지 고급 활용#

마크다운 기본 이미지 문법(![](...))은 크기 조절이 안 됩니다.

이미지 크기 조정#

HTML <img> 태그를 사용합니다.

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

속성:

속성	설명	예시
`width`	가로 크기 (픽셀)	`width="300"`
`height`	세로 크기 (픽셀)	`height="200"`
`alt`	대체 텍스트	`alt="이미지 설명"`

비율 유지:

가로만 지정하면 비율이 자동으로 유지됩니다.

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

이미지 캡션#

방법 1: HTML <figure> (권장)

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

방법 2: 마크다운 + 이탤릭

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

이미지 정렬#

CSS를 사용합니다.

중앙 정렬:

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;">

텍스트 스타일링#

텍스트 색상#

CSS style 속성을 사용합니다.

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

결과:

빨간색 텍스트

파란색 텍스트 (16진수)

색상 표현 방법:

방법	예시
색상명	`red`, `blue`, `green`
16진수	`#FF0000`, `#0066CC`
RGB	`rgb(255, 0, 0)`

밑줄#

<ins> 또는 <u> 태그를 사용합니다.

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

결과: 밑줄 텍스트

중앙 정렬#

CSS text-align 속성을 사용합니다.

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

결과:

중앙 정렬된 텍스트

주의: <center> 태그는 deprecated되었습니다. CSS를 사용하세요.

들여쓰기#

HTML 비중단 공백( )을 사용합니다.

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

결과:

들여쓰기된 단락입니다.

팁:   4개 = 약 4칸 들여쓰기

주석과 숨김 텍스트#

주석 추가#

렌더링 결과에 나타나지 않는 숨겨진 텍스트입니다.

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

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

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

규칙:

주석 전후로 빈 줄 필요
[주석 내용]: # 형식

용도:

메모 작성
임시 비활성화
협업 시 노트

Admonitions (주의사항 박스)#

경고, 노트, 팁 등을 강조하기 위한 박스입니다.

기본 문법#

인용구 + 이모지 + 굵은 제목을 조합합니다.

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

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

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

결과:

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

📝 Note: 일출은 아름답습니다.

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

주요 유형#

유형	이모지	용도
Warning	⚠️	위험 경고
Caution	🚨	주의사항
Note	📝	정보성 노트
Tip	💡	유용한 팁
Info	ℹ️	일반 정보
Success	✅	성공 메시지
Error	❌	에러 메시지

여러 줄 Admonition#

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

결과:

💡 Tip: 마크다운 학습법

기본 문법부터 시작

실제로 써보면서 익히기

확장 문법 학습

매일 조금씩 연습하면 금방 익숙해집니다!

기호와 특수문자#

방법 1: 직접 복사-붙여넣기#

1
© ® ™ € ← ↑ → ↓ ° π

결과: © ® ™ € ← ↑ → ↓ ° π

방법 2: HTML 엔티티#

1
&copy; (저작권)
2
&reg; (등록 상표)
3
&trade; (상표)
4
&euro; (유로)
5
&larr; (왼쪽 화살표)
6
&rarr; (오른쪽 화살표)
7
&#176; (도)
8
&#960; (파이)

결과:

자주 쓰는 HTML 엔티티:

기호	엔티티	설명
©	`©`	저작권
®	`®`	등록 상표
™	`™`	상표
€	`€`	유로
°	`°`	도 (각도/온도)
π	`π`	파이
✓	`✓`	체크
✗	`✗`	X

비디오 임베딩#

방법 1: HTML 임베드 (권장)#

유튜브, 비메오 등에서 제공하는 임베드 코드를 사용합니다.

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>

방법 2: 이미지 + 링크#

HTML을 지원하지 않는 경우 사용합니다.

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

작동 방식:

유튜브 썸네일 이미지를 표시
클릭하면 유튜브 영상으로 이동

테이블 고급 활용#

셀 내 개행#

<br> 태그를 사용합니다.

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

결과:

항목	설명
마크다운	첫 번째 단락. 두 번째 단락.

셀 내 목록#

HTML 목록 태그를 사용합니다.

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

결과:

기능	목록
확장 문법	테이블 코드 블록 각주

목차 만들기#

자동 목차 (일부 에디터)#

옵시디언, MkDocs 등은 자동 목차를 지원합니다.

1
[[TOC]]

또는

1
[TOC]

수동 목차#

제목 ID를 활용해 링크를 만듭니다.

1
## 목차
2

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

7
---
8

9
## 기본 문법
10

11
내용...
12

13
## 확장 문법
14

15
내용...
16

17
## 고급 활용
18

19
내용...

제목 ID 규칙:

영문은 소문자로 변환
공백은 하이픈(-)으로 변환
특수문자는 제거

예: ## 마크다운 기본 문법 → #마크다운-기본-문법

빠른 참고 자료#

마크다운 문법을 빠르게 찾아보려면 별도로 준비한 CheatSheet를 확인하세요:

📋 마크다운 CheatSheet - 전체 문법을 한눈에 볼 수 있는 빠른 참고 자료

기본 문법, 확장 문법, HTML 활용까지 테이블로 정리되어 있어 작업 중 빠르게 찾아볼 수 있습니다.

호환성 주의사항#

다음 기능은 에디터에 따라 지원 여부가 다릅니다.

기능	Astro	GitHub	옵시디언
HTML 태그	✅	✅	✅
CSS 스타일	✅	❌	✅
`<iframe>`	✅	❌	⚠️
주석 `[]: #`	✅	✅	✅
Admonitions	⚠️	⚠️	✅
자동 목차	⚠️	❌	✅

✅ 완전 지원 | ⚠️ 부분 지원 | ❌ 미지원

권장사항:

사용 전 에디터에서 테스트
중요한 콘텐츠는 순수 마크다운 사용
HTML은 꼭 필요할 때만 사용
CSS는 인라인 스타일만 사용

참고 자료#

공식 문서#

Markdown Guide - Hacks - 마크다운 활용 팁
Markdown Guide - Cheat Sheet - 완전 Cheatsheet
MDN - HTML 태그 레퍼런스 - HTML 태그 문서

도구#

Markdown Tables Generator - 테이블 생성 도구
HTML Color Codes - 색상 코드 선택기
HTML Entity Reference - HTML 엔티티 목록

마치며#

마크다운 완벽가이드 시리즈를 모두 마쳤습니다!
이정도만 알아도 이제 마크다운을 원할하게 다룰 수 있게 되었습니다.

Astro 블로그: 포스팅 시작하기
옵시디언: 나만의 지식 노트 작성
GitHub: README와 문서 작성

💡 Tip: 마크다운은 매일 조금씩 써보는 것이 가장 빠른 학습법입니다.

마크다운 완벽가이드 3편 - 고급 활용

요약#

출처#

마크다운 고급 활용이란?#

HTML과 마크다운 혼합#

기본 규칙#

주의사항#

이미지 고급 활용#

이미지 크기 조정#

이미지 캡션#

이미지 정렬#

텍스트 스타일링#

텍스트 색상#

밑줄#

중앙 정렬#

들여쓰기#

주석과 숨김 텍스트#

주석 추가#

Admonitions (주의사항 박스)#

기본 문법#

주요 유형#

여러 줄 Admonition#

기호와 특수문자#

방법 1: 직접 복사-붙여넣기#

방법 2: HTML 엔티티#

비디오 임베딩#

방법 1: HTML 임베드 (권장)#

방법 2: 이미지 + 링크#

테이블 고급 활용#

셀 내 개행#

셀 내 목록#

목차 만들기#

자동 목차 (일부 에디터)#

수동 목차#

빠른 참고 자료#

호환성 주의사항#

참고 자료#

공식 문서#

도구#

마치며#

공유

목차