벨로그 velog 사용법

Jieun Oh·2023년 1월 23일
0
post-thumbnail

👻 마크다운 작성법

📌 1. 제목(header)

h1부터 h6까지 표현할 수 있으며, #의 개수로 표현이 가능함

참고: 회색 박스로 감싸진 부분은 백틱(backtick)으로 감싸서 작성하면 됨

✍ 입력

# 첫 번째 수준 제목 (h1)
## 두 번째 수준 제목 (h2)
### 세 번째 수준 제목 (h3)
#### 네 번째 수준 제목 (h4)
##### 다섯 번째 수준 제목 (h5)
###### 여섯 번째 수준 제목 (h6)

👉 출력

첫 번째 수준 제목 (h1)

두 번째 수준 제목 (h2)

세 번째 수준 제목 (h3)

네 번째 수준 제목 (h4)

다섯 번째 수준 제목 (h5)
여섯 번째 수준 제목 (h6)

📌 2. 인용(Blockquotes)

본문 안에서 인용된 내용을 표시하고자 한다면 > 기호를 사용함

✍ 입력

> # 1단
인용문 첫 번째 줄
인용문 두 번째 줄
인용문 세 번째 줄
>> ## 2단
중복해서 사용하면
>>> ### 3단
중첩 인용문을 표현할 수 있다.
>>>> #### 4단
계속 중첩할 수 있다.

🔎 참고: 인용문 안에서 제목 수준을 표현할 수도 있다.

👉 출력

1단

인용문 첫 번째 줄
인용문 두 번째 줄
인용문 세 번째 줄

2단

중복해서 사용하면

3단

중첩 인용문을 표현할 수 있다.

4단

계속 중첩할 수 있다.


📌 3. 리스트

일반적인 불릿 리스트는 * + - 중 아무거나 사용하면 됨

✍ 입력

* 별도
+ 플러스도
- 마이너스도 똑같이 나온다

👉 출력

  • 별도
  • 플러스도
  • 마이너스도 똑같이 나온다

💡 숫자 리스트는 숫자 + 마침표를 이용하면 됨

✍ 입력

1. 1번
2. 2번
3. 3번
4. 4번
5. 5번

👉 출력
1. 1번
2. 2번
3. 3번
4. 4번
5. 5번

🔎 숫자 리스트는 순서가 맞지 않아도 자동으로 숫자가 맞춰진다.

💡 리스트 안에서 이어지는 문단을 추가할 때는 스페이스바만 입력해줘도 됨

✍ 입력

- 첫 번째 리스트
 
 이어지는 두 번째 문단

- 두 번째 리스트
 
 이어지는 두 번째 문단

👉 출력

  • 첫 번째 리스트

    이어지는 두 번째 문단

  • 두 번째 리스트

    이어지는 두 번째 문단


📌 4. 코드블럭(Code Blocks) 만들기

💡 한 줄짜리 코드 블럭은 Tab 을 이용해서 작성할 수 있음

다만, 이전 문장으로부터 엔터를 두 번 입력해야만 가능하다.

💡 여러 줄의 코드 블럭은 백틱(backtick) 3개로 감싸서 작성함

여러 줄의 코드 블럭은
3개의 백틱으로
감싸서 만들 수 있다.

🔎 코드 블럭 시작점에 사용하는 언어를 선언하면 Syntax Highlighting이 가능함


📌 5. 가로선 넣기

가로선을 넣기 위한 다양한 방법이 있는데, 아래의 입력 방식은 모두 동일한 가로선을 만들어줌

✍ 입력

* * *
***
*****
- - -
---
-----
_ _ _
___
_____

👉 출력











아래의 3가지 방식으로 링크를 나타낼 수 있음

  1. 인라인 링크
  2. url 링크
  3. 참조 링크

✍ 입력

# 인라인 링크
[인라인 링크](https://velog.io/@jeoh1124)

# url 링크
<https://velog.io/@jeoh1124>

# 참조 링크
[velog]:https://velog.io/@jeoh1124
[velog]

👉 출력

인라인 링크

https://velog.io/@jeoh1124

velog -> 키워드를 참조하는 방식


📌 7. 강조하기(Emphasis)

볼드, 이태릭, 취소선을 사용할 수 있음

✍ 입력

*이태릭*
_이태릭_
**볼드**
__볼드__
~~취소선~~

👉 출력
이태릭
이태릭
볼드
볼드
취소선


📌 8. 이미지 삽입(Images)

링크 삽입 방식과 유사하고, 맨 앞에 !를 붙임

✍ 입력

1. 일반 이미지 삽입하기: ![대체 텍스트](이미지 링크)
예시: ![codingmeme](https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pinterest.com%2Fpin%2F484207397440689564%2F&psig=AOvVaw0_x_sRvO76NiRtdZnsLACV&ust=1674565517325000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCOC5s-bg3fwCFQAAAAAdAAAAABAm)                 

2. 이미지에 설명 삽입하기: ![대체 텍스트](이미지 링크 "이미지 설명 문구")
예시: ![codingmeme](https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pinterest.com%2Fpin%2F484207397440689564%2F&psig=AOvVaw0_x_sRvO76NiRtdZnsLACV&ust=1674565517325000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCOC5s-bg3fwCFQAAAAAdAAAAABAm "codingmeme")
** 참고: 이미지에 마우스를 올렸을 때 나타나는 설명을 의미함                  

3. 이미지에 링크 걸기: [![대체 텍스트](이미지 링크)](연결할 url "url 설명 문구")
예시: [![codingmeme](https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pinterest.com%2Fpin%2F484207397440689564%2F&psig=AOvVaw0_x_sRvO76NiRtdZnsLACV&ust=1674565517325000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCOC5s-bg3fwCFQAAAAAdAAAAABAm)](https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pinterest.com%2Fpin%2F484207397440689564%2F&psig=AOvVaw0_x_sRvO76NiRtdZnsLACV&ust=1674565517325000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCOC5s-bg3fwCFQAAAAAdAAAAABAm "codingmeme")                  

👉 출력
1. 일반 이미지 삽입하기: ![대체 텍스트](이미지 링크)
예시:
2. 이미지에 설명 삽입하기: ![대체 텍스트](이미지 링크 "이미지 설명 문구")
예시:
3. 이미지에 링크 걸기: [![대체 텍스트](이미지 링크)](연결할 url "url 설명 문구")
예시:

참고) 이미지 크기 조절

  1. ![대체 텍스트](이미지 링크){:width=크기}
  2. <img src="">
    html에서 사용하는 태그로도 이미지 삽입이 가능함

✍ 입력

<img src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pinterest.com%2Fpin%2F484207397440689564%2F&psig=AOvVaw0_x_sRvO76NiRtdZnsLACV&ust=1674565517325000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCOC5s-bg3fwCFQAAAAAdAAAAABAm" heigth=300 width=400>

👉 출력


📌 9. 기호 표시(Backslash Escapes)

마크다운 문법에 있는 기호를 그래로 출력하고 싶으면, 역방향 슬래시를 앞에 붙여주면 됨

✍ 입력

\*
\_
\()
\{}
\[]
\#
\+
\-
\.
\!
\\

👉 출력
*
_
()
{}
[]
#
+
-
.
!
\


📌 10. 테이블(Table)

  • 수직선 기호(|)로 열을 구분할 수 있음
  • 하이픈 기호(-)으로 구분된 곳 각각 왼쪽, 양쪽, 오른쪽에 세미콜론 기호(:)를 붙일 경우 순서대로 왼쪽, 가운데, 오른쪽 정렬이 가능함

✍ 입력

|    |left |center|right
|----|:----|:----:|----:
|row1|l1   |  c1  |  r1
|row2|l2   |  c2  |  r2
|row3|l3   |  c3  |  r3

👉 출력
| |left |center|right
|----|:----|:----:|----:
|row1|l1 | c1 | r1
|row2|l2 | c2 | r2
|row3|l3 | c3 | r3


📌 11. 이모지(Emoji)

  1. 링크에서 복사 + 붙여넣기: https://kr.piliapp.com/twitter-symbols/
  2. Windows: window key + ;(semi-colon) or .(period)
    Mac: ctrl + cmd + space bar

📌 12. 체크박스(Check Box)

*, +, - 기호 뒤에 띄어쓰기 이후 대괄호[]를 넣어 작성함
띄어쓰기를 하면 체크되지 않은 상태이고,
x를 입력해주면 체크된 상태가 됨.

✍ 입력

- [ ] 체크되지 않은 박스
- [x] 체크된 박스

👉 출력

  • 체크되지 않은 박스
  • 체크된 박스

📌 13. 글자색 변경

html 태그를 이용하면 글자를 좀 더 다양하게 나타낼 수 있음

✍ 입력

<span style="color:red">빨간색</span>
<span style="color:pink">분홍색</span>
<span style="color:blue">파랑색</span>

👉 출력
빨간색
분홍색
파랑색


📌 14. 수식 입력

수식은 앞뒤로 $ 혹은 $$ 기호를 써서 LaTeX로 표현함

  • LaTeX: 수식, 그래프 등을 작성하는데 쓰이는 문서 작성법

✍ 입력

$$
y=x^2 + x + y \\
f(x) = \sum^{10}_{n=0}X\beta
$$

👉 출력

y=x2+x+yf(x)=n=010Xβ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


🔗 참고 링크

profile
프론트엔드 개발자 & 통계적 머신러닝

0개의 댓글