[Velog] 마크다운(Markdown) 사용법

Recorder_H·2022년 4월 21일
Markdownvelog
0

#내가 보려고 만든 페이지 😂

목록 보기
1/4
post-thumbnail

🧐 마크다운(Markdown)이란?

일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다.
HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다.
- 워키백과

🧐 마크다운 쓰는 이유

💡 개발자들이 주로 사용하는 버전관리/협업도구/메모장 도구에서 마크다운 언어를 사용하면 구조적으로 읽기 쉽고, 쓰기 쉬운 텍스트를 작성하는 데 도움을 준다.

  1. 문법이 간결하고 쉽다.
  2. 지원하는 플랫폼이 많다. (Notion, Git, Discord 등)
  3. 대부분의 환경에서 작성 가능. (메모장에서도 가능)
  4. 텍스트로 저장되기 때문에 용량이 적어 보관이 용이.

⭐ 마크다운 작성법

마크다운(Markdown)에선 Enter Key를 누른다고 빈 줄이 추가되지 않는다. 또한 Space Bar를 눌러도 단어 사이 간격이 늘어나지 않는다.

1. 문단(Paragraph)

문단과 문단 사이에 한 줄(enter) 비워두는 것으로 구분.

👆 종류✍ 입력
줄 바꿈<br> 또는 Enter 2번
단어 사이 간격&nbsp;
기호표기(역방향 슬래시 사용)
* _ - . ! # + () [] \		\
\* \_ \- \. \! \# \+ \() \[] \\

2. 제목(Header)

#의 개수로 h1부터 h6까지 표현 가능. Velog 오른쪽 리스트엔 h3까지 표시된다.

✍ 작성

# h1
## h2
### h3
#### h4
##### h5
###### h6

💻 결과

h1

h2

h3

h4

h5
h6

3. 글꼴 스타일(Text-style)

*, _, ~을 이용하여 기울이기, 강조, 취소선 등 기본적인 스타일을 나타낼 수 있다.

✍ 작성💻 결과
**볼드**볼드
__볼드__볼드
*이텔릭체*이텔릭체
_이텔릭체_이텔릭체
***볼드+이텔릭***볼드+이텔릭
___볼드+이텔릭___볼드+이텔릭
~~취소선~~취소선

3-2. HTML 꾸미기

HTML 태그를 이용하면, 글자를 좀 더 다양하게 작성 할 수 있다.

✍ 작성💻 결과
<h3>제목</h3>

제목

<u>밑줄</u>밑줄
링크 <a href="velog.io">velog</a>velog
글자색상 1 <span style="color:green">green</span>DodgerBlue
글자색상 2 <span style="color:#44398A">#44398A</span>#44398A
글자색상 3 <span style="color:rgb(255, 255, 255)">rgb(255, 255, 255)</span>rgb(51, 153, 102)
글자배경<span style="background-color: #f5f5dc">글자배경</span>글자배경

💡 참고 색상표

ColorRGBHex ColorExample
Black(0, 0, 0)#000000             
White(255, 255, 255)#FFFFFF             
Gray(128, 128, 128)#808080             
Red(255, 0, 0)#FF0000             
Blue(0, 0, 255)#0000FF             
Green(0, 128, 0)#008000             
Yellow(128, 0, 128)#ffd33d             

출처: Velog 글씨를 내 마음대로 바꿔보자! (색상, 형광펜)

4. 코드(Code)

4-1. 인라인 코드

텍스트 앞뒤로 백틱(`)을 감싸면 간단한 인라인 코드 작성 가능.

✍ 작성
`인라인 코드 이렇게 작성하세요 :) `

💻 결과
인라인 코드 이렇게 작성하세요 :)

4-2. 코드블럭

백틱(`) 또는 ~을 세 개 사용하여 문단의 시작과 끝에 표기.
코드가 여러 줄인 경우, 줄 앞에 4개의 공백 또는 1개의 'Tab'을 추가하면 된다.

``` 옆에 언어를 지정해주면 Syntax highlighting가 적용된다.

✍ 작성
``` java
public class BootSpringBootApplication {
public static void main(String[] args) {
System.out.println("Hello, world");
}
}
```

💻 결과 

  public class BootSpringBootApplication {
      public static void main(String[] args) {
          System.out.println("Hello, world");
      }
  }

💡 Syntax highlighting(문법 강조)

  언어 이름    작성 방식    언어 이름    작성 방식  
BashbashJSONjson
C#csJavajava
C++cppJaveScriptjavascript
CSScssPHPphp
DiffdiffPerlperl
HTML, XMLhtmlPythonpython
HTTPhttpRubyruby
IniiniSQLsql

출처: 마크다운 왕초보 코드블록 사용가능한 언어 목록

5. 인용문(BlockQuote)

문단 앞에 >를 추가. 중첩이 가능하다.

✍ 작성

> 첫번째 블록
>> 두번째 블록
>>> 세번째 블록

💻 결과

첫번째 블록

두번째 블록

세번째 블록

6. 수평선(Horizontal Rule)

- * _ 등을 3개 이상 입력하면 생성 할 수 있다.
수평선을 사용할 때는 한 줄 띄어주고 사용. 글 쓰기를 종료하거나 페이지를 구분하고 싶을 때 유용.

✍ 작성

---
***
___

💻 결과

7. 목록(List)

7-1. 순서 있는 목록

숫자 뒤에 .(점)+공백을 입력하면 순서있는 목록으로 인식. 이때 1. 이후 오는 숫자가 연속적일 필요는 없지만 처음은 1.로 시작해야한다.

✍ 작성

1. 해오름달
2. 시샘달
3. 물오름달
1. 해오름달
1. 시샘달

💻 결과

  1. 해오름달
  2. 시샘달
  3. 물오름달
  4. 해오름달
  5. 시샘달

7-2. 순서 없는 목록

* + - (혼용 가능) 뒤에 공백을 두고 작성하면 순서 없는 목록으로 인식. Teb키나 Space bar를 이용해 들여쓰기가 가능.

✍ 작성

* 4월 잎새달
	- 0401
	    - 0402
* 5월 푸른달
* `6월 누리달`

💻 결과

  • 4월 잎새달
    • 0401
      • 0402
  • 5월 푸른달
  • 6월 누리달

8. 체크박스(Check Box)

- 뒤에 빈 공간을 가진[]대괄호를 입력한다. [x] 박스 안을 체크하려면 빈 공간 대신 x키를 입력하면 된다.

✍ 작성

- [ ] 체크박스
- [x] 체크박스
* [ ] 체크박스2
+ [x] 체크박스3

💻 결과

  • 체크박스
  • 체크박스
  • 체크박스2
  • 체크박스3

URL, 인라인, 참조라는 세 가지 스타일의 링크 지원.
세 스타일 모두 링크 텍스트는 []대괄호로 구분된다.

✍ 작성💻 결과
인라인 링크 [Title](link)
[Velog](https://velog.io/)		Velog
URL
<https://velog.io/>		https://velog.io/
참조 링크 [참조 설명][참조 번호] [참조 번호]: link
[Velog][1] [1]: https://velog.io/		[Velog][1] [1]: https://velog.io/

10. 이미지(Image)

10-1. 이미지 링크

앞에 !를 붙여주면 이미지를 불러오거나 링크할 수 있다.

✍ 작성

이미지 불러오기
![이미지 설명](이미지 링크)

이미지 링크
[![이미지 설명](이미지 링크)](연결할 url)

💻 결과

10-2. 이미지 크기조절

기존 이미지 코드 앞단을 img 태그로 수정하고, 링크가 끝나는 부분에 width height를 작성하여 이미지 크기를 조정한다.

✍ 작성

기존 이미지 코드
![](https://cdn.pixabay.com/photo/2016/11/19/14/00/code-1839406_960_720.jpg)

크기조절 코드
<img src="https://cdn.pixabay.com/photo/2016/11/19/14/00/code-1839406_960_720.jpg" width="300px" height="100px">

💻 결과

10-3. 이미지 정렬

✍ 작성

가운데 정렬 <!--이미지 태그 앞을 <p> 태그로 감싼다.-->
<p align="center"><img src="https://cdn.pixabay.com/photo/2016/11/19/14/00/code-1839406_960_720.jpg" width="300px" height="100px"></p>

왼쪽, 오른쪽 정렬 <!--이미지 태그 끝나는 부분에 <align> 'left','right' 작성.-->

우 <img src="https://cdn.pixabay.com/photo/2016/11/19/14/00/code-1839406_960_720.jpg" width="300px" height="100px" align="right">

💻 결과

11. 표(Table)

행은 -(하이픈)으로 각 열은 |(수직선 기호)로 구분하며, 표 내에서 기본적인 글꼴 스타일 적용이 가능하다.

정렬의 경우, 행 구분선인 -(하이픈) 각각 왼쪽, 양쪽, 오른쪽에 :(세미콜론)을 붙여 맞출 수 있다.

✍ 작성

| 이  름 | 나 이 | 생 일 |
|:---  |  :--:  |  ---:|
|길동 | 36 | 0625 |
| 철수 | 17 | 0505 |
| 영희 | 13 | 1009|

💻 결과

이 름나 이생 일
길동360625
철수170505
영희131009

12. 이모지(Emoji)

이모티콘 이미지를 복사 → 붙여넣거나 단축키를 통해 불러올 수 있다.

💡 사이트
https://emojipedia.org/
https://getemoji.com/

💡 단축키
Windows : window key + 마침표(.)
Mac : Command + Control + Space bar

🔎 참고자료

🔗 daring fireball
🔗 이미지 크기 조절, 정렬
🔗 [Markdown] Velog 사용법
🔗 velog 마크다운(markdown) 작성법
내가 보려고 만든 페이지😂
- 이미지 크기, 정렬 미리보기에서만 보이고, 작성된 글에서는 왜 적용이 안될까?
- 표 안에 정렬도 미리보기에선 다 적용이 되는데...
profile
Recorder_H
꼼꼼한 원칙주의자, Rami
다음 포스트

[CSS] flexbox

0개의 댓글