- Published on
Makrdonw 가이드
- Markdonw 이란?
- 마크다운의 장-단점
- 장점
- 단점
- 마크다운 문법
- 1. 제목(Header)
- This is a H1
- This is a H2
- This is a H3
- 2. 목록(List)
- 3. 강조(Emphasis)
- 4. 인용문(BlockQuote)
- 5. 코드(Code)
- 6. 수평선(Horizontal Rule)
- 7. HTML 코드
- 8. 표
- 9. 링크(Link)
- 10. 이미지
Markdonw 이란?
마크다운(Markdown)은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다. (wikipedia, n.d.)
마크다운의 장-단점
장점
- 간결하다.
- 별도의 도구없이 작성가능하다.
- 다양한 형태로 변환이 가능하다.
- 텍스트(Text)로 저장되기 때문에 용량이 적어 보관이 용이하다.
- 텍스트파일이기 때문에 버전관리시스템을 이용하여 변경이력을 관리할 수 있다.
- 지원하는 프로그램과 플랫폼이 다양하다.
단점
- 표준이 없다.
- 표준이 없기 때문에 도구에 따라서 변환방식이나 생성물이 다르다.
- 모든 HTML 마크업을 대신하지 못한다.
마크다운 문법
1. 제목(Header)
# This is a H1
## This is a H2
### This is a H3
#### This is a H4
##### This is a H5
###### This is a H6
This is a H1
This is a H2
This is a H3
This is a H4
This is a H5
This is a H6
2. 목록(List)
1. 첫번째
2. 두번째
3. 세번째
- 첫번째
- 두번째
- 세번째
* 1단계
- 2단계
+ 3단계
+ 4단계
- 1단계
- 2단계
- 3단계
- 4단계
- 3단계
- 2단계
3. 강조(Emphasis)
*이텔릭체* _이텔릭체_
**두껍게** __두껍게__
***이텔릭체*와 두껍게**
~~취소선~~
<u>밑줄</u>
이텔릭체 이텔릭체
두껍게 두껍게
이텔릭체와 두껍게
취소선
4. 인용문(BlockQuote)
인용문(blockQuote)
> 남의 말이나 글에서 직접 또는 간접으로 따온 문장.
> _(네이버 국어 사전)_
BREAK
> 인용문을 작성하세요!
>> 중첩된 인용문(nested blockquote)을 만들 수 있습니다.
>>> 인용문 1
>>> 인용문 2
>>> 인용문 3
인용문(blockQuote)
남의 말이나 글에서 직접 또는 간접으로 따온 문장. (네이버 국어 사전)
BREAK!
인용문을 작성하세요!
중첩된 인용문(nested blockquote)을 만들 수 있습니다.
인용문 1
5. 코드(Code)
```html
<a href="https://www.google.co.kr/" target="_blank">GOOGLE</a>
```
```css
.list > li {
position: absolute;
top: 40px;
}
```
```javascript
function func() {
var a = 'AAA';
return a;
}
```
```bash
$ vim ./~zshrc
```
```python
s = "Python syntax highlighting"
print s
```
```
No language indicated, so no syntax highlighting.
But let's throw in a tag.
```
<pre><code>
use pre & code
</code></pre>
<a href="https://www.google.co.kr/" target="_blank">GOOGLE</a>
.list > li {
position: absolute;
top: 40px;
}
function func() {
var a = 'AAA'
return a
}
$ vim ./~zshrc
s = "Python syntax highlighting"
print s
No language indicated, so no syntax highlighting.
But let's throw in a tag.
use pre & code
6. 수평선(Horizontal Rule)
수평선 1
---
수평선 2
***
수평선 3
___
수평선 4
<hr/>
7. HTML 코드
줄 <br/>바꿈
줄
바꿈
8. 표
헤더 셀을 구분할 때 3개 이상의 -(hyphen/dash) 기호가 필요합니다.
헤더 셀을 구분하면서 :(Colons) 기호로 셀(열/칸) 안에 내용을 정렬할 수 있습니다.
가장 좌측과 가장 우측에 있는 |(vertical bar) 기호는 생략 가능합니다.
| 값 | 의미 | 기본값 |
|---|:---:|---:|
| `static` | 유형(기준) 없음 / 배치 불가능 | `static` |
| `relative` | 요소 자신을 기준으로 배치 | |
| `absolute` | 위치 상 부모(조상)요소를 기준으로 배치 | |
| `fixed` | 브라우저 창을 기준으로 배치 | |
| 값 | 의미 | 기본값 |
|---|---|---|
static | 유형(기준) 없음 / 배치 불가능 | static |
relative | 요소 자신을 기준으로 배치 | |
absolute | 위치 상 부모(조상)요소를 기준으로 배치 | |
fixed | 브라우저 창을 기준으로 배치 |
9. 링크(Link)
[link keyword][id]
[id]: URL "Optional Title here"
Link: [Google][googlelink]
[googlelink]: https://google.com "Go google"
Link: Google
10. 이미지
<img src="/path/to/img.jpg" width="450px" height="300px" title="px(픽셀) 크기 설정" alt="jabee"></img><br/>
wikipedia. (n.d.). Wikipedia.Markdown. https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4