2 분 소요

마크다운이란?

공식 사이트: https://daringfireball.net/projects/markdown/

출처: https://daringfireball.net/projects/markdown/

웹 작성자를 위한 텍스트를 HTML로 변환하는 도구.
읽기 쉽고 쓰기 쉬운 일반 텍스트 형식을 사용하여 작성한 다음 구조적으로 유효한 XHTML(또는 HTML)로 변환 가능.
(1) 일반 텍스트 형식 지정 구문.
(2) 일반 텍스트 형식을 HTML로 변환하는 소프트웨어 도구.

마크다운으로 작성 된 예시

마크다운을 html로 변환 및 Preview

제가 SW개발을 하면서 마크다운을 사용 했던 곳은 다음과 같습니다.

  • juptyer notebook(python을 웹 환경에서 개발)
  • github blog(블로그 문서)
  • README.md(github 저장소의 설명 문서)
  • 티스토리 블로그(블로그 문서)
  • 노션(Notion)도 마크다운 형식 인거 같아요.(확실하지 않습니다.)
  • chatGPT의 결과도 마크다운 형식 인거 같아요.(확실하지 않습니다.)

앞으로 개인적인 컨텐츠를 작성해야 플랫폼에 올리는 경우가 많아질 것 같습니다.
마크다운이 많이 사용 되리라 생각됩니다.

헤더(Headers)

제목이라 생각하면 됩니다. 가장 큰 제목, 두 번째로 큰 제목, 세 번째로 큰 제목 등을 만들 수 있습니다.
# 기호를 사용하여 헤더를 생성합니다.
#의 개수가 많아질수록 헤더의 크기는 작아집니다.

작성

# 헤더 1 - 가장 큰 헤더  
## 헤더 2 - 두 번째로 큰 헤더  
### 헤더 3 - 세 번째로 큰 헤더  

결과:

Headers

강조(Emphasis)

마크다운에서 강조하는 방법은 다음과 같습니다. ‘이탤릭체’, ‘굵은 글씨’, ‘굵은 이탤릭체‘가 있습니다. 마크다운(Markdown) 자체에는 텍스트 색상을 변경하는 기능이 내장되어 있지 않습니다. 마크다운을 사용하는 많은 플랫폼과 도구들이 HTML이나 CSS를 혼합하여 사용할 수 있어서 텍스트 색상을 변경할 수 있습니다. 여기서는 마크다운만 사용하여 텍스트를 강조하는 방법을 설명합니다.

이탤릭체

한 개의 별표(*) 또는 언더스코어(_)로 단어를 감싸서 이탤릭체로 만듭니다.

예:

*이탤릭체*
_이탤릭체_  

결과:
이탤릭체

굵은 글씨

두 개의 별표(**) 또는 언더스코어(__)로 단어를 감싸서 굵게 만듭니다.

예:

**굵은 글씨**
__굵은 글씨__  

결과:
굵은 글씨

굵은 이탤릭체

세 개의 별표(***) 또는 언더스코어(___)를 사용합니다.

예:

***굵은 이탤릭체***
___굵은 이탤릭체___  

결과:
굵은 이탤릭체

목록(Lists)

글 머리 기호라고 생각하시면 됩니다. 순서가 있는 목록과 순서가 없는 목록이 있습니다.

순서 없는 목록

순서(번호)가 없는 목록입니다.

-, *, 또는 +를 사용하여 목록을 만듭니다.

예:

- 항목 1  
- 항목 2  
- 항목 3

결과:

  • 항목 1
  • 항목 2
  • 항목 3

순서 있는 목록

숫자를 사용하여 목록을 만듭니다.

예:

1. 첫 번째 항목  
2. 두 번째 항목  
3. 세 번째 항목  

결과:

  1. 첫 번째 항목
  2. 두 번째 항목
  3. 세 번째 항목

수평선(Horizontal Rules)

텍스트를 구분하기 위해 수평선을 사용합니다.

세 개 이상의 하이픈(-), 별표(*), 언더스코어(_)를 사용하여 수평선을 만듭니다.

작성 예

---

결과


텍스트에 웹페이지의 하이퍼링크를 추가할 수 있습니다.

대괄호([])로 텍스트를 감싸고, 소괄호(()) 안에 URL을 넣어 링크를 생성합니다.

예:

[Google](http://www.google.com)

결과:
Google

이미지(Images)

이미지를 불러올 수 있습니다.

느낌표(!)와 대괄호([])로 이미지의 대체 텍스트를 감싸고 소괄호(()) 안에 이미지의 URL을 넣습니다.

로컬 저장소의 이미지를 불러올 수도 있습니다. 이 경우에는 이미지의 경로를 넣습니다. 절대 경로를 사용하는 것이 좋습니다.(/images/markdown/markdown-01_01.png)

예: 인터넷 상의 마크다운 이미지를 참고 하였습니다.

![대체 텍스트](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)  

결과:
대체 텍스트

인용구(Blockquotes)

출처의 텍스트나 발언을 강조하기 위해 인용구로 표시 하여 시각적으로 독자의 주의를 끌 수 있습니다.

> 기호를 사용하여 인용구를 만듭니다.

작성 예

> 이것은 인용구입니다.  

결과

이것은 인용구입니다.

여러 줄의 인용구를 만들려면 > 기호를 여러 줄에 걸쳐 사용합니다.

> 이것은 인용구입니다.  
> 이것은 인용구입니다.  
> 이것은 인용구입니다.  

이것은 인용구입니다.
이것은 인용구입니다.
이것은 인용구입니다.

중첩 인용구를 만들려면 > 기호를 중첩하여 사용합니다.

> 이것은 인용구입니다.  
>> 이것은 인용구입니다.  
>>> 이것은 인용구입니다.  

이것은 인용구입니다.

이것은 인용구입니다.

이것은 인용구입니다.


해시태그: #마크다운 #마크다운 기본 #마크다운 헤더 #마크다운 강조 #마크다운 목록 #마크다운 링크 #마크다운 이미지 #마크다운 인용구 #마크다운 수평선

댓글남기기