💪개발자가 익숙해져야 할 핵심 문서 에디터 !

ㄴ라고 다들 알고계시겠지만, 정작 많은 사람들이 마크다운을 사용하는 가장 큰 이유는 모르는것 같습니다 !
ㄴ사실 그게 접니다.

1. 왜 마크다운을 사용할까 ?
2. 마크다운을 어떻게 사용할까 ?

에 대해서 정리해보겠습니다.

---

1. 마크 다운이란 ?

개발을 하면서 .md 형식의 파일을 많이 보셨을 겁니다. 벨로그 글도, 깃헙의 README도 마크다운이죵. 간단하게 생각하면 텍스트 파일이라고 보셔도 됩니다. 거기에 다양한 포멧 적용과 링크등을 곁들인...

Markdown은 마크업 언어로 간단한 기호를 사용해서 읽고 쓰기 편한 문서를 만들 수 있으며, HTML과 상호 변환이 가능합니다.

많은 개발자 분들이 개발 명세, 개발한 코드에 대한 설명을 정리할때, 마크다운을 사용하고 계시죠.

개발자 라면 ! 소통, 메모, 협업 문서 작성을 마크다운으로 할 줄 알아야 합니다.

참고 : 마크업 언어가 뭔가요 ?

자, 정리하면 markdown은
1. 개발자들이 굉장히 많이 쓴다.
2. 사용하기 편하다.
3. HTML과 상호 변환이 가능하다.
4. 텍스트로 저장되기 때문에 용량이 적다.
5. 버전 관리가 가능하다.
6. 지원하는 툴이 많다.

정도로 markdown을 사용하는 이유를 정리할 수 있겠습니다.

---

2. 마크다운 툴 소개

메모장부터 전용 에디터까지 다양한 곳에서 써볼 수 있습니다. atom, Typora 등등 다양한 에디터가 있습니다.

저 같은 경우는 시작할때는 Typora로 시작했습니다. 사실 함정은 Typora는 윈도우는 정식 버전이 있는데 맥은 정식 버전이 없어서 맥을 사용하게 되면서 자연스럽게 안쓰게 되더라구요.

사실 대부분의 ide에서 다 마크다운이 제공되기 때문에, 저 같은 경우는 그냥 ide에서 작성을 합니다.
ㄴ 뭐 다운받고 귀찮으시면, 그냥 편한 ide에서 하는게 제일 좋은 것 같습니다.

atom 다운 : 여기서 !
Typora 다운 : 여기서 !

---

3. 마크다운 문법 정리

1. Header

Header는 마크다운의 주제목 및 부제목등 제목을 설정할때 사용할 수 있습니다. H1~H6까지 가능합니다. HTML에서 사용하는 것과 비슷합니다. 주의할 점은 반드시 # 뒤에 한칸을 띄우고 작성을 해야합니다.

입력

# H1
## H2
### H3
#### H4
##### H5
###### H6

출력

H1

H2

H3

H4

H5

H6

2. 강조

글을 쓸때 보면

이렇게 -> 기울임
또는 이렇게 -> 굵게
아니면 이렇게 -> 취소선

텍스트 자체를 강조할 일이 있습니다.

이때 사용하는 문법이 강조 문법이라고 할 수 있습니다.
총 3가지가 있다고 보시면 됩니다. 텍스트 기울임, 텍스트 굵게, 텍스트 취소선 처리.

입력

*기울임*
_기울임_

**굵게**
__굵게__

**_굵은데 기울이기_**

~~취소선~~

출력

기울임
기울임

굵게
굵게

굵은데 기울이기
취소선

3. 인용구

인용구를 작성하고 싶다면 다음과 같이 사용하면 됩니다. 인용구라고 말하면, 인용한 것만 적어야 될것 같지만, 그냥 텍스트를 둘러싸는 칸, 블록을 따로 만든다고 생각하시면 됩니다. 강조하고 싶은 부분이 있거나, 따로 텍스트 블록을 만들고 싶으실때 사용하면 됩니다.

입력

> 나는 개발하는 개복치다. <br>
###### *by 개복치*

출력

나는 개발하는 개복치다.

by 개복치

*참고로 인용구 내부에서도 마크다운 문법이 적용됩니다.

만약에 인용구내에서 다른 인용구를 들여쓰기 하고 싶다면 이렇게 하면됩니다.

입력

> 나는 개발하는 개복치다. <br>
###### *by 개복치*
>> 나는 공부하는 개복치이다.
###### *by 개복치*
>>> 나는 낡고 병든 개복치이다.
###### *by 개복치*
	탭을 쓰게되면 이렇게 인용 들여쓰기가 아닌 코드 블럭이 생성됩니다.
    인용구 안에서는 또 다른 마크다운 문법이 사용가능합니다.

출력

나는 개발하는 개복치다.

by 개복치

나는 공부하는 개복치이다.

by 개복치

나는 낡고 병든 개복치이다.

by 개복치

탭을 쓰게되면 이렇게 인용 들여쓰기가 아닌 코드 블럭이 생성됩니다.
인용구 안에서는 또 다른 마크다운 문법이 사용가능합니다.

4. 리스트

마크다운을 사용하면 리스트(목록)을 간단하게 작성할 수 있습니다.
두 종류의 리스트가 작성가능합니다.

1. 순서(숫자)가 있는 목록
2. 순서(숫자)가 없는 목록

1)순서(숫자)가 있는 목록

입력

1. first
2. second
3. third
4. fourth

출력

1. first
2. second
3. third
4. fourth

와 같이 보입니다. 그런데 이런 의문이 드실 수도 있습니다.

"이거 그냥 내가 숫자 쓰면 되는거 아니야 ? 이게 왜 마크다운 기능이지..?"

예를 들어서 다음과 같이 작성해보겠습니다.

입력

1. first
2. second
10. third
8. fourth

만약 사용자가 직접 숫자를 적는다면, 당연히 위와 같이 숫자를 혼동하거나, 역순으로 사용할 수도 있습니다. 그런데 마크다운에서는 저렇게 작성해도 알작딱깔하게

출력

1. first
2. second
3. third
4. fourth

이렇게 작성됩니다. 번호를 사용하게 되면 알아서 1씩 증가하는 올림차순으로 정렬됩니다.

2) 순서(숫자)가 없는 리스트

리스트의 인덱스를 숫자로 구성하지 않는 경우입니다.

입력

* 별 하나
* 별 둘
* 별 셋
+ 더하기 하나
+ 더하기 둘
+ 더하기 셋
- 빼기 하나
- 빼기 둘
- 빼기 셋

출력

• 별 하나
• 별 둘
• 별 셋

• 더하기 하나
• 더하기 둘
• 더하기 셋

• 빼기 하나
• 빼기 둘
• 빼기 셋

만약에 리스트 안에 또 다른 리스트를 들여쓰기 하고 싶다면 ?

입력

1. 숫자 1
    * 별 하나
    * 별 둘
    - 별 셋
2. 숫자 2
    1. 숫자 11
    3. 숫자 22
    	* 별 하나하나
3. 숫자 3

출력

1. 숫자 1
   • 별 하나
   • 별 둘
   • 별 셋
2. 숫자 2
   1. 숫자 11
   2. 숫자 22
      • 별 하나하나
3. 숫자 3

다음과 같이 리스트안에 리스트를 집어 넣을 수 있습니다. 근데 이거 굉장히 불편하다... 생각되로 잘 안됩니다.

5. 링크

마크다운 내부에 외부 링크를 삽입할 수 있습니다.

[Title](link)

의 형식으로 사용가능합니다.

입력

[구글 링크](https://google.com)

출력

구글 링크

입력

https://google.com 와 같이 일반적인 URL 형태인경우 자동으로 링크를 형성합니다.

출력

https://google.com 와 같이 일반적인 URL 형태인경우 자동으로 링크를 형성합니다.

6. 코드 블럭

코드 블럭을 사용하는 방법은 다양합니다.
1. 탭
2. 공백 4개
3. <code> 사용
4. ''' 사용

4개의 공백 또는 하나의 탭으로 들여쓰기 또는 <pre><code>를 만나면 코드 블럭으로 렌더링됩니다.
전 개인적으로 탭이나 공백으로 코드 블럭을 만들기보단, <code>를 사용합니다.
탭이나 공백은 잘 안되는 경우가 많습니다. '''은 뭔가 지저분한 느낌이구요.

입력

코드 블럭 시작 전입니다.
<pre>
<code> 
@SpringBootApplication
public class SunfishDevApplication {
	public static void main(String[] args) {
		SpringApplication.run(SunfishDevApplication.class, args);
	}
}
</code>
</pre>
코드 블럭 끝입니다.

출력

코드 블럭 시작 전입니다.

 
@SpringBootApplication
public class SunfishDevApplication {
	public static void main(String[] args) {
		SpringApplication.run(SunfishDevApplication.class, args);
	}
}

코드 블럭 끝입니다.

7. 수평선

---

위와 같은 수평선을 사용할 수 있는 방법은 여러가지입니다.

입력

* * *
***
*****
*********************
- - -
---
-----
---------------------
<hr/>

출력

---

---

---

---

---

---

---

---

---

8. 이미지

단순하게 이미지를 넣는 방법은 아래와 같습니다.

![Alt text](/path/to/img.jpg)

의 형식을 사용합니다. [] 안에는 비어있어도 상관없습니다. Alt text는 이미지의 alt 속성입니다. 그림이 렌더링 되지 않을때, 나타날 문자열을 지정합니다.

입력

이미지 삽입하기
![개복치]
(https://images.velog.io/images/hmcck27/post/5f1cba37-6f70-43cc-84a1-1bf1c0f3472a/Mola_mola.jpeg)
이미지 삽입 끝

출력

이미지 삽입하기

이미지 삽입 끝

이미지의 크기를 조정하고 싶다면, HTML에 이미지의 크기를 조정하는 height, width를 사용하면 됩니다.
하지만 이건 HTML 문법을 쓰는거라서 밑에서 정리하겠습니다.

이미지에도 링크를 걸 수 있습니다.

이미지 삽입하기
![개복치(https://images.velog.io/images/hmcck27/post/5f1cba37-6f70-43cc-84a1-1bf1c0f3472a/Mola_mola.jpeg)]
(https://images.velog.io/images/hmcck27/post/5f1cba37-6f70-43cc-84a1-1bf1c0f3472a/Mola_mola.jpeg)
이미지 삽입 끝

이미지 삽입하기

이미지 삽입 끝

9. 기호 표시

마크 다운 문법에 쓰이는 특수 기호들을 그대로 렌더링하고 싶으시다면, 역방향 슬래시를 붙이면 됩니다.
ㄴ 문자열안에 " 쓰고 싶어요..

입력

\*
\_
\()
\{}
\[]
\#
\+
\-
\.
\!
\\

출력

*
_
()
{}
[]
#
+
-
.
!
\

10. 체크 박스

1. 빈 체크박스

입력

- [ ] 빈 체크 박스 -> 중간에 공백

출력

• 빈 체크 박스 -> 중간에 공백

2. 체크된 체크박스

입력

- [X] 체크된 체크 박스 -> 대문자 X
- [x] 체크된 체크 박스 -> 소문자 x

출력

• 체크된 체크 박스 -> 대문자 X
• 체크된 체크 박스 -> 소문자 x

11. 이모지

이모지를 사용하기 위해서 가장 편한 방법은 복붙입니다..! 물론 이모지 코드를 사용하면 됩니다.

:joy:라고 쓰면, 😂 가 나오듯이요. 근데 벨로그에선 제가 모르는건지 안되네요.

https://kr.piliapp.com/twitter-symbols/
요기 링크에서 이모지를 찾아서 복붙하는 방식으로 하는걸 추천 드립니다.

---

4. HTML 문법 사용하기

마크다운의 강점은 HTML 문법이 사용가능하다는 겁니다.
하지만 무턱대고 쓰면 큰 코 다칠 수도 있습니다.
마크다운은 표준이 없거든요.
그 말인 즉슨, 될때고 있고, 안될 때도 있다...

제가 생각하기에 굳이 마크다운 문법을 쓰지 않고 HTML로 쓰는게 편한 부분만 정리하겠습니다.

1. 테이블

입력

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

출력

Foo

2. 이미지

위에서 마크다운 기능으로 이미지를 넣을 수 있었지만, 이미지의 크기 조정은 img 태그를 써서 해야 합니다 !

픽셀 지정도 가능하고, HTML5에서 도입된 %도 가능합니다.

입력

이미지 삽입하기
<img src="https://images.velog.io/images/hmcck27/post/5f1cba37-6f70-43cc-84a1-1bf1c0f3472a/Mola_mola.jpeg" width="20%" height="20%">
이미지 삽입 끝

출력

이미지 삽입하기

이미지 삽입 끝
ㄴ 벨로그 에디터에서는 작게 나오는데, 반영은 또 안되네요.

3. 기타

위에서 마크다운 기능을 설명할때, 제가 마구 HTML 태그를 썼습니다.

당연히 이것들 전부 마크다운으로 가능합니다.
입력

수평선
<hr>
수평선 끝
줄 바꿈 
<br>
줄 바꿈 끝

출력

수평선

---

수평선 끝 줄 바꿈
줄 바꿈 끝

뭐 등등 다 됩니다..! 애매하시면 그냥 써보고 되는구나 넘어가시면 될것 같습니다.

---

5. 마치며

서치해보면서 안거지만, 역시 마크다운을 설명하는 블로그 글이 정말 많습니다.
마크다운을 잘 못쓰는 사람들을 위해서 = 나를 위해서 정리해봤습니다.

참고 링크
https://daringfireball.net/projects/markdown/syntax
https://www.markdownguide.org/extended-syntax/