Markdown 문법

15 Sep 2021 in Front-end on Blog, Jekyll, Web, Markdown, Html Last modified at: 2022-04-22

🔔 Github 블로그를 만들기 위해 꼭 필요한 Markdown 문법에 대해 소개해드리겠습니다.

개행(New Line)

---

Markdown에서 개행은 두가지 방식이 있습니다.

• 강제개행: 문장의 마지막에 공백( )을 두 번 입력
• 단락바꿈: Enter키를 두번 입력

아래는 문법 예제입니다.

강제개행 문법입니다.  
문장끝의 공백을 통해 개행이 적용됩니다.  

단락바꿈 문법입니다.

Enter키를 통해 개행이 적용됩니다. 

제목(Heading)

---

문서제목

• 마크다운 작성 시

  문서제목 결과입니다.
  ======
  

• 결과

문서제목 결과입니다.

문서부제목

• 마크다운 작성 시

  문서 부제목 결과입니다.
  ------
  

문서 부제목 결과입니다.

글머리

HTML의 <h1>~<h6> 태그와 유사하며 1~6까지만 지원합니다. #의 개수에 따라 글자의 크기가 달라집니다. #은 <h1>, ###은 <h3> ######은 <h6>

# H1
## H2
### H3
#### H4
##### H5
###### H6

H1

H2

H3

H4

H5

H6

텍스트

---

글씨색

<span style="color:yellow">노란 글씨입니다.</span>

노란 글씨입니다.

형광펜

**Deserialization**은 반대로 <span style="background-color: #fff5b1">Byte Stream을 객체로</span> 변환하는 것

Deserialization은 반대로 Byte Stream을 객체로 변환하는 것

정렬하기

---

가운데

왼쪽

오른쪽

<center>가운데</center>  
<div style="text-align: left"> 왼쪽 </div>
<div style="text-align: right"> 오른쪽 </div>

밑줄

<U>밑줄입니다</U>

밑줄입니다

이미지

---

이미지 크기 조정하기

태그로 이미지를 첨부하고, width, height 속성을 줍니다.

<img src="/assets\img/developing-frog.png" height="50px" width="150px">

이미지 정렬하기

텍스트 정렬하기와 마찬가지로 <img> 태그로 이미지를 첨부하고, 이미지 태그를 p태그로 감쌉니다.

<p align="center"><img src="/assets\img/developing-frog.png" height="50px" width="150px">  

소스코드* * *

소스코드 블럭 안에 넣어도 리퀴드 태그는 인식을 해버리는데, 이 리퀴드 태그를 그대로 보여주고 싶을 때는 다음과 같이 liquid 문법의 raw tag를 사용하면 된다.

{{ example }}
{% example %}

{% raw %} {{ example }} {% endraw %}
{% raw %} {% example %} {% endraw %}