마크다운은 텍스트를 작성하고 서식을 적용하는 방식을 꽤나 편리하게 바꾼 도구 중 하나로 필자가 애정하는 문법입니다. 이 블로그 또한 마크다운으로 작성한 뒤에 후가공을 하는 방식으로 사용 중인데요. 마크다운은 누구나 쉽게 배울 수 있으며, 간결함과 유연성을 자랑합니다. 이런 간결함 등의 강점은 마크다운을 단순한 텍스트 편집 도구에서 웹 콘텐츠 생성, 문서 작성, 학술 연구, 프로젝트 관리 등 다양한 분야에서 필수 도구로 만들었습니다. 마크다운 더 알아보기
그래서 이번 글에서는 마크다운의 기본적인 서식에 대해 집중적으로 다루려 합니다. 마크다운에는 다양한 문법이 존재하지만, 이 중에서도 특히 중요하다고 생각되는 몇 가지 주요 요소를 선별해서 크게 구조, 스타일 그리고 링크 세가지 형식으로 나누어 정리해 보았습니다. 이 정도만 알아도 사용하는데 큰 어려움이 없을 것 같습니다.
튜토리얼 환경: Standard Markdown
구조적인 문법
구조적 마크업은 문서의 구조를 표현하기 위한 마크업으로 예를 들어, 제목, 목록, 표, 수식 등을 표현하는 데 사용됩니다.
제목
제목은 문서 내에서 섹션을 나누는 데 사용됩니다. 보통 다양한 수준의 제목을 사용하여 섹션을 구분합니다.
# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6
위 내용을 렌더링하면 다음과 같이 표시됩니다.
![마크다운 제목 마크다운-제목](https://informanual.com/wp-content/uploads/2024/06/175311-마크다운-제목.webp)
목록
목록은 항목들을 나열하는 데 사용됩니다. 주로 순서없는 목록과 순서있는 목록으로 구분됩니다.
순서없는 목록
순서가 중요하지 않은 항목, 비순차 목록(Unordered List)을 나열할 때 다음과 같은 방식으로 사용됩니다. 기호는 사용 중인 마크다운 표기 방식에 따라 달라질 수 있지만 일반적으로 아무거나 사용해도 무방하고 섞어서 사용해도 정상적으로 인식합니다.
* 항목 1
* 항목 2
* 항목 3
- 항목 1
- 항목 2
- 항목 3
+ 항목 1
+ 항목 2
+ 항목 3
* 항목 1
- 항목 2
+ 항목 3
위 내용을 렌더링하면 다음과 같이 표시됩니다.
![순서 없는 목록 순서-없는-목록](https://informanual.com/wp-content/uploads/2024/06/175486-순서-없는-목록.webp)
순서있는 목록
마크다운에서 순차 목록(Ordered List)은 숫자와 점(.)을 사용하여 작성합니다. 항목들을 특정 순서에 따라 나열할 때 사용됩니다. 기본적으로 숫자의 숫서와 무관하게 위에서 부터 인식됩니다.
1. 항목 1
2. 항목 2
3. 항목 3
2. 항목 1
1. 항목 2
3. 항목 3
위 내용을 렌더링하면 다음과 같이 표시됩니다.
![순서 있는 목록 순서-있는-목록](https://informanual.com/wp-content/uploads/2024/06/175401-순서-있는-목록.webp)
코드블럭
코드블럭은 코드를 표시하거나 강조할 때 사용됩니다. 코드블럭 안의 내용은 일반적으로 다른 텍스트와 구분되어 특별한 서식이 적용됩니다.
This is code
위 내용을 렌더링하면 다음과 같이 표시됩니다.
![코드블럭 코드블럭](https://informanual.com/wp-content/uploads/2024/06/175463-코드블럭.webp)
수식
수식은 수학적이나 과학적인 표현을 나타낼 때 사용됩니다. 보통 LaTeX와 유사한 형식으로 작성됩니다. 수식은 $
기호로 감싸줍니다.
$y = mx + b$
위 내용을 렌더링하면 다음과 같이 표시됩니다.
![수식 수식](https://informanual.com/wp-content/uploads/2024/06/175487-수식.webp)
표
표는 데이터를 구조화하여 표시할 때 사용됩니다. 표는 행과 열로 구성되며, 각 셀에는 정보나 데이터가 들어갑니다.
| 제목 1 | 제목 2 | 제목 3 |
|------|------|------|
| 내용 1 | 내용 2 | 내용 3 |
위 내용을 렌더링하면 다음과 같이 표시됩니다.
![표 표](https://informanual.com/wp-content/uploads/2024/06/175503-표.webp)
인용
인용은 다른 문서나 저자의 말을 인용할 때 사용됩니다. 인용된 내용은 보통 들여쓰기되거나 특별한 서식으로 표시됩니다.
> 인용문입니다.
위 내용을 렌더링하면 다음과 같이 표시됩니다.
![인용 인용](https://informanual.com/wp-content/uploads/2024/06/175530-인용.webp)
> 이것은 인용문입니다.
> > 이것은 인용문안의 하위 인용문입니다.
위 내용을 렌더링하면 다음과 같이 표시됩니다.
![중첩된 인용 중첩된-인용](https://informanual.com/wp-content/uploads/2024/06/175541-중첩된-인용.webp)
스타일 관련 문법
스타일 마크업은 문서의 스타일을 표현하기 위한 마크업으로 예를 들어, 글꼴, 크기, 강조 등을 표현하는 데 사용됩니다.
볼드
볼드는 텍스트를 두껍게 표시하여 강조할 때 사용됩니다.
이것은 **볼드체** 입니다.
이것은 __볼드체__ 입니다.
위 내용을 렌더링하면 다음과 같이 표시됩니다.
![볼드 볼드](https://informanual.com/wp-content/uploads/2024/06/175643-볼드.webp)
이탤릭
이탤릭은 텍스트를 기울여 표시하여 강조할 때 사용됩니다.
이것은 *이탤릭체* 입니다.
이것은 _이탤릭체_ 입니다.
위 내용을 렌더링하면 다음과 같이 표시됩니다.
![이탤릭 이탤릭](https://informanual.com/wp-content/uploads/2024/06/175629-이탤릭.webp)
인라인 코드
인라인 코드는 텍스트 내에서 코드 조각을 나타낼 때 사용됩니다. 일반적으로 백틱 `
으로 감싸여 있습니다.
이것은 `인라인 코드` 입니다.
위 내용을 렌더링하면 다음과 같이 표시됩니다.
![인라인 코드 인라인-코드](https://informanual.com/wp-content/uploads/2024/06/173608-인라인-코드.webp)
취소선
취소선은 텍스트를 가로지르는 선으로, 텍스트의 삭제나 수정을 나타낼 때 사용됩니다.
이것은 ~~취소선~~ 입니다.
위 내용을 렌더링하면 다음과 같이 표시됩니다.
![취소선 취소선](https://informanual.com/wp-content/uploads/2024/06/175699-취소선.webp)
링크 관련 문법
링크 마크업은 문서 내의 다른 페이지나 외부 웹 사이트로 연결하는 링크를 표현하는 데 사용됩니다.
링크
이것은 [링크 텍스트](링크 주소) 입니다.
링크는 텍스트나 이미지 등을 클릭하면 다른 페이지나 웹 사이트로 이동할 수 있도록 하는 연결을 나타냅니다. 예를 들어 다음과 같이 작성하면 Google 메인 페이지가 링크됩니다.
이것은 <a href="https://google.com">Google</a> 입니다.
일반적으로 링크의 실제 렌더링은 아래와 같이 보이게 됩니다.
![링크 렌더링 링크-렌더링](https://informanual.com/wp-content/uploads/2024/06/173662-링크-렌더링.webp)
이미지
이것은 ![이미지 설명](이미지 주소) 입니다.
이미지는 문서에 그림이나 사진을 삽입할 때 사용됩니다. 보통 이미지를 클릭하면 원본 이미지를 보여주거나 링크된 페이지로 이동합니다.
이것은 ![이미지 설명](./myimg.png) 입니다.
이것은 !<a href="https://example.com/myimg.png">이미지 설명</a> 입니다.
경로가 올바르지 않는 경우 아래와 같은 형태로 링크가 표시되지만 이미지 설명 텍스트는 그대로 표시되는 것을 볼 수 있습니다.
![경로가 없는 이미지 링크 경로가-없는-이미지-링크](https://informanual.com/wp-content/uploads/2024/06/173769-경로가-없는-이미지-링크.webp)