Velog 기본 글 문법
목차
- ### 마크다운 설명기본 글 문법
마크다운
마크다운(markdown)은 일반 텍스트 문서의 양식을 편집하는 문법이다. README 파일이나 온라인 문서, 혹은 일반 텍스트 편집기로 문서 양식을 편집할 때 쓰인다. 마크다운을 이용해 작성된 문서는 쉽게 HTML 등 다른 문서형태로 변환이 가능하다.
기본 글 문법
1. 문단
문단과 문단 사이는 빈 줄(엔터키 두 번)로 구분한다.
> 마크다운
하나의 문단.
다른 문단.> 실행결과
하나의 문단.
다른 문단.
2. 제목 Headers
h1부터 h6까지 제목을 표현할 수 있다.
> 마크다운
# h1
## h2
### h3
#### h4
##### h5
###### h6
```
##### > 실행결과
# h1
## h2
### h3
#### h4
##### h5
###### h6
`h1`과 `h2`는 다음과 같이 표혈할 수 있다.
##### > 마크다운
h1
h2
##### > 실행결과
h1
=====
h2
-----
## 3. 인용문
`>`블럭인용문자를 이용한다.
##### > 마크다운인용문
중첩된 인용문
중중첩된 인용문
##### > 실행결과 인용문 중첩된 인용문 중중첩된 인용문
4. 목록(리스트)
4-1. 순서있는 목록(번호)
순서있는 목록은 숫자와 점을 사용한다.
> 마크다운
1. 첫 번째
2. 두 번째
3. 세 번째> 실행결과
- 첫 번째
- 두 번째
- 세 번째
4-2. 순서없는 목록(글머리 기호)
> 마크다운
* 첫 번째
* 두 번째
* 세 번째
+ 첫 번째
+ 두 번째
+ 세 번째
- 첫 번째
- 두 번째
- 세 번째> 실행결과
- 첫 번째
두 번째
세 번째
- 첫 번째
+ 두 번째
+ 세 번째
- 첫 번째
- 두 번째
- 세 번째
5. 코드 블럭
```혹은 ~~~를 첫 줄과 마지막 줄에 삽입하고 그 사이에 글 작성.
> 마크다운
```
이것은
코드 블록
입니다
```> 실행결과
이것은
코드 블록
입니다> 마크다운
~~~
이것은
코드 블록
입니다
~~~> 실행결과
이것은
코드 블록
입니다> 마크다운
```
void function() {
print("this is code block.");
}
```> 실행결과
void function() {
print("this is code block.");
}6. 인라인 코드
` 로 감싼 텍스트
> 마크다운
`인라인 코드 블럭`> 실행결과
인라인 코드 블럭
7. 수평선
-또는 * 또는 _를 3개 이상 작성
(단, -를 사용할 경우 header로 인식할 수 있으니 이 전 라인은 비워두어야한다.)
아래 줄은 모두 수평선을 만든다.
> 마크다운
* * *
***
*****
- - -
____________> 실행결과
8. 강조
기울여 쓰기, 굵게 쓰기, 밑줄 쓰기, 취소선
> 마크다운
*기울여 쓰기*
_기울여쓰기_
**굵게 쓰기**
__굵게 쓰기__
~~취소선~~> 실행결과
기울여 쓰기
기울여쓰기
굵게 쓰기
굵게 쓰기
취소선
9. 링크(Links)
9-1. 인라인 링크
[링크](https://예시.com "링크 제목") 인라인 링크
> 마크다운
[Google](https://www.google.com "구글")> 실행결과
9-2.url 링크
<예시.com/> <예시@예시.com> url 링크
> 마크다운
<https://www.google.com/>
<abc1@gmail.com/>> 실행결과
https://www.google.com/
abc1@gmail.com/
10. 이미지
10-1. 이미지 삽입
> 마크다운
> 실행결과
10-2. 이미지 링크
마크다운 이미지 코드를 링크 코드로 묶어준다.
[](https://예시.com "링크 설명")
> 마크다운
[](https://kr.vuejs.org/ "vue 이미지")> 실행결과
이 글을 작성하면서 기본적인 마크다운 작성법에 대해 알게되었습니다. 마크다운은 표준이 없기 때문에 velog에서 안되는 것도 있다고 생각합니다. 아무튼 velog에서 글을 작성하고 싶은데 마크다운을 모르셨던 분들이 기본적인 글은 작성하실 수 있을거라 생각합니다. 감사합니다.
24개의 댓글
혹시 마크다운 고급팁들도 올려주실수 있나요? 다른 글들 읽다보면은 타이틀앞에 이모티콘이라던가 이미지 첨부에 동영상 처럼 움직이는 이미지 같은것들 보면서 어떻게 하는거지 궁금하더라구요 ㅎㅎ
https://gist.github.com/joyrexus/16041f2426450e73f5df9391f7f7ae5f
이렇게 코드 블럭 접기 기능도 있으면 좋을 거 같아요
나중에 마크다운 에디터에서 ? 같은걸로 도움을 줄 수있는 기능을 만들어야겠습니다.
아니면, 상단 툴바같은걸 만들어서 클릭시 작동으로 현재 텍스트 커서가 있는 곳에 원하는 문법이 적용되는것도 나쁘지 않을것같아요!