본문 바로가기
컴퓨터/Tool, Utility

마크다운 작성 문법 정리

by 깁갑수 2023. 12. 30.
목차

마크다운은 웹 문서를 작성할 때 사용하는 명령어입니다. HTML보다 간단한 명령어들로 사용하기 매우 쉽고 관리가 간단한 장점이 있죠 물론 HTML의 모든부분을 대체할 수는 없지만 빠르게 문서를 정리할 경우에 사용하기 좋습니다. 텍스트 에디터를 통해 .md 확장자의 파일로 작성후 업로드 하면 깔끔하게 정리된 문서를 만날 수 있죠. 꽤나 다양한 플랫폼에 적용할 수 있는 문법으로 블로그 글을 작설할 때도 마크다운을 이용해 작성할 수 있답니다.

대체 어떻길래? 보기전엔 얼마나 간단한지 알기 어려울 듯 해요 아래 마크다운 문법에 대한 설명을 이어나가겠습니다.

MarkDown은?

위에서 서술했듯 다양한 플랫폼에 사용할 수 있는 마크다운 언어는 일반적인 문서를 작성하거나, 메일 그리고 블로그에도 사용할수 있습니다. 잘 알려진 워드프레스, Git 뿐만아니라 티스토리등에도 사용이 가능하고요

마크다운 언어를 이용해 문서를 작성할 땐 전용 에디터를 사용하면 더욱 좋습니다. 문서를 작성해 나가는과정에서 문법이 적용된 곳에 하이라이트를 주기도 하며, 내가 지정한 CSS style에 따라 즉시즉시 렌더링 해 완성된 웹문서를 미리 볼 수도 있기 때문에죠.

익숙해진 사용자라면 간단하게 메모장을 통해 작성해고 후작업을 해도 무관합니다. 너무나 직관적이기 때문에 작성하면서 완성된 모습이 머릿속에 그려질테니까요. 😀 그만큼 간단하게 작성할 수 있는 언어랍니다.

마크다운 기본 문법 (Basic Syntax)

이제 마크다운을 사용하기 위한 문법들을 아래 정리해 보도록 하겠습니다.

제목 / Headings

제목은 (#)입력 후 한칸 띄우고 텍스트를 입력하여 작성할 수 있습니다. h1 ... h6 태그와 같은 의미인데요
(#)가 늘어날 수록 header태그 숫자가 증가하게 됩니다

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

단락 구분 / Paragraphs

단락구분은 간단하게 줄넘김 두번(엔터 두번)으로 새 단락을 구성할 수 있습니다.

첫번째 단락

두번째 단락

줄넘김 / Line Breaks

글을 작성하다가 줄넘김이 필요할 경우엔 마지막에 2칸의공백을 넣어주어야 합니다. 단순히 엔터 한번만 눌러서는 줄넘김이 되지 않고 내용이 이어서 작성됩니다.

줄을 넘기고 싶다면 마지막에 공백 2개✔️✔️
를 넣어야 줄넘김이 됩니다.

엔터 한번만 눌러서는↩︎
글이 이어서 작성됩니다.

위의 문법으로 글을 작성하면 아래와 같이 작성되어요.

줄을 넘기고 싶다면 마지막에 공백 2개
를 넣어야 줄넘김이 됩니다.

엔터 한번만 눌러서는
글이 이어서 작성됩니다.

강조 / Emphasis

글을 강조하는방법 굵게, 기울임, 취소선 등을 넣어줄 수 있습니다. 강조하고 싶은 부분에 별(*)이나 언더바(_)로 또는 물결(~)표시를 이용해 가둬주면 됩니다.
강조부분을 가둘 땐 공백에 주의하세요!

**굵게** __굵게__

*이탤릭체* _이텔릭체_

~~취소선~~

굵게 굵게
이탤릭체 이텔릭체
취소선

목록 / Lists

리스트는 숫자., -, *, + 를 이용하여 작성할 수 있는데요 특수 기호 뒤에 한칸을 띄워줘야 리스트로 전환됩니다. 또한 리스트안의 하위리스트를 작성할 땐 상위 리스트보다 3칸씩을 띄워서 작성해 주시면 됩니다.
순서가 있는 리스트의 경우 앞에 붙는 숫자는 뒤죽박죽이여도 순서대로 정리가 된답니다.

1. 순서가 있는 리스트
2. 순서가 있는 리스트
1. 순서가 있는 리스트
   1. 순서안의 순서 리스트
   2. 순서안의 순서 리스트
      1. 그 안의 리스트
      2. 그 안의 리스트
- 순서가 없는 리스트
+ 순서가 없는 리스트
* 순서가 없는 리스트
  1. 순서가 있는 리스트
  2. 순서가 있는 리스트
  3. 순서가 있는 리스트
    1. 순서안의 순서리스트
    2. 순서안의 순서 리스트
      1. 그 안의 리스트
      2. 그안의 리스트
  • 순서가 없는 리스트
  • 순서가 없는 리스트
  • 순서가 없는 리스트

인용 / Blockquotes

인용구를 사용할경우엔 아래와 같은 방법으로 작성하시면 됩니다.

>인용구 작성

인용구 작성

코드블록 / Code Blocks

코드를 작성하거나 일부 문구를 강조할 때 사용할 수 있는데요 여러줄 강조는 백틱(`)3개로 감싸주고 한줄강조는 한개의 백틱으로 강조할 수 있습니다.

`인라인 강조`

```
블록 강조
```

`인라인 강조`
블록 강조

수평선 / Horizontal Rules

문단이나 내용 구분을 위해 삽입하는 수평선은 (-), (*), (_)를 이용해 만들어 줄 수 있는데요 문단 구분을 하고 같은기호를 세개이상 연속으로 작성하면 수평선을 넣어줄 수 있습니다.
윗 문장에 이어서 수평선을 넣는 경우 제목으로 변경될 수 있으니 주의해야 합니다.

---
***
_____________



링크 / Links

문서를 작성하다보면 링크를 작성할 경우가 있습니다. [링크이름](이동할주소) 형식으로 작성하면 됩니다. 문서 내에서 이동하는 해시링크도 같은 방법을 사용 할 수 있습니다.

외부링크 작성[구글로 이동](www.google.com)
해시링크는 링크 부분에 #을 넣어서 헤더로 이동가능 [링크 작성 방법](#링크--links) 

외부링크 작성구글로 이동
해시링크는 링크 부분에 #을 넣어서 헤더로 이동가능 링크 작성 방법

⚠️ 아쉽게도 티스토리에서 해시링크가 제대로 동작하지 않습니다.

이미지 / Images

이미지를 넣는 방법은 링크 작성법과 비슷한데요 앞에 (!)를 넣어 작성합니다.
![사진 설명](사진이 저장된경로)와 같이 작성할 수 있답니다.

![image](../black-cat-cute-form-focus-on-face.png)

표 / Tables

각 행은 파이프(|)로 나누고 헤더와 내용을 구분할땐 하이픈(-)을 이용해 구분해줍니다.
4*4배열의 표를 만들 땐 아래와 같이 작성할 수 있습니다.

| 헤더1 | 헤더2 | 헤더3 | 헤더4 |
|-------|-------|-------|-------|
| 내용1 | 내용2 | 내용3 | 내용4 |
| 내용5 | 내용6 | 내용7 | 내용8 |
| 내용9 | 내용10| 내용11| 내용12|
| 내용13| 내용14| 내용15| 내용16|
헤더1 헤더2 헤더3 헤더4
내용1 내용2 내용3 내용4
내용5 내용6 내용7 내용8
내용9 내용10 내용11 내용12
내용13 내용14 내용15 내용16

HTML

마크다운으로 문서를 작성할 땐 기존에 사용하던 HTML태그를 사용할 수 있습니다. 본인이 알고있는 어떠한 문법이던 함께 혼용해서 사용할 수 있으니 HTML 문서 작성이 더 쉬워지는데 도움을 줄 수 있을것입니다.


최근 마크다운 언어를 이용하여 글을 쓰기 시작 했습니다. 일단 글을 쓰면서 느낀점은 웹상의 에디터를 사용할 땐 글꼴을 바꾸거나 헤드테그를 삽입하는등 마우스와 키보드를 넘나들며 작성하게 되는데요, 마크다운 에디터를 이용해 작성하다보니 간단한 문법 + 꾸미거나 글꼴 변경이 필요할 땐 단축키나 기타 도움을 주는 기능들을 이용해 키보드로만 줄줄 글을 써내려가게 되니 참 간단하고 편리했습니다.

마크다운 언어만으로 작성한 문서에 맞는 CSS스타일을 부여한다면 더더욱 보기 좋은 문서가 완성될 수 있을것 같아요.

"갑수야 반갑수"에는 쿠팡파트너스 등 제휴링크가 포함 되어 있으며 수수료를 제공받을 수 있습니다.