Taeyoung Kim
English

Engineering

마크다운(Markdown) 사용법 정리

마크다운(Markdown) 사용법 정리 학습 내용을 정리한 백필 노트입니다.

이 글은 2025년 학습 기록을 블로그 형식으로 정리한 백필 노트입니다.

1. 개요

  • 파일 확장자: .md (대표적으로 README.md)
  • 경량 마크업 언어: 존 그루버(John Gruber, 2004년 개발)
  • AsciiDoc(.adoc)와 비교: 더 많은 기능 제공하지만 문법이 복잡하고 지원이 적음
  • 특징
    • 문법이 쉽고 직관적 → 약 30분이면 학습 가능
    • 다양한 플랫폼에서 지원
    • 필요 시 HTML 태그와 혼용 가능

2. 장단점

✅ 장점

  • 문법이 쉽고 직관적
  • 관리가 간편함 (텍스트 기반 버전 관리 용이)
  • 다양한 플랫폼/프로그램에서 지원

❌ 단점

  • 표준 부재 → 플랫폼/도구마다 문법 차이가 있음
  • HTML 마크업을 완전히 대체하지는 못함

3. 사용처

  • 에디터: 메모장, VS Code, Typora, Obsidian 등
  • 협업/블로그: GitHub, Notion, Slack, WordPress, Velog, Tistory 등
  • 원리: 문법은 HTML로 변환 후 CSS로 렌더링됨 → 스타일이 아닌 의미에 맞는 문법 사용이 중요

4. 기본 문법 & 예제 (치트시트)

(1) 제목 (Headers)

# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6

제목 1
======
제목 2
------

⚠️ <h1>은 한 문서에 하나만 사용하는 것이 바람직함.

(2) 강조 (Emphasis)

*이탤릭*   _이탤릭_
**굵게**   __굵게__
~~취소선~~
<u>밑줄</u>   <!-- 일부 플랫폼에서만 지원 -->

(3) 목록 (Lists)

1. 순서 있는 항목
2. 순서 있는 항목
   1. 하위 항목
   2. 하위 항목

- 순서 없는 항목
- 순서 없는 항목
   - 하위 항목

(4) 링크 (Links)

[구글](https://google.com)
[네이버](https://naver.com "링크 설명")

[GitHub][1]

구글: https://google.com
네이버: <https://naver.com>

[1]: https://github.com

(5) 이미지 (Images)

![대체텍스트](https://picsum.photos/300/200 "설명")

[![클릭 이미지](https://picsum.photos/100/100)](https://google.com)

(6) 코드 (Code)

  • 인라인 코드:

    `코드`

  • 코드 블록:

    ```html
&lt;a href="https://google.com">GOOGLE&lt;/a>

    $ npm run dev

⚠️ 백틱() 자체 출력 → ``또는``` 사용

(7) 표 (Tables)

| 값         | 의미            | 기본값   |
|------------|:---------------:|---------:|
| `static`   | 기준 없음       | `static` |
| `relative` | 자기 자신 기준  |          |
| `absolute` | 부모 요소 기준  |          |
| `fixed`    | 브라우저 기준   |          |
| `sticky`   | 스크롤 기준     |          |
  • 정렬: :--- (왼쪽), :---: (가운데), --: (오른쪽)

(8) 인용문 (BlockQuote)

> 인용문
>> 중첩 인용문
>>> 3단 인용문

(9) 수평선 (Horizontal Rule)

---
***
___

(10) 줄바꿈 (Line Breaks)

문장 끝에서 스페이스 두 번␣␣
줄바꿈 됩니다.

또는 <br> 사용

(11) 체크리스트 (Task List)

- [x] 완료 항목
- [ ] 미완료 항목

(12) 주석 (Comments)

<!-- HTML 방식 -->
[//]: # (마크다운 주석)

(13) 확장 기능 (플랫폼별 지원 다름)

  • 각주

    문장[^1]

[^1]: 각주 내용

  • 자동 링크

    <https://example.com>

  • 수학 수식 (LaTeX)

    $E = mc^2$

    (일부 플랫폼 한정)

5. 활용 예시

  • 개발자 → GitHub README, 기술 문서
  • 기획자/PM → 회의록, 보고서, Notion 정리
  • 블로거 → Jekyll, Hugo, Velog 등
  • 협업 → 위키, 슬랙, 컨플루언스

✔️ 최종 요약

  • 마크다운은 간단한 문법 + 다양한 지원 플랫폼 덕분에 문서 작성, 블로그, 협업 툴 등에서 폭넓게 사용됨.
  • 기본 원리: 문법 → HTML 변환 → CSS 렌더링
  • 필요 시 HTML 혼용 가능하지만, 문법의 의미적 사용이 더 중요함.
  • 표준이 없으므로 사용하는 플랫폼의 지원 여부 확인 필요.