Markdown

깃허브의 README.md 파일은 마크다운 파일이다.

마크다운으로 작성된 문서는 확장자가 .md 로 저장된다.

 

마크다운의 장점

- 문법이 쉽고 간결하다.

- 관리가 쉽다.

- 지원 가능한 플랫폼과 프로그래밍 다양하다.

 

마크다운의 단점

- 표준이 없다.

- 모든 HTML 마크업을 대신하지 못한다.

 

마크다운 문법은 HTML 문법으로 변환되어 브라우저에서 동작한다.

 

제목 (Header)

# 의 갯수에 따라 다른 크기로 출력된다.

# 제목 1 (h1)
## 제목 2 (h2)
### 제목 3 (h3)
#### 제목 4 (h4)
##### 제목 5 (h5)
###### 제목 6 (h6)

 

문장 (Paragraph)

문장이 줄바꿈 없이 출력된다.

동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세

 

줄바꿈 (Line Breaks)

공백 2개는 줄바꿈으로 인식되기 때문에  이부분은 다음 줄에 출력된다.
마크다운 출력 환경에 따라 줄바꿈이 안되는 경우 br 태그를 사용한다.<br />

 

강조 (Emphasis)

_이텔릭_
**두껍게**
**_이텔릭 + 두껍게_**
~~취소선~~
<u>밑줄</u>

 

목록 (List)

[ order list ]

숫자를 1, 2, 3, 4, 5... 직접 입력하지 않더라도

순서가 자동으로 계산되어 차례대로 출력된다.

한 목록의 아래에 들여쓰기를 두 번 하고 작성하면 해당 목록의 서브 목록으로 출력된다.

1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
    	1. 순서가 필요한 목록
1. 순서가 필요한 목록

<!--
1. 순서가 필요한 목록
2. 순서가 필요한 목록
3. 순서가 필요한 목록
	1. 순서가 필요한 목록
4. 순서가 필요한 목록
-->

 

[ unorder list ]

unorder list 도 마찬가지로 서브 목록이 적용되어 출력된다.

- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
	- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록

 

링크 (Links)

[보여질 텍스트](url)

url 뒤에 공백과 함께 큰따옴표 안에 텍스트를 작성하게 되면

링크 위에 마우스를 올렸을 때 작성한 텍스트가 출력된다.

[GOOGLE](https://google.com)
[NAVER](https://naver.com "NAVER 로 이동")

 

이미지 (Images)


![구글로고](https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png)

 

[](url)

이미지를 클릭하게 되면 해당 url 로 이동할 수 있다.

[![구글로고](https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png)](https://www.google.co.kr/)

 

인용문 (BlockQuote)

> 를 쓸 때마다 자동으로 줄바꿈이 된다.

> 남의 말이나 글에서 직접 또는 간접으로 따온 문장.
> (네이버 국어 사전)

 

인용문도 중첩이 가능하다.

> 인용문을 작성하세요!
>> 중첩된 이용문 1
>>> 중첩된 인용문 2
>>>> 중첩된 인용문 3

 

인라인 (inline) 코드 강조

백팁 기호로 텍스트를 감싸 코드라는 것을 강조할 수 있다.

CSS에서 `background` 혹은 `background-image` 속성으로 요소에 배경 이미지를 삽입할 수 있습니다.

 

블록 (block) 코드 강조

html, css, javaScript, bash 등의 코드가 블록 안에 작성되고 하이라이팅이 적용된다.

```html
<div>
  <p>문장입니다.</p>
</div>
```

```javascript
function func() {
  var a = 'AAA';
  return a;
}
```

```bash 
$ git commit -m "Message" 
```

```plaintext
텍스트입니다.
```

 

표 (Table)

--|--|-- 를 통해 table header 와 table body 를 구분한다.

--|:--:|-- 로 작성하면 두번째 열이 가운데 정렬된다.

--|--|--: 로 작성하면 세번째 열이 오른쪽 정렬된다.

기본적으로 정렬은 왼쪽으로 설정되어 있다.

| 를 통해 열을 구분한다.

값 | 의미 | 기본값
--|--|--
static | 기준 없음 | O
relative | 요소 자신 | X
absolute | 위치 상 부모 요소 | X
fixed | 뷰포트 | X

 

원시 HTML (Raw HTML)

마크다운 문법 안에서 HTML 의 문법을 그대로 사용할 수도 있다.

자주 사용되는 원시 HTML 은 다음과 같다.

<!-- 줄바꿈 (공백 2개로 줄바꿈이 안되는 경우) -->
<br /> 

<!-- 밑줄 -->
<u></u>

<!-- 밑줄 (u 태그를 사용하지 않을 경우) -->
<span style="text-decoration: underline;">밑줄</span>

<!-- 링크 (target 속성이 필요한 경우) -->
<a href="주소" title="타이틀" target="_blank">클릭</a>

<!-- 이미지 (이미지의 크기 조절이 필요한 경우) -->
<img width="70" src="이미지주소" alt="이미지" />

 

수평선 (Horizontal Rule)

세 가지 모두 한 줄의 수평선을 출력한다.

--- 
***
___

 

체크박스

체크되지 않은 체크 박스
- [ ] 

체크된 체크 박스
- [x]
- [X]