마크다운 작성법

지눙·2022년 11월 19일
0
post-thumbnail

최근 맥북을 구입하게 되면서 윈도우에서 자연스럽게 맥 환경으로 넘어가게 되었고, 기존 윈도우 환경에서 마크다운을 알긴 했지만 워드 프로세서(한글, word)가 익숙하여 주로 워드 프로세서에서 글을 작성했었습니다. 허나 지금은 맥 환경으로 넘어오게 되면서 마크다운으로 글을 작성할 수 있게 되었습니다.
맥의 환경에서는 한글을 편집하기에 좋지 못한 환경이기에..
이 글은 그 때 마크다운을 처음 접하면서 익혔던 문법을 복습하기 위해 썼습니다.


✅ 마크다운

마크다운이란

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

  • 마크다운은 흔히 깃허브에서 많이 사용하는 README 파일을 예로 들 수 있습니다. .md확장자를 가지는 마크다운은 마크다운이 가지는 특정 문법 이외에 HTML 코드도 같이 사용할 수 있다는 점에서 사용자가 쉽게 글을 작성할 수 있는 기회를 제공합니다.
  • 현재 다양한 웹사이트에서 마크다운 형식으로 글을 쓸 수 있게끔 지원하고 있습니다. 대표적으로 제가 현재 사용하고 있는 velog나 tistory 등 블로그에서도 마크다운을 바탕으로 글을 쓸 수 있도록 기능을 제공하고 있습니다.
  • 또한 노션, Visual Code, Typora 등 다양한 에디터를 통해 확장 기능 또는 편의 기능을 이용하여 간편하게 작성이 가능합니다.
  • 저의 경우, VS CODE와 OBSIDIAN을 주로 사용하여 마크다운을 작성하고 있습니다.

마크다운의 장점

  • 쉽다 : 문법이 대체로 간단하며, 제약사항이 많지 않아 처음 글을 쓰는 사람에게도 쉽게 접근이 가능합니다.
  • 다양한 형태의 글을 작성할 수 있다. : 웹사이트 뿐만 아니라 문서, 메모 등 파일로 사용할 수 있습니다.
  • 텍스트로 저장되기 때문에 용량이 크지 않다 : 코드 기반의 텍스트로 저장되기 때문에 용량이 작고, 검색하기에도 용이합니다.
  • 다양한 포맷으로 변환이 가능하다 : PDF, HTML 등으로 내보낼 수 있습니다.
  • 어떠한 환경에서도 작성이 가능하다 : 사용자가 굳이 에디터에 국한되지 않고 다양한 환경에서 작성이 가능합니다.

✅ 제목만들기 (header)

#의 개수로 제목 Header의 크기를 표현할 수 있습니다.
🖋입력

# 제목 1 (h1)
## 제목 2 (h2)
### 제목 3 (h3)
#### 제목 4 (h4)
##### 제목 5 (h5)

🖥결과

제목1 (h1)

제목2 (h2)

제목3 (h3)

제목4 (h4)

제목5 (h5)

html 코드로도 작성이 가능합니다.

🖋입력

<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>

🖥결과

제목 1 (h1)

제목 2 (h2)

제목 3 (h3)


✅ 한 줄 띄기

🖋입력

<br>
또는 띄어쓰기 2번

🖥결과
이 글은 띄어쓰기 2번
해봤습니다.
이 글은
코드 <br>을 이용해 보았습니다.


✅ 수평선

🖋입력

* * *
<hr>
기타 등등

🖥결과




✅ 텍스트

텍스트에 다양한 효과를 넣을 수 있습니다.
🖋입력

보통글씨
*이텔릭체*

**두껍게**
<strong>두껍게</strong>

~~취소선~~

<mark>하이라이트</mark>
<span style="background-color:yellow">하이라이트</span>

🖥결과
보통글씨
이탤릭체
두껍게
strong 태그를 사용한 두껍게
취소선
하이라이트
하이라이트


✅ 리스트

리스트는 순서가 없는 리스트와 순서가 있는 리스트가 있습니다.

순서가 없는 리스트

-,+,*을 사용하여 작성할 수 있습니다.
tab키를 이용하여 들여쓰기가 가능합니다.
🖋입력

- 순서 없는 리스트
	- 이것은
		- 순서가
			- 없는
				- 리스트입니다.
	// tab키로 들여쓰기 가능

🖥결과

  • 순서 없는 리스트
    - 이것은
    - 순서가
    - 없는
    - 리스트입니다.

순서가 있는 리스트

🖋입력

1. 이것은
2. 순서가
3. 있는
4. 리스트입니다.

// 혼합형태
- 이것은
	1. 혼합
	2. 리스트입니다.

🖥결과
1. 이것은
2. 순서가
3. 있는
4. 리스트입니다.

  • 이것은
    1. 혼합
    2. 리스트입니다.

✅ 인용문

>을 사용하여 인용문을 작성합니다.
🖋입력

> 이것은 인용문입니다.

> 중첩 인용문
>> 중첩 인용문 사용하기
>> > 한번 더~

🖥결과

이것은 인용문입니다.

중첩 인용문

이것은 중첩 인용문 입니다.

한번 더~


✅ 인라인 코드

백틱(`)을 사용하여 인라인 코드를 작성할 수 있습니다.
🖋입력

`백틱을 사용해 봅시다.`

🖥결과
백틱을 사용해 봅시다.


✅ 코드블럭

백틱(`)을 세 개를 입력하여 코드블럭을 만들 수 있습니다.
🖋입력

	```
	코드 블럭 만들어 보기
	```

🖥결과

코드 블럭 만들어 보기

🖋입력

	```c
	#include <stdio.h>
	int main() {
		printf("Hello, world!\n");
		return 0;
	}
	```

🖥결과

#include <stdio.h>
int main(){
	printf("Hello, world!\n");
	return 0;
}

✅ 하이퍼링크

하이퍼링크를 만드는 방법은 총 3가지가 있습니다.
1. 인라인 링크
2. url 링크
3. 참조 링크

🖋입력

// 1. 인라인 링크
[인라인 링크](https://github.com/)

// 2. url 링크
<https://github.com/>

// 3. 참조 링크
[github]:https://github.com/

[github]

🖥결과
인라인 링크

https://github.com/

github


✅ 이미지

하이퍼링크 방식에서 앞에 !를 붙이고 이미지 링크를 넣어 사용합니다.
🖋입력

// 1. 일반 이미지 삽입 -> ![대체 텍스트](이미지 링크)
![image](https://velog.velcdn.com/images/ingjwjw/profile/1b8a501b-27f3-48cc-a1da-815b07743c20/image.png)

// 2. 이미지 설명 -> ![대체 텍스트](이미지 링크 "이미지 설명")
![image](https://velog.velcdn.com/images/ingjwjw/profile/1b8a501b-27f3-48cc-a1da-815b07743c20/image.png "이미지 설명")

// 3. 이미지에 링크 걸기 -> [![대체 텍스트](이미지 링크)](링크시킬 url "url 설명")
[![image](https://velog.velcdn.com/images/ingjwjw/profile/1b8a501b-27f3-48cc-a1da-815b07743c20/image.png)](https://github.com/ "링크 설명")

🖥결과



✅ 기호 표시

마크다운에 사용되는 기호를 원형으로 보여주고 싶을 때, \를 붙이면 됩니다.
🖋입력

\*
\_
\()
\{}
\-
\+
기타 등등

🖥결과
*
_
()
{}
-
+


✅ 체크박스

- [ ]을 이용하여 체크박스를 만들 수 있습니다.
🖋입력

- [ ] 오늘도
- [ ] 공부를
- [ ] 으쌰으쌰

🖥결과

  • 오늘도
  • 공부를
  • 으쌰으쌰
profile
iOS 개발자 꿈나무..

0개의 댓글