마크다운(Markdown) 문법 총 정리
카테고리: Blog
🔔 깃허브 ansohxxn님의 자료입니다. https://ansohxxn.github.io/blog/font/
🔔 jekyll 블로그에 포스팅을 하기 위한 마크 문법 익히기
줄바꿈
1️⃣ 줄바꿈을 하고 싶다면 문장 뒤에 스페이스바를 두번 + Enter 해준다.
안녕하세요.
저는 식빵맘 이라고 합니다.
안녕하세요.
저는 식빵맘 이라고 합니다.
2️⃣ <br> 또한 줄바꿈을 해주는 HTML 태그이다.
안녕하세요. <br> 저는 식빵맘 이라고 합니다.
안녕하세요.
저는 식빵맘 이라고 합니다.
문단 나누기
한 줄의 공백을 두어 작성 하면 된다. (총 두 줄 띄우는 셈)
안녕하세요.
저는 식빵맘이라고 합니다.
안녕하세요.
저는 식빵맘이라고 합니다.
중첩된 구조
아래와 같이 중첩된 구조를 만드려면 두번째 줄을 스페이스바 2번 눌러 띄어준 후 작성한다. 세번 중첩된 줄을 만드려면 스페이스바 4번.
- hi
- hello
- 안녕
- hi
- hello
- 안녕
- hello
마크다운 문법을 그대로 보여주고 싶을 때
마크다운 문법 앞에 \를 붙여준다.
\<u>안녕</u>
<u>안녕</u>
원래 같으면 밑줄 그어진 형태로 안녕으로 보일텐데 \를 앞에 붙여주어 문법 그대로 <u>가 보여진다.
Header
글의 제목이 된다. 각 제목마다 permalink가 있는 것이 특징! # ~ ###### 로 제목 크기에 따라 h1 ~ h6을 나타낸다.
# h1
## h2
### h3
#### h4
##### h5
###### h6
h1
h2
h3
h4
h5
h6
h1와 h2는 아래와 같이 표현할 수도 있다.
h1
===
h2
---
h2는 아래에 구분선이 그어지고 있는데 minimal-mistakes 테마의 scss 스타일 시트 파일에서 그렇게 정의하고 있다. 원래도 이런가..? (나는 구분선 그어지는게 마음에 들어서 고치지 않았다. 맘에 들어서 h2를 적극 사용 중)
텍스트
강조
**강조된 텍스트입니다**
강조된 텍스트입니다
기울임
*기울여진 텍스트입니다*
***굵고 기울여진 텍스트입니다***
기울여진 텍스트입니다 굵고 기울여진 텍스트입니다
취소선
~~취소된 텍스트입니다~~
취소된 텍스트입니다
밑줄
<u>밑줄 있는 텍스트입니다</u>
밑줄 있는 텍스트입니다
글씨 색
<span style="color:yellow">노란 글씨입니다.</span>
노란 글씨입니다.
응용 : 다 적용해보자
~~***<u>텍스트</u>***~~
텍스트
코드 블록
inline 코드 블록
이런게 바로 `인라인 코드`입니다.
이런게 바로 인라인 코드입니다.
코드 블록
```언어 이름(소문자)
이 부분에 코드 적기
```
언어 이름까지 적어주면 예약어, 변수 등등에 색깔 하이라이팅이 들어간다. 예를 들어
```c++
#include <iostream>
using namespace std;
int main()
{
cout « “Hello World !” « endl; // 안녕!
}
```
#include <iostream>
using namespace std;
int main()
{
cout << "Hello World !" << endl; // 안녕!
}
스페이스바 4번로도 표현할 수 있다
이번주 주말에 뭐 해먹을지 정해놓자.
이번주 주말에 뭐 해먹을지 정해놓자.
링크
링크만 있는 inline 링크
<링크주소>
<https://www.google.com>
설명 있는 inline 링크
[링크설명](링크주소)
[구글 홈페이지](https://www.google.com)
동일 파일 내에서의 문단(헤더) 이동 링크
[설명어](문단의 주소)
문단의 주소 따는 방법 theorydb님 블로그 참고
- 헤더 제목 문자열을 복사하고
(문단의 주소)에 복사한다. - 특수 문자를 제거한다.
- 공백을
-로 변경한다. - 대문자는 소문자로 변경한다. 예시) “#Markdown! 장점” > “#markdown-장점”
[마크다운 문법을 그대로 보여주고 싶을 때](#마크다운-문법을-그대로-보여주고-싶을-때)
그림 링크 삽입
로컬 파일 경로도 가능하다.
사진 출처 : 우리집 막내 식빵이
그림 자체에 링크 걸기
](이동하려는 링크 주소)
인용문
>로 표현할 수 있다. >> 두개 쓰면 중첩된 인용문.
중첩시킬땐 앞에 스페이스바 2번 !
> 이건 인용문이에요.
>> 이건 인용문 속 인용문이에요.
이건 인용문이에요.
이건 인용문 속 인용문이에요.
<cite> --- 태그와 {{: .small}}를 함께 써서 인용문 출처도 남겨보자
<cite>Steve Jobs</cite> --- Apple Worldwide Developers' Conference, 1997
{: .small}
Steve Jobs — Apple Worldwide Developers’ Conference, 1997
리스트
unordered list
- 순서가
* 없는
+ 목록
* 순서가
- 없어용
- 순서가
- 없는
- 목록
- 순서가
- 없는
- 없어용
ordered list
1. 순서가
2. 있는
1. 목록
- 하나
- 둘
2. 목록
- 하나
- 둘
3. 목록
- 순서가
- 있는
- 목록
- 하나
- 둘
- 목록
- 하나
- 둘
- 목록
- 목록
check list
- [ ] 체크 안됨
- [X] 체크 됨
- 체크 안됨
- 체크 됨
구분선
***와 ---로 나타낼 수 있다.
***
---
테이블
|와 - (3개 이상)의 조합으로 테이블을 만들 수 있다.
- 정렬
- 왼쪽 정렬 |:—|
- 오른쪽 정렬 |—:|
- 가운데 정렬 |:—:|
|**제목**|레이팅|감상평|
|:---:|---:|---|
|복수는 나의 것|⭐⭐⭐⭐⭐|내가|
|올드 보이|⭐⭐⭐⭐⭐|좋아하는|
|친절한 금자씨|⭐⭐⭐⭐⭐|박찬욱 영화!|
| 제목 | 레이팅 | 감상평 |
|---|---|---|
| 화양 연화 | ⭐⭐⭐⭐⭐ | 내가 |
| 중경삼림 | ⭐⭐⭐⭐⭐ | 좋아하는 |
| 해피투게더 | ⭐⭐⭐⭐⭐ | 왕가위 영화! |
토글 리스트 (접기/펼치기)
나는 Notion을 사용했었기 때문에 토글 리스트란 이름이 더 익숙하다. 마크다운에선 지원하지 않고 HTML의 details 태그로 사용 가능하다. div markdown=”1” 은 jekyll에서 html사이에 markdown을 인식 하기 위한 코드이다. 참고 블로그
<details>
<summary>여기를 눌러주세요</summary>
<div markdown="1">
😎숨겨진 내용😎
</div>
</details>
여기를 눌러주세요
😎숨겨진 내용😎
버튼
링크 부분을 그냥 #로 두면 페이지 맨 위로 이동하네… 이를 이용해서 맨 위로 이동하기 버튼을 한번 만들어봐야 겠다.
<a href="#" class="btn--success">Success Button</a>
[Default Button](#){: .btn .btn--primary }
마지막으로 꿀팁!
밑 줄을 치는 <u></u> 라든가 토글 리스트라든가 코드 블록이라든가 이렇게 좀 귀찮은 문법들은 항상 수동으로 일일이 치기엔 시간도 걸리고 귀찮을 것이다. 나는 Visual Studio Code 로 블로그 포스팅을 하고 있는데 이러한 html, markdown 문법 코드과 자주 사용하는 문법들을 단축어로 등록하여 조금 귀찮음을 덜며 포스팅을 하고 있다.
이에 대한 방법은 [VS Code] 커스텀 자동완성, Snippets 에 포스팅 해두었으니 비주얼 스튜디오 코드를 사용하시는 분들이라면 도움이 되실 것 같다.
🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄
댓글 남기기