velog 작성 시 상단에는 아래와 같은 버튼이 표시된다.
따라서 마크다운을 외워두지 않아도 사용할 수 있다.
마크다운이 기억나지 않을 땐, 버튼을 누르면 자동으로 작성되어 확인할 수 있는 것이다.
하지만 모든 마크다운이 버튼으로 다 표시되지는 않는다.
예를 들면, 밑줄을 긋는 기능의 경우
<u>내용</u>이와 같은 구조로 사용하면
내용
이와 같이 표시된다.
하지만 해당 기능은 상단 버튼에 표시되지 않는다.
따라서 본 글에서는, 기본 상단 버튼을 통해 사용할 수 없는 마크다운을 정리해보도록 하겠다.
1. 표
첫 번째 행을 -(하이픈)으로 구별하고, 각 열을 |(수직선 기호)로 구별하여 표를 만들 수 있다.
예를 들면
✏️ 입력
열1|열2|열3
---|----|----
내용A|내용B|내용C
내용A|내용B|내용C👉 결과
| 열1 | 열2 | 열3 |
|---|---|---|
| 내용A | 내용B | 내용C |
| 내용A | 내용B | 내용C |
A. 좌우 정렬
이때 좌우 정렬의 경우 행 구분 선에서 :을 통해 맞출 수 있다.
예를 들면
✏️ 입력
열1|열2|열3
:---|:----:|----:
왼쪽 정렬|가운데 정렬|오른쪽 정렬👉 결과
| 열1 | 열2 | 열3 |
|---|---|---|
| 왼쪽 정렬 | 가운데 정렬 | 오른쪽 정렬 |
2. 글자 꾸미기 : 밑줄, 글자 색
html 테그를 이용하면, 글자를 좀 더 다양하게 나타낼 수 있다.
| 👉 결과 | ✏️ 입력 |
|---|---|
| 밑줄 | <u>밑줄</u> |
| 글자색 | <span style="color:red">글자색</span> |
3. 채크박스
✏️ 입력
- [ ] 체크박스
- [x] 체크박스
* [ ] 체크박스2
* [x] 체크박스2
+ [ ] 체크박스3
+ [x] 체크박스2👉 결과
- 체크박스
- 체크박스
- 체크박스2
- 체크박스2
- 체크박스3
- 체크박스2
4. 목록
A. 순서 있는 목록
숫자 뒤에 .(점)을 입력하고 공백을 두면 순서있는 목록으로 인식한다. 이때 앞의 숫자가 무엇인지에 상관 없이 작동한다.
✏️ 입력
1. 첫 번째
3. 두 번째
1. 세 번째👉 결과
- 첫 번째
- 두 번째
- 세 번째
B. 순서 없는 목록
* 혹은 - 뒤에 한 칸의 공백을 두고 글을 작성하면 순서 없는 목록으로 인식한다.
✏️ 입력
- 첫 번째
- 두 번째
* 세 번째
* 네 번째👉 결과
- 첫 번째
- 두 번째
- 세 번째
- 네 번째
C. 중첩된 목록
Tap과 Shift+Tap을 통해 중첩된 목록을 만들 수 있다.
들여쓰기는 Tap, 내어쓰기는 Shift+tap이다.
단, 순서없는 들여쓰기 뒤에는 들여쓰기가 작동하지 않는다. 순서 있는 들여쓰기 아래줄에서만 사용 가능하다.
✏️ 입력
1. 첫 번째
(Tap)1. 첫 번째의 들여쓰기1
(Tap)(Tap)- 들여쓰기의 들여쓰기
(Tap)(Tap)- 들여쓰기의 들여쓰기
(Tap)1. 첫 번재의 들여쓰기2
1. 두 번째
(Tap)- 두 번째의 들여쓰기1
(Tap)- 두 번째의 들여쓰기2👉 결과
- 첫 번째
- 첫 번째의 들여쓰기1
- 들여쓰기의 들여쓰기
- 들여쓰기의 들여쓰기
- 첫 번재의 들여쓰기2
- 첫 번째의 들여쓰기1
- 두 번째
- 두 번째의 들여쓰기1
- 두 번째의 들여쓰기2
5. 이모지
벨로그에선 keyboard key들을 눌러서 이모지들을 불러올 수 있다.
사용하는 OS에 따라 다른 키를 사용해야한다.
✏️ Windows : window key + ;(semi colon) || window key + .(period)
✏️ MacOS : ctrl + cmd + space bar
✏️ Linux : (right click) select insert emoji
이과 같이 누르면, 아래와 같은 이미지가 떠서 이모지를 선택할 수 있다.
6. 공백 추가
마크다운에선 Enter Key를 누른다고 빈 줄이 추가되지 않는다. 또한 Space Bar를 눌러도 단어 사이 간격이 늘어나지 않는다.
따라서 공백을 입력하기 위해선 html에서와 같은 공백 문자를 사용해주어야 한다.
| 👉 종류 | ✏️ 입력 |
|---|---|
| 줄바꿈 | <br/> |
| 단어 사이 간격 |   |
7. 수식입력
수식은 앞뒤로 $ 혹은 $$ 기호를 써서, LaTeX으로 표현한다.
LaTeX은 수식, 그래프 등을 작성하는데 쓰이는 문서작성법이다.
✏️ 입력
$$
y=x^2 + x + y \\
f(x) = \sum^{10}_{n=0}X\beta
$$👉 결과
좀 더 구체적이고 다양한 수식 입력방법은 아래 링크를 참고할 수 있다.
https://ko.wikipedia.org/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:TeX_%EB%AC%B8%EB%B2%95
8. 편집
| 기능 | 키 |
|---|---|
| 현재 행 삭제 | Ctrl + d |
| 현재 행 잘라내기 | Ctrl + x |
| 멀티커서 생성 | Ctrl + LeftClick |
| 드레그 멀티커서 | Alt+LeftClick(Drag) |
velog 이외의 마크다운
아래 html 같은 경우, velog에선 지원하지 않는다. 하지만 github, TStory 등 markdown/html 문법을 사용하는 다른 곳들에선 작동하는 경우가 많으므로 참고할 수 있다.
1. 접기/펼치기
특정 내용을 가려두었다가, 누르면 나타나게 하고 싶을 때가 있다. 주로 보충 설명 등이 그렇다.
이럴 경우, html 문법을 기용해서 velog에서 구현할 수 있다.
✏️ 입력
<details>
<summary>제목을 여기 입력</summary>
<div>누르면 나올 내용을 여기 입력</div>
</details>👉 결과
제목을 여기 입력📁 (추가 정보)
이를 꾸미고 싶을 경우, html에서 사용하는 수식 표현들을 이용할 수 있다. 예를 들면, 아래와 같이 사용할 수 있다.
<details style="background-color:lightgrey; border:1px solid blue; color:red; padding:10px ">
- 회색 배경을 깔기 <br/>
- 테두리를 만들기 <br/>
- 글씨 색을 바꾸기 <br/>
- 상자~글자 간격 조절 <br/>
</details>- 테두리를 만들기
- 글씨 색을 바꾸기
- 상자~글자 간격 조절
2. 이미지 크기 조절
마크다운에서 일반적으로 이미지를 삽입하는 방법은 2가지가 있다.
1) 
velog에선 이 구조가 기본형식이다. 따라서 아래와 같은 방법을 사용할 경우 이 구조로 나타난다.
- 이미지를
ctrl+c로 복사해서ctrl+v로 붙여 놓기 - 상단 버튼 눌러서 저장해둔 이미지를 삽입
{:width=크기}
의 형식으로 크기 조정이 가능하다.
2) <img src=" ">
html에서 가용하는 테그로도 이미지 삽입이 가능하다.
이 방법은 과거엔 velog 크기 조정이 가능하였다고 하나, 현재는 1번 방법과 마찬가지로 적용되지 않는다.
따라서 굳이 이 테그를 사용할 이유가 없다고 볼 수 있다.
다른 마크다운에서 이 방법을 사용할 경우, 크기를 조정하는 방법은 일반적인 html 마크다운에서 크기를 지정하는 방법과 같다.
예를 들면, 아래와 같이 src주소 뒤에 width와 height를 입력해준다.
<img src="https://images.velog.io/images/recoder/post/a55cf2c8-1609-4356-a8b1-da35df6a68ee/image.png" heigth=300 width=400>