마크다운은 일반 텍스트 문서를 HTML로 변환 시 쉽게 만들기 위해 개발된 텍스트 편집기입니다.
약속된 단축어들로 제목, 목록, 링크 등의 자주 사용하는 서식을 간결하게 작성할 수 있는 편리한 에디터에요.
마크다운 문법과 예시를 보고, 이외 자주 사용하는 html을 이용해 벨로그 작성에 대해 알아볼게요!
마크다운(Markdown)이란?
마크다운(markdown)은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다.
| 위키백과
💡 이스케이프 문자 : 서식 지정에 사용되는 문자를 표시하려면 문자 앞에 백슬래시(\)를 추가해요!
💡 hml : 마크다운 문법만으로 표현이 부족한 경우 html 태그로 작성할 수도 있어요!
- html 태그 참고 : 5. 강조(font style, decoration)
마크다운 사용법(문법)
📖 목차
1. 제목(heading)
2. 목록(list)
3. 인용문(blockqoute)
4. 수평선(hr)
5. 강조(font style, decoration)
6. 링크(link, a)
7. 이미지(img)
8. 이모지(emoji) 🚀
9. 코드(code, pre)
1. 제목(heading)
■ 밑줄로 제목 표현
큰 제목 : 문서 제목으로 사용합니다.
h1
===👉 결과
h1
작은 제목 : 문서 부제목, 섹션 제목으로 사용합니다.
h2 작은 제목
---👉 결과
h2
■ #의 개수로 제목 표현
# h1
## h2
### h3
#### h4
##### h5
###### h6👉 결과
h1
h2
h3
h4
h5
h6
2. 목록(list)
■ 순서 있는 목록(ol)
"숫자와 점"으로 시작되는 문장은 순서 있는 목록으로 표현됩니다.
💡 입력한 숫자 및 숫자의 순서와 관계 없이 오름차순 숫자로 적용됩니다.
💡 행 선택하여 탭으로 들여쓰면 중첩도 가능해요.
1. 첫번째
2. 두번째
3. 세번째
---
1. 첫번째
4. 네번째
2. 두번째
1. 하위 목록 첫번째
2. 하위 목록 두번째👉 결과
- 첫번째
- 두번째
- 세번째
- 첫번째
- 네번째
- 두번째
- 하위 목록 첫번째
- 하위 목록 두번째
■ 순서 없는 목록(ul)
*, +, -으로 시작되는 문장은 순서 없는 목록으로 표현됩니다.
💡 행 선택하여 탭으로 들여쓰면 중첩도 가능해요.
* 목록(*)
* 목록(*)
* 목록(*)
+ 목록(+)
+ 목록(+)
+ 목록(+)
- 목록(-)
- 목록(-)
- 목록(-) 👉 결과
- 목록(*)
- 목록(*)
- 목록(*)
- 목록(*)
- 목록(+)
- 목록(+)
- 목록(+)
- 목록(+)
- 목록(-)
- 하위 목록(-)
- 하위 목록(-)
- 하위 목록(-)
3. 인용문(blockqoute)
인용문은 >로 간편하게 작성해요.
💡 > 개수에 따라 중첩 가능하고, 인용문 내에 다른 마크다운 요소를 포함할 수도 있어요.
> 인용문
>> 인용문
>>> 인용문
* 목록
``` 코드
``` 👉 결과
인용문
인용문
인용문
- 목록
코드
4. 수평선(hr)
*, -, _을 3개 이상 연속 입력하여 문단의 구분선을 표현할 수 있습니다.
공백 포함 시에도 동일하게 표현됩니다.
💡 텍스트 다음 줄에 --- 입력 시 제목 태그가 적용(1. 제목(heading) 참고)되므로 주의가 필요해요. 공백행을 추가하거나, ***, ___을 사용해요.
* * *
***
**********
- - -
---
----------
_ _ _
___
__________👉 결과
5. 강조(font style, decoration)
텍스트 굵기와 기울기, 취소선은 *, _, ~~로 표현합니다.
- 기울기 :
*italic*,_italic_👉 italic, italic - 굵게 :
**bold**,__bold__👉 bold, bold - 굵게 기울기 :
***bold&italic***,___bold&italic___👉 bold&italic, bold&italic - 취소선 :
~~cancel(delete)~~👉cancel(delete)
💡 윗첨자, 아래첨자, 밑줄은 태그로 입력할 수 있어요!
- 예 :
<u>underline</u>👉 underline
💡 자주 사용하는 태그
- 줄바꿈 :
<br> - 폰트 컬러
<span style="color:red">red</span>👉 red<span style="color:#12b886">#12b886</span>👉 #ff0000<span style="color:rgba(255,0,0)">rgba(255,0,0)</span>👉 rgba(255,0,0)<span style="color:rgba(255,0,0,.5)">rgba(255,0,0,.5)</span>👉 rgba(255,0,0,.5)
6. 링크(link, a)
■ 대체 텍스트
문법 : [텍스트](링크 "title")
- title : 마우스오버 시 나타나는 말풍선 "title" 속성은 옵션
[링크](https://google.com)
[링크(title 속성 추가)](https://google.com "google link")■ url, 이메일
문법 : <링크>
URL: <https://google.com>
E-mail: <someone@example.com>URL: https://google.com
E-mail: someone@example.com
■ 참조 링크
링크 1: [Google][1]
링크 2: [Naver][2]
[1]:https://google.com
[2]:https://naver.com7. 이미지(img)
문법 : 
- title : 마우스오버 시 나타나는 말풍선 "title" 속성은 옵션
💡 사이즈 설정 필요 시에는 html img 태그에 "width" 속성 추가하여 작성해요.
<img src="https://cdn.pixabay.com/photo/2017/12/05/05/34/gifts-2998593_960_720.jpg" width="30%" title="img 태그로 이미지 설정" alt="선물">👉 결과
이미지 출처 : https://pixabay.com/images/id-2998593/
8. 이모지(emoji) 🚀
이모지는 단추키로 직접 입력하거나 복사해서 붙여넣기가 가능해요.
■ 단축키
- 윈도우 : 윈도우 키 + 마침표(.)
- 맥 : Command + Control + Space bar
■ 복사해서 붙여넣기
- 이모지 카피 : https://emoji-copy.com/ko/
- 트위터 기호 : https://kr.piliapp.com/twitter-symbols/
9. 코드(code, pre)
■ 인라인 코드(code)
백틱( ` )을 사용하여 인라인 코드를 작성합니다.
`inline code`👉 결과
inline code
■ 코드 블럭(pre)
▶ 들여쓰기
코드 블록을 생성하려면 블록의 모든 행을 최소 4개의 공백이나 탭으로 들여씁니다.
<div>
<div>code block</div>
</div>
👉 결과
<div>
<div>code block</div>
</div>▶ 코드 블럭 코드(```) 사용
```
code block
```👉 결과
code block💡 코드 하이라이트
백틱(```) 뒤에 언어명을 작성하면 문법 강조(Syntax highlighting) 스타일을 적용할 수 있어요.
```css
span {
font-size: 1rem;
color: red;
}
```
```javascript
for (var i = 0 / 2; i < classes.length; i++) {
if (checkCondition(classes[i]) === undefined)
console.log('undefined');
}
export $initHighlight;
```👉 결과
span {
font-size: 1rem;
color: red;
}for (var i = 0; i < classes.length; i++) {
if (checkCondition(classes[i]) === undefined)
console.log('undefined');
}
export $initHighlight;