안녕하세요! 새롭게 기술 블로그를 시작한 초리입니다😄
첫 번째 글로 어떤 내용을 쓸까 고민을 하다가 블로그에 마크다운 문법을 한번 싹 정리해두자는 생각이 들었습니다.
저는 주로 옵시디언을 쓸 때 마크다운을 사용하곤 하는데요. 특정 문법이 기억나지 않아서 그때그때 찾아보기도 하고 마크다운을 온전히 활용하고 있지 못하고 있다는 생각이 들었습니다.
그래서 이 참에 마크다운 문법에 대해 제대로 알아보려 합니다!
들어가기 전에
우선 마크다운에 대해 간단히 알아봅시다👏
마크다운(Markdown)은 몇 가지 문법을 적용해서 쉽게 문서를 작성할 수 있는 언어입니다. 마크다운으로 작성한 문서는 .md라는 확장자로 저장돼요.
마크다운으로 작성된 문서는 HTML로 변환되고 CSS가 적용됩니다. 그렇기 때문에 같은 문법이어도 보여지는지 곳의 CSS 설정에 따라 다르게 표현될 수 있어요.
본격적으로 문법을 알아보자!
줄바꿈
마크다운에서 줄바꿈을 하려면 문장 끝에 빈칸 두 개가 필요합니다. 즉, 스페이스 바를 두 번 누르면 됩니다. 다만 어디서 마크다운을 출력하는지에 따라 엔터 한 번으로 줄바꿈이 되는 경우도 있어요. 대표적인 예시로 velog는 엔터로 줄바꿈이 됩니다.
제목
html에서 제목을 <h1>부터 <h6>로 나타낼 수 있듯이 마크다운에서는 #의 개수로 제목을 구분할 수 있어요.
마크다운
# H1입니다.## H2입니다.### H3입니다.#### H4입니다.##### H5입니다.###### H6입니다.
출력 결과
H1입니다.
H2입니다.
H3입니다.
H4입니다.
H5입니다.
H6입니다.
수평선
문단 사이를 선으로 구분하고 싶다면 ---, ___, *** 중에 선택해서 사용하면 됩니다. 저는 ---이 편해서 이것을 주로 사용합니다.
마크다운
---
출력 결과
기울여 쓰기(이탤릭체)
문장이나 단어를 강조하기 위해 이탤릭체가 필요하면 강조할 부분을 *로 감싸줍니다. 또는 _를 사용할 수 있습니다.
마크다운
_italic_은 * 또는 _를 사용합니다.
출력 결과
italic은 이렇게 쓸 수 있습니다.
굵게 쓰기(볼드)
또 다른 강조 방법으로 볼드가 필요하면 강조할 부분을 **로 감싸줍니다. 또는 __를 사용할 수 있습니다. 기울여 쓰기와 굵게 쓰기를 동시에 적용할 수도 있습니다.
마크다운
**bold**는 ** 또는 __를 사용합니다.**_기울여 쓰기, 굻게 쓰기 모두 적용_**
출력 결과
bold는 ** 또는 __를 사용합니다.
기울여 쓰기, 굵게 쓰기 모두 적용
취소선
작성한 내용 중 취소선을 긋고 싶다면 해당 내용을 ~~로 감싸주세요.
마크다운
~~취소선~~은 ~~를 사용합니다.
출력 결과
취소선은 ~~를 사용합니다.
순서가 있는 목록
순서가 지정된 목록을 작성할 때는 숫자와 온점을 쓰고 띄우면 됩니다.
마크다운
1. 첫 번째2. 두 번째3. 세 번째
출력 결과
- 첫 번째
- 두 번째
- 세 번째
순서가 없는 목록
순서가 없는 목록을 나타내려면 - 또는 *를 한 번 사용하고 띄우면 됩니다.
마크다운
- 딸기- 키위
출력 결과
- 딸기
- 키위
체크 박스
체크 리스트를 만들려면 체크 박스가 필요하죠! - [ ]는 표시되지 않은 체크 박스를, - [x]는 표시된 체크 박스를 만듭니다.
(velog에는 표시된 체크 박스가 제대로 출력되지 않네요🥲)
마크다운
- [ ] 완료하지 않은 항목- [x] 완료한 항목
출력 결과
- 완료하지 않은 항목
- 완료한 항목
인용 블록
인용문을 작성하려면 >로 인용 블록을 만들고 그 안에 내용을 작성하면 됩니다. >를 여러 개 써서 인용 블록 안에 또 인용 블록을 만들 수 있습니다. 그리고 인용문 안에서도 #으로 제목을 설정하거나 -로 리스트를 만드는 등 마크다운 문법을 또 적용할 수 있어요.
마크다운
> 인용할 내용
출력 결과
인용할 내용
텍스트 상자
백틱 기호로 문장이나 단어를 감싸서 텍스트 상자를 생성할 수 있습니다.
마크다운
`텍스트 상자`
출력 결과
텍스트 상자
코드 블록
프로그래밍 코드를 마크다운에 적고 싶을 때도 있을텐데요. 코드의 앞과 뒤를 백틱 기호 3개 또는 ~~~로 감싸주면 됩니다. 앞에 오는 3개의 백틱 또는 틸트 다음에 어떤 프로그래밍 언어를 작성한 것인지 적으면 언어의 문법에 맞춰서 하이라이트 표시가 됩니다.
마크다운
``` Python
print("Hello, world!")
```
출력 결과
print("Hello, world!")
특수 문자 출력하기
마크다운에서 문법을 적용할 때 사용하는 특수 문자를 문자로써 나타내고 싶다면 특수 문자 앞에 \를 쓰면 됩니다.
마크다운
\_기울여 쓰기가 아니에요.\_
출력 결과
_기울여 쓰기가 아니에요._
외부 링크
특정 웹페이지로 이동하는 링크를 생성하려면 []() 형태를 사용하면 됩니다. 대괄호 안에는 링크의 이름을, 소괄호 안에는 URL을 적습니다. 링크의 이름과 URL을 분리해서도 사용할 수 있습니다. 링크의 툴팁을 표시하려면 URL 다음에 표시할 내용을 "로 감싸서 작성합니다.
(velog는 링크의 툴팁 표시가 안되네요.)
마크다운
[구글](https://google.com)[네이버](https://www.naver.com "네이버로 이동")[네이트][네이트주소][다음]
[네이트주소]: https://www.nate.com[다음]: https://www.daum.net
출력 결과
내부 링크
웹페이지 내에서 특정 제목으로 이동하는 방법입니다. 외부 링크와 마찬가지로 []() 형태를 쓰면 됩니다. 대괄호 안에는 링크의 이름을, 소괄호 안에는 #과 이동할 제목의 이름을 작성합니다. 소괄호 안에 들어가는 내용에 띄어쓰기가 있다면 -로 연결하고 영어는 모두 소문자로 써야 합니다.
마크다운
[순서가 있는 목록 파트로 이동](#순서가-있는-목록)
출력 결과
이미지
이미지를 삽입하려면 ![]()를 사용합니다. 링크를 쓰는 문법과 비슷하지만 앞에 느낌표가 붙었습니다. 대괄호 안에는 대체 텍스트를, 소괄호 안에는 이미지의 URL을 작성해주세요. 대체 텍스트와 이미지 URL을 분리해서 작성할 수도 있습니다. 툴팁에 표시할 내용이 있다면 URL 다음에 표시할 내용을 "로 감싸서 작성합니다.
(외부 링크와 마찬가지로 velog에서 툴팁은 표시되지 않네요.)
외부 링크 문법을 같이 사용하면 이미지를 클릭했을 때 특정 웹페이지로 이동할 수 있어요. 외부 링크 문법에서 대괄호 안에 이미지 문법을 사용하면 됩니다.
마크다운
![서울 야경 사진][](https://google.com)
[서울 아경 사진]: https://cdn.pixabay.com/photo/2022/11/27/11/23/building-7619503_640.jpg "롯데월드타워가 보이는 서울 아경"
출력 결과
표
---과 |를 이용해서 표를 만들 수 있습니다. 행을 구분할 때는 ---를 사용하고 열을 구분할 때는 |을 사용합니다. 셀의 내용을 정렬할 수도 있는데요. 정렬하려면 :를 사용하면 됩니다.
마크다운
왼쪽 정렬|가운데 정렬|오른쪽 정렬:---|:---:|---:1|2|34|5|67|8|9\*|0|#
출력 결과
왼쪽 정렬 가운데 정렬 오른쪽 정렬 1 2 3 4 5 6 7 8 9 * 0 #
마무리하며
이렇게 마크다운 문법을 정리해보았습니다. 마크다운에서 같은 결과를 출력하는 문법이더라도 사용할 수 있는 특수 문자가 여러 개이거나 사용하는 방식이 다양한 경우가 있는데요. 직접 써보고 본인에게 가장 편리한 것을 선택해서 사용하면 좋을 것 같아요 😄
그리고 처음부터 마크다운 문법을 다 외우고 나서 쓰려고 하는 것보다는 제목이나 굵게 쓰기, 목록과 같이 글을 쓰는데 자주 쓰이는 것부터 사용해보면서 점차 마크다운 문법에 익숙해지는 것을 추천드립니다! 마치 우리가 프로그래밍 언어에 대해 기초부터 어려운 내용까지 꼼꼼히 공부한 후 프로젝트를 시작하는 것보다 어느 정도 언어를 이해하고 쓸 줄 안다면 프로젝트를 진행해보는 것이 좋은 것처럼요. 저도 꾸준히 마크다운으로 블로그 글을 작성하며 더더욱 익숙해지려 합니다 😊
이번 글은 여기까지입니다. 긴 글 읽어주셔서 고맙습니다!
