마크다운이란?
마크다운(Markdown)은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README file이나 온라인 게시물 등에 많이 사용된다.
-출처: 위키백과
마크다운 작성법
1. 제목(Heading)
<h> 태그처럼 h1부터 h6까지 크기별로 작성할 수 있으며, 마크다운에서는 #의 갯수로 표현합니다.
이 중 h1은 =을, h2는 -을 text 밑에 2개 이상 사용하면 #을 사용하지 않고도 출력할 수 있습니다.
✔ 마크다운 작성
# h1
## h2
### h3
#### h4
##### h5
###### h6
h1
==
h2
--
하이픈을 여러개 사용해도 동일합니다.
=========✔ 출력 결과
h1
h2
h3
h4
h5
h6
h1
h2
하이픈을 여러개 사용해도 동일합니다.
2. 텍스트 스타일(Text Style)
아래와 같은 방법으로 여러 스타일을 작성할 수 있습니다.
| 스타일 | 마크다운 문법 | 작성 예시 | 출력 결과 |
|---|---|---|---|
| 굵게(Bold) | ** ** , __ __ | **굵게 쓰기** , __굵게 쓰기__ | 굵게 쓰기 |
| 이탤릭체(Italic) | * * , _ _ | *이탤릭체 쓰기* , _이탤릭체 쓰기_ | 이탤릭체 쓰기 |
| 취소선(Strikethrough) | ~~ ~~ | ~~취소선 삽입~~ | |
| 굵게 + 부분 이탤릭체 | ** ** + _ _ | **굵게 그리고 _이탤릭체_ 쓰기** | 굵게 그리고 이탤릭체 쓰기 |
| 전체 굵게 + 이탤릭체 | *** *** | ***굵게 그리고 이탤릭체 쓰기*** | 굵게 그리고 이탤릭체 쓰기 |
| 색상 변경 | <span style="color: "> </span> | <span style="color:red">빨강</span> | 빨강 |
(2022.09.18 기준)
▷ 밑줄(Underline) <u> </u>은 velog에서 적용되지 않는것 같습니다. 작성창에서는 작동되지만, 출간 후 게시물에 나타나지 않습니다.
▷ 다리 글자(Subscript) <sub> </sub>와 어깨 글자(Superscript) <sup> </sup>또한 마찬가지로 게시물에 나타나지 않습니다.
2-1. 글자 색상 변경
글자 색상 변경의 경우 HTML 태그인 <span style="color: "> </span>가 쓰이며, rgb값을 이용해 다음과 같은 예시로 사용 가능합니다.
✔ 마크다운 작성
<span style="color:green"> 예시1 green </span>
<span style="color:#00b000"> 예시2 #00b000 </span>
<span style="color:rgb(0, 255, 0) "> 예시3 rgb(0, 255, 0) </span>✔ 출력 결과
예시1 green
예시2 #00b000
예시3 rgb(0, 255, 0)
3. 가로줄(Horizontal Rule)
가로줄은 <hr> 입력하거나 *, -, _ 등을 3개 이상 입력하면 작성 할 수 있습니다. 띄어쓰기가 중간에 삽입되어도 입력 가능합니다.
✔ 마크다운 작성
*******
---
___
-- -- -- -- -- ------✔ 출력 결과
4. 목록(List)
4-1. 순서를 표기하는 목록
숫자+.을 사용하여 작성할 수 있습니다.
✔ 마크다운 작성
1. 1번
2. 2번
3. 3번✔ 출력 결과
1. 1번
2. 2번
3. 3번
4-2. 순서가 없는 목록
-, *, +를 사용하여 작성합니다. 세가지 모두 동일하게 작성됩니다.
✔ 마크다운 작성
- 하나
- 둘
- 셋
* 가
* 나
* 다
+ 첫 째
+ 둘 째✔ 출력 결과
- 하나
- 둘
- 셋
- 가
- 나
- 다
- 첫 째
- 둘 째
4-3. 들여쓰기 목록
Tab키나 스페이스바키를 이용하여 들여쓰기된 목록 작성이 가능합니다.
-, *, + 모두 혼용할 수 있습니다.
✔ 마크다운 작성
- 목록
* 목록 1
* 목록 1.1
- 목록 2
+ 목록 2.1
- 목록 2.2✔ 출력 결과
- 목록
- 목록 1
- 목록 1.1
- 목록 2
- 목록 2.1
- 목록 2.2
- 목록 1
5. 문단 간격, 줄바꿈(Line Break)
<br/>을 이용하여 문단 간격을 설정할 수 있습니다.<br/>의 수의 따라 간격이 달라집니다.
✔ 마크다운 작성
첫 번째 문단<br/>
두 번째 문단<br/><br/>
세 번째 문단✔ 출력 결과
첫 번째 문단
두 번째 문단
세 번째 문단
6. 인용문(Blockquote)
>를 이용하여 인용문을 작성할 수 있으며, > 갯수에 따라 중첩된 인용문(nested blockquote) 작성이 가능합니다.
✔ 마크다운 작성
> 인용문
> 인용문
>> 중첩 인용문 1
>>> 중첩 인용문 2 ✔ 출력 결과
인용문
인용문
중첩 인용문 1
중첩 인용문 2
7. 인라인 코드(Inline code) 강조
키보드의 숫자1 왼쪽의 `(백틱)을 이용하여 인라인 코드 강조를 할 수 있습니다.
✔ 마크다운 작성
`인라인 코드`✔ 출력 결과
인라인 코드
8. 블록 코드(Block code) 강조
여러줄의 코드를 강조할 경우 `(백틱) 3개 사용하여 작성할 수 있습니다. 또한, 백틱 3개 뒤에 언어 이름을 적어주면 코드 하이라이트를 적용시킬 수 있습니다.
✔ 마크다운 작성
```javascript
document.querySelectorAll("#from-list a").forEach((menu) =>
menu.addEventListener("click", function
);
``` ```css
.dropdown {
position: relative;
display: inline-block;
width: 100%;
}
``` ✔ 출력 결과
document.querySelectorAll("#from-list a").forEach((menu) =>
menu.addEventListener("click", function
);.dropdown {
position: relative;
display: inline-block;
width: 100%;
}9. 링크(Link)
9-1. 외부 링크
문서 내에 존재하는 일반 URL이나 이메일 주소, 그리고 < >(꺽쇠괄호) 안의 URL은 자동으로 링크를 사용합니다.
만약, 문서에 URL이 표시되지 않고 다른 이름를 링크로 연결하고 싶다면 [이름](URL)를 사용하거나 HTML 태그인 <a href="URL">이름</a>을 사용하시면 됩니다.
✔ 마크다운 작성
Naver: https://www.naver.com/
Github: <https://github.com/>
[velog 홈페이지](https://velog.io/)
<a href="https://velog.io/">velog HTML</a>✔ 출력 결과
Naver: https://www.naver.com/
Github: https://github.com/
9-2. 참조 링크
참조 링크는 다음과 같이 사용할 수 있습니다.
✔ 마크다운 작성
나는 [네이버]보다 [구글]이 좋다. 나에겐 [네이버]보다 [구글]이 더 편하기 때문이다.
[네이버]: https://www.naver.com/
[구글]: https://www.google.com/
[깃헙][githublink]
[깃허브][githublink]
[Github][githublink]
[githublink]: https://github.com/✔ 출력 결과
나는 네이버보다 구글이 좋다. 나에겐 네이버보다 구글이 더 편하기 때문이다.
9-3. 새로운 탭으로 열기
링크된 주소를 현재탭이 아닌 새로운 탭으로 열고 싶다면 HTML 태그 <a href="URL" target="_blank">이름 or URL</a>를 사용하면 됩니다.
✔ 마크다운 작성
<a href="https://www.google.com/" target="_blank">구글 새 탭에서 열기</a>✔ 출력 결과
구글 새 탭에서 열기
10. 이미지(Image)
10-1. 이미지 첨부
이미지는 를 사용하면 첨부할 수 있습니다.
이미지에 링크를 걸고 싶다면[](링크 할 URL "마우스 오버시 나타낼 문구")를 사용하면 됩니다.
✔ 마크다운 작성
일반 이미지
링크된 이미지
[](https://pixabay.com/ko/ "노을-클릭시 pixabay로 이동")✔ 출력 결과
일반 이미지
링크된 이미지
10-2. 이미지 링크 새 탭으로 열기
이미지 링크를 현재탭이 아닌 새 탭으로 열기 위해선 HTML 태그를 이용하여
<a href="링크 할 URL" target="_blank" title="마우스 오버시 나타낼 문구"></a>를 입력합니다.
title은 제외해도 문제 없습니다.
✔ 마크다운 작성
<a href="https://pixabay.com/ko" target="_blank" title="노을-클릭시 pixabay로 이동"></a>✔ 출력 결과
11. 표(Table)
표의 열은 일반적으로 키보드의 백스페이스 아래에 있는 |(세로선, Vertical bar)을 이용하여 구분합니다. -(하이픈, Hyphen)을 3개 이상 입력하여 헤더 셀을 구분할 수 있으며, 하이픈의 왼쪽, 양쪽, 오른쪽에 :(콜론, Colon)을 붙일 경우 각각 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬이 됩니다.
▷(2022.09.18 기준) 작성창에서는 정상적으로 작동하는 듯 하였으나 게시물에는 정렬이 되지 않습니다. html 태그인 <center> </center>또한 적용되지 않습니다.
-표 양쪽 끝의 |는 생략해도 됩니다.
-표 안의 문구에 굵게, 이탤릭체 등의 텍스트 스타일을 적용할 수 있습니다.
✔ 마크다운 작성
| Site | URL | ID | PW |
|:----|:-----:|-----:| -----
Google | https://www.google.com/ | ~~구글123~~ | 12345678
Naver | ***https://www.naver.com***/ | 네이버123 | 1234
| Github | https://github.com/ | 깃허브123 | 1234| Site | URL | ID | PW |
|----|-----|-----| -----
Google | <center>https://www.google.com/</center> | ~~구글123~~ | 12345678
Naver | <center>***https://www.naver.com***/</center> | 네이버123 | 1234
| Github | <center>https://github.com/</center> | 깃허브123 | <center>1234</center> ✔ 출력 결과
| Site | URL | ID | PW |
|---|---|---|---|
| https://www.google.com/ | 12345678 | ||
| Naver | https://www.naver.com/ | 네이버123 | 1234 |
| Github | https://github.com/ | 깃허브123 | 1234 |
| Site | URL | ID | PW |
|---|---|---|---|
| https://www.google.com/ | 12345678 | ||
| Naver | https://www.naver.com/ | 네이버123 | 1234 |
| Github | https://github.com/ | 깃허브123 | 1234 |
12. 체크박스(Checkbox)
-, *, + 뒤에 [ ]를 넣어 입력하여 체크박스를 생성할 수 있습니다.
✔ 마크다운 작성
- [ ] 체크박스 1
+ [ ] 체크박스 2
* [X] 체크박스 3✔ 출력 결과
- 체크박스 1
- 체크박스 2
- 체크박스 3
마치며
욕심이 많았던것 같습니다. 공부할수록 구현할 수 있는 기능들을 찾고 여기에 적으니 마크다운 뿐만 아니라 html 태그가 많아져버렸습니다. 사실 html 태그는 굳이 마크다운에 넣지 않아도 될 것 같은데 말이죠..ㅎㅎ; 조만간 html에 대해서도 더 깊게 공부하고 정리해야겠습니다.
