텍스트 기반의 마크업 언어인 마크다운(Markdown)은 쉽게 작성이 가능하며 HTML로 변환이 가능해 다양한 용도로 사용한다. 특수기호와 문자를 활용해 매우 간단한 문법만을 사용하기 때문에 웹에서도 직관적으로 인식할 수 있다. 파일 확장자자가 .md인 파일이 마크다운이다.
마크다운 사용법 살펴보기
CONTENTS
제목 Headers
제목은 html과 같이 h1부터 h6까지만 구현할 수 있는데, 이때 샵(#) 기호를 사용한다.
# 하나는 h1을 의미한다.
## 둘은 h2를 의미한다.
이런 식으로 #이 여섯개면 h6을 의미한다.
강조 Emphasis
텍스트에 강조할 때 html은 em, strong, del 태그를 사용하는데, 마크다운에서는 별(*) 기호 및 언더바(_)를 활용한다.
이탤릭체는 *별표 사이에 텍스트*로 표현하거나 _언더바 사이에 텍스트_로 표현한다.
두꺼운 텍스트는 **별 2개 사이에 텍스트** 또는 __더블언더바 사이에 텍스트__로 표현한다.
취소선은 ~~물결 표시 2개 사이에 텍스트~~를 사용한다.
밑줄은 <u>태그를 사용한다</u>
인용문 BlockQuote
인용문처럼 들여쓰기를 표현할 때는 > 기호를 사용한다.
> 하나는 한번 들여쓰기로, 한 칸이 아니라 일정한 간격으로 들여써진다.
>> 둘은 들여쓰기가 2번된 간격으로 들여써진다.
>>> 셋은 동일한 방법으로 들여쓰기가 3번된 간격으로 들여써진다.
목록 List
html에서 ol, ul 태그 역할을 숫자와 기호로 표현한다.
순서가 있는 목록 즉, ol 태그 역할은 숫자 다음에 점을 붙이면 된다. 이때 내림차순으로만 표현된다.
순서가 없는 목록 즉, ul 태그는 *, +, - 기호를 사용한다. (별표, 더하기, 대쉬)
목록을 표현할 때는 들여쓰기와 함께 기호를 사용한다.
코드 블럭
마크다운에서는 한줄 띄어쓰기를 하지 않으면 들여쓰기가 제대로 구현되지 않는다. 따라서 코드블럭을 표현할 때에는 기존 html에서 사용하는 pre, code 태그를 사용하면 된다.
또는 코드 블럭 처음과 끝에 키보프 1번 키 왼쪽에 있는 그레이브키를 ``` 세 번씩 넣어주면, 코드블럭 효과를 구현할 수 있다.
참고로 그리이브키를 ` 한번씩만 감싸주면 인라인 코드를 강조할 수 있다.
수평선 HR
html에서 hr태그로 표현하는 수평선은 마크다운에서는 하이폰, 별, 언더바 중 아무거나 3개 이상 입력하면 수평선을 구현할 수 있다. 마크다운 문서에서 페이지를 나눌 때 사용한다.
띄어쓰기 br
마크다운 문서에서 줄 바꿈을 하려면 문장 마지막 칸에서 3칸이상을 띄어쓰기해야 한다. 하지만 그냥 <br> 태그를 사용하는 게 더 편하다.
링크 LINK
링크는 [타이틀] (url 주소 "링크 설명") 또는 [타이틀] [url 주소]로 표현한다.
하지만 기본적인 참조 링크 방법을 그대로 사용할 수도 있다.
즉, 타이틀 url 주소 또는 타이틀 < url 주소 > 형대이다.
이메일도 이메일링트 <이메일 주소>로 표현이 가능하다.
이미지 img
마크다운에서 이미지는 링크 방법과 유사하지만 앞에 느낌표(!)가 붙는다.
이 마크다운 이미지에 링크를 걸려면 통채로 링크에서 타이틀로 잡아준다.
[  ] (링크 url)
표 Table
마크다운으로 테이블을 구현할 수도 있는데, 이때 하이폰(-) 기호, 콜론(:) 기호, 버티컬바(|) 기호를 활용한다.
헤더 셀을 구분할 때는 하이폰 기호가 3개 이상 넣어야 한다.
| 표 제목1 | 표 제목 2 | 표 제목 3 |
| --- | :---:| ---:|
|첫번째 칸 내용| 두번째 칸 내용 | 세번째 칸 내용 |
|다음줄 첫번째 칸 내용| 두번째 칸 내용 | |
우선 테이블에서 ht에 해당하는 제목은 버티컬바 기호를 사용한다.
다음 줄에 셀을 구분하는 3개 이상의 하이폰 기호(-)와 함께 콜론(:) 기호를 사용해 내용을 정렬한다.
비워있는 칸도 버티컬바(|)는 남겨야 한다.
원시 HTML 사용 가능
마크다운 문서에서는 원시 HTML 문법을 사용할 수도 있다.
마크다운 문서 처음과 끝에 div 태그로 감싼 후 중앙정렬을 한다. <div align="center">
줄을 바꿀 때는 <br/> 태그를 넣되, 한줄씩 뛰어야 코드가 제대로 구현된다.
표에 콜론은 정렬을 의미한다. 대쉬기호 양쪽에 콜론을 하면 중앙정렬이 된다.
이미지 같은 경우에 마크다운 문법으로는 크기 조절이 안 되므로 img 태그를 사용한다.
<img width="150" src="http://www.gstatic.com/webp/gallery/4.jpg" alt="Prunus" title="A Wild Cherry (Prunus avium) in flower">
역시 이미지에 링크를 연결할 때에도 a 태그를 사용한다.
<a href="https://www.daum.net"><img width="150" src="https://k.kakaocdn.net/dn/dvg10P/btrQsFEysRl/cEArKryJE44jtAlVT06dBk/img.png" alt=" daum" title="샘플 링크"></a>
어지간한 html 태그는 대부분 적용이 되지만 스타일을 구현하려면 따로 깃허브CSS를 활용할 필요가 있다.
