안녕하세요, PSJ입니다.
오늘은 개발 및 블로그(Tistory) 포스팅시 활용할 수 있는 마크다운(Markdown) 문법에 대해 정리해 보려고 합니다.
마크다운은 개발시에는 문서작업 용도로 많이 사용되고 있죠, GitHub 이나 GitLab에 README 파일을 작성할때나 간단한 문서를 만들때 가볍게 사용하는 용도로 많이 사용되고 있습니다. 또한, Tistory 블로그의 경우 마크다운을 통한 포스팅이 기능을 가지고 있어서 요즘 일부 포스팅에는 마크다운 에디터를 통해 작성을 해보려고 시도하고 있습니다.
마크다운이란?
마크다운(markdown)은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다.
사용법
1. 마크다운 에디터
마크다운 에디터는 메모장이나 아무 에디터나 사용해도 무방합니다. 다만, 미리보기 기능이 존재하는지 여부에따라 사용성에 큰 차이가 나기때문에, 미리보기 기능이 있는 에디터를 사용하시는 걸 추천드립니다. 또한, 웹으로도 미리보기가 가능한 서비스(Make a README)가 제공되니 간단히 활용하기에는 좋습니다. 저는 Front 개발에 사용하는 VSCode 에 기본으로 내장되어 있는 마크다운 편집/미리보기 기능을 이용하고 있습니다. 요즘 대부분의 IDE 에서는 기본 or 확장기능으로 미리보기를 제공하니 사용하시는 IDE에 미리보기 방법을 확인하셔서 사용하시면 됩니다.
2. 문법 (Syntex)
제목 - title
#문자를 1-6개 붙여서 제목을 표현할 수 있습니다.<H1>~<H6>까지를 지원합니다. 또한, HR(Horizontal Rule, 수평선 구분자)과 결합해서 사용할수도 있습니다.# 제목1 - H1 ## 제목2 - H2 ### 제목3 - H3 #### 제목4 - H4 ##### 제목5 - H5 ###### 제목6 - H6 // HR(Horizontal Rule, 수평선) 구분자와 결합해서 사용 제목 텍스트 1 ---제목1 - H1
제목2 - H2
제목3 - H3
제목4 - H4
제목5 - H5
제목6 - H6
제목 텍스트 1
인용문 - BlockQuote
이메일에서 사용하는
>블럭인용문자를 사용합니다.> 첫번째 블록 >> 두번째 블록 >>> 세번째 블록첫번째 블록
두번째 블록
세번째 블록
블록 안에 다른 마크다운 요소를 넣을 수 있습니다.
> 첫번째 블록 > 1. 두번째 블록 > + 세번째 블록첫번째 블록
- 두번째 블록
- 세번째 블록
- 두번째 블록
목록 - List
순서있는 목록
순서있는 목록은 숫자와 마침표를 사용해 표시합니다.// 1. 2. 3. 이렇게 번호를 적어도 되지만, 순서대로 번호를 매겨서 표시됩니다. 1. 첫번째 아이템 1. 하위 아이템 4. 하위 아이템 1. 두번째 아이템 1. 세번째 아이템- 첫번째 아이템
- 하위 아이템
- 하위 아이템
- 두번째 아이템
- 세번째 아이템
- 첫번째 아이템
순서없는 목록
순서가 없는 목록은 기호(*, -, +)를 사용해 표시합니다. 각 기호를 혼합해서 사용해도 무방합니다. (표시하는 방식은 Viewer 마다 차이가 있습니다)+ 첫번째 아이템 - 1-1 아이템 - 1-2 아이템 - 1-3 아이템 + 두번째 아이템 * 2-1 아이템 * 2-2 아이템 + 세번째 아이템 + 3-1 아이템 + 3-1-1 아이템 + 3-2 아이템- 첫번째 아이템
- 1-1 아이템
- 1-2 아이템
- 1-3 아이템
- 두번째 아이템
- 2-1 아이템
- 2-2 아이템
- 세번째 아이템
- 3-1 아이템
- 3-1-1 아이템
- 3-2 아이템
- 3-1 아이템
- 첫번째 아이템
링크 - Link
본문에 특정 사이트를 링크하거나 email 주소등을 링크할때 사용합니다.
/* 일반적인 링크 사용 [Title](link) */ [Google](https://www.google.com, "Go Google") [Email](PSJ@gmail.com, "Send Message") /* 자동 링크 사용 <link Address> */ <https://www.google.com> <PSJ@gmail.com> /* 참조 링크 사용 [link keyword][id] [id]: URL "Optional Title here" */ Link: [Google][googleLink] [googleLink]: https://www.google.com "Go google"https://www.google.com
PSJ@gmail.com[Go Google][googleLink]
[Send Email][emailAddress]
[googleLink]: https://www.google.com "Go google"
[emailAddress]: PSJ@gmail.com "Send Message"강조 - Emphasis
본문에 특정 문자에 서식(볼드, 이텔릭, 밑줄, 취소선)을 적용해 강조할 수 있습니다.
// '*','_','~'기호를 이용하며, 서로 중첩해 사용할 수 있다. *single asterisks 이텔릭체* _single underscores 이텔릭체_ **double asterisks 볼드체** __double underscores 볼드체__ ***tripple underscores 볼드+이텔릭체*** ___tripple underscores 볼드+이텔릭체___ ~~cancelline 취소선~~ **~~bold cancelline 볼드+취소선~~** <u>underline - 밑줄</u>single asterisks - 이텔릭체
single underscores - 이텔릭체
double asterisks - 볼드체
double underscores - 볼드체
tripple underscores - 볼드+이텔릭체
tripple underscores - 볼드+이텔릭체
cancelline - 취소선
bold cancelline - 볼드+취소선
underline - 밑줄코드 - Code
인라인(inline) 코드 강조
` (Grave)문자를 입력해서 본문의 내용중 코드강조 처리할 수 있습니다.`<img>` 테그를 사용해서 본문에 이미지를 삽입할 수 있습니다.<img>테그를 사용해서 본문에 이미지를 삽입할 수 있습니다.블록(block) 코드 강조
` (Grave)문자를 3번 연속 입력해서 코드블럭을 삽입할 수 있습니다.```html <a href="https://www.psjco.com/" target="_blank">Play The Keyboard</a> ```// html 코드 강조 ```css .list > li { position: absolute; top: 40px; } ```// css 코드 강조 ```java public class BootSpringBootApplication { public static void main(String[] args) { System.out.println("Hello, world"); } } ```// java 코드 강조<a href="https://www.psjco.com/" target="_blank">Play The Keyboard</a>.list > li { position: absolute; top: 40px; }public class BootSpringBootApplication { public static void main(String[] args) { System.out.println("Hello, world"); } }언어별 문법강조는 코드는 highlightjs 참조하시면 됩니다.
(지원하지 않는 언어코드도 존재할 수 있음)
이미지 - Image
본문에 이미지를 삽입할 수 있습니다.
로 입력하고, 사이즈 및 정렬을 조정하기 위해서는 HTML<img>Tag를 이용하면 됩니다. Link 와 문법이 비슷하죠, 앞에 !만 추가되었습니다. 링크와 비슷하게 참조를 통해서도 사용할 수 있습니다.  ![대체텍스트]](data:image/svg+xml;base64,이미지데이터) // 참조링크를 통한 이미지 사용 ![대체텍스트][ModelY] [ModelY](https://imageurl "모델Y 이미지") // 이미지에 링크 걸기 [](https://linkURL) // 이미지 tag 사용, 크기 및 정렬 지정가능 <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcqaWq0%2FbtqTqITdGzT%2FgcCvT4ZcQ5LNJ6wxvkxNkk%2Fimg.jpg" width="400px"> <p align="center"><img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcqaWq0%2FbtqTqITdGzT%2FgcCvT4ZcQ5LNJ6wxvkxNkk%2Fimg.jpg" width="400px"></p>
줄바꿈 - Line Breaks
마크다운 문법에서는 엔터를 입력해도 개행이 되지 않습니다. (엔터키 2번 입력은 단락을 나누는 의미)
' '공백을 2번 입력하고 엔터로 줄바꿈하면 개행처리가 됩니다.안녕하세요. 저는 PSJ입니다, 만나서 반갑습니다. 안녕하세요. //' ' 공백 입력 저는 PSJ입니다, 만나서 반갑습니다. // <br/> 테그를 사용도 가능함 안녕하세요.<br/> 저는 PSJ입니다, 만나서 반갑습니다.안녕하세요.
저는 PSJ입니다, 만나서 반갑습니다.안녕하세요.
저는 PSJ입니다, 만나서 반갑습니다.안녕하세요.
저는 PSJ입니다, 만나서 반갑습니다.수평선 - Horizontal Rule
본문에 수평선을 넣을수 있습니다. '-','*','' 문자중 하나를 3번 연속 입력하여 추가하면 됩니다.
_('---' Hyphens 의 경우 제목 문법과 중복되므로 윗줄에 텍스트와 함께 사용할 경우 윗줄 텍스트를 제목으로 만드는 역활로 사용되므로 주의)구분선1 - - - 구분선1-1 --- 구분선1-2 --------------------------------------- 구분선2 *** 구분선2-1 * * * 구분선2-2 ***** 구분선3 ___구분선1
구분선1-1
구분선2
구분선2-1
구분선2-2
구분선3
표 - Table
본문에 테이블을 넣을 수 있습니다.
헤더 셀을 구분할 때 3개 이상의 -(hyphen/dash) 기호가 필요합니다. 헤더 셀을 구분하면서 :(Colons) 기호로 셀(열/칸) 안에 내용을 정렬할 수 있습니다. 가장 좌측과 가장 우측에 있는 |(vertical bar) 기호는 생략 가능합니다.| AAA(기본왼쪽정렬) | BBB(가운데정렬) | CCC(오른쪽정렬) | |---|:---:|---:| | `111` | 가나다라 | abc | | `222` | 가나다라마바사아 | abcdefgh | | `333` | 가나다라마바사아자차카타파하 | abcdef | | `444` | 가나다라마바사아자차 | abc |AAA BBB CCC 111가나다라 abc 222가나다라마바사아 abcdefgh 333가나다라마바사아자차카타파하 abcdef 444가나다라마바사아자차 abc
장/단점
1. 장점
- 문법이 쉽고 직관적이다.
- 지원 가능한 플랫폼과 프로그램이 다양하다.
- 다양한 형태로 변환이 가능하다.
- Text 형식으로 형상관리를 통한 변경이력관리가 용이하다.
- 별도 도구없이 편집가능 하고 텍스트파일로 용량이 적다. (관리가 용이함)
2. 단점
- 아직 표준이 없다.
- 그래서 도구/Viewer에 따라 결과물이 상이할 수 있다.
이상입니다.
공감과 댓글은 큰 힘이됩니다.
댓글