Notice

Recent Posts

Recent Comments

Link

« 2025/07 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Little Jay

마크다운 문법 정리 본문

FrontEnd/MarkDown

마크다운 문법 정리

Jay, Lee 2022. 1. 10. 15:27

마크다운 문법이란?

흔히 깃헙에 가면 README.md 라는 파일이 있다.

필자의 github&amp;amp;amp;amp;amp;nbsp;https://github.com/MyuB/REGEXP_Study

이렇게 레퍼지토리에 들어가게 되면 자동적으로 보이는 일종의 주석 파일이다
그래서 마크다운 문법이란?

Markdown은 텍스트 기반의 마크업언어로 2004년 존그루버에 의해 만들어졌으며 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다.
특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서도 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있다. 마크다운이 최근 각광받기 시작한 이유는 깃헙(https://github.com) 덕분이다. 깃헙의 저장소Repository에 관한 정보를 기록하는 README.md는 깃헙을 사용하는 사람이라면 누구나 가장 먼저 접하게 되는 마크다운 문서였다. 마크다운을 통해서 설치방법, 소스코드 설명, 이슈 등을 간단하게 기록하고 가독성을 높일 수 있다는 강점이 부각되면서 점점 여러 곳으로 퍼져가게 된다.

출처: https://gist.github.com/ihoneymon/652be052a0727ad59601

마크다운의 장점

-문법이 쉽고 간결하다
-관리가 쉽다
-지원 가능한 플랫폼과 프로그램이 다양하다

마크다운의 단점

-정해진 표준이 없음
-모든 html 마크업을 대신하지 못한다

간단하게 이 마크다운을 어떻게 사용하는지에 대해 정리해보겠다

제목(Header)

HTML을 한번이라도 접한 사람이 있다면 h1 태그에 대해서 들어본 적이 있을 것이다.
h1태그는 제목을 달때 주로 사용하는 태그이며 그 중요도에 따라 h1 ~ h6 까지 분류가 된다.
(h1의 중요도가 제일 높아 폰트의 크기가 제일 크고 h6의 중요도가 제일 낮아 폰트의 크기가 작다)

마크다운 문법도 이와 마찬가지로 6단계의 제목을 붙일 수 있는 문법이 존재한다.

# 제목1
## 제목2
### 제목3
#### 제목4
##### 제목5
###### 제목6

이렇게 쓰고 싶은 제목 앞에 '#'을 붙여주면 된다. 이 때 한칸의 공백이 필요하다.
이 공백이 없으면 지원하는 브라우저마다 이를 제목으로 인식하지 못하고
진짜 #으로 인식하기때문에 공백을 WS를 넣어주는 것을 권장하는 편이다.

제목1

제목2

제목3

제목4

제목5

제목6

일반 문장(plain text)

문장은 그냥 쓰면 된다 p 태그가 있다고 가정하면 된다.
이제 문제는 html과 같이 줄바꿈이 제대로 되지 않는다.
일반적으로 강제 줄바꿈을 위해서는 띄어쓰기 두번을 하거나 '<br/ >'태그를 강제로 집어넣을 수 있다.
그러나 이 WS를 두번 넣는 것도 브라우저마다 인식을 제대로 못하는 경우가 있기에 '<br/ >'태그를 쓰는 것을 권장한다

강조(Italic, Bold, Cancle Line, UnderScore)

강조 이탤릭체를 사용하기 위해서는 앞뒤에 언더스코어를 붙여준다.

Italic

_Italic_

볼드 처리는 애스터리스크 앞뒤로 두개씩 붙여주면 된다.

Bold

**Bold**

두 가지 방법을 혼용해서 쓰고 싶다면 아래와 같이 작성하면 된다. 태그 붙이는 원리로 이해하면 된다.

Italic + Bold

**_Italic + Bold_**

취소선은 앞뒤로 틸드를 두개씩 붙여주면 된다

~~Cancle~~

~~Cancle~~

밑줄은 u 태그를 활용한다

UnderLine

<u>UnderLine</u>

목록(List)

HTML의 문법에는 리스트가 두 가지의 형태로 나뉜다.
ol: ordered list
ul: unordered list
마크다운에서도 이와 마찬가지로 순서가 있는 리스트, 순서가 없는 리스트로 구분한다.

순서가 있는 리스트(ol)

자신이 리스트로 쓰고 싶은 문장 앞에 '1.' 을 붙여준다.(숫자 + .)
뒤에 있는 번호는 알아서 counting 되어 올라간다.
굳이 숫자 입력을 안해도 되는 편의가 있다.
이 리스트에서 엔터 하고 두번 들여쓰기 해주면 그 하위에다가 작성할 수 있다.
child 만든다고 생각하면 편하다.

순서가 필요한 목록
순서가 필요한 목록
순서가 필요한 목록
1. 하위1
2. 하위1
  1. 하위2

1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
    1. 하위1
    1. 하위1
        1. 하위2

물론 이렇게 쓸 수도 있지만 직접 번호를 붙여 사용할 수도 있다.
하지만 번호를 본인이 임의로 붙여도 브라우저에서 알아서 오름차순으로 정렬해준다

first
third
second

1. first
3. third
2. second

순서가 없는 리스트(ul)

아스터리스크(*), 더하기(+) 하이픈(-) 등을 글머리 앞에 붙여준다.
이 세가지를 모두 섞어 써도 상관이 없다.

1
- 2
  - 3
1
- 2
  - 3
1
- 2
  - 3
1
- 2
  - 3
    - 4

* 빨강
  * 녹색
    * 파랑

+ 빨강
  + 녹색
    + 파랑

- 빨강
  - 녹색
    - 파랑

* 1
  - 2
    + 3
      + 4

링크(Link)

링크를 넣을때는 a태그를 직접적으로 활용할 수도 있겠지만
[]() 의 표현식에서 [하이퍼링크 이름](이동할 주소) 이렇게 사용할 수 있다.

이동할 주소 뒤에 텍스트를 넣으면 hover 했을때 상세 설명을 넣을 수 있다.
아쉽게도 a 태그에서 target="_blank"같은 옵션 사용이 불가능하다.

google
google
NAVER

<a href="www.google.com">google</a>  
[google]("www.google.com")  
[NAVER](https://naver.com  "네이버로 이동")

이미지(Image)

이미지를 삽일할때는 ![대체텍스트](이미지 주소)
이미지에 링크를 넣으려면
[![]()]()로 넣어주면 된다.

인하대학교

![인하대학교](https://portal.inha.ac.kr/images/login/login_logo.png)

인용문(Quote)

인용문은 > 표시를 앞에 써주면 된다.
인용문도 >> >>> 같이 중첩시키면 중첩해서 인용문을 사용이 가능하다.

남의 말이나 글에서 직접 또는 간접으로 따온 문장.

(네이버 국어사전)

https://ko.dict.naver.com/#/entry/koko/4c685b232d1544a593c81801728cb59e

인라인 강조 코드

백틱 하나로 묶어 줄 수 있다

css에서 사용되는 속성 background 속성이 있다

css에서 사용되는 속성 `background` 속성이 있다

블럭(block) 코드 강조

코드를 블럭으로 묶고 싶다면 ``` 세개의 백틱으로 묶어준다.
이제 첫 번째 백틱 그룹 옆에는 언어 이름을 써줘야 해당 언어의 문법으로 강조가 된다

<a href="google.com">google</a>

console.log("hi");

기본 텍스트

표(table)

표 같은 경우는
a | b | c
--|--|--
q | w | e
이렇게 작성해줄 수 있다. 이때 a, b, c는 헤더가 된다.
하이픈 옆에가다 : 를 적절히 붙이면 정렬을 시킬 수 있다

position 속성

값	의미	기본값
static	기준 없음	o
relative	요소 자신	x
absolute	위치 상 부모 요소	x
fixed	view port	x

값 | 의미 | 기본값
--|:--:|--:           <!-- :--: 는 가운데 정렬, --: 는 오른쪽 정렬. 기본적으로 왼쪽 정렬이다-->
static | 기준 없음 | o
relative | 요소 자신 | x
absolute | 위치 상 부모 요소 | x
fixed | view port | x

수평선(Horizontal Rule)

아래의 기호들을 붙여 사용한다.

---
***
___

원시 html(raw html)

기본적으로 browser가 해석하는 것이기 때문에 html 코드를 그대로 작성할 수 있다.

동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세

동해물과 <u>백두산이</u> <span style="text-decoration: underline">마르고</span> 닳도록<br/>하느님이 보우하사 우리나라 만세

정리

일반적으로 많이 쓰는 문법 위주로 정리했다.
이 글도 티스토리의 마크다운을 활용해 작성했다.
지적 및, 잘못된점 있으면 댓글 부탁드립니다.

참고 및 출처:
https://gist.github.com/ihoneymon/652be052a0727ad59601
https://heropy.blog/2017/09/30/markdown/

저작자표시 (새창열림)

Comments