수학과의 좌충우돌 프로그래밍

markdown 에 대해서 알아보자! 본문

프로그래밍 언어/markdown

markdown 에 대해서 알아보자!

ssung.k 2018. 9. 25. 17:35





안녕하세요 강민성입니다.


오늘은 마크다운! 에 대한 주제로 돌아왔습니다.


django 로 프로젝트를 진행하면서 봤었던



readme.md 파일이 바로 마크다운으로 만들어진 문서였었습니다.


md 라는 처음 보는 확장자명을 보면서도 아무렇지도 않게 지나쳤던 제 자신을 반성하며 마크다운에 대해서 알아보았습니다.


함께 알아보러 가실까요?




Markdown 이란?



Markdown 은 2004년 존 그루버가 에런 스워츠와의 협업을 통해 만들었습니다.


일반 텍스트 문서의 양식을 편집하는 문법이며, 위에서 말했던 readme 파일이나 온라인 문서 등에 사용이 됩니다.


사람들이 읽고 쓰기 쉽도록 굉장히 쉬운 문법 구조인 덕분에


글을 써내려가면서 흐름에 끊김 없이 각 글자에 원하는 서식을 지정해줄 수 있죠.


굵기, 기울기, 크기, 링크 등 여러가지 기능들이 있는데 이따가 살펴보도록 하겠습니다. 


이런 이유로 HTML 보다 빠르게 작성할 수 있으며 


HTML 로 변환시 코드가 엉망진창이 되버리는 위드에 비해서도 강점이 있다고 할 수 있습니다.





Markdown editor



markdown 에디터로는 다양한 프로그램들이 있습니다.


윈도우 에서는 하루패드,  마크다운 패드2


웹 앱으로는 스택 에디트, Markable.in


Mac 에서는  Mou 등이 많이 쓰이고 있습니다.


기존에 많이 사용되던 (저도 사용하고 있는) sublime text 와 같은 에디터에서도


심지어는 단순 메모장에서도 문법만 잘 지켜주면 상관이 없습니다.


하지만 이럴 경우에는 실시간으로 마크다운 변환을 볼 수 없으므로


저는 어느 OS에서도 가능한 Typora 를 깔아보도록 하겠습니다.


(특히 Mac에는 마크다운을 지원하는 훌륭한 유료 에디터가 많지만 돈이 없으므로... ) 


https://typora.io/


다음 url 에서 쉽게 다운을 받을 수 있으므로 다운 받는 과정은 생략하도록 하겠습니다.




다운을 받았더니 다음과 app 이 생성 되었습니다.


실행을 시켜보니



너무나도 심플한 화면이 나오네요.


typora의 특징은 오른쪽 부분에 텍스트를 입력하면 그 즉시 마크다운 문법이 적용된 모습을 보여줍니다.


텍스트 입력과 미리보기가 한 곳에 있는 것이죠.

그러기 때문에 사진을 바로 보여주지 않는 다른 에디터와 달리 이미지도 바로 보여줍니다.


아래에서 확인해보도록 하겠습니다.


이 쯤에서 editor 소개를 마치고 마크다운의 쉬운 문법을 알아보도록 하겠습니다.





Markdown 문법



1. 굵게


말 그대로 굵게 만드는 기능입니다.


글자를 **굵게** 만들기 위해서는 다음과 같이 원하는 글자 앞 뒤에 별을 두 개씩 붙여줍니다.


단 주의해야 할 점은 앞 쪽 두 개의 ** 이후에 뛰어쓰기를 하게 되면 문법이 아닌 단순 기호로 인식을 하게 됩니다.


단축키로는 command + B 입니다. ( window 기준 control + B )





2. 기울이기


역시나 글자를 기울이게 하는 기능입니다.


글자를 기울이게 하기 위해서는 *별 하나를 사용*할 수도 있고 _언더바를 사용_할 수도 있습니다.


단축키로는 command + I 입니다. (window 기준 control + I )




3. 숫자


숫자 목록은 단순하게 숫자만 입력해주시면 됩니다.


1. 아무글자나 입력해도 상관없습니다.


다음과 같이 입력하고 enter 를 누른다면 다음 숫자가 순서대로 자동 생성 됩니다.


숫자 목록에서 벗어나려면 enter를 연속으로 두 번 눌러주면 더 이상 숫자가 셍성이 되지 않습니다.


또한 숫자 목록으로 작성 시, 자동으로 들여쓰기가 적용됩니다.





4. 글머리



글머리를 쓰는 방법은 다양합니다.


- 를 사용해도


+ 를 사용해도


* 를 사용해도 


모두 글머리로 사용이 가능합니다.


-,+,* 중 하나를 입력 한 후 띄어쓰기를 한 번 해주시면 됩니다.


하지만 작성자를 위해서도, 보는 사람을 위해서도 하나로 통일해서 쓰는 것이 더 좋겠죠.


또한 글머리 아래에도 글머리를 적용할 수 있습니다.


그럴 경우에는 검은 색 동그라미가 흰색 동그라미로 바뀌게 되고 그 아래에는 다시 검은 색 네모로 바뀌게 됩니다.


글머리 아래 글머리를 적용하는 방법은


숫자와 마찬가지로 enter 두 번으로 위의 글머리를 없애준 후 다시 * 을 입력해주시면 됩니다.


글로 봐서는 어려워도 한 번 해보시면 쉽게 익히실 수 있을 겁니다.





5. 인용문


인용문은 > 를 사용하여 표현할  수 있습니다. 

> 를 입력 후 띄어쓰기를 하고 원하는 말을 하면 인용문 형태로 나타납니다.




6. 주소 링크


주소 링크는 <> 를 이용해서 표현 합니다.


<> 안에 원하는 주소를 입력해주시면 됩니다.


<rkdalstjd9@naver.com>


<www.google.co.kr>


다음과 같이 이메일 주소가 들어갈 수도, 사이트의 url 이 들어갈 수도 있습니다.


또한 


[구글] (www.google.co.kr)


다음과 같이 대괄호 안에는 주소대신 표현할 말을, 소괄호 안에는 주소를 입력하면


해당 키워드를 통해서 url로 이동할 수 있습니다.




7. 이미지 삽입


마크다운을 이용해서 이미지 역시 삽입할 수 있습니다.


이미지를 삽입하는 방법은


![이미지 이름](이미지 URL)


입니다.


이미지 이름은 이미지가 깨지거나 링크가 잘못되었을 때 표시해주는 문구로 


없어도 문제가 되지는 않습니다.


이미지 URL 은 이미지가 인터넷의 특정 장소에 존재해야 할 수 있습니다.


예를 들어 github 의 readme.md 에 이미지를 올린다고 한다면


![introduce_image](./img/introduce.png)


다음과 같이 작성을 해준 후 


github 프로젝트 안에 img 라는 폴더를 만들어 그 안에 이미지 파일을 넣어주어야 합니다.




8. 구분선


구분선은 * 과 - 을 이용하여 나타낼 수 있습니다.


*** --- 다음과 같이 3개를 연속해서 쓰는 게 일반적이지만 그 이상을 써도 구분선이 생깁니다.



9. 표 만들기


마크다운을 이용해 표 역시 만들 수 있습니다.


표를 만들기 위해서는 | 와 - 을 이용합니다.


쉽게 생각하면 | 는 가로선 구분, 


- 는 세로선 구분이 된다고 생각하시면 됩니다.


| 제목1 | 제목 2 |


다음과 같이 입력하게 된다면




다음과 같이 제목을 나타내는 첫 번째 행과 내용을 입력할 수 있는 두 번째 행이 나타나게 됩니다.


내용까지 한 번에 입력하기 위해서는 


| 제목1 | 제목 2 | 제목 3 |

| ---- | ---- | ---- |

| 값1 | 값2 | 값3 |


다음과 같이 ---- 을 통해서 제목과 값을 구분해주시면 됩니다.


행을 늘리는데 있어서 더 이상의 ---- 가로선을 추가하실 필요는 없습니다.





마무리


여기까지 마크다운과 그 문법에 대해서 알아보았습니다.


다른 언어들에 비해서 상대적으로, 그리고 절대적으로 쉬워서 쉽게 익힐 수 있는 게 장점인 듯 합니다.


다음에는 markdown 을 이용해서 github에 readme.md 파일을 작성해보도록 하겠습니다.

'프로그래밍 언어 > markdown' 카테고리의 다른 글

github의 README.md 올리기  (0) 2018.09.25
Comments