마크다운(Markdown) 문법

2 minute read

티스토리에서 깃허브 블로그로 바꾸면서 마크다운에 대해 처음 접하게 되었다. 원할한 블로그 정리를 위해 마크다운 문법에 대해 배울 필요성이 있다고 생각하여 이렇게 정리를 진행 중이다.

reference: https://ansohxxn.github.io/blog/markdown/

줄바꿈

줄바꿈을 하는 방법은 다음과 같이 2가지가 있다.

  1. 스페이스바를 두번+엔터 를 해준다.
  2. <br> 또한 줄바꿈을 해주는 HTML 태그이다.

문단 나누기

한 줄의 공백을 두고 작성하면 된다.

중첩된 구조

중첩된 구조를 만들기 위해서는 스페이스바를 2번 눌러 작성한다. 예시는 다음과 같다.

  • 첫번째 구조 (스페이스바 2번)
    • 두번째 구조(스페이스바 4번)
      • 세번째 구조(스페이스바 6번)

마크다운 문법을 그대로 보여줄 때

마크다운 문법 앞에 \ 를 붙여준다.

헤더

헤더에는 총 6 단계가 있고 각 헤더 크기의 차이는 다음과 같다.

h1

h2

h3

h4

h5
h6

텍스트

강조

텍스트를 강조하기 위해서는 텍스트 앞 뒤에 ** 를 붙여 넣는다.

기울임

텍스트를 기울이기 위해서는 텍스트 앞 뒤에 * 를 붙여 넣는다.

취소선

텍스트를 취소하기 위해서는 텍스트 앞 뒤에 ~~ 를 붙여 넣는다.

밑줄

텍스트에 밑줄을 치기 위해서는 텍스트 앞에는 <u>, 뒤에는 </u> 를 붙여 넣는다.

글씨색

글씨 앞에는 <span style=”color:넣고 싶은 색”>, 뒤에는 </span> 을 붙여 넣는다.

코드 블록

``` 이 문자가 코드 블록의 시작을 알리는 문자이나 맥북 키보드에서 보이지가 않는다. 혹시라도 이 문자를 맥북에서 치는 방법을 아는 분 있으면 연락 부탁드립니다!! (9/21 수정: esc버튼 아래 위치한 원화키를 누르면 된다! )

코드블록은 다음과 같은 방법으로 적는다.

#```언어이름(소문자)
#이 부분에 코드적기
#``` 

예를 들어 언어 이름을 파이썬으로 설정하면

print("hello world")

링크

설명이 없는 링크

링크만 붙여 넣고 싶다면 링크를 <> 안에 붙여 넣는다.

설명이 있는 링크

링크 대신 설명이 나타나게 하기 위해서는 [링크설명](링크주소) 예시로 네이버 링크를 아래에 첨부해 보았다.

네이버 주소

그림 링크 삽입

![이미지설명](이미지주소)

그림 자체에 링크 걸기

![이미지설명](이미지주소)(이동하려는 링크 주소)

인용문

> 으로 표현한다. 중첩된 인용문을 위해서는 > 을 쓴다. 예시는 다음과 같다.

인용문1

인용문 2

<cite>— 태그를 써서 인용문 출저를 남길 수도 있다. 예시는 다음과 같다.

<cite>공부하는 식빵맘</cite> --- 마크다운 문법  정리

공부하는 식빵맘 — 마크다운 문법 총 정리

리스트

순서가 없는 리스트

- 이런 모양1
 * 이런 모양2
  + 이런 모양3
  • 이런 모양1
    • 이런 모양2
      • 이런 모양3

순서가 있는 리스트

1. 첫번째
2. 두번째
3. 세번째
  1. 세번째의 첫번째
    - 세번째의 첫번째의 첫번째
    - 세번째의 첫번째의 두번째
4. 네번째
  1. 첫번째
  2. 두번째
  3. 세번째
    1. 세번째의 첫번째
      • 세번째의 첫번째의 첫번째
      • 세번째의 첫번째의 두번째
  4. 네번째

체크 리스트

 - [ ] 체크 안됨
 - [X] 체크 
  • 체크 안됨
  • 체크 됨

구분선

*** 와 -– 으로 표현할 수 있다.

테이블

| 와 - 의 조합으로 테이블을 만들 수 있다.

|내가 할줄 아는 언어|실력(1~5)| 배울 의향이 있는지?!
|:---:|---:|---|
|파이썬|3|yes|
|C#|2|no|
|postgreSQL|3|yes|
내가 할줄 아는 언어 실력(1~5) 더 배울 의향이 있는지?!
파이썬 3 yes
C# 2 no
postgreSQL 3 yes

Notice

notice 기능은 주의 사항, 공지 같은 것을 강조하기에 좋다.
하는 방법은 문단의 바로 다음줄에 {: .notice}만 붙여 주기만 하면 된다. 이때, notice 뒤에 minimal mistakes에서 지정한 notice의 종류 이름을 붙여줄 수도 있다.

**<u>참고 사항</u>**  블로그는 매우 유익합니다!
{: .notice--primary} 

참고 사항 이 블로그는 매우 유익합니다!



일단 이 정도 문법이면 블로그를 작성하는데 문제는 없을 것 같다. 만약 더 필요한 문법이 생기면 더 추가해서 적도록 하겠다.

Categories:

Updated:

Comments