MarkDown

October 18, 2022

마크다운 Mark Down

마크다운에 대하여 알아보고 사용법을 기록하자

1. 마크다운에 관하여

1.1. 마크다운이란?

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

1.2. 마크다운의 장-단점

1.2.1. 장점

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

1.2.2. 단점

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

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

2.1. 헤더Headers

큰제목: 문서 제목

[입력 예시]

큰제목 : 아래에 '=' 넣기
========================= <!-- 여러게 넣어도 된다 -->

[출력 예시] 큰제목 : 아래에 ‘=’ 넣기 ====================

작은제목: 문서 부제목

[입력 예시]

작은제목 : 아래에 '-' 넣기
-

[출력 예시]

작은제목 : 아래에 ‘-‘ 넣기

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

[입력 예시]

# 글머리1
## 글머리2
### 글머리3
#### 글머리4
##### 글머리5
###### 글머리6
####### 글머리7(지원하지 않음)

[출력 예시]

글머리1

글머리2

글머리3

글머리4

글머리5

글머리6

####### 글머리7(지원하지 않음)

2.2. 인용블록 BlockQuote

인용블록(Block Quote)은 > 를 이용하여 만든다.

> 인용블록1 입니다.
>> 인용블록2 입니다.
>>> 인용블록3 입니다.

인용블록1 입니다.

인용블록2 입니다.

인용블록3 입니다.

인용블록 안에서 다른 마크다운 요소를 포함할 수 있다.

글머리3
리스트
  <div>hi</div>

2.3. 목록

● 순서있는 목록(번호)

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

첫번째
두번째
세번째

첫번째
두번째
세번째

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

첫번째
세번째
두번째

첫번째
세번째
두번째

● 순서없는 목록(글머리 기호: `*`, `+`, `-` 지원)

* 빨강
  * 녹색
    * 파랑

+ 빨강
  + 녹색
    + 파랑

- 빨강
  - 녹색
    - 파랑

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

혼합해서 사용하는 것도 가능하다

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

1단계
- 2단계
  - 3단계
    - 4단계

2.4. 코드

2.4.1. 들여쓰기로 코드입력

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

들여쓰기가 적용되지 않은 문장1 입니다.
들여쓰기가 적용되지 않은 문장2 입니다.

    들여쓰기가 적용된 문장1 입니다.
    들여쓰기가 적용된 문장2 입니다.
    
들여쓰기가 적용되지 않은 문장3 입니다.
들여쓰기가 적용되지 않은 문장4 입니다.

실제로 적용해보면,

적용예:

들여쓰기가 적용되지 않은 문장1 입니다. 들여쓰기가 적용되지 않은 문장2 입니다.

들여쓰기가 적용된 문장1 입니다.
들여쓰기가 적용된 문장2 입니다.

들여쓰기가 적용되지 않은 문장3 입니다. 들여쓰기가 적용되지 않은 문장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. *****

2.4.1. 코드블럭

코드블럭은 다음과 같이 2가지 방식을 사용할 수 있습니다:

<pre><code>{code}</code></pre> 이용방식

<pre>
<code>
public class BootSpringBootApplication {
  public static void main(String[] args) {
    System.out.println("Hello, Honeymon");
  }

}
</code>
</pre>


public class BootSpringBootApplication {
  public static void main(String[] args) {
    System.out.println("Hello, Honeymon");
  }
}

코드블럭코드(“```”) 을 이용하는 방법
다양한 코드블럭 참조

Language	Aliases	Package
1C	1c
4D	4d	highlightjs-4d
ABAP	sap-abap, abap	highlight-sap-abap
ABNF	abnf
Access logs	accesslog
Ada	ada
Apex	apex	highlightjs-apex
Arduino (C++ w/Arduino libs)	arduino, ino
ARM assembler	armasm, arm
AVR assembler	avrasm
ActionScript	actionscript, as
Alan IF	alan, i	highlightjs-alan
Alan	ln	highlightjs-alan
AngelScript	angelscript, asc
Apache	apache, apacheconf
AppleScript	applescript, osascript
Arcade	arcade
AsciiDoc	asciidoc, adoc
AspectJ	aspectj
AutoHotkey	autohotkey
AutoIt	autoit
Awk	awk, mawk, nawk, gawk
Bash	bash, sh, zsh
Basic	basic
BBCode	bbcode	highlightjs-bbcode
Blade (Laravel)	blade	highlightjs-blade
BNF	bnf
BQN	bqn	highlightjs-bqn
Brainfuck	brainfuck, bf
C#	csharp, cs
C	c, h
C++	cpp, hpp, cc, hh, c++, h++, cxx, hxx
C/AL	cal
C3	c3	highlightjs-c3
Cache Object Script	cos, cls
Candid	candid, did	highlightjs-motoko
CMake	cmake, cmake.in
COBOL	cobol, standard-cobol	highlightjs-cobol
Coq	coq
CSP	csp
CSS	css
Cap’n Proto	capnproto, capnp
Chaos	chaos, kaos	highlightjs-chaos
Chapel	chapel, chpl	highlightjs-chapel
Cisco CLI	cisco	highlightjs-cisco-cli
Clojure	clojure, clj
CoffeeScript	coffeescript, coffee, cson, iced
CpcdosC+	cpc	highlightjs-cpcdos
Crmsh	crmsh, crm, pcmk
Crystal	crystal, cr
cURL	curl	highlightjs-curl
Cypher (Neo4j)	cypher	highlightjs-cypher
D	d
Dafny	dafny	highlightjs-dafny
Dart	dart
Delphi	dpr, dfm, pas, pascal
Diff	diff, patch
Django	django, jinja
DNS Zone file	dns, zone, bind
Dockerfile	dockerfile, docker
DOS	dos, bat, cmd
dsconfig	dsconfig
DTS (Device Tree)	dts
Dust	dust, dst
Dylan	dylan	highlightjs-dylan
EBNF	ebnf
Elixir	elixir
Elm	elm
Erlang	erlang, erl
Excel	excel, xls, xlsx
Extempore	extempore, xtlang, xtm	highlightjs-xtlang
F#	fsharp, fs
FIX	fix
Flix	flix	highlightjs-flix
Fortran	fortran, f90, f95
FunC	func	highlightjs-func
G-Code	gcode, nc
Gams	gams, gms
GAUSS	gauss, gss
GDScript	godot, gdscript	highlightjs-gdscript
Gherkin	gherkin
Glimmer and EmberJS	hbs, glimmer, html.hbs, html.handlebars, htmlbars	highlightjs-glimmer
GN for Ninja	gn, gni	highlightjs-GN
Go	go, golang
Grammatical Framework	gf	highlightjs-gf
Golo	golo, gololang
Gradle	gradle
GraphQL	graphql
Groovy	groovy
GSQL	gsql	highlightjs-gsql
HTML, XML	xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist, svg
HTTP	http, https
Haml	haml
Handlebars	handlebars, hbs, html.hbs, html.handlebars
Haskell	haskell, hs
Haxe	haxe, hx
High-level shader language	hlsl	highlightjs-hlsl
Hy	hy, hylang
Ini, TOML	ini, toml
Inform7	inform7, i7
IRPF90	irpf90
JSON	json
Java	java, jsp
JavaScript	javascript, js, jsx
Jolie	jolie, iol, ol	highlightjs-jolie
Julia	julia, julia-repl
Kotlin	kotlin, kt
Lang		highlightjs-lang
LaTeX	tex
Leaf	leaf
Lean	lean	highlightjs-lean
Lasso	lasso, ls, lassoscript
Less	less
LDIF	ldif
Lisp	lisp
LiveCode Server	livecodeserver
LiveScript	livescript, ls
LookML	lookml	highlightjs-lookml
Lua	lua
Macaulay2	macaulay2	highlightjs-macaulay2
Makefile	makefile, mk, mak, make
Markdown	markdown, md, mkdown, mkd
Mathematica	mathematica, mma, wl
Matlab	matlab
Maxima	maxima
Maya Embedded Language	mel
Mercury	mercury
MIPS Assembler	mips, mipsasm
mIRC Scripting Language	mirc, mrc	highlightjs-mirc
Mizar	mizar
MKB	mkb	highlightjs-mkb
MLIR	mlir	highlightjs-mlir
Mojolicious	mojolicious
Monkey	monkey
Moonscript	moonscript, moon
Motoko	motoko, mo	highlightjs-motoko
N1QL	n1ql
NSIS	nsis
Never	never	highlightjs-never
Nginx	nginx, nginxconf
Nim	nim, nimrod
Nix	nix
Oak	oak	highlightjs-oak
Object Constraint Language	ocl	highlightjs-ocl
OCaml	ocaml, ml
Objective C	objectivec, mm, objc, obj-c, obj-c++, objective-c++
OpenGL Shading Language	glsl
OpenSCAD	openscad, scad
Oracle Rules Language	ruleslanguage
Oxygene	oxygene
PF	pf, pf.conf
PHP	php
Papyrus	papyrus, psc	highlightjs-papyrus
Parser3	parser3
Perl	perl, pl, pm
Pine Script	pine, pinescript	highlightjs-pine
Plaintext	plaintext, txt, text
Pony	pony
PostgreSQL & PL/pgSQL	pgsql, postgres, postgresql
PowerShell	powershell, ps, ps1
Processing	processing
Prolog	prolog
Properties	properties
Protocol Buffers	proto, protobuf
Puppet	puppet, pp
Python	python, py, gyp
Python profiler results	profile
Python REPL	python-repl, pycon
Q#	qsharp	highlightjs-qsharp
Q	k, kdb
QML	qml
R	r
Razor CSHTML	cshtml, razor, razor-cshtml	highlightjs-cshtml-razor
ReasonML	reasonml, re
Rebol & Red	redbol, rebol, red, red-system	highlightjs-redbol
RenderMan RIB	rib
RenderMan RSL	rsl
RiScript	risc, riscript	highlightjs-riscript
Roboconf	graph, instances
Robot Framework	robot, rf	highlightjs-robot
RPM spec files	rpm-specfile, rpm, spec, rpm-spec, specfile	highlightjs-rpm-specfile
Ruby	ruby, rb, gemspec, podspec, thor, irb
Rust	rust, rs
RVT Script	rvt, rvt-script	highlightjs-rvt-script
SAS	SAS, sas
SCSS	scss
SQL	sql
STEP Part 21	p21, step, stp
Scala	scala
Scheme	scheme
Scilab	scilab, sci
Shape Expressions	shexc	highlightjs-shexc
Shell	shell, console
Smali	smali
Smalltalk	smalltalk, st
SML	sml, ml
Solidity	solidity, sol	highlightjs-solidity
Splunk SPL	spl	highlightjs-spl
Stan	stan, stanfuncs
Stata	stata
Structured Text	iecst, scl, stl, structured-text	highlightjs-structured-text
Stylus	stylus, styl
SubUnit	subunit
Supercollider	supercollider, sc	highlightjs-supercollider
Svelte	svelte	highlightjs-svelte
Swift	swift
Tcl	tcl, tk
Terraform (HCL)	terraform, tf, hcl	highlightjs-terraform
Test Anything Protocol	tap
Thrift	thrift
Toit	toit	toit-highlight
TP	tp
Transact-SQL	tsql	highlightjs-tsql
Twig	twig, craftcms
TypeScript	typescript, ts, tsx, mts, cts
Unicorn Rails log	unicorn-rails-log	highlightjs-unicorn-rails-log
VB.Net	vbnet, vb
VBA	vba	highlightjs-vba
VBScript	vbscript, vbs
VHDL	vhdl
Vala	vala
Verilog	verilog, v
Vim Script	vim
X#	xsharp, xs, prg	highlightjs-xsharp
X++	axapta, x++
x86 Assembly	x86asm
XL	xl, tao
XQuery	xquery, xpath, xq
YAML	yml, yaml
ZenScript	zenscript, zs	highlightjs-zenscript
Zephir	zephir, zep


```
public class BootSpringBootApplication {
  public static void main(String[] args) {
    System.out.println("Hello, Honeymon");
  }
}
```

public class BootSpringBootApplication {
  public static void main(String[] args) {
    System.out.println("Hello, Honeymon");
  }
}

깃헙에서는 코드블럭코드(“```”) 시작점에 사용하는 언어를 선언하여 문법강조(Syntax highlighting)이 가능하다.


```java
public class BootSpringBootApplication {
  public static void main(String[] args) {
    System.out.println("Hello, Honeymon");
  }
}
```

public class BootSpringBootApplication {
  public static void main(String[] args) {
    System.out.println("Hello, Honeymon");
  }
}

2.5. 수평선 `<hr/>`

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

* * *

***

*****

- - -

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

적용예
- *

2.6. 링크

참조링크

[link keyword][id]

[id]: URL "Optional Title here"

// code
Link: [Google][googlelink]

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

Link: Google

외부링크

사용문법: [Title](link)
적용예: [Google](https://google.com, "google link")

Link: Google

자동연결 ``` 일반적인 URL 혹은 이메일주소인 경우 적절한 형식으로 링크를 형성한다.
외부링크: http://example.com/
이메일링크: address@example.com ```
외부링크: http://example.com/
이메일링크: address@example.com

2.7. 강조

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

single asterisks
single underscores
double asterisks
double underscores
~~cancelline~~

문장 중간에 사용할 경우에는 **띄어쓰기** 를 사용하는 것이 좋다.
문장 중간에 사용할 경우에는 띄어쓰기를 사용하는 것이 좋다.

2.8. 이미지

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

석촌호수 러버덕

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

예

<img src="/path/to/img.jpg" width="450px" height="300px" title="px(픽셀) 크기 설정" alt="RubberDuck"></img><br/>
<img src="/path/to/img.jpg" width="40%" height="30%" title="px(픽셀) 크기 설정" alt="RubberDuck"></img>

RubberDuck </img>
</img>

2.9. 줄바꿈

3칸 이상 띄어쓰기( )를 하면 줄이 바뀐다.

* 줄 바꿈을 하기 위해서는 문장 마지막에서 3칸이상을 띄어쓰기해야 한다. 
이렇게

* 줄 바꿈을 하기 위해서는 문장 마지막에서 3칸이상을 띄어쓰기해야 한다.___\\ 띄어쓰기
이렇게

줄 바꿈을 하기 위해서는 문장 마지막에서 3칸이상을 띄어쓰기해야 한다. 이렇게
줄 바꿈을 하기 위해서는 문장 마지막에서 3칸이상을 띄어쓰기해야 한다.
이렇게

3. 마크다운 사용기

3.1. 위지윅(WSYWIG) 에디터

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

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

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

3.3. MS워드 적용

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

4. 정리

마크다운은 기본문법만 알고있다면 일반 텍스트편집기에서도 손쉽게 작성이 가능한 마크업언어다. 현재 다양한 도구와 플랫폼에서 지원하고 있기 때문에 더욱 손쉽게 스타일적용된 문서를 작성할 수 있어 점점 널리 사용되고 있다.

마크다운을 이해하고 사용하면서 쉽고 빠르게 스타일문서를 작성해보세요.

저는 Dropbox 프로를 구매해서 집-랩탑-스마트폰이 각각 연동을 시켜서 사용하고 있습니다. 드랍박스에 저장된 마크다운 문서는 Dropbox 웹서비스 상에서 제공하기 때문에 웹상에서 바로 열람할 수도 있어 링크를 걸어서 다른 사람과 공유하는 형식으로 사용하고 있다.

링크 예: Markdown 설명

○ 참고문서

78 Tools for writing and previewing Markdown
John gruber 마크다운 번역
깃허브 취향의 마크다운 번역
허니몬의 마크다운 작성법
Notion.so(https://www.notion.so/product)
Atom(https://atom.io/)
Visual Studio Code(https://code.visualstudio.com/)
Notepad++(https://notepad-plus-plus.org/)

링크

Twitter Facebook LinkedIn URL 복사

이연준

마크다운 Mark Down

1. 마크다운에 관하여

1.1. 마크다운이란?

1.2. 마크다운의 장-단점

1.2.1. 장점

1.2.2. 단점

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

2.1. 헤더Headers

큰제목: 문서 제목

작은제목 : 아래에 ‘-‘ 넣기

글머리1

글머리2

글머리3

글머리4

글머리5

글머리6

2.2. 인용블록 BlockQuote

글머리3

2.3. 목록

● 순서있는 목록(번호)

● 순서없는 목록(글머리 기호: *, +, - 지원)

2.4. 코드

2.4.1. 들여쓰기로 코드입력

2.4.1. 코드블럭

2.5. 수평선 <hr/>

2.6. 링크

2.7. 강조

2.8. 이미지

2.9. 줄바꿈

3. 마크다운 사용기

3.1. 위지윅(WSYWIG) 에디터

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

3.3. MS워드 적용

4. 정리

○ 참고문서

링크

공유하기

댓글남기기

참고

RaspberryPi by C# .NET

Google API & C#

코노텍 온도제어기(DXFOX-XR10)

정보처리기사 시험준비[시험결과, 후기 포함]

● 순서없는 목록(글머리 기호: `*`, `+`, `-` 지원)

2.5. 수평선 `<hr/>`