공부거리들

마크다운 언어 공부(Markdown)-1

HolgaHolic 2025. 1. 14. 20:51

 

유용하고 다양한 문서작성 앱들이 넘처 난다, #Notion 에 이어 #obsidian 까지,, 일단 둘다 Markdown기반의 앱이므로

하나 사용하는 방법을 알면, 둘다 사용하거나, 자료 이동도 용이 할 듯 하다..

 

어디서나, 어떠한 기기(휴대폰, PC, 테블릿 등)에서도 작성 가능한 텍스트 에디터를 찾다가 Notion을 알게 되어 뭐 순전히 텍스트 에디터로만 사용을 하고 있었는데, Markdown 기반의 앱이기 때문에 나도 모르게 텍스트 중 MarkDown(이하 마크다운) 문법이 들어가면 출력물이 변하는 바람에, 당황하곤 했는데 일단 자료 수집의 도구로 썼기 때문에 그냥 사용법 무시하고 사용하다, 마크다운 언어를 배우면 더 효율적이고 보이에도 좋은 자료 정리가 될 듯 하여 여기에 공부한 마크다운 사용법을 정리해 본다

 

 

아래 문법을 위에 언급한 앱에서 사용해도 좋고 비교하기 위해서는 https://stackedit.io/ 라는 웹 기반의 텍스트 에디터에서

직접 전 / 후 화면을보면서 배워 볼 수가 있다.

 

화면을 캡쳐해 올리려다. 혹시라도 보시는 분이 계시면, 직접 앱을 사용해 작성해 보도록 그냥 내용을 여기에 정리 해 보겠다

 

(티스토리 블로그를 가지신 분은 글 작성시 마크다운 문서로 작성도 가능)

 

  1. 해더(Header)

# 표시의 수에 따라 글의 크기가 6 단계로 변한다

사용법 #(한칸띠고) 해더 라고 표현

# 더1 위의 헤더1과 같은

#한칸띠고쓰면 헤더 1

#개수에 따라 헤더 2,3,4,5,6 까지 됨

## 헤더2

### 헤더3

#### 헤더4

##### 헤더5

###### 해더6

 

글 아래줄에 = 또는 - 를 표시하여 표현

 

해더 1

=

 

글아래 =표시하면 헤더1_===여러개 해도 됨)

 

해더2

-

글 아래 - 표시하면 헤더 2 (---- 여러개 해도 됨)

 

 

 

2. 강조 하기 (emphasis)

 

언더바 사이에 글자를 작성하면 기울어짐 _언더바_

별표 사이에 글자를 작성하면 기울어짐 *별표*

언더바두줄 쌍별표 사이에 글자를 작성하면 강조 표시됨

__강조__ , **강조**

언더바 또는 별표 표시를 보이게 하려면 앞에 역슬레시를 삽입하면 됨

\_언더바\_, \*별표\* \_\_강조\_\_

 

 

3. 인용 quote

꺽쇠\> 를 사용하면 인용문이 됨

 

> 무소의 뿔 처럼 가라 .

 

###### _숫타니타파_

 

엔터2번 처야 인용문 칸에서 나옴

 

 

4. code 예제

 

`shutdown` command 는 시스템을 꺼버리는 명령어 이다 작은따옴표 아닌 ` 사이에 작성

 

router#interface1/1

interface1/1#shutdown

박스안에서는 # 헤더 도 안먹고

_강조_ 도 안먹음

 

스페이스 네번 치고 작성하면 위 처럼 박스표시됨

마찬가지로 엔터 두번 치면 박스에서 나옴

 

5. 목록(list) 예제

 

### 장보기 목록

* 사과

+ 배

- 바나나

 

별표, 더하기 또는 대시 로 가능 하나, 하나로 통일이 좋음

* 사과

* 배

* 자두

*

### 순서

1. 사과

2. 배

3. 귤

4. 오렌지

 

서브목록 은 아래에 스페이스 2칸 이상 띠우고 작성

- 과일

- 사과

- 배

- 육류

- 소고기

- 돼지고기

 

 

6. 수평 줄 치기

이 아래 선착순

----

***

___

 

선착순

===

----

***

___

 

7. 링크 예제

 

https://www.naver.com

그냥 url 작성

 

구글에 접속하려면 다음 구글을 누르시오 [Google](https://google.com "Google search").

아래 처럼 [] 안에 링크할 문구 넣고 옆에 ()안에 url링크 작성

 

구글에 접속하려면 다음 구글을 누르시오 [Google](https://google.com "Google search").

 

 

아래처럼 참조링크로 작성

 

[네이버][msb]

 

[msb]:https://www.naver.com "네이버검색"

 

[네이버][msb]

[msb]:https://www.naver.com "네이버검색"

 

 

8. 이미지 예제

 

placeholder.it 는 원하는 크기의 이미지를 제공해 주는 싸이트

 

 

이미지좀 붙여줘![Demo](http://placeholder.it/350x150)

 

 

참조이미지 예제

 

300픽셀정사각형 예제

![300x300 demo][Demo300]

 

 

 

[Demo300]:http://placehold.it/300 "300픽셀 정사각형 "

 

9. 인라인 HTML

 

글작성 중 HTML을 사용하고 싶다면

 

<dl>

<dt>HTML</dt>

<dd>이렇게 사용하시오 </dd>

</dl>

 

<dl>

<dt>HTML</dt>

<dd>이렇게 사용하기오 </dd>

</dl>