개발을 하다 공부한 내용들을 기록하고 공유하고 싶어 블로그를 시작해야겠다고 마음을 먹은 와중,
velog라는 블로그 플랫폼에 대해 알게 되었다.
비장하게 첫 글을 쓰려던 때,
네이버 블로그와 같은 위지윅(WYSIWYG) 에디터에 익숙했던 나에게는 조금 생소한 글 작성 페이지가 눈에 들어왔다.
찾아보니 Markdown을 사용한 글쓰기 방식이었다.
처음에는 생소해서 사용하는데 불편하지 않을까 했지만, Markdown은 사용방식이 간결하며 쉽고, 가독성이 높다는 점에서 익숙해지기만 하면 글쓰기에 있어서 더욱 편하겠다는 생각이 들었다.
따라서 나의 첫 글은 Markdown 에디터의 방식도 익힐 겸 내가 언제든지 찾아보기 쉽도록 작성법을 정리해서 올려두려고 한다!
마크다운(Markdown)이란 ?
마크다운(Markdown)은 일반 텍스트 기반의 경량 마크업 언어로, 문서를 쉽게 작성하고 읽을 수 있도록 설계된 형식이다. 마크다운은 텍스트로 문서의 구조를 표현하면서도 HTML과 같은 복잡한 마크업 언어를 사용하지 않고도 간단한 문법을 제공한다. 이는 사용자가 간편하게 서식을 적용하고 문서를 작성할 수 있도록 도와준다.
velog의 글쓰기 방식은 이러한 마크다운 문법에 기반하여 여러기능을 추가한 방식으로 생각된다.
마크다운(Markdown)의 장점
1. 가독성
간결한 문법을 사용하여 텍스트를 서식 있게 작성할 수 있으며, 일반 텍스트로도 읽기 쉽다.
2. 손쉬운 학습
간단한 마크다운 문법을 익히면 빠르게 작성할 수 있으며, 별도의 에디터 없이도 작성 가능하다.
3. 버전 관리 용이
텍스트 기반의 파일로 저장되므로 버전 관리 시스템(예: Git)과 호환성이 용이하다.
마크다운(Markdown) 작성법
1. 제목 (Header)
제목은 HTML에서의 h1부터 h6까지 표현할 수 있으며 #의 개수로 표현이 가능하다.
# h1
## h2
### h3
#### h4
##### h5
###### h6h1
h2
h3
h4
h5
h6
2. 문단, 단락 (Paragraphs)
문단의 간격은 줄 바꿈으로 나타내며, 여러번 줄 바꿈 시 <br/>태그 사용.
1번째 문단 <br/><br/>
2번째 문단1번째 문단
2번째 문단
3. 목록 (List)
3-1. 순서를 표시해주는 목록 (ol)
숫자와 . 을 사용하여 작성
1. 첫번째 목록
2. 두번째 목록- 첫번째 목록
- 두번째 목록
3-2. 순서가 없는 목록 (ul)
-, *, + 을 사용 하여 작성
Tab키나 스페이스 바를 이용해 들여쓰기가 가능
- 첫번째 목록
- 첫번째 하위 목록 1
- 두번째 목록
- 두번째 하위 목록 1
- 두번째 하위 목록 2
- `인라인코드` 작성가능- 첫번째 목록
- 첫번째 하위 목록 1
- 두번째 목록
- 두번째 하위 목록 1
- 두번째 하위 목록 2
인라인코드작성가능
4. 폰트 스타일 (Font Style)
강조, 기울임, 취소선을 표시하는 경우,
*또는 _
그리고 ~를 이용하여 작성
**굵게** (Bold)
__굵게__
*기울임* (Italic)
_기울임_
***굵게 + 기울임***
___굵게 + 기울임___
~~취소선~~ (`~` 두개 사용)굵게 (Bold)
굵게
기울임 (Italic)
기울임
굵게 + 기울임
굵게 + 기울임
취소선 (~ 두개 사용)
5. 인용문 (Blockquotes)
인용문을 작성할 때에는 >를 사용
> 인용문 작성하기
-*작성자*
> 인용문 작성하기
>> `>`의 갯수에 따라
>>> 중첩문 가능인용문 작성하기
-작성자
인용문 작성하기
>의 개수에 따라중첩 가능
6. 인라인 코드 (Code)
백틱(｀)을 사용하여 인라인 코드를 작성
`앞 뒤로 백틱 키를 사용하여 인라인 코드 작성`
``두번 사용 시 인라인 코드 내에 백틱(`)키 표시가능 ``앞 뒤로 백틱 키를 사용하여 인라인 코드 작성
두번 사용 시 인라인 코드 내에 백틱(`)키 표시가능
7. 코드 블럭 (Code Blocks)
백틱(｀)을 3개 사용하여 작성
```
위 아래를 백틱 3개로 감싸 코드 블럭 작성
``` 위 아래를 백틱 3개로 감싸 코드 블럭 작성 코드 하이라이트
작성 시아래와 같이 백틱 3개 뒤에 언어 이름을 넣어주세요.
```javascript
let sumNumbers = (firstNum, lastNum) => {
return firstNum + lastNum;
};
sumNumbers(100, 200);let sumNumbers = (firstNum, lastNum) => {
return firstNum + lastNum;
};
sumNumbers(100, 200);8. 수평선(Horizontal Rules)
*** 또는 ---, ___를 사용
---
***
__ __ __9. 링크 (link)
괄호를 통해 링크 생성
인라인 링크는 아래처럼
[인라인 링크](https://velog.io/)
url 링크는 아래처럼
<https://velog.io/>
참조 링크
[참조 한 링크 사용함][참조링크]
[참조링크]: http://velog.io인라인 링크
인라인 링크
url 링크
https://velog.io/
참조 링크
10. 이미지 (Images)
앞에 !를 붙여 이미지를 불러오거나 링크
이미지 크기는 10MB 이하만 가능 (gif 포함)
[]
[
)]
11. 탈출문자 (Escaping Characters)
텍스트 서식에 사용되는 문자나 기호들을 표현하고자 할 때는 \백슬래시(Backslash) 키를 사용
\* 백슬래시는 backspace 키 옆에 있음* 백슬래시는 backspace 키 옆에 있음
12. 표 (Table)
테이블은 | (파이프)와 - (하이픈)을 사용하여 만든다.
- (하이픈)으로 thead와 tbody를 구분하고,
구분된 곳 각각 왼쪽, 양쪽, 오른쪽에 : (세미콜론)을 붙일 경우
순서대로 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬 가능.
| 영화 제목 | 출연 | 개봉일 |
|:----------|:----------:|----------:|
| **파묘** | 최민식, 김고은, 유해진, 이도현 | 2024.02.22 |
| 웡카 | 티모시 살라메, 칼라 레인 | 2024.01.31. ~ |
| 듄 : 파트2 | 티모시 살라메, 젠데이아 콜먼 | 2024.02.28. ~ || 영화 제목 | 출연 | 개봉일 |
|---|---|---|
| 파묘 | 최민식, 김고은, 유해진, 이도현 | 2024.02.22 |
| 웡카 | 티모시 살라메, 칼라 레인 | 2024.01.31. |
| 듄 : 파트2 | 티모시 살라메, 젠데이아 콜먼 | 2024.02.28. |
13. HTML
html 코드 사용가능
테스트 해봤는데, 인라인 스타일은 적용되지 않는 듯
<div style="display:block; width:200px; height:100px; background-color:#1fc494; text-align:center; box-sizing:border-box; padding:10px; border-radius:10px;">
<p style="margin:0; padding:0; color:#fff;">안녕하세요.</p>
<a href="https://velog.io/" target="_blank" style="display:inline-block; color:#fff; text-decoration:underline; margin-top:10px;">눌러보세요</a>
</div>안녕하세요.
눌러보세요14. 아이콘 / 이모티콘 (Icons / Emoji)
이모티콘은 그림 이모티콘을 복사하여 붙여넣거나 단축키를 사용
해당 문서에서 사용한 아이콘은 iconoir에서 가져와 수정하였음.
💡 단축키
Windows 10 : Window + '.'(마침표)
Mac : Command + Control + Space Bar
💡 이모티콘, 아이콘 사이트
https://emojipedia.org/
https://getemoji.com/
https://iconoir.com/
이상으로 velog의 Markdown 작성법에 대해 정리를 마친다.
