![[Blog] Markdown 문법 총정리](/_next/image?url=https%3A%2F%2Fblog.huns.site%2Fimgs%2Fthumbnails%2Fblog%2Fposts%2Fpersonal%2Fjekyll-blog-dev.png&w=1200&q=75)
TOC
마크다운이란?
- 텍스트 기반의 경량 마크업(markup) 언어
- markup을 좀더 쉽고 간단하게 사용하기 위해 만들어짐
.md확장자를 가지는 파일을 작성
Heading
글의 제목을 설정한다. 이를 Heading이라고 한다.
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>
[결과]
제목 1
제목 2
제목 3
제목 4
제목 5
제목 6
html은 위와 같이 표시하면 각 제목이 나오는데, markdown은 아래처럼 heading을 하면 된다.
# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6
[결과]
제목 1
제목 2
제목 3
제목 4
제목 5
제목 6
minimal-mistakes에서는 heading의 sass 속성을 따로 설정하기 때문에 이 블로그에서는 브라우저에서 지원하는 기본 HTML에서의 폰트 사이즈나 색상, 구분선 등과 조금 달라보일 수 있다.
목록
Style 1. -, +, * 사용
- VSC의 기본 정렬 때문에 자꾸 바뀌지만, 위의 3가지 모두 사용해도 된다.
- 혼용 해도 된다.
tab을 이용해 하위 목록을 구분한다.
- 목록 1
- 목록 1.1
- 목록 1.2
- 목록 1.3
- 목록 2
- 목록 2.1
- 목록 2.2
- 목록 2.3
* 목록 3
- 목록 3.1
- 목록 3.2
- 목록 3.3
[결과]
-
목록 1
-
목록 1.1
-
목록 1.2
- 목록 1.3
-
-
목록 2
- 목록 2.1
- 목록 2.2
- 목록 2.3
- 목록 3
- 목록 3.1
- 목록 3.2
- 목록 3.3
style 2. 숫자 사용
숫자를 쓸 수도 있다.
1. 목록 1
2. 목록 2
3. 목록 3
[결과]
- 목록 1
- 목록 2
- 목록 3
주의📣 1. 2. 등 숫자로 목록을 지정하는 경우 'enter'로 행이 띄워지면 다시 1로 시작한다.
문장 꾸미기
_기울인 문장_
**굵은 문장**
**_기울인 굵은 문장_**
~~취소선~~
[결과]
기울인 문장
굵은 문장
기울인 굵은 문장
취소선
강조 및 코드 표시하기
Inline
- 물결표시 아래에 있는 '`'로 감싸주어 사용한다.
- inline display여서 문장 사이에 써도 된다.
- 이렇게 `중요한 내용`을 강조할 때 쓰거나
- `print("hello world")`등의 코드를 표시할 때 쓴다.
[결과]
- 이렇게
중요한 내용을 강조할 때 쓰거나 print("hello world")등의 코드를 표시할 때 쓴다.
Block
- 역시 물결 표시 아래의 '`'를 사용한다. Block은 3번 반복해 입력한다.
- '```'으로 감싸서 원하는 내용을 넣는다.
- 블럭의 시작 옆에 원하는 언어(ex. python)를 적으면 해당 언어의 표시 형식으로 하이라이팅이 된다.
- 아래처럼 웹에서 Block 기호 자체를 표시하고 싶다면 '````' 으로 내용을 감싸면 된다.
```python
a = 'hello world'
print(a)
```
[결과]
a = 'hello world'
print(a)
링크
단순 url 링크
`<https://google.com>`
[결과] <https://google.com>
url 숨기고 원하는 문장/단어로 표시
[구글로 이동](https://google.com)
[결과] 구글로 이동
이미지 삽입
예시로 git의 로고를 삽입해보자.
> 간단한 이미지 코드
> 
> 크기 조절이 가능한 이미지 코드
> <img src="https://git-scm.com/images/logo@2x.png" alt="Git로고" width="50%" height="50%"/>
> 크기 조절과 위치까지 지정하는 이미지 코드
<p align="center">
<img src="https://git-scm.com/images/logo@2x.png" alt="Git로고" width="50%" height="50%"/>
</p>
[결과]
간단한 이미지 코드
크기 조절이 가능한 이미지 코드
크기 조절과 위치까지 지정하는 이미지 코드
인용문 작성
> 표시를 통해 작성한다.
> 인용문 1
>> 인용문 1의 인용문 2
>>> 인용문 1의 인용문 2의 인용문3
[결과]
인용문 1
인용문 1의 인용문 2
인용문 1의 인용문 2의 인용문3
표 작성
|와|---|로 구분해서 만들면 된다.- VSC의 자동 편집으로
-의 개수가 많아졌지만, 3개만 있어도 된다. - 정렬 방법
|:---|: 좌측 정렬|---:|: 우측 정렬|:---:|: 중앙 정렬
| 동물 | 종류 | 다리개수 |
| ------ | ------ | -------- |
| 사자 | 포유류 | 4개 |
| 고등어 | 어류 | 0개 |
| 동물 | 종류 | 다리개수 |
| :----- | :----: | -------: |
| 사자 | 포유류 | 4개 |
| 고등어 | 어류 | 0개 |
[결과]
| 동물 | 종류 | 다리개수 |
|---|---|---|
| 사자 | 포유류 | 4개 |
| 고등어 | 어류 | 0개 |
| 동물 | 종류 | 다리개수 |
|---|---|---|
| 사자 | 포유류 | 4개 |
| 고등어 | 어류 | 0개 |
주석
<!-- -->을 이용한다. HTML에서 주석 처리하는 방식이다.- 여러 행을 주석 처리할 수도 있다.
<!-- 주석 처리할 내용 -->
<!--
주석 처리할 내용들
주석 처리할 내용들
주석 처리할 내용들
주석 처리할 내용들
-->
주석 처리 안 할 내용
기타
행간 띄우기 : <br />
원하는대로 줄 간격을 설정할 수 있다.
안녕하세요
<br />
<br />
안녕하세요
[결과]
안녕하세요
안녕하세요
줄 바꾸기 : ' ' * 2
- 줄바꿈을 원하는 문장 끝에서 space를 2번 누른다.
- markdown은 enter 한 번은 줄바꿈으로 처리하지 않는다.
- enter 두번은 행간격이 생기기 때문에 행을 내리면서 띄우지는 않는 상황에서 사용한다.
줄바꿈을' '' '
하자!
[결과]
줄바꿈을
하자!
가로선
<hr />
---
