Markdown 문법 사용 방법.

JooKit 주킷 2021. 2. 27. 11:03
목차 접기
728x90
반응형

Codepen 참고_____https://codepen.io/khr777/pen/bGBLOjd

# open preview 단축키
- ctrl + shift + v

<!-- Heading -->
# Heading1
## Heading2
### Heading3
#### Heading4
##### Heading5
###### Heading6
Paragraph : 아무것도 붙이지 않으면 일반 텍스트처럼 출력
- `#` 1개는 수평선이 자동으로 추가 된다.
<br>
<br>
<br>
<br>

<!-- Line -->
## Line
___


<!-- Text Attributes -->
This is the **bold** text and this is the *italic* text and let's do ~~strikethrough~~.
<br>
<br>
<br>
<!-- Quote -->
# Quote
> Don't forget to code your dream.

<br>
<br>
<br>

<!-- Bullet list -->
# Bullet list
Fruits:
* 🥝 
* 🍎

Other fruits:
- 🍑
- 🍇
<br>
<br>
<br>
<!-- Numbered list -->
# Numbered list
Numbers:
1. first
2. second
3. third
<br>
<br>
<br>
<!-- Link -->
# Link
Click [here](http://www.google.com)
<br>
<br>
<br>
<!-- Image -->

# Image
![image description](https://cdn.pixabay.com/photo/2021/01/11/19/14/windmill-5909414_1280.jpg)
<br>
<br>
<br>

# Image size 지정
## HTML img tag width 속성을 사용하여 크기 조절 가능  
<img src="https://cdn.pixabay.com/photo/2021/01/11/19/14/windmill-5909414_1280.jpg" width=300>
<br>
<br>
<br>

<!-- Table -->
# Table
|Header|description|
|--|--|
|Cell1|Cell2|
|Cell1|Cell2|
|Cell1|Cell2|
|Cell1|Cell2|
|Cell1|Cell2|
- | 로 셀을 구분해준다.
- 내용을 입력하기 위한 구분으로 아래에 |--|을 입력한다.
- 위와 같이 테이블이 완성된다.
<br>
<br>
<br>

# Table 오른쪽/왼쪽 정렬
|Header|description|
|--:|:--|
|Cell1|Cell2|
|Cell1|Cell2|
|Cell1|Cell2|
|Cell1|Cell2|
|Cell1|Cell2|
- :을 오른쪽/왼쪽에 붙여준다.
<br>
<br>
<br>
# Table 가운데 정렬
|Header|description|
|:--:|:--:|
|Cell1|Cell2|
|Cell1|Cell2|
|Cell1|Cell2|
|Cell1|Cell2|
|Cell1|Cell2|
- :을 양쪽에 붙여준다.
<br>
<br>
<br>

<!-- Code -->
# Code
To print message in the console, use `console.log('your message')` and...

```js
console.log('your message');
  • 사용언어를 빽틱과 함께 입력해주면 해당 언어에 맞춰 포인트가 달라진다.
  • 예) js, ts, java, kotlin

Github

  • github에서는 Github Flavored Markdown 이라는 것을 지원한다.

open preview 단축키

  • ctrl + shift + v

Heading1

Heading2

Heading3

Heading4

Heading5
Heading6

Paragraph : 아무것도 붙이지 않으면 일반 텍스트처럼 출력

  • # 1개는 수평선이 자동으로 추가 된다.

Line


This is the bold text and this is the italic text and let's do

strikethrough

.

Quote

Don't forget to code your dream.

Bullet list

Fruits:

  • 🥝
  • 🍎

Other fruits:

  • 🍑
  • 🍇
\# Numbered list Numbers:
  1. first
  2. second
  3. third
\# Link Click \[here\](http://www.google.com)  

Image

image description

Image size 지정

HTML img tag width 속성을 사용하여 크기 조절 가능

Table

Header description
Cell1 Cell2
Cell1 Cell2
Cell1 Cell2
Cell1 Cell2
Cell1 Cell2
- 로 셀을 구분해준다.
- 내용을 입력하기 위한 구분으로 아래에 --
- 위와 같이 테이블이 완성된다.

Table 오른쪽/왼쪽 정렬

Header description
Cell1 Cell2
Cell1 Cell2
Cell1 Cell2
Cell1 Cell2
Cell1 Cell2
- :을 오른쪽/왼쪽에 붙여준다.
# Table 가운데 정렬
Header description
:--: :--:
Cell1 Cell2
Cell1 Cell2
Cell1 Cell2
Cell1 Cell2
Cell1 Cell2
- :을 양쪽에 붙여준다.

Code

To print message in the console, use console.log('your message') and...

console.log('your message');
  • 사용언어를 빽틱과 함께 입력해주면 해당 언어에 맞춰 포인트가 달라진다.
  • 예) js, ts, java, kotlin

Github

  • github에서는 Github Flavored Markdown 이라는 것을 지원한다.
728x90
반응형
LIST