Prologue

그동안 학생으로써 또는 개발자로서 나만의 기술 블로그를 작성하고 싶었습니다. 다양한 블로그 플랫폼(티스토리, github, 미디엄, 벨로그, 워드프레스 등등..) 고민하였으나 마크다운 기반으로 쉽게 작성가능한 velog를 첫 블로그 선택하였고.. 사용법을 작성해보고자 합니다.

Velog 글 작성법 (마크다운 문법)

1. Headings(제목,주제)

#을 사용하여 제목의 크기를 정합니다. 1~6개의 #으로 제목 텍스트를 설정할 수 있습니다.

2개 이상의 headings를 사용할 경우, 자동으로 contents table을 생성해 줍니다. Contents table 각각의 headings 를 클릭하면 해당 section으로 이동합니다.

• ⌨️ 입력

***
## The second largest heading
***
### 3333333333333333333
***
#### 444444444444444444444
***
##### 555555555555555555555
***
###### The smallest heading6
***

• 🖥 출력

The largest heading

The second largest heading

3333333333333333333

444444444444444444444

555555555555555555555

The smallest heading6

*** 으로 글에서 회색 구분선을, <br>로 줄바꿈 을 할 수 있습니다.

2. Styling text(글꼴 스타일)

글꼴 스타일 지정하여 텍스트를 강조할 수있습니다.

• bold(굵게), italic(이탈릭체), strikethrough(취소선)
  
  

3. Quoting text(인용문)

텍스트를 > 이용하여 인용할 수 있습니다.

• ⌨️ 입력
  Text that is not a quote
> Thext that is a quote
  
  
• 🖥 출력
  Text that is not a quote

  Text that is quote

추가적으로 중복하여 사용할 수 있습니다.

• ⌨️ 입력

>Text that is quote
>>Quote that is in quote

• 🖥 출력

  Text that is quote

  Quote that is in quote

4. Quoting code(코드 인용)

하나의 backticks ` 으로 문장내 코드 또는 명령을 작성할 수 있습니다. backticks 내의 텍스트들은 포맷되지않고 그대로 출력됩니다.

• ⌨️ 입력
  Use ` git status ` to list all new or modified files that haven't yet been committed.
  
  

• 🖥 출력

Use git status to list all new or modified files that haven't yet been committed.

코드나 텍스트를 독립적인 블록에 작성하고 싶다면 3개의 backticks `를 사용해 보세요!

• ⌨️ 입력

Some basic Git commands are:
```
git status
git add
git commit
```

• 🖥 출력

git status
git add
git commit

4.1 Syntax highlighting(문법 강조)

• 추가적인 언어 구별자를 사용해 코드 블럭 에서 syntax 강조를 할 수 있습니다.
  
  
  예를들어 간단한 파이썬 코드를 작성해 보겠습니다.

• ⌨️ 입력

```python
def function1():
	for i in range(10):
		print("Hello Velog!")
    print("function1 finished")

```

• 🖥 출력

def function1():
	for i in range(10):
		print("Hello Velog!")
    print("function1 finished")

5. Links(링크)

인라인 링크를 작성하려면 대괄호 [] 로 묶은후 URL을 ()로 묶은후 입력하면 됩니다.

• ⌨️ 입력
  I like [Github Pages](https://pages.github.com/).
I like [Velog](https:https://velog.io/).

• 🖥 출력
  I like Github Pages.
  I like Velog.

6. Images(이미지)

!입력후 [ ] 를 입력하고 이미지 링크를 입력하면 이미지를 띄울 수 있습니다. 컴퓨터에 있는 파일을 올리면 자동으로 링크를 생성해줍니다.

• ⌨️ 입력

![](https://media.vlpt.us/images/jay_/post/dcf7c78c-a924-4aa2-8e47-c23fc426a668/velog_logo.png)

• 🖥 출력
  

6.1 Images 크기 조절

html 을 활용하여 작성하면 width, height를 px,%등으로 입력하여 사이즈를 조절할 수 있습니다.

• ⌨️ 입력
  <img src="https://images.velog.io/images/jay_/post/dcf7c78c-a924-4aa2-8e47-c23fc426a668/velog_logo.png" height="20%" width="20%">

• 🖥 출력
  

💡 height, width 뿐만 아니라 align값을 right, left를 입력하면 오른쪽, 왼쪽정렬이 가능합니다!

7. Lists(목록)

- 또는 * 사용하여 순서없는 목록을 만들 수 있습니다.

• ⌨️ 입력

- George Washington
- John Adams
- Thomas Jefferson

• 🖥 출력

• George Washington

• John Adams

• Thomas Jefferson

순서가 있는 목록은 각 행 앞에 숫자를 붙이면 됩니다.

• ⌨️ 입력

1. James Madison
2. James Monroe
3. John Quincy Adams

• 🖥 출력

1. James Madison
2. James Monroe
3. John Quincy Adams
   
   

Nested list (중첩 목록)

하나 이상의 목록을 다른 항목 아래에 들여써 중첩 목록을 만들 수 있습니다. - 또는 *가 상위 항목의 텍스트 첫문자 바로 아래에 올때 까지 공백문자를 입력하면 됩니다.

• ⌨️ 입력

1. First list item
   - First nested list item
     - Second nested list item

• 🖥 출력

1. First list item
   • First nested list item
     • Second nested list item

8. 이모티콘

다음의 단축키로 이모티콘을 사용할 수 있습니다.
Window : window + .
Mac : Command + Control + Spacebar
🖥⌨️🐽💡►🦊

9. Tables(표)

파이프 | 와 하이픈 -을 사용하여 table을 만들 수 있습니다. -은 각 열의 헤더를 만들때, |는 각 열을 구분하는데 사용합니다. (테이블윗줄이 비어있어야 합니다.)

• ⌨️ 입력

| Command | Description |
| --- | --- |
| `git status` | List all *new or modified* files |
| `git diff` | Show file differences that **haven't been** staged |

• 🖥 출력

다음과 같이 오른쪽, 왼쪽 중앙 정렬도 가능합니다.

• ⌨️ 입력

| Left-aligned | Center-aligned | Right-aligned |
| :---         |     :---:      |          ---: |
| git status   | git status     | git status    |
| git diff     | git diff       | git diff      |

• 🖥 출력

10. 수식

수식은 보통 논문에서 많이 보게되고 이에 작성의 필요성을 느껴 추가합니다. velog 에서 수식 작성은 KaTex 라이브러리를 이용하여 작성할 수 있습니다. 일반적으로 $$ 태그를 사이에 두고 작성합니다. (관련 내용 업데이트는 velog 공식 블로그에 간략하게 나와있습니다.)

예시1

• ⌨️ 입력

$$
\begin{bmatrix}a & b \\ c & d \end{bmatrix} * 
\begin{bmatrix}a & b \\ c & d \end{bmatrix} = 
\begin{bmatrix}a^2 + bc & ab+bd \\ 
ac+cd & bc+d^2 \end{bmatrix}
$$

• 🖥 출력
  $\begin{bmatrix}a & b \\ c & d \end{bmatrix} * \begin{bmatrix}a & b \\ c & d \end{bmatrix} = \begin{bmatrix}a^2 + bc & ab+bd \\ ac+cd & bc+d^2 \end{bmatrix}$

예시2

• ⌨️ 입력

$$
\displaystyle\sum_{i=1}^{k+1}i
\displaystyle \displaystyle= \left(\sum_{i=1}^{k}i\right) 
+(k+1)
$$

• 🖥 출력
  $\displaystyle\sum_{i=1}^{k+1}i \displaystyle \displaystyle= \left(\sum_{i=1}^{k}i\right) +(k+1)$

수학을 전공하지는 않았지만 수식에는 정말 다양한 표기가 있음을 압니다. 다양한 표기를 작성하는 방법은 Katex Docs 링크를 참고하시면 좋을 것 같습니다.
https://katex.org/docs/supported.html

참고자료

Velog [Markdown] 사용법:
https://velog.io/@kim-mg/velog-%EA%B8%80%EC%93%B0%EA%B8%B0-markdown-%EC%9E%91%EC%84%B1%EB%B2%95


[Markdown] 이미지 크기 조절,정렬
https://velog.io/@baekmoon1230/Markdown-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%81%AC%EA%B8%B0-%EC%A1%B0%EC%A0%88-%EC%A0%95%EB%A0%AC


깃허브Docs
https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#quoting-code

벨로그 공식 블로그
https://velog.io/@velog/v2-update#10-%EC%82%AC%EB%9D%BC%EC%A7%84-%EA%B8%B0%EB%8A%A5%EB%93%A4

좀더 읽어볼만한 자료

깃허브 - Working with advanced formatting
https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting


마크다운 문법 - detail한 글
https://velog.io/@wonhs717/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4Markdown-%EB%AC%B8%EB%B2%95-ytk5zemk0x

Epilogue

Velog .. 그리고 블로그 첫 글을 작성해 보았습니다. 글재주가 없고, 마크다운 작성법을 공부해 가면서 작성하느라 시간이 조금 걸렸습니다. 부족하거나 틀린부분있으면 편하게 말씀해주시면 감사드리겠습니다!

현재 이미지 크기조절이 잘 안되네요.. 참고하시길 바랍니다.