Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
마크다운 사용법

[공통] 마크다운 markdown 작성법

1. 마크다운에 관하여

1.1. 마크다운이란?

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

1.2. 마크다운의 장-단점

1.2.1. 장점

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

1.2.2. 단점

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

2. 마크다운 사용법(문법)

2.1. 헤더Headers

  • 큰제목: 문서 제목

    This is an H1
    =============
    

    This is an H1

  • 작은제목: 문서 부제목

    This is an H2
    -------------
    

    This is an H2

  • 글머리: 1~6까지만 지원

# This is a H1
## This is a H2
### This is a H3
#### This is a H4
##### This is a H5
###### This is a H6

This is a H1

This is a H2

This is a H3

This is a H4

This is a H5
This is a H6

####### This is a 7.

2.2. BlockQuote

이메일에서 사용하는 > 블럭인용문자를 이용한다.

> This is a blockqute.

This is a first blockqute.

This is a second blockqute.

This is a third blockqute.

이 안에서는 다른 마크다운 요소를 포함할 수 있다.

This is a H3

  • List
    code
    

2.3. 목록

● 순서있는 목록(번호)

순서있는 목록은 숫자와 점을 사용한다.

1. 첫번째
2. 두번째
3. 세번째
  1. 첫번째
  2. 두번째
  3. 세번째

현재까지는 어떤 번호를 입력해도 순서는 내림차순으로 정의된다.

1. 첫번째
3. 세번째
2. 두번째
  1. 첫번째
  2. 세번째
  3. 두번째

딱히 개선될 것 같지는 않다. 존 그루버가 신경안쓰고 있다고...

● 순서없는 목록(글머리 기호)

* 빨강
  * 녹색
    * 파랑

+ 빨강
  + 녹색
    + 파랑

- 빨강
  - 녹색
    - 파랑
  • 빨강
    • 녹색
      • 파랑
  • 빨강
    • 녹색
      • 파랑
  • 빨강
    • 녹색
      • 파랑

혼합해서 사용하는 것도 가능하다(내가 선호하는 방식)

* 1단계
    - 2단계
    	+ 3단계
            = 4단계
  • 1단계
    • 2단계
      • 3단계 = 4단계

2.4. 코드<pre><code></code></pre>

4개의 공백 또는 하나의 탭으로 들여쓰기를 만나면 변환되기 시작하여 들여쓰지 않은 행을 만날때까지 변환이 계속된다.

한줄 띄어쓰면 인식이 제대로 안되는 문제가 발생하곤 합니다.

This is a normal paragraph:

    This is a code block.
end code block.
``` This is a normal paragraph: This is a code block. end code block. ```

실제로 적용해보면, This is a normal paragraph:

This is a code block.

end code block.

2.5. 수평선<hr/>

아래 줄은 모두 수평선을 만든다. 마크다운 문서를 미리보기로 출력할 때 페이지 나누기 용도로 많이 사용한다.

* * *

***

*****

- - -

---------------------------------------





2.6. 링크

  • 참조링크
[link keyword][id]
[id]: URL "Optional Title here"

Link: [Google][googlelink]
[googlelink]: https://google.com "Go google"

Link: [Google][googlelink] [googlelink]: https://google.com "Go google"

  • 인라인 링크
syntax: [Title](link)

Link: Google

  • 자동연결
<http://example.com/>
<address@example.com>

http://example.com/ address@example.com

2.7. 강조

*single asterisks*
_single underscores_
**double asterisks**
__double underscores__
++underline++
~~cancelline~~

single asterisks single underscores double asterisks double underscores ++underline++ cancelline

2.8. 이미지

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

석촌호수 러버덕 석촌호수 러버덕

사이즈 조절 기능은 없기 때문에 <img width="" height=""></img>를 이용한다.


3. 마크다운 사용기

3.1. 이지윅(WSYWIG) 에디터

우리가 흔하게 접하는 웹에서 사용되는 에디터(네이버, 다음, 구글 등)이 대부분 이지웍 에디터에 속하며 기본적으로 HTML을 이용하여 스타일을 적용하여 문장을 꾸미는 형태를 취하게 된다. 그래서 하루패드와 같은 마크다운 에디터의 View 영역의 내용을 복사하여 붙여넣기를 하면 대체적으로 View영역에서 보이는 그대로 복사되는 편이다. 다만, 붙여넣기 이후에 문장들을 수정하려고 할 떄 문제가 되는데, 이는 스타일이 포함된 태그가 수정과정에서 변형되면서 전체적인 영향을 끼치는 탓이다. 티스토리 블로그에서는 쉽지 않고... 워드프레스의 경우에는 마크다운으로 작성된 포스트를 HTML로 변환해주는 기능을 활용하는 것이 좋다. 결론은, 복사해서 붙여넣기하면 가급적이면 본문은 수정하지 않는 것이 좋다.

3.2. 깃헙Github, 비트버킷Bitbucket과 요비Yobi 등

최근 유행하는 협업개발플랫폼의 경우에는 마크다운을 변환하는 컨버터 기능을 기본탑재하고 있기 때문에 마크다운 문법으로 작성한 텍스트를 그대로 복사해서 붙여넣거나 업로드하는 것만으로 마크다운의 적용이 가능하다.

3.3. MS워드 적용

View 영역의 항목을 그대로 붙여넣거나 HTML 내보내기 등으로 생성한 파일을 불러오는 형태로 사용가능하다. 적용한 헤더를 워드가 읽어드리면서 목차에 적용하기 때문에 이를 활용하면 목차까지도 손쉽게 적용이 가능해진다.


4. 정리

마크다운은 기본문법만 알고 있다면 일반 텍스트편집기에서도 손쉽게 작성이 가능한 마크업언어다. 현재 다양한 도구와 플랫폼에서 지원하고 있기 때문에 더욱 손쉽게 스타일적용된 문서를 작성할 수 있기 때문에 점점 널리 사용되고 있다. 마크다운을 이해하고 사용하면서 쉽고 빠르게 스타일문서를 작성해보세요. 저는 Dropbox 프로를 구매해서 집-랩탑-스마트폰이 각각 연동을 시켜서 사용하고 있습니다. 드랍박스에 저장된 마크다운 문서는 Dropbox 웹서비스 상에서 제공하기 때문에 웹상에서 바로 열람할 수도 있어 링크를 걸어서 다른 사람과 공유하는 형식으로 사용하고 있다.

○ 참고문서

@DoAJJY

This comment has been minimized.

Copy link

DoAJJY commented Jan 11, 2017

Github 초보자에게 매우 유용한 자료인 것 같습니다!
많은 도움 받았습니다 :-)
감사합니다!

@momoci99

This comment has been minimized.

Copy link

momoci99 commented Feb 9, 2017

정말 큰 도움되는 글이었습니다!

@sun6880

This comment has been minimized.

Copy link

sun6880 commented Feb 10, 2017

Markdown 문법을 정말 잘 정리되어있어
많은 도움 되었습니다.
감사합니다. :)

@enujo

This comment has been minimized.

Copy link

enujo commented Mar 3, 2017

유용한 사용법 감사합니다^^!

@hjleesm

This comment has been minimized.

Copy link

hjleesm commented Mar 23, 2017

도움이 많이 되었습니다. 감사합니다.

@KiWooyoung

This comment has been minimized.

Copy link

KiWooyoung commented Apr 1, 2017

감사합니다!! 좋은글이에요!!

@Seolhun

This comment has been minimized.

Copy link

Seolhun commented Apr 20, 2017

좋은 글 감사드립니다.!~

@pipy201

This comment has been minimized.

Copy link

pipy201 commented Apr 20, 2017

좋은 글 감사합니다

@whitecloudy

This comment has been minimized.

Copy link

whitecloudy commented May 20, 2017

좋은글 감사합니다

@remk0202

This comment has been minimized.

Copy link

remk0202 commented Jun 21, 2017

좋은 글 감사합니다

@saranf

This comment has been minimized.

Copy link

saranf commented Jun 27, 2017

좋은글 감사합니다

@wlsgussla123

This comment has been minimized.

Copy link

wlsgussla123 commented Jul 8, 2017

좋은 글 감사드립니다.

@ghost

This comment has been minimized.

Copy link

ghost commented Jul 11, 2017

정말 좋은글이네요. 감사합니다.

@minh364

This comment has been minimized.

Copy link

minh364 commented Jul 18, 2017

인라인링크가 안되는 이유가 뭘까요..
text 이렇게썼는데 안됩니다.
이 때 URL은 깃허브 저장소 내 다른가지의 주소입니다.

@rpf5573

This comment has been minimized.

Copy link

rpf5573 commented Jul 21, 2017

좋은글 감사합니다

@epi4

This comment has been minimized.

Copy link

epi4 commented Aug 3, 2017

좋은글 감사합니다!

@jinios

This comment has been minimized.

Copy link

jinios commented Aug 11, 2017

참고 잘했습니다~!감사합니다

@LemonDouble

This comment has been minimized.

Copy link

LemonDouble commented Aug 18, 2017

좋은 글 감사합니다!

@yangga

This comment has been minimized.

Copy link

yangga commented Aug 30, 2017

감사합니다!!!

@sskim91

This comment has been minimized.

Copy link

sskim91 commented Sep 4, 2017

감사합니다

@rien1026

This comment has been minimized.

Copy link

rien1026 commented Sep 6, 2017

감사합니다.

@ljh0326

This comment has been minimized.

Copy link

ljh0326 commented Sep 12, 2017

좋은글 감사합니다.

@SquarableCat

This comment has been minimized.

Copy link

SquarableCat commented Sep 21, 2017

좋은 글 감사합니다.

@zerobugplz

This comment has been minimized.

Copy link

zerobugplz commented Sep 28, 2017

좋은 글 감사합니다!

@Danpatpang

This comment has been minimized.

Copy link

Danpatpang commented Oct 2, 2017

감사합니다

@Gumball12

This comment has been minimized.

Copy link

Gumball12 commented Oct 8, 2017

감사합니다. 도움이 많이 되었습니다.

@highwindLeos

This comment has been minimized.

Copy link

highwindLeos commented Nov 17, 2017

감사합니다. 찾고 있던 글입니다. ^^

@kofelo123

This comment has been minimized.

Copy link

kofelo123 commented Nov 27, 2017

감사합니다. 한번씩 보러 오게되네요

@gilgarad

This comment has been minimized.

Copy link

gilgarad commented Dec 1, 2017

minh364 // 내부 이미지 사용하시려면 직접 해당 파일 클릭하신 다음 이미지에 마우스 놓고 우클릭 -> 이미지 주소 복사 하신 뒤에 복사된 주소를 사용해야 합니다. 저도 한참 헤매다가 이미지 사용하게 되었네요.
혹여 다른 분들에게도 도움이 되길 바라며 답글 남깁니다.

@ChangYeop-Yang

This comment has been minimized.

Copy link

ChangYeop-Yang commented Dec 4, 2017

좋은 정보 감사합니다.!

@wnsgml972

This comment has been minimized.

Copy link

wnsgml972 commented Dec 6, 2017

감사합니다!

@JSPlike

This comment has been minimized.

Copy link

JSPlike commented Dec 7, 2017

감사합니다 헌데 이미지 사이즈 설명이 모호합니다. 예시를 들어주세요

@pennya

This comment has been minimized.

Copy link

pennya commented Jan 2, 2018

감사합니다

@baeharam

This comment has been minimized.

Copy link

baeharam commented Jan 23, 2018

좋은 글 감사합니다.

@disappoint00

This comment has been minimized.

Copy link

disappoint00 commented Jan 31, 2018

좋은정보 얻어갑니다. 감사합니다.

@Seia-Soto

This comment has been minimized.

Copy link

Seia-Soto commented Jan 31, 2018

감사합니당 ^^

@lowelllll

This comment has been minimized.

Copy link

lowelllll commented Feb 7, 2018

감사합니다.

@sword33

This comment has been minimized.

Copy link

sword33 commented Feb 9, 2018

감사합니다~ 회사 내부 교육자료로 써도 될까요~~?

@simbyungki

This comment has been minimized.

Copy link

simbyungki commented Feb 12, 2018

감사합니다~

@bactoria

This comment has been minimized.

Copy link

bactoria commented Feb 14, 2018

이제 깃헙 입문했는데
좋은자료 감사합니다

@leejk526

This comment has been minimized.

Copy link

leejk526 commented Mar 17, 2018

좋은 자료 감사합니다~~~

@Unperknown

This comment has been minimized.

Copy link

Unperknown commented Apr 6, 2018

처음으로 깃헙 접해보고 나서 md 파일을 어떻게 작성해야 하는지 몰라서 막막했는데
이렇게 설명을 친절히 잘 해주셔서 이해가 되네요!
좋은 자료 올려주서셔 감사합니다!

@gimys

This comment has been minimized.

Copy link

gimys commented Apr 9, 2018

깃헙 마크다운 검색하다 알게됐습니다.
좋은 자료 감사합니다.

@GyuhyeokYi

This comment has been minimized.

Copy link

GyuhyeokYi commented Apr 10, 2018

좋은 글 감사합니다.

@WilliamJeong2

This comment has been minimized.

Copy link

WilliamJeong2 commented Apr 19, 2018

도움이 많이 됐습니다.

@shinjihyun

This comment has been minimized.

Copy link

shinjihyun commented Apr 22, 2018

좋은 글 감사합니다. 정말 많은 도움이 되었어요.

@JaytenJeon

This comment has been minimized.

Copy link

JaytenJeon commented Apr 25, 2018

감사합니다. 마크다운 처음 공부하는데 도움이 되었습니다.

@kwakchulyong

This comment has been minimized.

Copy link

kwakchulyong commented Apr 26, 2018

좋은 정보 감사합니다~!

@IgnisSolus

This comment has been minimized.

Copy link

IgnisSolus commented May 8, 2018

감사합니다~

@dongdong97

This comment has been minimized.

Copy link

dongdong97 commented May 20, 2018

감사합니다 도움이 많이 되었습니다.

@yoseplee

This comment has been minimized.

Copy link

yoseplee commented May 22, 2018

감사합니다. 마크다운을 필수로 익혀놔야겠네요

@jaeyeon-park

This comment has been minimized.

Copy link

jaeyeon-park commented May 22, 2018

감사합니다!

@gonghojin

This comment has been minimized.

Copy link

gonghojin commented May 23, 2018

잘 읽고 갑니다~ 감사합니다!!

@rpf5573

This comment has been minimized.

Copy link

rpf5573 commented May 25, 2018

감사합니다

@l0o02

This comment has been minimized.

Copy link

l0o02 commented Jun 12, 2018

감사합니다

@Hooning

This comment has been minimized.

Copy link

Hooning commented Jun 30, 2018

유용한 정보 감사드립니다.

@lejewk

This comment has been minimized.

Copy link

lejewk commented Jul 1, 2018

감사합니다. 정리 잘되어 있네요!

@JaeGeunBang

This comment has been minimized.

Copy link

JaeGeunBang commented Jul 11, 2018

좋은글 감사합니다 :)

@loverduck

This comment has been minimized.

Copy link

loverduck commented Aug 9, 2018

좋은 정보 감사합니다!

@b3nn9

This comment has been minimized.

Copy link

b3nn9 commented Aug 9, 2018

감사합니다.
혹시 링크걸 때, 링크에 괄호가 있을 떄는 어떻게 해야할까요?
예를 들어 ../교안(2차).pdf 와 같이

@ppdha82

This comment has been minimized.

Copy link

ppdha82 commented Aug 10, 2018

좋은 내용이네요. github 에서 기본으로 제공하는 글인 줄 알았어요.
잘 읽고 갑니다.

@nsbb

This comment has been minimized.

Copy link

nsbb commented Aug 14, 2018

감사합니다. 많은 도움이 되었습니다!

@dongb94

This comment has been minimized.

Copy link

dongb94 commented Aug 28, 2018

##감사합니다

@jesamkim

This comment has been minimized.

Copy link

jesamkim commented Sep 7, 2018

감사합니다. 많은 도움이 되었습니다.

@esevan

This comment has been minimized.

Copy link

esevan commented Sep 7, 2018

@b3nn9
[교안(2차)](../교안(2차).pdf) 동일하게 링크하면 될 것 같습니다~ 교안(2차)

좋은 내용 감사합니다. 헷갈릴 때마다 너무 유용합니다.

@rjsdn31536

This comment has been minimized.

Copy link

rjsdn31536 commented Sep 12, 2018

큰 도움 되었습니다. 감사합니다

@BEOKS

This comment has been minimized.

Copy link

BEOKS commented Oct 2, 2018

감사합니다~

@eunji12

This comment has been minimized.

Copy link

eunji12 commented Oct 5, 2018

많은 도움 받았습니다. 감사합니다 :)

@han-um

This comment has been minimized.

Copy link

han-um commented Oct 11, 2018

워드와도 연동하여 사용할 수 있다는 정보가 많은 도움이 되었습니다. 감사합니다.

@garamgaram5

This comment has been minimized.

Copy link

garamgaram5 commented Nov 1, 2018

감사합니다 !^^

@AllCry

This comment has been minimized.

Copy link

AllCry commented Nov 28, 2018

잘 읽었습니다! 쉽게 사용할 수 있겠네요~ 감사합니다!

@xper20

This comment has been minimized.

Copy link

xper20 commented Nov 30, 2018

좋은 정보 감사해요^^

@jykim3097

This comment has been minimized.

Copy link

jykim3097 commented Dec 11, 2018

겉핥기로만 알아서 항상 헷갈렷었는데, 많이 알고 갑니다. 감사합니다!

@choidslab

This comment has been minimized.

Copy link

choidslab commented Dec 11, 2018

beautiful-jekyll 테마 사용 중인데 블로그 보고 많이 배워갑니다. 정보 공유해주셔서 감사합니다. 👍

@Macfa

This comment has been minimized.

Copy link

Macfa commented Dec 12, 2018

정보 감사합니다 ~

@JaeYeol-Ha

This comment has been minimized.

Copy link

JaeYeol-Ha commented Dec 19, 2018

감사합니다!

@abcinje

This comment has been minimized.

Copy link

abcinje commented Dec 23, 2018

감사합니다.

@KimChungHo

This comment has been minimized.

Copy link

KimChungHo commented Dec 26, 2018

하단에 있는 이지윅이라는 건 위지윅을 말씀하시는 건가요? 그렇다면 WYSIWYG(What You See Is What You Get)입니다.

@userYoul

This comment has been minimized.

Copy link

userYoul commented Jan 8, 2019

감사합니다

@chanmi-lee

This comment has been minimized.

Copy link

chanmi-lee commented Jan 30, 2019

좋은 글 감사합니다 👍

@belitalee

This comment has been minimized.

Copy link

belitalee commented Feb 8, 2019

좋은 글 감사드려요!

@sohnman

This comment has been minimized.

Copy link

sohnman commented Feb 21, 2019

좋을 글 고맙습니다.

@Yoodahun

This comment has been minimized.

Copy link

Yoodahun commented Mar 3, 2019

친절한 설명 감사합니다 👍

@JustinChoi21

This comment has been minimized.

Copy link

JustinChoi21 commented Mar 7, 2019

설명이 잘 되어 있는 글이네요.😄

@JangHyeonJun

This comment has been minimized.

Copy link

JangHyeonJun commented Mar 9, 2019

도움이 됐어요 감사합니다 ^^

@bbaejisoo

This comment has been minimized.

Copy link

bbaejisoo commented Mar 13, 2019

친절한 설명 감사합니다.

@carmineomiga

This comment has been minimized.

Copy link

carmineomiga commented Mar 13, 2019

기초 문법을 이해하는 데 도움되었습니다. 감사합니다.

@Jaeyeonling

This comment has been minimized.

Copy link

Jaeyeonling commented Mar 15, 2019

좋은 글 감사합니다!

@Siromom

This comment has been minimized.

Copy link

Siromom commented Mar 21, 2019

좋은 글 감사합니다! 잘 보고 갑니다!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.