본문으로 바로가기

마크다운이란

존 그루버의 마크다운

Github Flavored Markdown

MultiMarkdown

PHP Extras Markdown

Haroopad Flavored Markdown

기타

마크다운이란

마크다운Markdown이란 텍스트에 태그를 사용하여 글자의 굵기나 크기, 이미지 삽입 등 가능하도록 제작된 언어이다. 특히 대제목, 중제목 등 규칙이 명확하고 링크 작동이나 소스코드를 표현하기 위한 신택스 하일라이트 등 기술적 글쓰기에 매우 효율적이다. 티스토리의 경우도 일부 마크다운을 제공하고 있으나 사용하는 블로그 템플릿에 따라 표현하는 방식은 다르다. 결국 작성 방법은 동일하지만, 표현되는 형태는 달라질 수 있다.

마크다운 장점

우선 마크다운은 다른 언어들에 비해 읽기 쉽다. 일반적인 프로그래밍 언어가 아니기 때문이다. 대제목의 경우 제목 앞에 #을 붙여주고, 중제목은 ##, 소제목은 ###을 사용한다. 기울기는 *기울기* 형태로 사용한다. 좀 전에 표현한것 처럼 규칙만 이해하면 익히기 쉽다. 그래서 commonmark.org에서는 10분이면 배울 수 있도록 튜토리얼을 제공한다. 한번 익혀두면 키보드 만으로 대부분의 표현을 할 수 있다. 다르게 말하면, 모바일로 작성이 가능하다는 의미를 가진다.

마크다운 단점

문법이 단순하다는 것은 사용자의 편의성을 가져다 주지만 표현의 한계가 있다. 정해진 규칙을 넘어서서 사용하려면 CSS를 조작해야하고, 새로운 규칙을 부여한 경우 표준이 아니기 때문에 다른 프로그램에서 읽히지 않을 수 있다. 이러한 한계를 극복하고자 마크다운과 함께 사용할 수 있는 것이 HTML 문법이다. HTML과 함께 표현할 수 있지만, 결국 HTML이라는 언어를 추가로 배워야한다는 것이다. HTML 없이 사용한 마크다운은 한계가 명확하다.

존 그루버의 마크다운

마크다운은 존 그루버John Gruber 가 제작했기에 그가 제시하는 표현 방법이 가장 기본이 된다. 마크다운을 지원하는 다양한 도구가 있는데, 여기서는 하루패드 0.13.1을 사용한다. 마크다운에서는 똑같은 표현을 할 수 있는 서로 다른 문법들이 존재한다. 대제목의 경우 #으로 시작할 수 있지만 텍스트 아래에 적당히 =를 3개 이상 사용해도 동일한 효과를 볼 수 있다. 여러가지 이유가 있겠지만 어떤 문법을 사용할 것인가는 사용자가 손에 익숙한 방법을 선택해 사용하는 것이 좋다.

그림 1-0 하루패드그림 1-0 하루패드

제목

제목은 말 그대로 대제목, 중제목 등으로 표현할 수 있고, 책으로 따지자면 장제목, 절제목 등으로 표현가능하다. 사용하는 방식은 제목으로 사용할 텍스트 앞에 #을 추가하는 것으로 #의 개수에 따라 표현하는 방법이 달라진다. 제목으로 사용할 수 있는 개수는 6 개이며, 포스팅하거나 책을 집필할 때 최대 3 개 혹은 4 개까지 쓰는것이 좋다. 제목을 표현하는 단축키는 [ctrl-1/2/3/4/5/6] 이다.

그림 1-1 제목그림 1-1 제목

굵은 글씨

굵은 글씨는 **굵기**__굵기__로 사용한다. 기울기에서 사용하는 문법에서 개수가 하나씩 늘었기에 기울기를 *로 사용한다면 굵기도 **로 사용하는 것이 기억하기 좋다. 기울기와 굵은 글씨에서 두 가지 표현방식을 가지는 이유는 굵기와 기울기를 함께 써야한다면 **_굵고 기울기_** 로 섞어 써야하기 때문이다. _ 보다는 *을 추천하는데 그 이유는 숫자패드 위에 *가 있어 쉬프트를 누를 필요가 없기 때문이다. 굵은 글씨를 나타내는 단축키는 [ctrl-b] 이다.

그림 1-2 굵은 글씨그림 1-2 굵은 글씨

기울기

기울기는 *기울기* 형태로 사용할 수 있고, _기울기_ 형태로도 사용할 수 있다. 기울기 단축키는 [ctrl-i]를 쓴다.

그림 1-3 기울기그림 1-3 기울기

코드

문장 중간중간 표현하는 명령어나 코드는 작성한 문장과 혼용을 야기시킨다. 이를 구분하기 위해 코드를 사용한다.

그림 1-4 인라인 코드그림 1-4 인라인 코드

이미지

이미지는 링크와 똑같은 형태에서 앞에 느낌표(!)를 사용한다. 즉, ![대체 텍스트](링크) 형태로 사용한다. 참조형으로도 사용 가능하다. 주소는 웹 사이트 링크를 사용할 수 있고, 로컬의 주소를 사용할 수도 있다. 만약 이미지의 크기와 정렬을 수정하고 싶다면 css 구문을 추가한다. 예로 ![](주소 "타이틀" "width:200px;height:100px") 형태를 가진다.

[대체 텍스트]는 대체 텍스트로 이미지가 출력되지 않은 경우 출력하는 메시지다.

그림 1-5 이미지그림 1-5 이미지

이미지 삽입에는 추가 확장 기능이 있다. 유투브와 같은 미디어가 아닌 mp3같은 오디오, 비디오 파일도 로드 가능하다. 지원 가능한 확장자는 다음과 같다.

확장자 

형태 

mp4

video/mpeg

ogv

video/ogg 

webm

video/webm 

링크

링크는 이미지에서 느낌표를 뺀 [이름](주소) 형태로 사용한다. 링크를 표현하면 링크가 활성화되고 클릭하면 설정한 주소를 열람한다. 이렇게 사용하는 링크를 인라인 링크라 부른다. 링크도 참조형으로 사용할 수 있다. 참조형 링크는 [이름][참조명][참조명]: 링크 주소 를 함께 사용한다. 참조명이 링크 이름과 동일하게 자동으로 할당받는 형태로도 쓸 수도 있다.

그림 1-6 링크그림 1-6 링크

인용구

인용구는 > 형태로 사용하고 인용 안의 인용은 >를 두 번 사용한다.

그림 1-7 인용구그림 1-7 인용구

정렬 목록

번호 있는 리스트는 1., 2., 3. 등 숫자로 시작하는 리스트를 구현한다. 리스트 이후에 문장의 들여쓰기는 스페이스로 사용할 수 있다.

그림 1-8 정렬 목록그림 1-8 정렬 목록

비정렬 목록

번호 없는 리스트는 -, +, * 세가지로 사용할 수 있다. 만약 - 형태로 사용하다가 + 형태로 변경하여 사용하면 마크다운 에디터는 서로 다른 리스트로 인식하기에 서로 다른 리스트 사이에 단락 공백이 추가된다. 리스트 이후에 문장의 들여쓰기는 스페이스로 사용할 수 있다.

그림 1-9 비정렬 목록그림 1-9 비정렬 목록

페이지 나누기

수평선은 -, *, _를 여러개 사용하여 표현하며, 각각 표현할 때 띄워쓰기가 들어가는 것이 좋다. 예를 들면 - - -, * * *, _ _ _와 같다. 띄워쓰기를 하지 않는다면 5번 연속으로 사용한다. 하루패드에서는 페이지 나누기(* * *), 섹선 나누기(- - -), 문단 나누기(_ _ _)로 각각 표현한다. 페이지 나누기를 써야만 하는 경우도 있다. 하루패드에서는 프리젠테이션 기능이 있는데, 각 페이지를 구분하는 기준으로 사용한다.

그림 1-10 페이지 나누기그림 1-10 페이지 나누기

Github Flavored Markdown

마크다운은 존 그루버가 제시한 기본 형태를 포함해 사용자가 추가적으로 기능을 개발해 사용할 수 있다. 하루패드는 코드 블럭과 취소선 그리고 일정 리스크는 깃허브에서 사용하는 표현방식으로 구현되었다.

코드 블럭

마크다운은 소스코드를 아름답게 표현할 수 있다. 단순한 소스코드를 사용하면 문장 앞에 스페이스를 4 개 혹은 탭을 사용한다. 알록달록한 소스코드 표현은 신택스 하일라이트Syntax Highlight로 불리는데 사용하는 방법은 `를 소스코드 시작과 끝에 세개를 연속으로 사용한다. 소스코드가 어떤 것인가에 따라 표현하는 방법이 다르다. 만약 자바스크립트 언어를 사용한다면 ```javascript 로 시작하여 ```로 마무리한다. ``` 대신 ~~~를 사용할 수 있다.

그림 1-11 코드 블럭그림 1-11 코드 블럭

신택스 하일라이트를 제공하는 언어의 종류는 다양하다. 지원하는 언어의 종류는 여기를 참고한다.

취소선

취소선은 문자 가운데에 선을 긋는 표현으로 ~~취소선~~ 형태로 사용한다.

그림 1-12 취소선그림 1-12 취소선

과제 관리

체크박스를 표현하여 과제 관리를 할 수 있다. 표현하는 방식은 - [ ], - [x]로 사용한다.

그림 1-13 과제 관리그림 1-13 과제 관리

MultiMarkdown

MMD로 불리기도 하는 MultiMarkdown은 존 그루버에 의해 만들어진 마크다운의 상위 버전으로 여러 추가적인 기능들을 가지고 있다. 이 기능 중 밑줄을 표현하는 방식을 하루패드에서 사용한다.

밑줄

밑줄은 ++밑줄++ 형태로 사용해 표현한다.

그림 1-14 밑줄그림 1-14 밑줄

윗첨자, 아랫첨자

마크다운에서는 윗첨자와 아랫첨자를 사용할 수 있다. 표현방식은 ^~ 를 쓴다.

하지만 문장 중간에서 ^~가 사용 안될 수도 있다. 이럴땐 윗첨자를 HTML 코드로 <sup>, </sup>를 사용하고 아랫첨자를 <sub>, </sub>를 사용한다.

그림 1-15 윗아랫첨자그림 1-15 윗아랫첨자

PHP Extras Markdown

PHP Extras Markdown은 존 그루버의 마크다운에서 사용할 수 없는 기능을 PHP 형태로 확장한 마크다운이다.

각주 & 각주 참조

각주는 추가적으로 설명할 필요가 있는 부분에 사용한다. 사용 방법은 설명하고자 하는 단어나 문장 뒤에 [^각주] 형태로 사용하며, 참조 형태이기에 [^각주]: 설명 형태로 명시한다.

그림 1-16 각주그림 1-16 각주

테이블

존 그루버의 마크다운에는 테이블에 대한 문법이 없다. 그래서 여러 마크다운 사용자들과 커뮤니티에서 테이블을 표현하기 위해 다양한 방식을 쓴다. 특히 기억해야할 부분은 |에 맞춰 :을 적절하게 사용하면 왼쪽, 가운데, 오른쪽 정렬이 가능하다.

아직 병합과 같은 복잡한 테이블 기능은 사용할 수 없다.

그림 1-17 테이블그림 1-17 테이블

Haroopad Flavored Markdown

Harropad Flavored Markdown은 하루패드에서 좀 더 좋은 표현을 하도록 자체 제작한 마크다운의 추가 기능이다.

강조

강조는 ==강조== 형태로 사용한다.

그림 1-18 강조그림 1-18 강조

목차

컨텐츠가 있다면 상단에 목차를 표현하여 효과적인 표현을 할 수 있다. 콘텐츠는 제목 2 부터 작성된다. 사용 방법은 [TOC]를 쓰면 자동으로 생성된다. TOC는 대소문자를 구분하지 않는다.

그림 1-19 목차그림 1-19 목차

미디어 삽입

미디어는 링크형태로 삽입 가능하고, HTML 구문을 써서 삽입할 수 있지만, @[]() 형태로 사용하여 표현할 수 있다. 특히 구문안에는 widthheight를 사용하여 크기를 조절할 수 있다.

미디어로 트위터도 삽입이 가능하다.

그림 1-20 미디어 삽입그림 1-20 미디어 삽입

수학 표현식

하루패드에서 수학 표현식을 사용할 수 있도록 두 가지 방법을 제시한다. 먼저 수학 표현식을 사용하려면 파일 > 환경설정 > 마크다운 > 수학 표현식 옵션의 항목들이 체크되어 있는지 확인한다. 하루패드에서 수학 표현식은 $ 기호를 사용하여 표현하면 인라인 방식과 블럭 방식을 제공한다. 수학적 기호를 키보드로 표현하기 어렵기에 이 수학 문법을 이해하는 것이 중요하다. 이는 논문에서 가장 많이 사용하는 LaTeX를 참고하자.

그림 1-21 수학 표현식그림 1-21 수학 표현식

주석

다른 사용자와 작성한 마크다운을 공유한다면 표현 외적으로 부수적인 설명을 하거나 필요없는 부분을 임시로 표현하지 않도록 주석처리할 수 있다. 주석을 사용하는 방법은 <!--주석--> 형태로 사용한다.

그림 1-22 주석그림 1-22 주석

다이어그램

하루패드의 마크다운은 그래프를 그릴 수 있다. 그래프를 그릴때는 블럭 코드 표현방식을 활용하며 언어를 mermaid로 사용한다. 다음 예제는 하루패드 공식 사이트에서 참고했다.

그림 1-23 다이어그램 1그림 1-23 다이어그램 1

그림 1-24 다이어그램 2그림 1-24 다이어그램 2

그림 1-25 다이어그램 3그림 1-25 다이어그램 3

그림 1-26 다이어그램 4그림 1-26 다이어그램 4

그림 1-27 다이어그램 5그림 1-27 다이어그램 5

기타

  • 당연히 단축키도 존재한다. 단축키에 여러 기능들을 잘 익혀두면 마우스에 손대는 일이 점점 줄어들어 작업의 능률과 속도를 높여줄 것이다. 단축키는 여기에서 참고하여 사용하자. 그 외 응용프로그램의 사용 방법은 글쓰기에 중요한 기능은 아니기에 생략한다.
  • HTML과 혼용해서 동작하도록 구성되어 있다면, < 는 문제를 일으킬 것이다. 이 경우 &lt; 형태의 인코딩을 사용해야한다. 하지만 완벽하진 않다.


저작자 표시 비영리 동일 조건 변경 허락
신고

'Etc > Technical Writing' 카테고리의 다른 글

기술 글쓰기 1 - Markdown과 친해지기  (1) 2016.07.24

댓글을 달아 주세요

  1. asdf 신고">2017.10.13 07:57 신고

    좋은 글 잘 봤습니다. 글 내용 중 테이블 셀 병합 사용할 수 없다는 내용이 있는데 사실 할 수 있습니다.
    다음과 같이 하면 됩니다.
    | A | B | C | D |
    | -------- | -------- | -------- | --------|
    | aaaaa | bbbbbbbbbbbbbbbbb |||

티스토리 툴바