❓마크다운이란?
마크다운(Markdown)은 일반 텍스트 기반의 경량 마크업 언어로 2004년 존그루버에 의해 만들어졌으며 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다.
-Markdown Guide
✨ 마크다운은 벨로그 말고도 깃허브 README.md 파일에서 많이 사용되니 알아두면 매우 유용합니다!
👍 벨로그는 실시간으로 작성내용을 확인할 수 있어서 마크다운을 사용하기에 더 편리한거 같아요.
📖 마크다운 사용법(문법)
1. 제목(Header)
h1 부터 h6 까지 표현 할 수 있고, #의 개수로 표현이 가능합니다.
#을 붙인후 spacebar 를 눌러 띄어쓰기를 해주어야 적용이 가능합니다.
📝 작성
# h1
## h2
### h3
#### h4
##### h5
###### h6🖥 결과
h1
h2
h3
h4
h5
h6
2. 인용문(BlockQuote)
인용문은 앞에 > 를 붙여서 사용합니다.
📝 작성
> 인용문장
>> 중첩된 인용문
>>> 중첩된 인용문의 중첩된 인용문🖥 결과
인용문장
중첩된 인용문
중첩된 인용문의 중첩된 인용문
3. 목록
3-1. 순서가 있는 목록
순서가 있는 목록을 표시할 때는 숫자+마침표(.) 를 사용합니다.
어떤 번호를 입력해도 순서는 내림차순으로 정의됩니다.
📝 작성
1. 첫번째
2. 두번째
3. 세번째
1. 첫번째🖥 결과
- 첫번째
- 두번째
- 세번째
- 첫번째
3-2. 순서가 없는 목록
순서 없는 목록은 *, +, - 세 가지 방법을 사용할 수 있습니다.
Tab 키나 spacebar 를 이용해 들여쓰기가 가능합니다.
📝 작성
* 순서가 없는 목록
* 순서가 없는 목록
* 순서가 없는 목록
+ 순서가 없는 목록
+ 순서가 없는 목록
+ 순서가 없는 목록
- 순서가 없는 목록
- 순서가 없는 목록
- 순서가 없는 목록
🖥 결과
- 순서가 없는 목록
- 순서가 없는 목록
- 순서가 없는 목록
- 순서가 없는 목록
- 순서가 없는 목록
- 순서가 없는 목록
- 순서가 없는 목록
- 순서가 없는 목록
- 순서가 없는 목록
- 순서가 없는 목록
- 순서가 없는 목록
- 순서가 없는 목록
❗ 혼합해서 사용하는 것도 가능합니다!
📝 작성
1. 첫번째 순서
* 순서 x
- 순서 x
1. 두번째 순서
1. 하위 목록 1
+ 별도내용
- 별도내용
1. 하위 목록 2
* 들여쓰기를 안하면
1. 이렇게 번호가 매겨져요.
1. 세번째 순서🖥 결과
- 첫번째 순서
- 순서 x
- 순서 x
- 두번째 순서
- 하위 목록 1
- 별도내용
- 별도내용
- 하위 목록 2
- 들여쓰기를 안하면
- 이렇게 번호가 매겨져요.
- 하위 목록 1
- 세번째 순서
4. 코드
4개의 공백 또는 Tab 으로 들여쓰기를 만나면 변환되기 시작하여 들여쓰지 않은 행을 만날때까지 변환이 계속된다.
📝 작성
이렇게 문장 사이에 코드 블럭을 삽입할 때에는
Enter키로 한 번 띄워준 후 Tab을 누르면 코드 블록을 만들 수 있어요.
들여쓰기를 제거하면 코드 블록이 사라져요.🖥 결과
이렇게 문장 사이에 코드 블럭을 삽입할 때에는
Enter키로 문장 사이를 띄워준 후 Tab을 누르면 코드 블록을 만들 수 있어요.들여쓰기를 제거하면 코드 블럭이 사라져요.
4-1. 코드 블럭
코드 블럭표시는 백틱(```) 3개로 시작해서 똑같이 3개로 닫습니다.
📝 작성
```
백틱은 일반적인 키보드 자판중 ~키와 함께 위치한 키입니다.
맥 os는 영문 상태일때 입력이 됩니다.
```🖥 결과
백틱은 일반적인 키보드 자판중 ~키와 함께 위치한 키입니다.
맥 os는 영문 상태일때 입력이 됩니다.4-2. 문법강조(Syntax highlighting)
코드 블럭 코드 (```) 시작점에 사용하는 언어를 선언하여 문법강조가 가능합니다.
📝 작성
``` javascript
function cutByLen(str, maxByte) {
for (b = i = 0; c = str.charCodeAt(i);) {
b += c >> 7 ? 2 : 1;
if (b > maxByte)
break;
i++;
}
return str.substring(0, i);🖥 결과
function cutByLen(str, maxByte) {
for (b = i = 0; c = str.charCodeAt(i);) {
b += c >> 7 ? 2 : 1;
if (b > maxByte)
break;
i++;
}
return str.substring(0, i);
}5. 수평선
아래 줄은 모두 수평선을 만듭니다.
최소 개수(보통 3개)만 존재하며, 그 이상은 몇개를 써도 상관없습니다.
📝 작성
* * *
***
******
- - -
---------------🖥 결과
6. 링크
6-1. 텍스트에 링크 삽입하기
📝 작성
[title](link)
[velog](https://velog.io/)🖥 결과
6-2. 자동 링크 삽입하기
일반적인 URL 혹은 이메일주소인 경우 적절한 형식으로 링크를 형성합니다.
📝 작성
* 외부링크: <https://velog.io/>
* 이메일링크: <seoyaon@gmail.com>🖥 결과
- 외부링크: https://velog.io/
- 이메일링크: seoyaon@gmail.com
7. 강조
굵기, 기울이기, 취소선 등 기본적인 스타일을 작성할 수 있습니다.
문장 중간에 사용할 경우에는 띄어쓰기를 사용하는 것이 좋습니다.
📝 작성
__볼드체__
**볼드체**
_이탤릭_
*이탤릭*
~~취소선~~
**_같이사용도가능해요_**🖥 결과
볼드체
볼드체
이탤릭
이탤릭
취소선
같이사용도가능해요
8. 이미지
 로 작성합니다.
📝 작성
🖥 결과
9. 줄바꿈
줄바꿈은 <br/> 로 표현 가능합니다.
📝 작성
문장을 띄우고 싶을땐 <br/> 이렇게 하면 됩니다!
🖥 결과
문장을 띄우고 싶을땐
이렇게 하면 됩니다!
글 적는것도 방법이 있다니 신기하다🫢
문법은 더 많지만 기초적이고 제가 쓸것들만 정리해보았습니다!
앞으로 벨로그 작성하면서 마크다운 뿌셔보자👊!!
