마크다운 치트 시트: 완전한 문법 가이드

· 12분 읽기

목차

마크다운이란?

마크다운은 2004년 John Gruber와 Aaron Swartz가 만든 경량 마크업 언어로, 웹을 위한 글쓰기 방식을 혁신했습니다. 간단하고 직관적인 문법을 사용하여 일반 텍스트를 서식화할 수 있으며, 사람이 읽기 쉽고 기계가 파싱할 수 있습니다.

장황한 태그와 닫는 요소가 필요한 HTML과 달리, 마크다운은 별표, 해시, 대괄호와 같은 자연스러운 기호를 사용합니다. 이를 통해 글쓰기가 더 빠르고 렌더링 없이도 원본 텍스트를 읽을 수 있습니다. 마크다운 문서는 원본 형태에서도 깔끔하고 논리적으로 보이기 때문에 기술 문서의 보편적인 표준이 되었습니다.

마크다운의 철학은 간단합니다: 글쓰기는 쉬워야 하고, 문법은 보이지 않아야 합니다. 마크다운 파일을 읽을 때, 콘텐츠를 먼저 읽고 마크업은 나중에 읽게 됩니다. 이는 태그가 실제 콘텐츠를 가리는 전통적인 마크업 언어와 근본적으로 다릅니다.

마크다운이 사용되는 곳

마크다운은 기술 생태계와 그 너머에서 어디에나 존재하게 되었습니다:

웹 게시를 위해 마크다운을 HTML로 변환해야 하나요? 즉각적이고 정확한 변환을 위해 마크다운을 HTML로 변환기를 사용해 보세요.

프로 팁: 마크다운 파일은 .md 또는 .markdown 확장자를 사용합니다. 대부분의 플랫폼은 둘 다 인식하지만, .md가 더 일반적이고 간결합니다.

제목과 문서 구조

제목은 마크다운에서 문서 구조의 중추입니다. 계층 구조를 만들고, 가독성을 향상시키며, 사람과 검색 엔진 모두가 콘텐츠 구성을 이해하는 데 도움을 줍니다.

기본 제목 문법

마크다운은 해시 기호(#)를 사용하여 6단계의 제목을 지원합니다. 해시의 개수가 제목 수준을 결정합니다:

# 제목 1 (H1)
## 제목 2 (H2)
### 제목 3 (H3)
#### 제목 4 (H4)
##### 제목 5 (H5)
###### 제목 6 (H6)

각 제목 수준은 의미론적 의미를 가집니다. H1은 문서 제목이고, H2는 주요 섹션이며, H3는 하위 섹션입니다. 이 계층 구조는 접근성과 SEO에 중요합니다.

H1과 H2의 대체 문법

마크다운은 H1과 H2 제목에 대한 대체 "밑줄" 문법도 지원합니다:

제목 1
=========

제목 2
---------

이 문법은 유효하지만, 해시 문법이 더 일반적이며 6단계 제목을 모두 지원합니다. 대부분의 개발자는 문서 전체에서 해시를 사용하는 일관성을 선호합니다.

제목 모범 사례

빠른 팁: 많은 마크다운 파서는 제목에서 자동으로 앵커 링크를 생성하여 "시작하기"를 #시작하기로 변환합니다. 이를 통해 특정 섹션에 대한 딥 링크가 가능합니다.

텍스트 서식과 강조

마크다운은 일반적인 텍스트 서식 요구 사항에 대한 직관적인 문법을 제공합니다. 이러한 서식 옵션은 단락 내에서 인라인으로 작동하며 더 복잡한 스타일링을 위해 결합할 수 있습니다.

굵게 및 기울임꼴 텍스트

강조는 별표 또는 밑줄을 사용하여 만듭니다:

**굵은 텍스트** 또는 __굵은 텍스트__
*기울임꼴 텍스트* 또는 _기울임꼴 텍스트_
***굵고 기울임꼴*** 또는 ___굵고 기울임꼴___

별표와 밑줄 모두 동일하게 작동하지만, 별표가 더 일반적입니다. 하나의 스타일을 선택하고 일관성을 유지하세요. 많은 스타일 가이드는 별표를 권장하는데, 입력하기 쉽고 시각적으로 더 구별되기 때문입니다.

취소선 및 기타 서식

추가 서식 옵션은 다음과 같습니다:

~~취소선 텍스트~~
`인라인 코드`
==강조 표시된 텍스트== (일부 파서)
X^2^ (위 첨자, 일부 파서)
H~2~O (아래 첨자, 일부 파서)

강조 표시된 텍스트, 위 첨자, 아래 첨자는 모든 마크다운 파서에서 지원되지 않는 확장 기능입니다. GitHub 플레이버 마크다운(GFM)은 취소선을 지원하지만 기본적으로 강조 표시는 지원하지 않습니다.

인용구

인용구는 큰따옴표 기호(>)를 사용하여 만듭니다:

> 이것은 인용구입니다.
> 여러 줄에 걸쳐 있을 수 있습니다.

>> 중첩된 인용구도 가능합니다.
>> > 기호를 더 추가하면 됩니다.

인용구는 인용, 풀 쿼트 또는 중요한 정보를 강조하는 데 완벽합니다. 제목, 목록, 코드 블록을 포함한 다른 마크다운 서식을 포함할 수 있습니다.

수평선

수평선으로 콘텐츠에 시각적 구분을 만듭니다:

---
***
___

세 가지 문법 모두 동일한 결과를 생성합니다. 자체 줄에 하이픈, 별표 또는 밑줄을 세 개 이상 사용하세요. 대부분의 개발자는 명확성을 위해 하이픈(---)을 선호합니다.

특수 문자 이스케이프

리터럴 마크다운 문자를 표시하려면 백슬래시로 이스케이프하세요:

\*기울임꼴 아님\*
\# 제목 아님
\[링크 아님\]

이는 문서나 튜토리얼에서처럼 마크다운 문법 자체를 표시해야 할 때 필수적입니다.

프로 팁: 코드나 기술 주제에 대해 작성할 때, 함수 이름, 변수, 파일 경로, 명령어에 인라인 코드 서식(`백틱`)을 사용하세요. 이는 가독성을 향상시키고 독자가 코드와 산문을 구별하는 데 도움이 됩니다.

링크와 이미지는 마크다운에서 유사한 문법을 사용하므로 기억하고 사용하기 쉽습니다. 둘 다 다양한 사용 사례를 위해 인라인 및 참조 스타일 형식을 지원합니다.

링크 만들기

기본 링크 문법은 간단합니다:

[링크 텍스트](https://example.com)
[제목이 있는 링크](https://example.com "호버 텍스트")

링크 텍스트는 대괄호 안에 나타나고, 바로 뒤에 괄호 안의 URL이 옵니다. 선택적 제목 속성은 URL 뒤에 따옴표로 표시되며 호버 시 표시됩니다.

참조 스타일 링크

반복되는 링크가 많은 문서의 경우, 참조 스타일 링크가 콘텐츠를 더 깔끔하게 유지합니다:

[링크 텍스트][참조-id]
[다른 링크][참조-id]

[참조-id]: https://example.com "선택적 제목"

이 접근 방식은 링크 정의를 콘텐츠에서 분리하여 소스를 더 읽기 쉽게 만듭니다. 긴 문서나 동일한 URL이 여러 번 나타날 때 특히 유용합니다.

자동 링크

URL과 이메일 주소는 자동으로 링크로 변환될 수 있습니다:

<https://example.com>
<[email protected]>

많은 마크다운 파서는 꺾쇠 괄호 없이 베어 URL도 자동 링크하지만, 이 동작은 보편적이지 않습니다. 꺾쇠 괄호를 사용하면 플랫폼 간에 일관된 동작을 보장합니다.

이미지 추가

이미지 문법은 링크와 거의 동일하며, 느낌표 접두사가 있습니다:

![대체 텍스트](image.jpg)
![대체 텍스트](image.jpg "이미지 제목")
![대체 텍스트][이미지-참조]

[이미지-참조]: image.jpg "선택적 제목"

대체 텍스트는 접근성과 SEO에 중요합니다. 스크린 리더를 위해 이미지를 설명하고 이미지 로드에 실패하면 나타납니다. 항상 이미지 콘텐츠와 맥락을 설명하는 의미 있는 대체 텍스트를 제공하세요.

이미지 크기 조정 및 정렬

표준 마크다운은 이미지 크기 조정이나 정렬을 지원하지 않습니다. 이러한 기능을 위해서는 HTML을 사용해야 합니다:

<img src="image.jpg" alt="대체 텍스트" width="300">
<img src="image.jpg" alt="대체 텍스트" style="float:right;margin:10px">

대부분의 마크다운 파서는 인라인 HTML을 허용하므로, 이미지 표현에 대한 더 많은 제어가 필요할 때 실용적인 솔루션입니다.

빠른 팁: 내부 페이지에 링크할 때, 절대 URL(https://example.com/about/) 대신 상대 URL(/about/)을 사용하세요. 이렇게 하면 콘텐츠를 이식할 수 있고 개발 환경에서 올바르게 작동합니다.

목록: 순서 있는 목록, 순서 없는 목록, 작업 목록

목록은 마크다운에서 정보를 구성하는 데 기본적입니다. 만들기 쉽고 복잡한 계층 구조를 위한 중첩을 지원합니다.

순서 없는 목록

별표, 하이픈 또는 더하기 기호를 사용하여 글머리 기호 목록을 만듭니다:

* 항목 1
* 항목 2
* 항목 3

- 항목 1
- 항목 2
- 항목 3

+ 항목 1
+ 항목 2
+ 항목 3

세 가지 기호 모두 동일하게 작동합니다. 하나를 선택하고 문서 전체에서 일관되게 사용하세요. 대부분의 개발자는 시각적 명확성을 위해 하이픈을 선호합니다.

순서 있는 목록

번호가 매겨진 목록은 마침표가 뒤따르는 숫자를 사용합니다:

1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목

유용한 기능이 있습니다: 실제 숫자는 중요하지 않습니다. 마크다운은 렌더링될 때 목록을 자동으로 다시 번호를 매깁니다:

1. 첫 번째 항목
1. 두 번째 항목
1. 세 번째 항목

이렇게 하면 모든 것을 수동으로 다시 번호를 매길 필요가 없으므로 항목 재정렬이 더 쉬워집니다. 그러나 모든 항목에 대해 1.로 시작하면 소스를 읽을 때 혼란스러울 수 있습니다.

중첩된 목록

공백이나 탭으로 항목을 들여쓰기하여 계층적 목록을 만듭니다:

1. 첫 번째 항목
   - 중첩된 글머리 기호
   - 또 다른 중첩된 글머리 기호
2. 두 번째 항목
   1. 중첩된 번호
   2. 또 다른 중첩된 번호
      - 더 깊은 중첩

각 중첩 수준에 대해 일관된 들여쓰기(일반적으로 2-4개의 공백)를 사용하세요. 대부분의 파서는 유연하지만, 일관성은 가독성을 향상시킵니다.

작업 목록

GitHub 플레이버 마크다운은 할 일 추적을 위한 작업 목록을 도입했습니다:

- [ ] 확인되지 않은 작업
- [x] 확인된 작업
- [ ] 또 다른 확인되지 않은 작업

작업 목록은 GitHub와 같은 플랫폼에서 대화형입니다. 렌더링된 보기에서 직접 항목을 확인하고 확인 해제할 수 있습니다. 프로젝트 계획, 이슈 추적, 협업 문서에 완벽합니다.

목록 모범 사례

코드와 코드 블록

마크다운은 코드 표시에 탁월하여 기술 문서 및 프로그래밍 튜토리얼에 선호되는 형식입니다.

인라인 코드

단일 백틱으로 인라인 코드를 감쌉니다:

디버그하려면 `console.log()` 함수를 사용하세요.
`<div>` 요소는 컨테이너입니다.

인라인 코드 서식은 간격을 유지하고 마크다운 해석을 방지합니다. 문장 내에서 코드 요소를 언급하는 데 필수적입니다.

코드 블록

삼중 백틱(펜스 코드 블록)을 사용하여 코드 블록을 만듭니다:

```
function hello() {
  console.log("Hello, world!");
}
```

이것은 현대적이고 선호되는 문법입니다. 이전 들여쓰기 방법(4개의 공백 또는 1개의 탭)보다 더 깔끔하고 유연합니다.

구문 강조

구문 강조를 위해 여는 백틱 뒤에 프로그래밍 언어를 지정하세요:

```javascript
function hello() {
  console.log("Hello, world!");
}
```

```python
def hello():
    print("Hello, world!")
```

```css
.container {
  max-width: 1200px;
  margin: 0 auto;
}
```

대부분의 마크다운 파서는 수십 개의 언어를 지원합니다. 일반적인 식별자는 다음과 같습니다

We use cookies for analytics. By continuing, you agree to our Privacy Policy.