[Markdown] 1. 기본 문법
Markdown 기본 문법 정리
깃허브 블로그에서 글을 마크다운 형식으로 작성한다. 이에 따라 마크다운 기본 문법에 대해 정리해보려고 한다. {:.prompt-tip}
Markdown(마크다운)이란?
마크다운은 간단한 문법으로 텍스트 서식을 지정할 수 있는 문서 작성용 마크업 언어이다. 주로 개발자들이 README 파일, 블로그 글, 기술 문서, 댓글 등에 사용하며, HTML보다 훨씬 쉽고 가독성이 좋다는 장점이 있다.
마크다운 기본 문법
1) 문단 제목
마크다운의 제목은 ‘#’기호를 사용하며, ‘#’의 개수에 따라 1단계부터 6단계까지의 제목을 만들 수 있다. 아래는 각 단계별 예시이다.
1
2
3
4
5
6
# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6
제목 1
제목 2
제목 3
제목 4
제목 5
제목 6
2) 텍스트 스타일
| 스타일 | 구문 | 단축키 | 예시 | 출력 |
|---|---|---|---|---|
| 굵게 | ** **, __ __ | Command+B (Mac)Ctrl+B (Windows) | **이것은 굵은 글자입니다.** | 이것은 굵은 글자입니다. |
| 기울임꼴 | * *, _ _ | Command+I (Mac)Ctrl+I (Windows) | *이것은 기울임꼴입니다.* | 이것은 기울임꼴입니다. |
| 취소선 | ~~ ~~ | None | ~이것은 취소선입니다.~ | |
| 굵게 및 기울임꼴 | *** *** | None | ***이 글자는 굵고 기울어져 있습니다.*** | 이 글자는 굵고 기울어져 있습니다. |
| 아래 첨자 | <sub> </sub> | None | 이것은 <sub>아래 첨자</sub> 입니다. | 이것은 아래첨자 입니다. |
| 윗 첨자 | <sup> </sup> | None | 이것은 <sup>윗첨자</sup> 입니다. | 이것은 윗첨자 입니다. |
| 밎줄 | <ins> </ins> | None | 이것은 <ins>밑줄</ins> 입니다. | 이것은 밑줄 입니다. |
3) 텍스트 인용
> 을 붙인 텍스트는 왼쪽에 세로선으로 들여쓰기를 하게 된다.
1
2
안녕하세요. 저는 홍길동입니다.
> 안녕하세요. 저는 홍길동입니다.
안녕하세요. 저는 홍길동입니다.
안녕하세요. 저는 홍길동입니다.
4) 인용 코드
단일 백틱을 사용하여 문장 내에서 코드 또는 명령을 표시할 수 있습니다.
백틱은 Comand+E (Mac) 또는 Ctrl+E (Windows/Linux) 단축키를 눌러 삽입할 수 있다.
1
2
저는 홍길동입니다.
저는 `홍길동`입니다.
저는 홍길동입니다.
저는 홍길동입니다.
5) 지원되는 색 모델
이슈, 끌어오기 요청 및 토론에서 백틱을 사용하여 문장 내의 색을 나타낼 수 있습니다. 백틱 내에서 지원되는 색 모델은 색의 시각화를 표시합니다.
1
The background color is `#ffffff` for light mode and `#000000` for dark mode.
The background color is #ffffff for light mode and #000000 for dark mode.
현재 지원되는 색 목록은 다음과 같습니다.
| 색 | 구문 | 예시 | 출력 |
|---|---|---|---|
| HEX(헥스코드) | #RRGGBB | #0969DA | #0969DA |
| RGB | rgb(R,G,B) | rgb(9, 105, 218) | rgb(9, 105, 218) |
| HSL | hsl(H,S,L) | hsl(212, 92%, 45%) | hsl(212, 92%, 45%) |
6) 링크
링크 텍스트를 대괄호 [ ]로 묶은 다음 URL을 괄호 ( )로 묶어 인라인 링크를 만들 수 있습니다.
이는 단축키 Command+K를 사용하여 링크를 만들 수도 있습니다.
텍스트를 선택한 경우 클립보드의 URL을 붙여넣어 선택 영역에서 링크를 자동으로 만들 수 있습니다.
텍스트를 강조 표시하고 Command+V를 사용하여 Markdown 하이퍼링크를 만들 수도 있습니다. 단축키인 Command+Shift+V를 사용하면 텍스트를 링크로 전환할 수 있습니다.
1
This site was built using [링크](https://pages.github.com/).
This site was built using 링크.
7) 섹션 링크
제목이 있는 모든 섹션에 직접 연결할 수 있습니다.
렌더링된 파일에서 자동으로 생성된 앵커를 보려면 섹션 제목 위로 마우스를 가져가 아이콘을 표시하고 아이콘을 클릭하여 브라우저에 앵커를 표시합니다. -사진- 편집 중인 파일에서 제목에 대한 앵커를 결정해야 하는 경우 다음 기본 규칙을 사용할 수 있습니다.
- 문자는 소문자로 변환됩니다.
- 스페이스는 하이픈(-)으로 바뀝니다. 다른 공백 또는 문장 부호 문자는 모두 제거됩니다.
- 선행 및 후행 공백은 제거됩니다.
- 마크업 서식이 제거되고 내용만 남습니다(예: _italics_는 italics가 됩니다).
- 제목에 대해 자동으로 생성된 앵커가 동일한 문서의 이전 앵커와 동일한 경우 하이픈과 자동 증가 정수를 추가하여 고유 식별자가 생성됩니다.
8) 줄 바꿈
문제, 끌어오기 요청 또는 토론을 리포지토리에 작성하는 경우 GitHub는 자동으로 줄 바꿈을 렌더링합니다.
1
2
이것은 예시입니다.
이것은 두번째 줄에 있습니다.
그러나 .md 파일에서 작성하는 경우 위의 예제는 줄 바꿈 없이 한 줄에 렌더링됩니다.
.md 파일에서 줄 바꿈을 만들려면 다음 중 하나를 포함해야 합니다.
(1) 첫 번째 줄 끝에 공백 두 개를 포함합니다.
1
2
이것은 예시입니다.
이것은 두번째 줄에 있습니다.
(2) 첫 번째 줄 끝에 백슬래시를 포함합니다.
1
2
이것은 예시입니다.\
이것은 두번째 줄에 있습니다.
(3) 첫 번째 줄 끝에 HTML 단일 줄 바꿈 태그를 포함합니다.
1
2
이것은 예시입니다.<br/>
이것은 두번째 줄에 있습니다.
이것은 예시입니다.
이것은 두번째 줄에 있습니다.
9) 이미지
Markdown에서는 이미지를 넣는 방법이 크게 2가지가 있다.
 와 <img> 태그를 사용하는 방법
1번 방법은 크기조절이 불가능 하지만, 2방법은 크기 조절이 가능합니다.
1
2
3
4
<img src="./github.png" width="100px" height="50px" title="Github_Logo"/>
<img src="./github.png" width="100px" height="50px" title="Github_Logo"></img>