마크다운(Markdown) 문법
티스토리에서 깃허브 블로그로 바꾸면서 마크다운에 대해 처음 접하게 되었다. 원할한 블로그 정리를 위해 마크다운 문법에 대해 배울 필요성이 있다고 생각하여 이렇게 정리를 진행 중이다.
reference: https://ansohxxn.github.io/blog/markdown/
줄바꿈
줄바꿈을 하는 방법은 다음과 같이 2가지가 있다.
- 스페이스바를 두번+엔터 를 해준다.
- <br> 또한 줄바꿈을 해주는 HTML 태그이다.
문단 나누기
한 줄의 공백을 두고 작성하면 된다.
중첩된 구조
중첩된 구조를 만들기 위해서는 스페이스바를 2번 눌러 작성한다. 예시는 다음과 같다.
- 첫번째 구조 (스페이스바 2번)
- 두번째 구조(스페이스바 4번)
- 세번째 구조(스페이스바 6번)
- 두번째 구조(스페이스바 4번)
마크다운 문법을 그대로 보여줄 때
마크다운 문법 앞에 \ 를 붙여준다.
헤더
헤더에는 총 6 단계가 있고 각 헤더 크기의 차이는 다음과 같다.
h1
h2
h3
h4
h5
h6
텍스트
강조
텍스트를 강조하기 위해서는 텍스트 앞 뒤에 ** 를 붙여 넣는다.
기울임
텍스트를 기울이기 위해서는 텍스트 앞 뒤에 * 를 붙여 넣는다.
취소선
텍스트를 취소하기 위해서는 텍스트 앞 뒤에 ~~ 를 붙여 넣는다.
밑줄
텍스트에 밑줄을 치기 위해서는 텍스트 앞에는 <u>, 뒤에는 </u> 를 붙여 넣는다.
글씨색
글씨 앞에는 <span style=”color:넣고 싶은 색”>, 뒤에는 </span> 을 붙여 넣는다.
코드 블록
``` 이 문자가 코드 블록의 시작을 알리는 문자이나 맥북 키보드에서 보이지가 않는다. 혹시라도 이 문자를 맥북에서 치는 방법을 아는 분 있으면 연락 부탁드립니다!! (9/21 수정: esc버튼 아래 위치한 원화키를 누르면 된다! )
코드블록은 다음과 같은 방법으로 적는다.
#```언어이름(소문자)
#이 부분에 코드적기
#```
예를 들어 언어 이름을 파이썬으로 설정하면
print("hello world")
링크
설명이 없는 링크
링크만 붙여 넣고 싶다면 링크를 <> 안에 붙여 넣는다.
설명이 있는 링크
링크 대신 설명이 나타나게 하기 위해서는 [링크설명](링크주소) 예시로 네이버 링크를 아래에 첨부해 보았다.
그림 링크 삽입
![이미지설명](이미지주소)
그림 자체에 링크 걸기
![이미지설명](이미지주소)(이동하려는 링크 주소)
인용문
> 으로 표현한다. 중첩된 인용문을 위해서는 > 을 쓴다. 예시는 다음과 같다.
인용문1
인용문 2
<cite>— 태그를 써서 인용문 출저를 남길 수도 있다. 예시는 다음과 같다.
<cite>공부하는 식빵맘</cite> --- 마크다운 문법 총 정리
공부하는 식빵맘 — 마크다운 문법 총 정리
리스트
순서가 없는 리스트
- 이런 모양1
* 이런 모양2
+ 이런 모양3
- 이런 모양1
- 이런 모양2
- 이런 모양3
- 이런 모양2
순서가 있는 리스트
1. 첫번째
2. 두번째
3. 세번째
1. 세번째의 첫번째
- 세번째의 첫번째의 첫번째
- 세번째의 첫번째의 두번째
4. 네번째
- 첫번째
- 두번째
- 세번째
- 세번째의 첫번째
- 세번째의 첫번째의 첫번째
- 세번째의 첫번째의 두번째
- 세번째의 첫번째
- 네번째
체크 리스트
- [ ] 체크 안됨
- [X] 체크 됨
- 체크 안됨
- 체크 됨
구분선
*** 와 -– 으로 표현할 수 있다.
테이블
| 와 - 의 조합으로 테이블을 만들 수 있다.
|내가 할줄 아는 언어|실력(1~5)|더 배울 의향이 있는지?!
|:---:|---:|---|
|파이썬|3|yes|
|C#|2|no|
|postgreSQL|3|yes|
내가 할줄 아는 언어 | 실력(1~5) | 더 배울 의향이 있는지?! |
---|---|---|
파이썬 | 3 | yes |
C# | 2 | no |
postgreSQL | 3 | yes |
Notice
notice 기능은 주의 사항, 공지 같은 것을 강조하기에 좋다.
하는 방법은 문단의 바로 다음줄에 {: .notice}만 붙여 주기만 하면 된다. 이때, notice 뒤에 minimal mistakes에서 지정한 notice의 종류 이름을 붙여줄 수도 있다.
**<u>참고 사항</u>** 이 블로그는 매우 유익합니다!
{: .notice--primary}
참고 사항 이 블로그는 매우 유익합니다!
일단 이 정도 문법이면 블로그를 작성하는데 문제는 없을 것 같다. 만약 더 필요한 문법이 생기면 더 추가해서 적도록 하겠다.
Comments