노션을 사용하다가 벨로그에서 글을 쓰려니 생각보다 사용법이 어렵다고 느꼈다.
노션에서는 서식 메뉴를 제공했기 때문에 작성이 편했지만 여기에는 제공하는게 많이 없었다.
벨로그에 대해 구글링을 해보니깐 HTML과 같은 원리로 움직인다고 한다.
그래서 계속 구글링하기 귀찮으니깐 이 기회에 벨로그에 대해 공부해보려고 한다.
벨로그에서 기본적으로 제공하는 메뉴를 쉽게 사용하는 법은 제외함
📖 제목 태그
벨로그에는 h1부터 h4까지는 메뉴로 제공하지만 html에서는 h5와 h6까지 있음을 잊지말자.
h5로 작성한 문장 (##### h5로 작성한 문장)
h6로 작성한 문장 (###### h6로 작성한 문장)
그리고 제목 태그를 사용하면 우측 화면에 게시글 목차가 생기는데 이 목차는 h1, h2, h3만 등록이 가능하다.
🖌️ 글씨 색상
벨로그에서는 기본적으로 글씨 색상을 변경하는 메뉴는 제공하지는 않지만 span 태그를 사용하면 색상을 적용할 수 있다.
미리 지정된 색상의 이름을 사용하거나 HEX, RGB, HSL 등을 사용할 수 있다.
yellowgreen 색상을 적용함 (
<span style="color:yellowgreen"></span>)
#FF5733 색상을 적용함 (<span style="color:#FF5733"></span>)
rgb(193, 255, 51) 색상을 적용함 (<span style="color:rgb(193, 255, 51)"></span>)
hsl(175, 80%, 60%) 색상을 적용함 (<span style="color:hsl(175, 80%, 60%)"></span>)
색상은 이 사이트를 자주 사용할 것 같다. (HTML Color Codes)
✨ 글씨 효과
벨로그에서는 Bold, Italic, Strikethrough를 제공하며 다른 효과는 직접 입력해줘야 한다.
밑줄 (
<u>밑줄</u>)
📜 리스트
리스트는 노션에서의 리스트 사용과 비슷하다.
원래는 ol 태그와 li 태그를 사용해야 하지만 마크다운 작성법 포스팅 아니니깐 넘어갈 것이다.
숫자 리스트는 숫자 + . + Space로 작성이 가능하다.
리스트의 세부 항목은 리스트 항목에서 Enter를 누른 후 리스트 항목을 다시 만들어주면 된다.
- 첫 번째 항목
1.5. 세부 항목- 두 번째 항목
- 세 번째 항목
도형 리스트는 - + *를 인덱스로 삼아 리스트를 만들면 된다.
도형 리스트의 경우는 어떤 항목이냐에 따라 인덱스가 달라지며 이때는 들여쓰기 두 번 후 - * +를 입력하면 된다.
이런 리스트를 사용할 때는 - * + 중 하나를 선택하여 그 하나로만 작성할 것을 권장한다(고 한다).
- *로 만든 리스트
- *로 만든 리스트
- *로 만든 리스트
- -로 만든 리스트
- +로 만든 리스트
📸 이미지 삽입
다운 받지 않은 이미지를 업로드하는 경우, 다음과 같은 방법으로 업로드가 가능하다.
- 기본 방식: 
- 마우스 오버 했을 때 이미지 설명 나타나게 하기: 
- 이미지에 링크 걸기: [](연결할 링크 "연결할 링크 설명 문구")
+) 게시글 작성 후 확인 결과, 이미지 설명 문구, 연결할 링크 설명 문구가 정상적으로 출력되지 않음.
🏷️ 참조
참조는 이렇게 문자에 링크를 연결하는 것과 비슷하지만 연결된 링크를 아무 곳이나 작성할 수 있다는 점이 필자 입장에서는 장점이다.
[연결할 문자][인덱스] ([이렇게][1])
[인덱스]: 연결할 문장 ([1]: https://namu.wiki/w/%EC%A3%BC%EC%9D%B8%EA%B3%B5(%EC%96%B8%EB%8D%94%ED%85%8C%EC%9D%BC))
🚨 이스케이프 문자
+나 -를 단독으로 사용하고 싶은데 다른 요소로 변해버리는 경우, \(백슬래시)를 사용하여 탈출시킬 수 있다.
🧾 테이블
표는 솔직히 지원해줘야하는거 아니냐
<table>도 이용이 가능하지만 포스팅하면서까지 코딩하고 싶진 않을거같다
|(파이프)로 열을 구분할 수 있으며 -로 th와 tr을 구분할 수 있다.
:로 정렬을 표현할 수 있다.
| |one|two|three
|----|:----|:----:|----:
|1|1 1|2 1|3 1
|2|1 2|2 2|3 2
|3|1 3|2 3|3 3| one | two | three | |
|---|---|---|---|
| 1 | 1 1 | 2 1 | 3 1 |
| 2 | 1 2 | 2 2 | 3 2 |
| 3 | 1 3 | 2 3 | 3 3 |
✅ 체크박스
체크박스는 - + *를 입력 후 [ ]를 넣어 작성할 수 있으며 안이 띄어쓰기로 비어있을 경우는 체크가 안된 체크박스, x를 넣을 경우는 체크가 된 체크박스로 표시된다.
- 체크 X
- 체크 O
+) 게시글 작성 후 확인 결과, 체크가 정상적으로 출력이 안됨.
🎸 기타
- 되도록이면 작성할 때 앞뒤에 빈 줄을 넣어야 한다.
만약 다른 요소가 서로 앞뒤로 겹치는 상황이 생긴다면 호환성을 위해 위아래에 빈 줄을 넣는 편이 좋다.
> 여기에 인용구를 작성
( 빈 줄 )
다른 요소를 이어서 작성- 인용은 중첩하여 사용이 가능하다.
> 내용1
>> 내용2내용1
내용2
-
문장 내에서 코드를 사용하고 싶다면 역따옴표(
-
수평선은
***,---,___________를 사용하여 만들 수 있다. -
들여쓰기는 tab, 여러 줄 바꿈은 <br>을 사용한다.
🔎 참고한 사이트
ybkim3603.log - 내가 보려고 정리한 Velog(벨로그) 사용법 튜토리얼
Markdown Guide
