주피터 노트북, 깃허브 등 많은 플랫폼에서 마크다운을 통해 readme, 그리고 코드 셀에 대한 해석 등을 작성한다.
이 때, 좀 더 깔끔하고 다양한 방법들을 통해 내용을 정리할 수 있도록 마크다운의 문법에 대해 정리하고 익혀보자!
목차
1. MarkDown이란?
마크다운(MarkDown)은 일반 텍스트 기반의 마크업 언어이다. 일반 텍스트를 통해 서식이 있는 문서를 작성하는 데 사용되며, 다른 마크업 언어들에 비해 문법이 쉽고 간단하여 많은 플랫폼에서 사용된다. 특히, HTML과 RTF(리치 텍스트) 등 서식 문서로 쉽게 변환이 가능하여 README파일 또는 온라인 게시물 등에 많이 사용된다.
- 파일 확장자 : '.md'
- 인터넷 미디어 타입 : text/markdown
- 포맷 종류 : 마크업 언어
- 사용 예시 : 메모장, Jupyter나 Github 등의 에디터 등
1) MarkDown의 장단점
<장점>
- 문법이 쉽다.
- 관리가 쉽다.
- 지원 가능한 플랫폼과 프로그램이 다양하다.
<단점>
- 표준이 없어 사용자마다 문법이 조금씩 다를 수 있다.
- 모든 HTML 마크업을 대신하지는 못한다.
2. Markdown Syntax(문법)
1) Basic
(1) New Line (줄바꿈)
기본적으로, 마크다운에서 엔터키 (new line) 한 번은 의미가 없다.
즉, 다음 line으로 표시하기 위해서는 빈 칸 두 개로 구분한다.
(2) 문단 구분
문단을 구분하기 위해서는 엔터 키 두 번을 입력한다.
ex)
하나의 문단.
다른 문단.
2) 자주 사용하는 문법
ref) 만약 아래에서 사용하는 기호들(#, *, _, - 등)을 표시해야 한다면, 기호 앞에 '\'(윈도우즈는 ₩)를 붙인다.
(1) Header (제목)
<h1>부터 <h6>까지 '#'을 사용하여 제목을 표현할 수 있다.
ex)
# h1
## h2
### h3
#### h4
##### h5
###### h6
(2) Emphasis (강조) - 이탤릭체, 볼드체, 취소선, 밑줄
- 이탤릭체 : 별표(asterisk, *) 또는 언더바(underscore, _)를 원하는 구문 양쪽에 하나씩 사용하여 표현한다.
- 볼드체 : 별표(asterisk, *)또는 언더바(underscore, _)를 원하는 구문 양쪽에 두개씩 사용하여 표현한다.
- → 이탤릭체와 볼드체는 같이 사용 가능!
- 취소선 : 물결표시(tilde, ~)를 원하는 구문 양쪽에 두개씩 사용하여 표현한다.
- 밑줄 : '<u></u>'를 원하는 구문 양쪽에 사용하여 표현한다.
- 코드 강조 : '`'(윈도우의 '1번 왼쪽', 맥의 'option + 1번 왼쪽' - Grave키)를 원하는 구문 양쪽에 하나씩 사용하여 표현한다.
- 블록 코드 강조 : 강조하고싶은 블록 위 아래에 `를 3번 이상 입력하고, 위쪽에 코드의 종류를 적음
ex)
이탤릭체는 *asterisk* 혹은 _uderscore_ 사용
볼드체는 **asterisk** 혹은 __underscore__ 사용
**_이탤릭체_와 볼드체**를 같이 사용할 수 있음
취소선은 ~~물결표시~~를 사용
<u>밑줄</u>은 '<u>'와 '</u>' 사용
`코드` 강조
```python
s = "Python syntax highlighting"
print s
```
(3) list
순서가 부여된 리스트는 '번호.'를 사용하여 다음과 같이 사용한다.
ex)
1. 리스트 첫 번째 항목
2. 리스트 두 번째 항목
3. 리스트 세 번째 항목
// 다 같은 숫자를 넣어도 순서가 제대로 부여됨
순서가 없는 경우 '-'를 사용하여 다음과 같이 사용한다.
ex)
- 첫 번째
- 두 번째
- 세 번째
→ 이 때, 'tab'키를 통해 하위 목록을 둘 수 있다.
→ 순서가 필요하지 않은 목록에는 '대쉬(hyphen)', '별표(asterisk)', '더하기(plus sign)' 기호를 사용할 수 있다.
3) 링크, 블럭 인용
(1) Hyperlink
하이퍼링크는 다음과 같은 문법을 사용한다.
[링크명] (http://www.example.com), [링크명](http://www.example.com "사이트 제목")
(2) 블럭 인용
블럭 인용은 다음과 같이 문단의 첫 줄 앞에 '>'를 붙여 사용한다.
>문단.
4) 이미지
링크와 비슷한 형태인데, 앞에 '!'를 붙인다.
링크와 비슷한 모양에서 앞에 '!'를 붙인다.
또는
![대체 텍스트][logo]
[logo]: http://www.example.com/webp/images/exampleimage.jpg "링크 설명"
[대체 텍스트 입력] 부분은 이미지의 이름을 넣어주는 부분인데, 크게 중요하지는 않다.
이미지가 깨졌거나 링크가 틀렸을 때 표시되는 부분이다.
이미지 URL은 이미지의 링크 주소를 넣어야 한다.
이미지를 넣기 위해서는 어떤 저장소에 복사한 후, 그 링크를 넣어야 한다.
만약 깃허브에서 프로젝트 관리를 할 경우, Image라는 폴더를 생성하고, 그곳에 올릴 이미지를 모두 넣은 다음 그 이미지의 링크를 걸어주면 쉽다.
따라서 다음과 같이 프로젝트의 README.md 파일을 작성할 때에는 쉽게 이미지를 불러올 수 있다.
만약 크기를 지정하고, 이미지를 정렬해주고 싶다면, html의 img 태그를 사용해야 한다.
width(너비)와 height(높이)는 pixel 단위로도 가능하고, % 단위로도 가능하다. 단위 없이 입력하면 픽셀 단위로 지정된다.
이미지를 가운데정렬하려면 태그를 다음과 같이 추가해주어야 한다.
<p align="center">
<img
src="image_src"
width="200px"
height="100px"
/>
</p>
width와 height는 pixel 단위로도 가능하고, % 단위로도 가능하다.
왼쪽 정렬, 오른쪽 정렬은 다음과 같이 적용한다.
<img
src="image_src"
align="right"
width="200px"
height="200px"
/>
최근댓글