마크다운 문법

강재민·2022년 3월 31일

블로그를 가장 가볍게 쓸 수 있는 방식. 마크다운 문법에 대해서 소개하려고 합니다. velog 뿐만아니라 github, jupiter, tstory, notion 등등 많은 블로그에서 사용하고있는 문법이다 이를 활용하여 문서를 매우 가볍게 작성 할 수 있고 다른 블로그로 옮기더라도 호환성 문제가 전혀 없다는 장점이 있다

헤더

헤더의 크기는 다음과 같이 있다

# 헤더 크기 (h1)
## 헤더 크기 (h2)
### 헤더 크기 (h3)
#### 헤더 크기 (h4)
##### 헤더 크기 (h5)
###### 헤더 크기 (h6)

헤더의 크기는 6까지 있다

헤더 크기 (h1)

헤더 크기 (h2)

헤더 크기 (h3)

헤더 크기 (h4)

헤더 크기 (h5)

헤더 크기 (h6)

목록(Lists)

순서가 없는 목록으로는

* Item 1
* Item 2
  * Item 2a
  * Item 2b

Item 1
Item 2
- Item 2a
- Item 2b

이렇게 구분지을 수 있고 이렇게 줄바꿈을 하기 위해서는 줄바꿈 이후에 꼭 띄어쓰기를 한 번이상 추가해주어야 한다.

그리고 순서가 있는 목록으로는

1. Item 1
2. Item 2
3. Item 3
    1. Item 3a
    2. Item 3b

이 때 하위 순서에 대해서는 tab을 두 번 해주어야 한다.
1. Item 1
2. Item 2
3. Item 3
1. Item 3a
2. Item 3b

이미지(Images)

첫 번째 방법

![Github logo](/images/markdown_logo.jpg) 
Format: ![이미지 alt명](url 링크)

두 번째 방법

<a href="#"><img src="https://github.com/..각자절대경로../images/markdown_syntax.jpg" width="400px" alt="sample image"></a> 
Format: img 태그 사용 - 이미지경로는 상대경로 or 절대경로

이렇게 나의 레포지토리 안에 있는 이미지를 불러오는 방법 또는 이미지 주소를 이용해 불러오는 방법으로 이미지를 첨부 할 수 있다.

Github logo

하이퍼링크(Links)

[GitHub](http://github.com "깃허브")

이렇게 해당 하이퍼링크에 대한 이름을 따로 지어주어야한다.
GitHub

코드블록

```javascript 
function test() { 
 console.log("hello world!"); 
}
    ```

코드블록의 경우 코드를 첨부할 때 매우 도움이 되는기능인데 해당 코드의 종류를 입력하면 코드의 종류에 맞게 색깔이 표시된다.

function test() { 
 console.log("hello world!"); 
}

그리고 해당 코드블록의 종류는 다음 표와 같다.

언어	Markdown	언어	Markdown
Bash	bash	JSON	json
C#	cs	Java	java
C++	cpp	JavaScript	javascript
CSS	css	PHP	php
Diff	diff	Perl	perl
HTML,XML	html	Python	python
HTTP	http	Ruby	ruby
Ini	ini	SQL	sql

인용 상자(Blockquotes)

As Grace Hopper said: 

> I’ve always been more interested. 
> in the future than in the past.

인용상자의 경우 해당 내용을 뒷받침하는 자료에 적합한 것 같다.
As Grace Hopper said:

I’ve always been more interested.
in the future than in the past.

강조(Emphasis)

*This text will be italic* 
_This will also be italic_ 

**This text will be bold** 
__This will also be bold__ 

*You **can** combine them*

우리가 흔히 쓰는 굵게, 기울이기 기능과 같다고 보면된다.

This text will be italic
This will also be italic

This text will be bold
This will also be bold

You can combine them

테이블 TABLES

First Header | Second Header 
------------ | ------------- 
Content cell 1 | Content cell 2 
Content column 1 | Content column 2

테이블의 경우 처음 테이블의 형식을 정의해주고 나면 알아서 내용들의 크기가 조정되는 것을 알 수 있다.

First Header	Second Header
Content cell 1	Content cell 2
Content column 1	Content column 2

인라인 코드(Inline code)

문단 중간에 `Code`를 넣을 수 있습니다. 
예를 들어 `printf("hello world!");` 이런 식으로 들어갑니다.

문단 중간에 Code를 넣을 수 있습니다.
예를 들어 printf("hello world!"); 이런 식으로 들어갑니다.

체크 박스(Task Lists)

- [x] this is a complete item 
- [ ] this is an incomplete item 
- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported 
- [x] list syntax required (any unordered or ordered list supported)

이렇게 체크박스 기능도 있다 무언가 했고 안했고를 가시적으로 보여주기 좋을 것 같다.

this is a complete item
this is an incomplete item
@mentions, #refs, links, formatting, and ~~tags~~ supported
list syntax required (any unordered or ordered list supported)

수평선(hr)

--- 
*** 
___

총 세 가지의 표시가 있지만 두 종류의 출력물이 나오는 것 같다.

탈출 문자 (Backslash Escapes)

＼*literal asterisks＼* 
*literal asterisks* 
__＼*＼*Text＼*＼*__ 
_＼_Tom＼__

우리가 마크다운에서 사용되고있는 기호들을 사용하기 위해서는 역슬래시를 앞에 붙여주면 된다.
＼literal asterisks＼
literal asterisks
＼＼Text＼＼
_＼_Tom＼__

이모지(EMOJI)-아이콘

GitHub supports emoji! 
:+1: :sparkles: :camel: :tada: 
:rocket: :metal: :octocat:

다양한 이모지가 있는 것 같은데 이모지는 따로 검색해서 찾아서 써야 하는 것 같다.
이모지 검색 사이트
GitHub supports emoji!
:+1: :sparkles: :camel: :tada:
:rocket: :metal: :octocat:

배지(badge) 만들기

![React](https://img.shields.io/badge/react-ffffff?style=for-the-badge&logo=react&logoColor=green)
![React](https://img.shields.io/badge/react-ffffff?style=for-the-badge&logo=react)
![React](https://img.shields.io/badge/react-444444?style=for-the-badge&logo=react)

스킬배지는 깃허브 프로필을 꾸밀 때에도 사용 되는 것같다.