Markdown

Dongkyu·2025년 4월 26일
마크다운

마크다운 문법

마크다운이란?

Markdown은 일반 텍스트 기반의 경량 마크업 언어입니다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징입니다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용됩니다.

역사

존 그루버는 2004년에 문법 면에서 에런 스워츠와 중대한 협업을 통해 마크다운 언어를 만들었으며, 사람들이 읽기 쉽고 쓰기 휘운 플레인 텍스트 포맷을 상요하여 쓸 수 있으면서 구조적으로 유효한 XHTML로 선택적 변환이 가능하게 하는 것을 목표로 만들어졌습니다.

문법

1. 제목

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>로 변환해주는 Header(제목)을 표현합니다.
주의 : 하나의 마크다운 파일에서는 하나의 대제목만을 사용해야 한다.

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

제목 4

제목 5
제목 6

또한 <h1>는 == | -- 등으로도 표현할 수 있습니다.

제목 1
======

제목 2
------

2. 글자 스타일

1) <stong> : Strong(강조)

**Strong**

Strong으로 변환해주는 태그는 애스터리스크(asterisk) 두개입니다.

2) <em> : Emphasis(기울임)

*Empasis*

Empasis를 사용할 때는 태그는 애스터리스크(asterisk) 하나입니다.

3) <del> : delete(삭제된 텍스트)

~~운동은 너무 귀찮아~~ 라는 말을 취소하고 싶을때!

운동은 너무 귀찮아 라는 말을 취소하고 싶을때!
틸드(tilde) 두개를 사용하면 됩니다.

4) <u> : Ubiquitous(유비쿼터스)

<u>믿줄<u>은 마크다운 문법이 따로 없기에 HTML 태그를 사용합니다.

믿줄은 마크다운 문법이 따로 없기에 HTML 태그를 사용합니다.


3. 줄바꿈

HTML에서는 줄바꿈을 사용하기 위해서 <br>태그를 사용했습니다. 마크업에서는 이러한 줄바꿈 방식이 두가지 있습니다.

1) <br>

HTML에서과 동일하게 <br>을 통해서 줄바꿈을 할 수 있습니다.

HTML에서과 동일하게
을 통해서 줄바꿈을 할 수 있습니다.

2) 띄어쓰기 두번!

줄바꿈을 원하는 
위치에서 띄어쓰기  <!-- 띄어쓰기 2번-->
두번을 사용하면 됩니다.

줄바꿈을 원하는 위치에서 띄어쓰기
두번을 사용하면 됩니다.


4. 구분선

HTML에서의 구분선은 <hr>을 사용했습니다. 마크다운 언어에서의 구분선은 ***, ___를 통해 <hr>태그로 변환됩니다.

---
***

5. 기호 출력

마크다운에서 약속되어 있는 기호를 그대로 출력하려면 \역방향 슬래시를 앞에 같이 붙여주면 됩니다.

\\
\*
\+
\-

\
*
+
-


6. 리스트

HTML에서의 리스트(list)에는 <ul>인 순서가 없는 항목과, <ol>인 순서가 있는 항목 태그가 있습니다.

1) 순서가 없는 항목

- 를 사용하여 <ul> 태그를 사용할 수 있습니다.
* 를 사용하여 <ul> 태그를 사용할 수 있습니다.
* 를 사용하여 <ul> 태그를 사용할 수 있습니다.
  • 를 사용하여 <ul> 태그를 사용할 수 있습니다.

  • 를 사용하여 <ul> 태그를 사용할 수 있습니다.

  • 를 사용하여 <ul> 태그를 사용할 수 있습니다.

2) 순서가 있는 항목

1. 번호를
2. 사용하면
3. 자동으로 <ol> 태그가 적용됩니다.
  1. 번호를
  2. 사용하면
  3. 자동으로 <ol> 태그가 적용됩니다.

3) 종합 리스트 작성

- 영양소
1. 탄수화물
- 단당류
- 이당류
- 다당류

2. 지방
- 포화지방
- 불포화지방
- 트랜스지방

3. 단백질
- 효소 단백질
- 구조 단백질
- 저장 단백질
  1. 탄수화물
    • 단당류
    • 이당류
    • 다당류
  2. 지방
    • 포화지방
    • 불포화지방
    • 트랜스지방
  3. 단백질
    • 효소 단백질
    • 구조 단백질
    • 저장 단백질

하위목록을 작성할 때, 들여쓰기(indent)가 띄어쓰기 2칸이 아닌 3칸 이상일 수 있습니다. 또한, 순서가 있거나 없는 목록을 혼합하여 사용할 수 있지만, 동작하지 않을 수 있습니다.


7. 인용문

> 기호를 통해 인용문을 작성할 수 있습니다. 중첩 인용문 작성시 >의 개수를 1개씩 늘려가며 작성합니다.

> 인용문 - 남의 말이나 글에서 직접 또는 간접으로 따온 문장.
> _(네이버 국어 사전)_

BREAK!

> 인용문을 작성하세요!
>> 중첩된 인용문(nested blockquote)을 만들 수 있습니다.
>>> 중중첩 인용문 1
>>> 중중첩 인용문 2
>>> 중중첩 인용문 3

<blockquote>태그로 변환되는 인용문을 표현합니다.

인용문 - 남의 말이나 글에서 직접 또는 간접으로 따온 문장.
(네이버 국어 사전)

BREAK!

인용문을 작성하세요!

중첩된 인용문(nested blockquote)을 만들 수 있습니다.

중중첩 인용문 1
중중첩 인용문 2
중중첩 인용문 3


8. 코드

마크다운 언어에서도, 코드를 문자로 표현해야 할 경우를 위해 코드강조를 할수 있습니다. 두 종류로, 인라인에서의 코드 강조와 코드 블록강조가 있습니다.

1) 인라인 블록

<pre>, <code>태그로 변환되는 코드(code)를 표현합니다.
backtick(백틱) 기호를 사용합니다.

`<code>`

<code>

2) 코드 블록

backtick을 3번 이상 입력하고 언어(코드) 이름을 명시해, 코드'블록(Block)'를 표현합니다.
단! 코드 블록의 시작backtick개수와 종료backtick개수가 같아야 합니다.

```
html
<a href="https://www.google.co.kr/" target="_blank">GOOGLE</a>
```

```css
.list > li {
  position: absolute;
  top: 40px;
}
```

```javascript
function add(a, b = 1) {
  console.log(a, b)
  return a + b
}
```

출력 결과

<a href="https://www.google.co.kr/" target="_blank">GOOGLE</a>
.list > li {
  position: absolute;
  top: 40px;
}
function add(a, b = 1) {
  console.log(a, b)
  return a + b
}

9. 링크

<a>로 변환되는 링크(links)를 표현합니다.

1) 기본 링크

<https://www.naver.com/>

https://www.naver.com/

2) 인라인 링크

[이름](링크 URL)형식으로 사용할 수 있습니다.

[NAVER](https://www.naver.com/)
[Google](https://www.google.co.kr/)
[나의 Velog](https://velog.io/@cit1566/posts)

NAVER
Google
나의 Velog

3) 참조 링크

[naver]:https://www.naver.com/
[naver] 이 부분에서 위의 링크를 참조합니다.

naver 이 부분에서 위의 링크를 참조합니다..


10. 이미지

<img>로 변환되는 이미지(images)를 표현합니다. 링크와 비슷하지만 앞에 !를 추가해야 한다는 것을 기억해주세요!

![대체텍스트](이미지주소)
![대체텍스트](이미지주소 "설명")
![대체텍스트][참조]

[참조]: 이미지주소
[참조]: 이미지주소 "설명"
![대체 텍스트(Alternative Text)](https://picsum.photos/1000/400 "링크 설명(Title)")
![이미지입니다!][Image]

[Image]: https://picsum.photos/500/300 "이미지입니다!"

대체 텍스트(Alternative Text)
이미지입니다!


11. 테이블

<table>태그로 변환되는 표(Table)를 표현합니다.
테이블 헤더를 구분하기 위해, 3개 이상의 -(hyphen/dash)기호를 사용합니다.
테이블 헤더를 구분하며 : 기호를 추가해 셀(열/칸) 안에 내용을 정렬할 수 있습니다.

  • ---, :--- : 좌측 정렬
  • :--: : 가운데 정렬
  • ---: : 우측 정렬

가장 과측과 가장 우측에 있는 |(vertical bar) 기호는 생량 가능합니다.

| 해더 | 해더 | 해더 |
| --- | --- |--- |
| 셀 | 셀 | 셀 |
| 셀 | 셀 | 셀 |
| 셀 | 셀 | 셀 |
| 셀 | 셀 | 셀 |
해더해더해더
셀셀셀
셀셀셀
셀셀셀
셀셀셀

12. HTML 사용

마크다운 문법 대신, HTML을 직접 사용할 수 있습니다.
앞서 살펴본 밑줄 추가와 같이, 마크다운 문법에서 지원하지 안흔 기능을 사용할 때 유용합니다.

마크다운에서 <u>밑줄</u>은 지원하지 않습니다.

<img width="150" src="http://gstatic.com/webp/gallery/4.jpg" alt="Prunus" title="마크다운은 이미지의 크기를 지정할 수 없으므로, 크기 지정을 위해서는 <img> 태그를 사용해야 합니다.">

![Prunus](http://www.gstatic.com/webp/gallery/4.jpg)

마크다운에서 밑줄은 지원하지 않습니다.

Prunus

Prunus


배운점 및 느낀점

배운점

평소에 Velog를 통해 학습한 내용을 종종 업로드를 했었다. 처음 사용할 당시에는 그저 Velog에서 추가적인 코드구성을 통해 HTML의 문법을 수정해놓았구나 정도로 이해하며 사용해왔다. 하지만 Markdown 언어를 공부하고 학습하면서 Velog 등 많은 웹 브라우저 환경에서도 마크다운 언어를 사용하고 있다는 것을 알아차릴 수 있었다.

느낀점

개발 공부를 하면 할수록 아직 갈 길이 멀구나~~ 싶은 마음이 한켠에 생기지만, 그렇기에 지금의 불타오르는 마음속 열정이 식지 않고 오래갈 수 있도록 잘 다스려야겠다는 생각이 든다. HTML도 문법이 까탈스러운 편에 속하지 않다고 생각했는데 마크다운 언어에 대해 찾아보니 HTML도 양반이었구나~ 라는 생각이든다. 개인적으로는 두루뭉실하기보다 수학처럼 딱 떨어지는곳에 마음이 끌린다.

출처

  1. https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4
  2. https://daringfireball.net/projects/markdown/
  3. https://velog.io/@kimhyeongi/about-markdown
  4. https://www.heropy.dev/p/B74sNE
  5. https://velog.io/@cit1566/posts![](https://velog.velcdn.com/images/cit1566/post/c7ab7045-b663-4b73-b831-915a2f86c67f/image.png)
profile
Dongkyu
인생의 모든날을 사랑하고 즐기자
이전 포스트

멋쟁이사자처럼부트캠프 Frontend 첫 수업 (Git 사용법)

다음 포스트

멋사 부트캠프 2주차(HTML)

0개의 댓글