1. 마크다운 이란? 📄
Markdown은 텍스트 기반의 경량 마크업 언어로 2004년 존그루버에 의해 만들어졌다.
일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다.
HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README.md 파일이나 온라인 게시물 등에 많이 사용된다.마크업 언어(Markup Language) : 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종
2. 마크다운 문법 📝
1) 제목 (Header)
💜 사용법
H1
=============
H2
-------------
# H1
## H2
### H3
#### H4
##### H5
###### H6📌 출력결과
H1
H2
H1
H2
H3
H4
H5
H6
2) 수평선 (Horizontal)
💜 사용법
---
***
___📌 출력결과
3) 강조 (Emphasis)
💜 사용법
**This is bold text**
__This is bold text__
*This is italic text*
_This is italic text_
*__italic text & bold text__*
**_italic text & bold text_**
<u> underline </u>
~~cancelline~~underline은 Typora에서는 먹히는 것 같고, Velog 편집 UI에서도 보이는데, 여기에는 안보이는 것 같다. 흠.. 🤔
📌 출력결과
This is bold text
This is bold text
This is italic text
This is italic text
italic text & bold text
italic text & bold text
underline
Strikethrough
4) 체크박스 (CheckBox)
💜 사용법
- [x] 딸기
- [ ] 블루베리
- [ ] 복숭아📌 출력결과
- 딸기
- 블루베리
- 복숭아
5) 목록 (Lists)
5-1) 순서없는 목록 (Unordered)
💜 사용법
+ 리스트의 시작을 `+`, `-`, or `*`로 함.
+ 같은 리스트
- 새로운 리스트 시작
* 첫 번째
+ 두 번째
- 세 번째
+ 새로운 리스트 시작📌 출력결과
- 리스트의 시작을
+,-, or*로 함. - 같은 리스트
- 새로운 리스트 시작
- 첫 번째
- 두 번째
- 세 번째
- 새로운 리스트 시작
- 새로운 리스트 시작
5-2) 순서있는 목록 (Ordered)
💜 사용법
1. 첫 번째
2. 두 번째
3. 세 번째
57. 어떤 번호를 입력해도 순서는 내림차순으로 정의
1. `1.`로 해도 순차적으로 나옴📌 출력결과
-
첫 번째
-
두 번째
-
세 번째
- 어떤 번호를 입력해도 순서는 내림차순으로 정의
1.로 해도 순차적으로 나옴
6) 인용구 (Blockquotes)
💜 사용법
> 인용구 1 ...
>> ...인용구 2...
>>> ...인용구 3...📌 출력결과
인용구 1 ...
...인용구 2...
...인용구 3...
7) 코드 강조 (Code)
7-1) 인라인 코드 강조 (inline code)
💜 사용법
글 도중에 코드를 삽입하려고 할때 ` 를 사용해 코드 삽입
`code`📌 출력결과
code
7-2) 들여쓰기 코드 강조 (Indented code)
💜 사용법
띄어쓰기 4번
// Some comments
line 1 of code
line 2 of code
line 3 of code📌 출력결과
// Some comments
line 1 of code
line 2 of code
line 3 of code7-3) 블럭 코드 강조 (Block code )
💜 사용법
코드 블럭 삽입 : 코드 처음과 끝에 ~~~ 적는다.
코드 블럭 하이라이트 삽입 : ``` 입력후 코드의 언어를 적는다.
```java
public class Hello {
public static void main(String[] args) {
System.out.println("Hello Java");
}
}
```
~~~~
java
public class Hello {
public static void main(String[] args) {
System.out.println("Hello Java");
}
}
~~~~📌 출력결과
public class Hello {
public static void main(String[] args) {
System.out.println("Hello Java");
}
}java
public class Hello {
public static void main(String[] args) {
System.out.println("Hello Java");
}
}8) 링크 (Links)
💜 사용법
[GOOGLE](https://google.com)
[GOOGLE with Text](https://google.com "title text!")
Autoconverted link: <https://google.com> (enable linkify to see)
📌 출력결과
Autoconverted link: https://google.com (enable linkify to see)
9) 표 (Tables)
💜 사용법
헤더 셀 구분 : 3개이상의 - (dash) 기호 필요
셀 안의 내용 정렬 : : (colons) 사용
| Option | Description |etc|
| ------ | :-----------: |------:|
| data | path to data files to supply the data that will be passed into templates. |etc|
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |📌 출력결과
| Option | Description | etc |
|---|---|---|
| data | path to data files to supply the data that will be passed into templates. | etc |
| engine | engine to be used for processing templates. Handlebars is the default. | |
| ext | extension to be used for dest files. |
10) 이미지 (Images)
10-1) 이미지 삽입
💜 사용법
📌 출력결과
10-2) 이미지에 링크
💜 사용법
[](https://octodex.github.com/hulatocat/)📌 출력결과
10-3) 이미지 사이즈 줄이기
💜 사용법
<img src="https://cdn.pixabay.com/photo/2021/12/23/16/38/animal-6889575_960_720.jpg" style="zoom: 33%;" />
<img src="https://cdn.pixabay.com/photo/2021/12/23/16/38/animal-6889575_960_720.jpg" width="400" height="200"/>사이즈 줄이는 것도 Typora에서는 먹히는 것 같고, Velog 편집 UI에서도 보이는데, 여기에는 안보이는 것 같다 😣😣
📌 출력결과
3. 마치며📜
velog를 시작하려고 보니 markdown 문법의 사용법부터 알아야 할 것 같아서
직접 보기 위해 첫 글을 markdown 사용법부터 적게 되었습니다.
혹시 틀린 부분이 있다면 피드백 환영입니다. 👌
참고 사이트
https://markdown-it.github.io/
https://gist.github.com/ihoneymon/652be052a0727ad59601
이모지 관련 사이트 : https://steemit.com/emojis/@blueorgy/steemit-emojis-master-list
이미지 출처 : https://octodex.github.com/
