이전에 포스팅한 Markdown 문법 개념 및 특징에 이어 이번에는 markdown의 기초 문법이다.
Markdown 문법 개념 및 특징
1. Markdown이란?Markdown은 텍스트 기반의 경량 마크업 언어로 간단한 문법을 사용하여 문서를 쉽게 작성할 수 있도록 설계되었다. 복잡한 태그 없이도 문서를 정리할 수 있으며, 개발자 문서, 블로
mercifulcloud.tistory.com
1. 제목 (Heading)
- Markdown에서는 # 기호를 사용하여 제목을 작성한다.
# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6
2. 문단 (Paragraph) 및 줄바꿈
- 일반적으로 문장을 입력하면 자동으로 문단이 구분된다.
이것은 첫 번째 문단입니다.
이것은 두 번째 문단입니다.
- 줄바꿈을 원할 경우 줄 끝에 두 칸 이상의 공백을 추가한 후 Enter를 누르면 된다.
이 문장은 줄바꿈 없이
다음 줄에서 이어집니다.
3. 텍스트 강조
- Markdown에서는 텍스트의 가독성을 높이기 위해 굵게(Bold), 기울임(Italic), 취소선(Strikethrough) 등의 강조 기능을 제공한다.
1) 굵은 글씨 :
- 두 개의 별표(**텍스트**) 또는 두 개의 밑줄(__텍스트__)을 사용한다.
- 별표(**)와 밑줄(__)을 모두 사용할 수 있지만, 일반적으로 별표(**)를 더 많이 사용한다.
- 대부분의 Markdown 지원 환경에서 **굵게** 표기법을 기본적으로 인식한다.
일반 글씨
**굵은 글씨**
__굵은 글씨__
2) 기울임
- 별표 하나(*텍스트*) 또는 밑줄 하나(_텍스트_)를 사용한다.
- *기울임*과 _기울임_ 두 가지 방법이 가능하지만 별표(*)를 더 많이 사용한다.
- 밑줄(_)은 특정 환경(특히 문서 편집기)에서 단어 사이의 공백을 포함할 경우 인식되지 않을 수 있음에 유의해야 한다.
- 기울임체를 사용할 때 _를 사용할 경우 앞뒤 단어가 모두 밑줄 안에 있어야 정상적으로 동작한다.
*이 문장은 기울임체로 표시됩니다.*
_이 문장도 기울임체로 표시됩니다._
_이것은 기울임체 입니다_ (O)
_이것은 기울임체_ 입니다 (X) → Markdown에서 공백은 인식되지 않음
3) 굵은 글씨 + 기울임
- 동시에 적용하려면 별표(*)나 밑줄(_)을 세 개(***텍스트*** 또는 ___텍스트___) 사용한다.
- 세 개의 *** 또는 ___를 사용하면 Bold + Italic 효과를 적용할 수 있다.
***이 문장은 굵고 기울임체로 표시됩니다.***
___이 문장도 굵고 기울임체로 표시됩니다.___
4) 취소선 (가로줄)
- 물결표(틸드, ~) 두 개를 사용한다.
- ~~텍스트~~ 형식으로 감싸면 해당 부분에 취소선 효과가 적용된다.
- 일부 Markdown 렌더러에서는 지원되지 않을 수도 있다.
이 문장은 ~~취소선이 적용~~됩니다.
4. 목록
1) 순서 없는 목록
- 순서가 필요하지 않은 목록을 만들 때 사용하며, -, *, + 기호를 사용할 수 있다.
- -, *, + 기호 중 어떤 것을 사용해도 동일한 효과를 얻을 수 있다.
- 일반적으로 - 기호를 가장 많이 사용한다.
- 하위 목록(들여쓰기)을 만들려면 두 칸 이상의 공백을 추가한 후 -, *, +를 입력하면 된다.
- 첫 번째 항목
- 두 번째 항목
- 하위 항목 1
- 하위 항목 2
* 세 번째 항목
+ 네 번째 항목
2) 순서 있는 목록
- 숫자 뒤에 점(.)을 붙이면 된다.
- Markdown에서는 숫자를 순서대로 입력하지 않아도 자동으로 정렬된다.
- 순서를 자동 정렬해주기 때문에 모든 항목을 1.으로 입력해도 정상적으로 번호가 매겨지지만 가독성을 위해 실제 번호를 맞추는 것이 좋다.
1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목
1. 첫 번째 항목
1. 두 번째 항목
1. 세 번째 항목
3) 목록 중첩
- 순서 있는 목록과 순서 없는 목록을 중첩해서 사용할 수 있다.
- 하위 목록을 만들려면 들여쓰기(공백 2칸 또는 4칸)를 추가하면 된다.
- 공백 2칸 이상 들여쓰기 후 -, *, + 또는 숫자를 입력하면 하위 목록이 생성된다.
1. 첫 번째 항목
- 하위 항목 1
- 하위 항목 2
2. 두 번째 항목
1. 하위 항목 1
2. 하위 항목 2
4) 체크리스트
- GitHub Flavored Markdown(GFM)에서는 체크리스트(Task List)를 지원한다.
- 체크리스트는 [ ] 또는 [x] 형식으로 작성하면 된다.
- GitHub 웹에서는 체크리스트가 정상 작동하지만 로컬에서는 대부분의 Markdown 뷰어가 지원하지 않는다.
- 만일 로컬에서 .md파일을 열었을 때 체크리스트가 정상적으로 보이려면 GFM을 지원하는 Markdown 뷰어를 사용해야 된다. VS Code의 경우 Markdown Preview Enhanced 확장을 설치하면 볼 수 있다.
- [ ] 해야 할 일 1
- [x] 완료한 일 2
5. 코드 블록
- 코드는 **인라인 코드(Inline Code)**와 블록 코드(Block Code) 두 가지 방식으로 작성할 수 있다.
1) 인라인 코드
- 인라인 코드란 문장 중간에 코드가 포함되는 경우를 의미한다.
- 코드를 감싸기 위해 백틱(Backtick, ` ) 기호를 사용한다.
- 백틱(`) 한 개로 감싸면 인라인 코드가 된다.
- 줄 바꿈 없이 문장 내에서 사용할 수 있다.
인라인 코드 예시 `print("Hello, World!")`처럼 백틱(`)을 사용한다.
2) 블록 코드
- 여러 줄의 코드를 입력하려면 백틱 3개(```)를 사용하여 코드 블록을 만든다.
- 코드 블록을 만들 때 언어를 명시하면 문법 강조(Syntax Highlighting)가 적용된다.
블록 코드 예시
```python
def hello():
print("Hello, World!")
```
끝
3) 코드 블록에서 특수 문자 이스케이프
- 코드 블록 내부에서 Markdown 문법을 그대로 표시하려면 이스케이프(Escape) 처리를 해야 한다.
- Markdown 문법을 코드로 설명하고 싶을 때는 백틱(```)을 네 개 사용해야 한다.
````markdown
```python
print("Hello, World!")
```
````
6. 인용문
1) 기본 인용문
- > 기호를 사용하면 해당 줄이 인용문으로 표시된다.
- 인용문 내부에서는 일반 텍스트, 링크, 강조 문법 등을 사용할 수 있다.
인용문 예시
> 이것은 인용문입니다.
내부에서 다른 문법 사용 예시
> **강조된 인용문**입니다.
> *기울임체*도 사용할 수 있습니다.
> [Google](https://www.google.com) 링크를 추가할 수도 있습니다.
끝
2) 여러 줄 인용문
- 여러 줄에 걸쳐 사용할 수도 있다.
- 줄바꿈 없이 계속 이어지는 인용문을 만들려면 > 기호를 각 줄 앞에 붙여야 한다.
- 첫 번째 줄에만 >를 사용해도 이후 줄이 자동으로 인용문에 포함될 수 있다. 다만 뷰어마다 동작 방식이 다를 수 있으므로 가급적 >를 모든 줄에 명시하는 것이 좋다.
- 빈 줄을 추가하면 인용문이 분리
1. 각 줄에 >를 명시한 여러줄 인용문
> 첫 번째 줄입니다.
> 두 번째 줄입니다.
> 세 번째 줄입니다.
2. 여러 줄 인용문
> 첫 번째 줄입니다.
두 번째 줄입니다.
세 번째 줄입니다.
3. 빈 줄을 추가하면 인용문이 끊길 수 있음
> 첫 번째 줄입니다.
두 번째 줄입니다.
세 번째 줄입니다.
3) 중첩 인용문
- > 기호를 여러 개 사용하여 인용문의 단계(depth)를 조절한다.
- >를 여러 번 사용할수록 들여쓰기 단계가 깊어진다.
> 첫 번째 인용문입니다.
>> 두 번째 인용문입니다.
>>> 세 번째 인용문입니다.
4) 인용문 내부에 다른 요소 추가
- 인용문 내부에는 목록, 코드 블록, 표 등을 추가할 수 있다.
- 줄바꿈이 필요할 경우 > 뒤에 빈 줄을 추가한다.
> 목록을 포함한 인용문
> - 첫 번째 항목
> - 두 번째 항목
> - 하위 항목
> 코드 블록을 포함한 인용문
>
> ```python
> def hello():
> print("Hello, World!")
> ```
> 표를 포함을 포함한 인용문
>
> | 이름 | 나이 | 직업 |
> |------|----|------|
> | 홍길동 | 25 | 개발자 |
> | 이몽룡 | 30 | 기획자 |
7. 링크
1) 기본 링크
- 가장 일반적인 Markdown 링크 문법은 [텍스트](URL) 형식이다.
[구글 링크 클릭](https://www.google.com)
2) 자동 링크 (Auto Link)
- < > 기호를 사용하면 URL이 자동으로 링크로 변환된다.
- 이메일 주소도 자동 링크가 가능하다.
<https://www.google.com>
3) 링크에 제목(툴팁) 추가
- 링크에 제목(툴팁)을 추가하면 마우스를 올렸을 때 설명이 표시된다.
[Google](https://www.google.com "구글로 이동")
4) 이미지 링크
- [](링크 URL) 형식으로 작성한다.
[](https://www.google.com)
5) 문서 내부 링크 (같은 파일 내 이동)
- 문서 내부에서 특정 제목으로 이동하려면 [링크 텍스트](#제목) 형식을 사용한다.
- 대소문자는 구분되지 않는다.
- 공백은 -로 변환되므로 링크를 작성할 때 반영해야 한다.( 제목이 여러 단어로 구성된 경우의 공백 처리)
- 특수문자가 포함된 경우 일부 문자는 제거되거나 변환될 수 있으므로 실제 테스트 후 동작 여부를 확인하는 것이 좋다.
# 목차
- [개요](#개요)
- [프로젝트 소개로 이동](#project-intro)
- [설치 방법](#설치-방법)
- [사용법!](#사용법)
### 개요
이 문서는 Markdown 내부 링크 사용법을 설명합니다.
### 프로젝트 소개 {#project-intro}
프로젝트를 소개합니다.
### 설치 방법
Markdown 문서를 작성하는 방법을 설명합니다.
### 사용법!
내부 링크를 활용하는 다양한 방법을 다룹니다.
6) 참조 스타일 링크
- 참조 스타일(Reference Style) 링크를 사용하여 가독성을 높일 수 있다.
- 본문에서는 [텍스트][참조 ID] 형식을 사용한다.
- 실제 URL은 문서의 다른 곳에 [참조 ID]: URL 형식으로 작성한다.
- 여러 개의 같은 링크를 사용할 때 유용하다.
- 제목 링크는 공백이 -로 변환되므로 정확한 ID를 사용해야 한다.
- 일부 Markdown 렌더러에서 지원되지 않을 수도 있다.
[Google][google-link]
[google-link]: https://www.google.com
8. 이미지 삽입
1) 이미지 삽입 기본 문법
- 기본 문법은  형태로 한다.
- 마우스를 올릴 때 툴팁을 표시하려면 " " 안에 텍스트를 입력하면 된다.
- 을 [ ]로 감싸고 (링크_URL)을 추가하면 이미지 클릭 시 특정 웹페이지로 이동한다.
# 기본 이미지 삽입
# 이미지에 제목(툴팁) 추가
# 클릭 가능한 이미지 (이미지 링크)
[](https://www.google.com)
2) 로컬 이미지 삽입
- Markdown 문서(ex 리드미파일)와 같은 폴더에 있는 이미지를 삽입 가능하다.
- 아래 폴더구조를 참고해서 보면 현재 Markdown 파일(README.md)이 있는 위치를 기준으로 images 폴더 내 sample.png 와 logo.jpg를 불러온다.
- Markdown 문서와 이미지가 같은 프로젝트 내에 있을 때 유용하다.
- 만일 GitHub에서 로컬 이미지가 표시되지 않는 경우 GitHub에 이미지를 올리고 GitHub 저장소의 이미지 URL을 사용한다.
📂 프로젝트 폴더
│── 📄 README.md
│── 📂 images
│ ├── 📄 sample.png
│ ├── 📄 logo.jpg
3) 이미지 크기 조절
- Markdown 기본 문법으로는 이미지 크기 조절이 어려워 HTML을 사용해야 한다.
### 기본 이미지
### 크기 조절
<img src="https://cdn.pixabay.com/photo/2017/11/13/07/14/cats-eyes-2944820_1280.jpg" width="200" height="100">
4) 이미지 정렬
- Markdown에서는 기본적으로 이미지를 가운데 정렬할 방법이 없으므로 HTML을 사용해야 한다.
- <p align="center"> 태그를 사용하면 이미지를 가운데 정렬할 수 있다.
### 정렬 전
<img src="https://cdn.pixabay.com/photo/2017/11/13/07/14/cats-eyes-2944820_1280.jpg" width="200" height="100">
### 정렬 후
<p align="center">
<img src="https://cdn.pixabay.com/photo/2017/11/13/07/14/cats-eyes-2944820_1280.jpg" width="200" height="100">
</p>
9. 수평선
- 세 개 이상의 -, *, _을 입력하면 수평선이 생성된다.
---
***
___
- 일부 Markdown 렌더러에서는 ---가 제목 아래 위치할 경우 제목 스타일(#)로 해석될 수도 있으므로 수평선 위에 빈 줄을 추가하는 것이 좋다.
- 아래에서 ===는 Markdown에서 제목(h1, h2)으로 해석되는 문법이다.
제목 1
---
제목 2
===
제목 1
---
제목 2
===
10. 테이블
1) 기본 테이블 문법
- 파이프(| ) 기호를 사용하여 열(Column)을 구분한다.
- 하이픈 기호(-)를 사용하여 테이블 헤더와 내용을 구분한다.
- 각 열의 구분선(|---|---|---|)을 맞추지 않아도 동작하지만 정렬을 맞추는 것이 가독성에 좋다.
| 이름 | 나이 | 직업 |
|------|----|------|
| 홍길동 | 25 | 개발자 |
| 이몽룡 | 30 | 기획자 |
2) 테이블 정렬
- 기본적으로 테이블의 텍스트는 왼쪽 정렬된다.
- 하지만 콜론(:)을 사용하면 정렬을 변경할 수 있다.
- :------ → 왼쪽 정렬
- ------: → 오른쪽 정렬
- :----: → 가운데 정렬
| 이름 | 나이 | 직업 |
|:------|----:|:----:|
| 홍길동 | 25 | 개발자 |
| 이몽룡 | 30 | 기획자 |
11. 기타
1) 특수문자 출력
- Markdown에서는 *, _, #, | 등 일부 문자가 문법 요소로 해석된다.
- 백슬래시(\)를 사용하여 문법을 무시하고 일반 문자로 출력할 수 있다.
\*이것은 강조가 아닙니다.\*
\_이것은 기울임이 아닙니다.\_
\# 이것은 제목이 아닙니다.
\| 테이블 구분자가 아닙니다. |
2) 주석
- HTML의 <!-- -->을 사용하여 주석을 작성할 수 있다.
# 주석1
<!-- 이 부분은 화면에 표시되지 않습니다. -->
주석2
3) HTML 태그 활용
- Markdown에서는 HTML 태그를 함께 사용할 수 있다.
- 일부 Markdown 환경에서는 HTML을 지원하지 않지만 대부분의 플랫폼에서는 정상적으로 동작한다.
<b>굵은 텍스트</b>
<br>
<i>기울임 텍스트</i>
<u>밑줄 텍스트</u>
'Tools > etc' 카테고리의 다른 글
| Markdown 문법 개념 및 특징 (0) | 2025.03.18 |
|---|---|
| [Docker] 도커 desktop wsl error 해결 과정(WslRegisterDistribution failed with error: 0x80370102) (0) | 2025.01.15 |
| ngrok 사용법 로컬 서버를 인터넷에 공개하기 (0) | 2024.12.30 |
| [이클립스] 이전에 실행됐던 게 실행되는 오류 해결 (0) | 2023.06.21 |
