웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
오늘은 노트앱 및 개발 문서에서 많이 볼 수 있는 Markdown에 대하여 알아봅니다.
Markdown은 일반적인 텍스트 문서이면서 제목이나 리스트, 볼드체 등등 특정한 서식 요소를 가지고 있는 가벼운 마크업 언어를 말합니다. 만약 특정 앱이나 라이브러리 등을 설치할 경우에 .md 이름의 확장자 파일을 볼 수 있는데요 ~ 파일을 에디터로 열어보면 사용된 내부 서식을 보여주게 되어 내용을 쉽고 빠르게 파악할 수 있다는 장점을 가지고 있습니다. 아래의 스크린샷의 좌측은 Markdown 텍스트로 우측에서 어떻게 보여지는지 쉽게 알 수 있죠.
스크린샷) Intellij에서 md 파일을 열었을 경우 일반텍스트와의 차이점
위 스크린샷은 Markdown이 어떻게 사용되는지 확실히 알려줍니다. 또한 Markdown은 일반 텍스트 편집기를 사용하여 리치 텍스트를 만드는 데에도 종종 사용됩니다. 이제 Markdown을 사용하기 위한 방법과 문법을 아래에서 알아봅니다.
특정 서식으로 표현하기 위해서는 Markdown 문법을 반드시 알아야합니다. 제목, 강조, 리스트 등등 많이 있지만 가장 많이 쓰이는 제목 사용 방법부터 알아봅니다.
가장 먼저 제목에 해당하는 Header를 보여주는 방법입니다. 이 경우 `#` 기호와 공백 그리고 헤더 텍스트를 입력하여 만들 수 있습니다. 참고로 여기서 사용되는 `#` 기호는 1부터 6까지 사용할 수 있으며 각각 Header의 레벨을 결정합니다. 하나를 사용하는 경우가 가장 큰 Header를 의미하고 가장 작은 숫자가 낮은 Header를 의미합니다.
서식이 표현되면 일반적으로 위의 Header가 가장 크고 아래로 갈 수록 작게 나타나게 됩니다.
다음은 강조하기 위한 볼드체 및 이탤릭체 텍스트 표기 방법입니다. 먼저 이탤릭체 텍스트를 만들려면 별표 하나 또는 밑줄 하나를 사용하고, 볼드체(굵은 텍스트)를 만들려면 두 개를 사용합니다.
아래와 같이 출력되어 나타나게 됩니다.
text1
text2
이번에는 리스트 목록을 만드는 방법입니다. 아래와 같이 숫자가 있거나 없는 목록을 만들 수 있으며 대시, 더하기 기호, 또는 별표를 사용하여 순서 없는 목록을 만들거나 숫자를 사용하여 목록을 만들 수도 있습니다.
@ 순서가 없는 목록
@ 순서가 있는 목록
참고로 위에서 사용한 숫자를 변경해도 나타는 화면의 숫자는 1, 2, 3 순서대로 표기됩니다.
이번에는 Markdown에서 링크 텍스트를 만드는 방법입니다. 대상이 되는 텍스트를 대괄호( `[ ]` )로 감싼 다음 URL을 괄호( `( )` )로 감싸서 하이퍼링크를 만듭니다.
이제 문서의 텍스트를 클릭하면 해당 링크로 이동이 가능하게 됩니다.
이미지 역시 추가하는 것도 가능합니다. 이 경우 링크를 만드는 것과 유사하며 링크 문법 앞에 느낌표를 추가하기만 하면 됩니다.
Markdown에서는 테이블 서식도 사용이 가능합니다. 이 경우 `|` 파이프라인 기호를 사용하합니다. 여기서 테이블 헤더 본문을 구분하기 위해서 테이블 헤더와 본문 사이에는 셀 구분자가 포함된 행이 있어야 합니다. 이 행에서는 각 셀 구분자를 - (대시) 기호와 함께 사용하여 헤더와 본문을 구분합니다. 아래는 간단한 테이블 서식 예제입니다.
코드 블록 역시 만들 수 있습니다. 이 때는 백틱 기호를 사용하여 코드 블록을 표시하는 데 아래에서 좀 더 자세히 알아봅니다.
코드 블록은 인라인과 블록 방식 두 가지가 사용되며 인라인 코드의 경우 코드 양쪽에 하나의 백틱을 사용합니다.
인라인 코드는 아래와 같이 하나의 백틱을 사용하여 만들 수 있습니다.
아래와 같이 나타나게 됩니다.
inline code block
코드 블록을 위해서는 세 개의 백틱(``)을 사용합니다.
@ 특정 언어의 코드 블록 만들기
세 개의 백틱을 사용하여 여러 줄의 코드 블록을 만드는 경우 첫 번째 백틱 집합 바로 다음에 언어를 지정하여 구문 강조를 추가할 수도 있습니다(단, 사용하는 플랫폼에서 지원하는 경우). 아래에서는 Python 언어를 사용하는 언어의 코드 블록을 만들어봅니다.
위 예제는 Python 언어의 Markdown 코드 블록입니다. 만약 해당 플랫폼에서 지원하는 경우 해당 언어의 서식 및 강조 표시가 함께 사용되어 나타나게 됩니다.
여기까지 Markdown 언어에 대하여 간략하게 알아보았습니다. Markdown은 옵시디언 등 요즘 인기 있는 노트앱 등에서도 넓리 사용되며 쉽고 빠르게 서식을 지정할 수 있는 장점 때문에 넓리 사랑받는 언어입니다. 쉽고 빠른 서식 사용을 위해서 Markdown을 알아두면 매우 편리합니다.
Markdown이란 무엇인가?
Markdown은 일반적인 텍스트 문서이면서 제목이나 리스트, 볼드체 등등 특정한 서식 요소를 가지고 있는 가벼운 마크업 언어를 말합니다. 만약 특정 앱이나 라이브러리 등을 설치할 경우에 .md 이름의 확장자 파일을 볼 수 있는데요 ~ 파일을 에디터로 열어보면 사용된 내부 서식을 보여주게 되어 내용을 쉽고 빠르게 파악할 수 있다는 장점을 가지고 있습니다. 아래의 스크린샷의 좌측은 Markdown 텍스트로 우측에서 어떻게 보여지는지 쉽게 알 수 있죠.
스크린샷) Intellij에서 md 파일을 열었을 경우 일반텍스트와의 차이점위 스크린샷은 Markdown이 어떻게 사용되는지 확실히 알려줍니다. 또한 Markdown은 일반 텍스트 편집기를 사용하여 리치 텍스트를 만드는 데에도 종종 사용됩니다. 이제 Markdown을 사용하기 위한 방법과 문법을 아래에서 알아봅니다.
간단한 Markdown 문법 알아보기
특정 서식으로 표현하기 위해서는 Markdown 문법을 반드시 알아야합니다. 제목, 강조, 리스트 등등 많이 있지만 가장 많이 쓰이는 제목 사용 방법부터 알아봅니다.
Header 보여주기, h1 ~ h6
가장 먼저 제목에 해당하는 Header를 보여주는 방법입니다. 이 경우 `#` 기호와 공백 그리고 헤더 텍스트를 입력하여 만들 수 있습니다. 참고로 여기서 사용되는 `#` 기호는 1부터 6까지 사용할 수 있으며 각각 Header의 레벨을 결정합니다. 하나를 사용하는 경우가 가장 큰 Header를 의미하고 가장 작은 숫자가 낮은 Header를 의미합니다.
# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6
서식이 표현되면 일반적으로 위의 Header가 가장 크고 아래로 갈 수록 작게 나타나게 됩니다.
볼드체 및 이탤릭체 만들기
다음은 강조하기 위한 볼드체 및 이탤릭체 텍스트 표기 방법입니다. 먼저 이탤릭체 텍스트를 만들려면 별표 하나 또는 밑줄 하나를 사용하고, 볼드체(굵은 텍스트)를 만들려면 두 개를 사용합니다.
*text1* or _text_
**text2** or __text__
**text2** or __text__
아래와 같이 출력되어 나타나게 됩니다.
text1
text2
리스트 목록 만들기
이번에는 리스트 목록을 만드는 방법입니다. 아래와 같이 숫자가 있거나 없는 목록을 만들 수 있으며 대시, 더하기 기호, 또는 별표를 사용하여 순서 없는 목록을 만들거나 숫자를 사용하여 목록을 만들 수도 있습니다.
@ 순서가 없는 목록
- 항목 1
- 항목 2
- 항목 3
- 항목 2
- 항목 3
@ 순서가 있는 목록
1. 항목 1
2. 항목 2
3. 항목 3
2. 항목 2
3. 항목 3
참고로 위에서 사용한 숫자를 변경해도 나타는 화면의 숫자는 1, 2, 3 순서대로 표기됩니다.
링크 생성하기
이번에는 Markdown에서 링크 텍스트를 만드는 방법입니다. 대상이 되는 텍스트를 대괄호( `[ ]` )로 감싼 다음 URL을 괄호( `( )` )로 감싸서 하이퍼링크를 만듭니다.
[Webisfree](https://www.webisfree.com)
이제 문서의 텍스트를 클릭하면 해당 링크로 이동이 가능하게 됩니다.
이미지 사용하는 방법
이미지 역시 추가하는 것도 가능합니다. 이 경우 링크를 만드는 것과 유사하며 링크 문법 앞에 느낌표를 추가하기만 하면 됩니다.
테이블 서식 사용하는 방법
Markdown에서는 테이블 서식도 사용이 가능합니다. 이 경우 `|` 파이프라인 기호를 사용하합니다. 여기서 테이블 헤더 본문을 구분하기 위해서 테이블 헤더와 본문 사이에는 셀 구분자가 포함된 행이 있어야 합니다. 이 행에서는 각 셀 구분자를 - (대시) 기호와 함께 사용하여 헤더와 본문을 구분합니다. 아래는 간단한 테이블 서식 예제입니다.
| 헤더1 | 헤더2 | 헤더3 |
|-------|-------|-------|
| 셀1 | 셀2 | 셀3 |
| 셀4 | 셀5 | 셀6 |
|-------|-------|-------|
| 셀1 | 셀2 | 셀3 |
| 셀4 | 셀5 | 셀6 |
코드 블록 만들기
코드 블록 역시 만들 수 있습니다. 이 때는 백틱 기호를 사용하여 코드 블록을 표시하는 데 아래에서 좀 더 자세히 알아봅니다.
마크다운으로 코드 블록 사용하기
코드 블록은 인라인과 블록 방식 두 가지가 사용되며 인라인 코드의 경우 코드 양쪽에 하나의 백틱을 사용합니다.
1. 인라인 코드 만들기
인라인 코드는 아래와 같이 하나의 백틱을 사용하여 만들 수 있습니다.
`inline code block`
아래와 같이 나타나게 됩니다.
inline code block
2. 여러 줄의 코드 블록 만들기
코드 블록을 위해서는 세 개의 백틱(``)을 사용합니다.
```
Code 1
Code 2
Code 3
```
Code 1
Code 2
Code 3
```
@ 특정 언어의 코드 블록 만들기
세 개의 백틱을 사용하여 여러 줄의 코드 블록을 만드는 경우 첫 번째 백틱 집합 바로 다음에 언어를 지정하여 구문 강조를 추가할 수도 있습니다(단, 사용하는 플랫폼에서 지원하는 경우). 아래에서는 Python 언어를 사용하는 언어의 코드 블록을 만들어봅니다.
```python
def hello_world():
print("Hello, world!")
```
def hello_world():
print("Hello, world!")
```
위 예제는 Python 언어의 Markdown 코드 블록입니다. 만약 해당 플랫폼에서 지원하는 경우 해당 언어의 서식 및 강조 표시가 함께 사용되어 나타나게 됩니다.
마치면서
여기까지 Markdown 언어에 대하여 간략하게 알아보았습니다. Markdown은 옵시디언 등 요즘 인기 있는 노트앱 등에서도 넓리 사용되며 쉽고 빠르게 서식을 지정할 수 있는 장점 때문에 넓리 사랑받는 언어입니다. 쉽고 빠른 서식 사용을 위해서 Markdown을 알아두면 매우 편리합니다.
아래의 글도 찾고 계시지 않나요?