Velog 마크다운 작성방법 ✍

doop·2023년 6월 14일

벨로그... 처음 뵙겠습니다...만...두팔이는 또 그냥 못넘어가쥬?
이 놈 한 번 대충..찬찬히..그러나..열심히..파봅시다...
그렇다면 꼬우! 🏃‍♀️

프롤로그

개발 공부를 시작하게 된지 어언 한달하고 보름이 지났다. 
주위에서 '개발 블로그'에 대한 중요성을 귀가 닳도록 들었고-
스터디 팀원들의 추천으로 티스토리에 첫 블로그를 만들게되었다.
워낙 아기자기하게 꾸미고 뽀짝뽀짝 한 걸 좋아했던 나는 
점점..공부한 것 들을 잘 정리해 보겠다는! 목적과는 스물스물..멀어지고..
내용보다 썸네일을 좀 더 예쁘게- 좀 더 남들에게 깔끔하게 보이게- 등 
타인에게 잘 보이는데에만 치중하게 되었고
공부의 양이 늘어갈 수록 매일 매일 쓰는것이 버거워져 갔다. 

문제점을 깨닫고, 겉으로 보이는 것 보다 
내용에 집중해서 + 적기 쉽고 깔끔한 블로그 플랫폼을 찾고있었고
마크다운 기반으로 쉽게 작성 가능한 velog로 한번 이사를 와봤다.
꾸준함 꾸준함 꾸준함.. 매일 단 몇 줄이라도 꾸준히 써보자고 🏃‍♀️

🤔마크다운...근데 그게 뭐..죠..?

텍스트 기반의 '마크업 언어'의 일종.
특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서도 보다 빠르게 컨텐츠를 작성하고
보다 직관적으로 인식할 수 있다.
README 파일이나 온라인 문서 혹은 텍스트 편집기로 문서 양식을 편집할 때 쉽게 쓰고 읽을 수 있으며,
HTML로 변환이 가능한 언어이다.
단, 간단하기에 모든 HTML을 지원하지는 않는다고 한다. 예) SNS 태그 기능, 위키 백과 편집 기능

👊 문법 뽀개보자💣

~~사실 내가 보려고 만듬~~

제목이나 주제로 할 문장 앞에 #으로 표현, 갯수에 따라서 h1~ h6까지 표현 가능

💻 마크다운 작성 시

#h1 두팔
##h2 두팔
###h3 두팔
####h4 두팔
#####h5 두팔
######h6 두팔

🔎 결과

두팔

두팔

두팔

두팔

두팔

두팔

✍ 인용문

> 요거 쓴 다음 쓰고픈 말 쓰면 인용문으로 써짐.

💻 마크다운 작성 시

>요렇게 쓰면 인용문이 맹글어 지는군
>> `>>` 두개도 써져? 🤔
>>>`>>>` 갯수에 따라서 중첩문 가능 하다 🧙‍♂️

🔎 결과

요렇게 쓰면 인용문이 맹글어 지는군

>> 두개도 써져? 🤔

>>> 갯수에 따라서 중첩문 가능 하다 🧙‍♂️

✍ 줄바꿈

💻 마크다운 작성 시

첫번 째 문단<br/><br/>
두번 째 문단

엔터로 칸을 띄면 다음 행으로 넘어가게 됩니다. <br>두팔은 하나의 문장에서 줄바꿈

🔎 결과
첫번 째 문단

두번 째 문단

엔터로 칸을 띄면 다음 행으로 넘어가게 됩니다.
두팔은 하나의 문장에서 줄바꿈

✍ 구분선

* , _ , - 3개 이상 입력하면 회색 구분선이 입력됨.
다만, 하이픈-은 헤더로 인식 할 수도 있어서 사용 시 주의 필요!

💻 마크다운 작성 시

***
---
___

🔎 결과

***

___

---

✍ 목록

목록은 순서가 있는 목록 / 순서가 없는 목록으로 작성 가능

(1) 순서가 있는 목록

💻 마크다운 작성 시

각 행 앞에 숫자 + . 를 붙여준다.
(숫자를 무엇을 쓰는지는 크게 상관 X, 알아서 숫자를 매겨줌)

1. 첫 번째
2. 두 번째
3. 세 번째
5. 5라고 썼지만 4라고 매겨줄거지?

🔎 결과

첫 번째
두 번째
세 번째
5라고 썼지만 4라고 매겨줄거지?

(2) 순서가 없는 목록

💻 마크다운 작성 시

기호 - , * , + 를 사용하여 작성 가능
공백 ' ' 또는 Tab 키 이용하여 들여쓰기 하여 목록에 요소를 추가 할 수 있음

✨ Velog에서는 첫 요소를 넣을 때 Tab이 아닌 ' ' 공백을 사용해야 함!

(1)
Tab 키로 들여쓰기 할 경우

순서 없는 목록 1
- 목록 1-1
- 목록 1-2

(2) ' ' 공백 으로 들여쓰기 할 경우 (들여쓴 목록의 모양이 다르게 표현됨)
(상위 항목의 텍스트 첫문자 바로 아래에 올때 까지 공백문자를 입력)

순서 없는 목록 2
- 목록 2-1
  - 목록 2-2

(3)

순서 없는 목록
목록 내 한줄 코드 표기 가능

(4)

순서 없는 목록 4

		`Tab` 2번 or ' ' 공백 8번 코드 블럭 가능
		(대신 코드블럭과 목록 사이에 한 줄 비워야 함+ 공백을 사용한 들여쓰기)

🔎 결과
(1)
Tab 키로 들여쓰기 할 경우

순서 없는 목록 1
- 목록 1-1
- 목록 1-2

(2)
' ' 공백 으로 들여쓰기 할 경우 (목록의 모양과 들여쓰기가 다르게 표현됨)
(상위 항목의 텍스트 첫문자 바로 아래에 올때 까지 공백문자를 입력)

순서 없는 목록 2
- 목록 2-1
  - 목록 2-2

(3)

순서 없는 목록 3
목록 내 한줄 코드 표기 가능

(4)

순서 없는 목록 4

		`Tab` 2번 or ' ' 공백 8번 코드 블럭 가능
		(대신 코드블럭과 목록 사이에 한 줄 비워야 함+ 공백을 사용한 들여쓰기)

✍ 강조 / 기울임 / 취소선

💻 마크다운 작성 시

**굵게**
__굵게__
*기울임*
_기울임_
***강조+기울임***
___강조+기울임___
~~취소선~~

🔎 결과
굵게
굵게
기울임
기울임
강조+기울임
강조+기울임
~~취소선~~

✍ 코드(Code)

하나의 백틱(backticks)으로 문장 내 코드 또는 명령 작성 가능, 백틱 내의 텍스트들은 포맷되지 않고 그대로 출력됨.
' ' 공백 4개 or Tab 1번 들여쓰기 or 백틱 3개로 코드블럭 생성 (위 아래 백틱 3개로 감싸기)
언어 구별자를 사용하여 코드 블럭에서 구문(문법) 강조 (Syntax highlighting) 사용 가능

💻 마크다운 작성 시

브랜치 생성은 `git branch 브랜치명`
브랜치 이동은 `git switch 브랜치명`
브랜치 합치기는 기준 브랜치 이동 후 `git merge 브랜치명`
충돌 해결은 코드 고치고 `git add` & `git commit`


```javascript
let sumNumbers = (firstNum, lastNum) => {
  return firstNum + lastNum;
};
sumNumbers(100, 200);
```

🔎 결과

브랜치 생성은 git branch 브랜치명
브랜치 이동은 git switch 브랜치명
브랜치 합치기는 기준 브랜치 이동 후 git merge 브랜치명
충돌 해결은 코드 고치고 git add & git commit

let sumNumbers = (firstNum, lastNum) => {
  return firstNum + lastNum;
};
sumNumbers(100, 200);

✍ 링크

인라인 링크 / URL 링크 / 참조 링크

💻 마크다운 작성 시

- 인라인 링크
[Velog](https://velog.io/)
[github](https://pages.github.com/)

- URL 링크
<https://velog.io/>

- 참조 링크
[velog]:(https://velog.io/)

🔎 결과

인라인 링크
Velog
github
URL 링크
https://velog.io/
참조 링크

✍ 이미지

! 입력 → [] 입력 → (이미지 링크) 입력하면 이미지를 삽입할 수 있음.
- ![]( 이미지링크 ) → <img src="이미지 링크"> 로 바꿔 준 후 html 활용하여 width, height, px, % 등으로 크기조절 가능 (align 값 right/left 입력하면 오른쪽/왼쪽 정렬도 가능)
👉 현재 이미지 크기 조정 안된다고 함. 미리보기에선 적용되나, 게시 이후 적용 안됨.

💻 마크다운 작성 시

![](https://janet.co.kr/data/editor/2301/5f44e0ee8437b2774e9745817e872ac5_1674714493_3382.jpg)

🔎 결과

✍ 테이블

| 와 - 로 구분
~~- - 로 구분된 곳 각각 왼 / 오 / 양 쪽에 : (세미콜론) 을 붙일 경우 순서대로 왼쪽 / 오른쪽 / 가운데 정렬~~
👉 미리보기에선 정렬 적용되나, 게시 이후 적용 안됨. 다른 벨로그 게시글 또한 마찬가지

💻 마크다운 작성 시

| 왼쪽 정렬 | 가운데 정렬 | 오른쪽 정렬 |
|:---|:---:|---:|
|왼쪽 두팔|중앙 두팔|오른쪽 두팔|

🔎 결과

왼쪽 정렬	가운데 정렬	오른쪽 정렬
두팔	두팔	두팔

✍ 체크박스

- , + , * 뒤에 띄어쓰기 후 [] 넣어서 작성하기
~~- [] 안에가 비어있으면 빈 체크박스 x 를 넣으면 체크된 체크박스 생성됨~~
👉 미리보기에선 체크 적용되나, 게시 이후 적용 안됨. 다른 벨로그 게시글 또한 마찬가지

💻 마크다운 작성 시

- [x] 자스 12강 듣기
- [ ] 운동하기 🙄

🔎 결과

자스 12강 듣기
운동하기 🙄

✍ 접기 / 펼치기 / 토글

<details>
<summary>토글 접기/펼치기</summary>
<div markdown="1">

안녕안녕

</div>
</details>

토글 접기/펼치기

안녕안녕

💭 참고자료

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

Velog 글 작성법(Markdown 작성법 + 수식):
https://velog.io/@jay_/Velog-%EA%B8%80-%EC%9E%91%EC%84%B1%EB%B2%95Markdown-%EC%9E%91%EC%84%B1%EB%B2%95

doop

다음 포스트

Velog 마크다운 - 글 색상 / 형광펜 🎨

2개의 댓글

Ango

2023년 6월 22일

유용하네요

1개의 답글

Velog 마크다운 작성방법 ✍

프롤로그

🤔마크다운...근데 그게 뭐..죠..?

👊 문법 뽀개보자💣

✍ 제목/주제 (헤더: header)

두팔

두팔

두팔

두팔

두팔

두팔

✍ 인용문

✍ 줄바꿈

✍ 구분선

✍ 목록

✍ 강조 / 기울임 / 취소선

✍ 코드(Code)

✍ 링크

✍ 이미지

✍ 테이블

✍ 체크박스

✍ 접기 / 펼치기 / 토글

💭 참고자료

Velog 마크다운 - 글 색상 / 형광펜 🎨

2개의 댓글