markdown 언어
markdown 언어
[Archive] 이 글은 2021년에 다른 플랫폼에서 작성한 글을 이전한 것입니다.
내용 중 일부는 현재 기준과 맞지 않을 수 있습니다.
markdown언어 특징
markdown은 텍스트 기반의 마크업 언어.
README 파일은 관례적으로 markdown으로 작성되는 경우가 많다.
- 텍스트 기반으로 작성되므로 파일 사이즈가 작다.
- 텍스트 기반이기 때문에 diff가 명확하고, 버전 관리에 유리하다.
markdown 문법(기본)
줄바꿈
Markdown에서 Enter는 단락 구분으로 인식된다.
1
2
3
4
5
6
7
8
단일 enter를 통한 줄바꿈.
단일 enter를 통한 줄바꿈.
공백 두 칸을 사용하는 줄바꿈
공백 두 칸을 사용하는 줄바꿈
<br />태그를 사용하는 줄바꿈<br/>
<br />태그를 사용하는 줄바꿈
단일 enter를 통한 줄바꿈. 단일 enter를 통한 줄바꿈.
공백 두 칸을 사용하는 줄바꿈
공백 두 칸을 사용하는 줄바꿈
<br />태그를 사용하는 줄바꿈
<br />태그를 사용하는 줄바꿈
강조
1
2
3
4
5
*single asterisks*
**double asterisks**
_single underscores_
__double underscores__
~~cancelline~~
single asterisks
double asterisks
single underscores
double underscores
cancelline
인용
1
2
3
> 괴물과 싸우는 사람은 괴물이 되지 않도록 조심해야 한다.
>> 한낱 빛 따위는 어둠의 깊이를 알 수 없다.
>>> 신은 죽었다.
괴물과 싸우는 사람은 괴물이 되지 않도록 조심해야 한다.
한낱 빛 따위는 어둠의 깊이를 알 수 없다.
신은 죽었다.
순서 / 비순서 리스트
1
2
3
4
5
6
7
8
9
10
11
12
* 우주
* 지구
* 한국
* 서울
+ 우주
+ 지구
+ 한국
+ 서울
- 우주
- 지구
- 한국
- 서울
- 우주
- 지구
- 한국
- 서울
- 한국
- 지구
- 우주
- 지구
- 한국
- 서울
- 한국
- 지구
- 우주
- 지구
- 한국
- 서울
- 한국
- 지구
코드 블럭
- 단순 코드 블럭
1
2
3
```
" ``` "을 이용하여 코드 블럭을 생성합니다.
```
1
" ``` "을 이용하여 코드 블럭을 생성합니다.
- 언어별 문법 하이라이팅
1
2
3
4
5
```cpp
const solution = (n) => {
return parseInt([...n.toString(3)].reverse().join(""), 3);
};
```
1
2
3
const solution = (n) => {
return parseInt([...n.toString(3)].reverse().join(""), 3);
};
1
2
3
4
5
```javascript
const solution = (n) => {
return parseInt([...n.toString(3)].reverse().join(""), 3);
};
```
1
2
3
const solution = (n) => {
return parseInt([...n.toString(3)].reverse().join(""), 3);
};
- 인라인 코드
1
`inline code`
inline code
수평선
플랫폼에 따라 내부 링크 규칙이 다를 수 있으며, 일반적으로 소문자 변환 및 공백을 ‘-‘로 치환한다.
1
2
3
4
5
* * *
***
******
---
---------------------------------------
링크
1
2
3
간접표기법 [Title](link)
ex) [Google로 이동하기](https://google.com)
1
2
3
직접표기법 <link>
ex) <https://naver.com>
1
2
3
4
내부 문서 링크 [Title](#link-somewhere)
ex) [바로가기](#markdown언어-특징)
주의) 영어 대문자 작성 불가능, 띄어쓰기는 '-'로 표시.
각주
1
2
3
이 문장은 각주를 포함한다.[^1]
[^1]: 각주 내용은 이렇게 작성됩니다.
이 문장은 각주를 포함한다.1
이미지 삽입
- 기본 이미지 삽입
1
- 크기조정 및 정렬이 필요할 경우
표준을 유지하면서 스타일을 제어해야 한다면 HTML 태그를 직접 사용하는 방식이 가장 보편적이다.
※ 아래 예시는 HTML 기준의 일반적인 사용법이며,
블로그 테마나 CSS 설정에 따라 실제 렌더링 결과는 달라질 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
<img
src="/assets/img/pingu.jpeg"
alt="핑구"
width="100"
/>
<img
src="/assets/img/pingu.jpeg"
alt="핑구"
width="100"
style="float: left;"
/>
(블로그 테마, CSS 설정때문에 이미지가 제대로 표시되지 않음)
표 삽입
1
2
3
:---- //좌측정렬
:----: //중앙정렬
----: //우측정렬
1
2
3
4
| 항목 | 가격 | 개수 |
|:---:|----:|:----|
| 라면 | 800원 | 10개 |
| 과자 | 900원 | 20개 |
| 항목 | 가격 | 개수 |
|---|---|---|
| 라면 | 800원 | 10개 |
| 과자 | 900원 | 20개 |
글머리
1
2
3
4
5
6
# 이상민의 블로그입니다.
## 이상민의 블로그입니다.
### 이상민의 블로그입니다.
#### 이상민의 블로그입니다.
##### 이상민의 블로그입니다.
###### 이상민의 블로그입니다.
이상민의 블로그입니다.
이상민의 블로그입니다.
이상민의 블로그입니다.
이상민의 블로그입니다.
이상민의 블로그입니다.
이상민의 블로그입니다.
각주 내용은 이렇게 작성됩니다. ↩︎
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.