[MarkDown] 마크다운 문서 작성법

깃허브에 프로젝트를 올릴때, 프로젝트에 대한 설명을 위해서는

README.md 파일 작성이 중요하다.

그런데 이 .md 가 무엇일까?

해당 형식은 MarkDown 의 줄임말로, 

html 문서를 편리 하게 작성할 수 있는 문법인 것!

거추장스럽게 다른 문법을 사용하지 않고 필요한 내용만 적으면

문서가 뚝딱 완성되니 정말로 편리하지 않을 수 없었다.

여튼 MarkDown으로 문서를 작성하려면 문법을 알아야 하니,

이번 포스팅은 마크다운 문법에 대해 총정리한다✊

아래쪽에 실습결과를 첨부하니 모르겠다면 확인!

---

마크다운이란.

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

 

장점 과 단점

장점

1. 간결하다.
2. 별도의 도구없이 작성가능하다.
3. 다양한 형태로 변환이 가능하다.
4. 텍스트(Text)로 저장되기 때문에 용량이 적어 보관이 용이하다.
5. 텍스트파일이기 때문에 버전관리시스템을 이용하여 변경이력을 관리할 수 있다.
6. 지원하는 프로그램과 플랫폼이 다양하다.

단점

1. 표준이 없다.
2. 표준이 없기 때문에 도구에 따라서 변환방식이나 생성물이 다르다.
3. 모든 HTML 마크업을 대신하지 못한다.

 

사용법

1. 제목(글머리) 작성

# H1, 제목 1
## H2, 제목 2
### H3, 제목 3
#### H4, 제목 4
##### H5, 제목 5
###### H6, 제목 6

앞부분에 # 을 붙여서 제목 크기를 정한다.

이때 제목은 #이 적을수록 커진다.

 

2. 리스트 작성(번호 X)

* 리스트 1
- 리스트 2
+ 리스트 3

 

3. 리스트 작성(번호 O)

1. 리스트 1
2. 리스트 2
3. 리스트 3 

 

4. 이텔릭체(기울어진 글씨) 작성

*텍스트*
OR
_텍스트_

 

5. 볼드체(굵은 글씨) 작성

**텍스트**
OR
__텍스트__

 

6. 수평선 넣기

***   
---
___

위 기호를 3개이상 나열 할 시 수평선을 나타낼 수 있다.

 

7. 인용 넣기

>
인용

> 
인용
>> 
인용안의 인용

'>' 기호를 추가 하면 인용문 안에 인용을 더 넣는다.

 

8. 링크 달기 

[인라인 링크]
[텍스트](링크 주소)

[참조 링크]
[텍스트][참조명]
[참조명]: 링크 주소

[문서 내부 링크 이동]
[최하단 이동](#블로그)

띄어쓰기가 있는경우 공백부분에 - 를 넣어 사용.

 

문서 내부 링크 이동 예시)

[여기](#사용-이미지-목록)

이런식으로 작성 시 '여기' 라는 텍스트가 나타나게 되고,

'사용 이미지 목록' 이라는 태그로 이동한다.

 

만약 이동할 텍스트가 5. 사용 이미지 목록 과 같이 되어있다면 

따옴표는 무시하고

 

[여기](#5-사용-이미지-목록)

으로 작성한다.

 

9. 이미지 추가하기

[이미지 넣기]

[이미지에 링크 걸기]

[(링크)]

 

링크 따는법

Github -> Issues 에 사진을 업로드 하면 마크다운 형식으로 변환된다.

그대로 복사 붙여넣기하면 사용가능하다.

 

TIP: 간단하게 이미지 복사 -> 마크다운 문서에 붙여넣기로도 추가가 가능하다.

복사-붙여넣기 시 아래와 같이 Uploding 중이라고 뜬다.

업로드 완료 시 마크다운 형식으로 나타난다.

이미지 소스 뒤에 링크를 추가하면 이미지 클릭시 해당 링크로 이동하게 할 수 있다.

예시:

[![image](https://user-images.githubusercontent.com/80378085/150789052-0cf8b4eb-79a5-47a3-acca-a838347ce25a.png)](https://kimasill.tistory.com/)

 

이미지 사이즈 조절

 

아래와 같이 img 태그를 사용해서 이미지 사이즈를 조절 할 수 있다.

<img src="https://user-images.githubusercontent.com/80378085/150789052-0cf8b4eb-79a5-47a3-acca-a838347ce25a.png" width="400px">

가운데 정렬 하려면 파라미터로 align을 넣으면 된다.

<p align="center"><img src="https://user-images.githubusercontent.com/80378085/150789052-0cf8b4eb-79a5-47a3-acca-a838347ce25a.png" width="400px"></p>

 

 

10. 코드 블록 추가하기

<pre>
<code>
코드 
코드
코드
</code>
<pre>


OR


```
코드
코드
코드
```

 

`은 따옴표가 아닌 악센트 기호이다.

맥은 'option'키 + '~'키 를 같이 눌러서 악센트 기호를 넣을 수 있다.

 

 

11. 문자열 개행/ 띄어 쓰기

~개행/띄어 쓰기에 관한내용은 아래 포스팅에 자세하기 정리해놓았습니다~

[MarkDown] 마크다운 띄어쓰기(공백), 줄바꿈 사용법

 

12. 기타

[취소선 넣기]
~~텍스트~~

[체크박스 넣기]

* [x] 체크박스

* [ ] 빈 체크박스

[이모지 넣기]

맥 : control키 + command키 + space bar

OR 마우스 우클릭 -> '그림 이모티콘 & 기호' 클릭

윈도우: window키 + .(마침표)

[표 넣기]
|왼쪽정렬|중앙|오른쪽 정렬|
|:---|:---:|---:|
|내용1|내용2|내용3|
|내용4|내용5|내용6|

: 위치가 정렬을 결정한다. 
예를들어 |:---| 은 왼쪽 정렬. 디폴드 값은 왼쪽정렬

 

13. 마크다운 언어 예시

아래는 위에서 작성한 사용법을 기반으로 한 마크다운 언어와, 실습 결과 이다.

# MarkDown
마크다운 실습

# 1. 제목(글머리) 작성
# H1, 제목 1
## H2, 제목 2
### H3, 제목 3
#### H4, 제목 4
##### H5, 제목 5
###### H6, 제목 6

# 2. 리스트 작성(번호 없음)
* 리스트1
  - 리스트2
    + 리스트3

# 3. 리스트 작성(번호 있음)
1. 리스트1
2. 리스트2
3. 리스트3 

# 4. 이텔릭체(기울어진 글씨) 작성
*텍스트*

# 5. 볼드체(굵은 글씨) 작성
**텍스트**

# 6. 수평선 넣기
*** 
---
___

 

# 7. 인용 넣기
> 인용

> 인용
>> 인용안의 인용

 

# 8. 링크 달기 
-인라인 링크  

[티스토리 블로그](https://kimasill.tistory.com/)

 

-참조 링크  

[티스토리 블로그][tistoryBlog]  

[tistoryBlog]: https://kimasill.tistory.com/  

 

-문서 내부 링크 이동  
[최하단 이동](#블로그)

 

# 9. 이미지 추가하기


[](https://kimasill.tistory.com/)

<img src="https://user-images.githubusercontent.com/80378085/150789052-0cf8b4eb-79a5-47a3-acca-a838347ce25a.png" width="400px">
  <p align="center"><img src="https://user-images.githubusercontent.com/80378085/150789052-0cf8b4eb-79a5-47a3-acca-a838347ce25a.png" width="400px"></p>

 

# 10. 코드 블록 추가하기
<pre>
<code>
코드 
코드
코드
</code>
</pre>

```
코드
코드
코드
```

# 11. 문자열 개행/ 띄어쓰기

**개행**
텍스트
<br/>
텍스트

**띄어쓰기**
텍스트 텍스트

# 12. 기타
**취소선 넣기**
~~텍스트~~

**체크박스 넣기**

* [x] 체크박스

* [ ] 빈 체크박스

**이모지 넣기**
😶🙄😏😣😥😮(●'◡'●)╰(*°▽°*)╯(*/ω＼*)(❁´◡`❁)  

**표 넣기**
|왼쪽정렬|중앙|오른쪽 정렬|
|:---|:---:|---:|
|내용1|내용2|내용3|
|내용4|내용5|내용6|


# 블로그
https://kimasill.tistory.com/

널디 코드 일기

 

---

실습 결과는 아래에서 확인 가능합니다!

GitHub - kimasill/MarkDown: 마크다운 실습

---

정리

마크다운은 기본문법만 알고있다면 일반 텍스트편집기에서도 손쉽게 작성이 가능한 마크업언어다. 현재 다양한 도구와 플랫폼에서 지원하고 있기 때문에 더욱 손쉽게 스타일적용된 문서를 작성할 수 있어 점점 널리 사용되고 있다[1]. 손쉽게 작성할 수 있기 때문에 나도 처음 사용하는데도 불구하고 꽤나 쉽게 작성할 수 있었고, 문법만 익혀두면 두고두고 써먹을 수 있을것 같다!

 

 

레퍼런스

[1] 마크다운 사용법

마크다운(Markdown) 사용법