본문 바로가기
코딩강좌/코딩상식

마크다운이란? (Markdown) - 문법, 설명, 활용 한 방에 해결하기

by 대디동동 2023. 10. 30.
728x90

현업에서 일하다 보면 Html, Javascript, Css는 능숙하게 다루지만 Markdown은 모르는 Junior 개발자를 많이 보았습니다.

마크다운 (Markdown) 언어는 간결함 때문에 타 회사 프로그램, API 등과 연결해서 많이 사용되고 있습니다.

대표적으로 Github의 README.md 파일과, Stack Overflow, 티스토리, Velog, 네이버 밴드, Jupyter Notebook, Discord 등 마크다운 언어를 사용하고 있고 옵시디언 앱에서 다시 주목을 받고 있으니 대디동동 코딩상식을 통해 Level Up 하길 바랍니다.

 

마크다운(Markdown) 알아보기

마크다운이란? (Markdown)

웹 사이트 사용되는 HTML은 글자 모양, 색상, 밑줄, 링크 등 엄청나게 많은 태그를 이용해서 만드는데,

온갖 태그로 이루어져 있기 때문에 문서에 포함된 순수한 정보를 가져오기 너무 어렵고 보기도 불편하여

간단하게 기록하고 편하게 읽을 수 있도록 하기 위해 존 그루버와 아론 스워츠에 의해 개발 되었습니다.

마크다운 장, 단점

장점

  • 간단하고 쉬운 문법을 사용
    • Html 태그가 아닌 텍스트로 작성하기 때문에 Learning Curve가 낮습니다.
    • 이로 인해 빠르게 문서를 작성할 수 있습니다.
  • 높은 가독성
    • 원본 파일을 직접 보아도 비교적 읽기 쉽습니다.
    • HTML 파일을 원본으로 볼 경우 태그로 인해서 내용을 확인하기 어렵습니다.
  • 다양한 플랫폼 및 기능 지원
    • 웹 브라우저, 블로그, 이메일, 카카오워크, 텍스트 편집기 등 다양한 플랫폼에서 지원하고 있습니다.
    • 특히, 모바일 기기와 높은 호환성을 보입니다.
    • 국내보다는 해외 커뮤티니가 활성화되어 있고, 플러그인, 이모지(Emoji), 확장문법, 변환 Tool 등 다양하게 지원됩니다.

단점

  • 제한적 기능
    • 단순함과 가독성을 추구하기 때문에 복잡한 표(테이블), 멀티미디어 콘텐츠 등을 표현하기 어렵습니다.
    • 행, 열 또는 그리드 형태 등 웹 페이지와 같은 레이아웃과 디자인을 구성하기 어렵습니다.
  • 일관성 
    • 정해진 문법은 있으나 표준이 없기 때문에, 다양한 플랫폼을 지원하지만 각 환경에서 조금씩 다릅니다.
    • 그로 인해, 다양한 변환 플러그인이 필요한 이유입니다.
  • 보안 이슈
    • 사용자 실수 또는 악의적 의도로 불완전 코드, 스크립트 삽입으로 인해 제대로 필터링이 되지 않으면 보안 이슈가 발생할 수 있습니다.

요약하면, 

마크다운 특성상 아무래도 HTML과 비교하는 경우가 많으며, 단순함에서 오는 장점이 단점으로 나타나기도 합니다.

간단하고 쉬운 문서 및 메시징에 적합한 반면 복잡하거나 멀티미디어에 익숙한 일반 사용자를 대상으로 한다면

큰 매력을 주기는 어렵지만, 다양한 확장성을 기대한다면 충분히 매력적인 언어입니다.

주요 기본 문법 및 사용법

Headings (머리말, 제목) 

Heading (머리말, 제목)을 만들려면 문장 앞에 "#" 붙여 주시면 됩니다.

"#"의 개수가 많아질수록 글자의 크기가 작아집니다.

"#" 사용 후 반드시 공백을 하나 추가하고 문장을 입력해야 합니다. (# 제목 =>  O, #제목 => X)

Markdown HTML 결과
# Heading Lv 1

또는

Heading level 1
===============		 <h1>Heading Lv 1</h1>

Heading level 1
## Heading Lv 2

또는

Heading level 2
---------------		 <h2>Heading Lv 2</h2>

Heading level 2
### Heading Lv 3 <h3>Heading Lv 3</h3>

Heading level 3
#### Heading Lv 4 <h4>Heading Lv 4</h4>

Heading level 4
##### Heading Lv 5 <h5>Heading Lv 5</h5>
Heading level 5
###### Heading Lv 6 <h6>Heading Lv 6</h6>
Heading level 6

 

Paragraphs (문단, 단락)

새로운 문단을 구분하려면 한 줄의 공백을 넣으면 됩니다.

문단 앞은 space (공백) 또는 tab을 넣지 않는 게 좋습니다.

Markdown HTML 결과
Markdown을 배워 봅시다

문단은 어떻게 구분하나요?		 <p>Markdown을 배워 봅시다</p>

<p>문단은 어떻게 구분하나요? </p>

Markdown을 배워 봅시다

문단은 어떻게 구분하나요?

 

Line Breaks (줄 바꿈)

단순히 엔터키를 이용해서 문장을 나눕니다.

HTML로 변환할 경우 강제로 라인을 분리하려면 space (공백) 2개 또는 \ (역슬래시)를 넣어 줍니다.

Markdown HTML 결과
첫 번째 줄을 적어본다.
두 번째 줄을 적어본다.		 <p> 첫 번째 줄을 적어본다. <br>
두 번째 줄을 적어본다. </p>		 첫 번째 줄을 적어본다.
두 번째 줄을 적어본다.

 

Font Emphasis - Italic, Bold, Bold & Italic (글자 강조 - 기울임, 굵게, 굵게 & 기울임)

글자 강조의 경우 * (asterisk), _ (underscore)의 개수를 이용해서 구분합니다.

단어와 단어 사이에는 *, _ 중 아무거나 사용해도 되지만, 특정 글자만 강조할 경우에는 * 를 사용합니다.

(Love*is*bold, Love**is**bold, Love***is***bold)

  • Italic : * (asterisk) 또는 _ (underscore) 1개 사용
  • Bold : ** (asterisk) 또는 __ (underscore) 2개 사용
  • Italic & Bold : *** (asterisk) 또는 ___ (underscore) 3개 사용
구분 Markdown HTML 결과
Italic 글자의 *기울기* 표현
글자의 _기울기_ 표현		 글자의 <em>기울기</em>  표현 글자의 기울기  표현
Bold 글자의 **굵기** 표현
글자의 __굵기__ 표현		 글자의 <b>굵기</b>  표현 글자의 굵기  표현
Bold & Italic 글자의 ***굵기와 기울기*** 표현
글자의 ___굵기와  기울기___ 표현		 글자의 <em><b> 굵기와 기울기</em></b>  표현 글자의 굵기와 기울기  표현

 

Blockquotes (인용블록)

인용 블록을 사용할 경우 > 기호를 문장 앞에 사용합니다.

Nested 형태로 사용할 경우 >> , >>> 형태로 개수를 늘려서 사용합니다.

또한, 여러 문장에 대해서 인용 블록을 사용할 경우 매 줄마다 > 기호를 넣는 것을 추천합니다.

blockquote 안에 여러 가지 조합을 이용할 수 있습니다.

Markdown HTML 결과
> 첫 번째 인용 블록의 처음 줄이다.
>
> 첫 번째 인용 블록의 두 번째 줄이다.
>>두번 째 인용 블록이다.		 <blockquote>
    첫 번째 인용 블록의 처음 줄이다.
    첫 번째 인용 블록의 두 번째 줄이다.
     <blockquote>
        두번 째 인용 블록이다.
     </blockquote>
</blockquote>
첫 번째 인용 블록의 처음 줄이다.
첫 번째 인용 블럭의 두 번째 줄이다.
두 번째 인용 블록이다.

 

Lists (목록)

목록은 - (dash), * (asterisk), + (plus sign) 을 이용하면 되고,

Nested 형태의 경우 tab 키를 이용해서 구분한다.

다만, 한 목록을 표현할 때 기호를 혼용하여 사용하지 않는 것을 추천한다.

 

리스트에 번호를 넣어 순서를 정하는 Ordered  List라도 실제 변환하면 순서가 무시되기 때문에

순서를 맞춰 쓰지 않아도 됩니다.

Markdown HTML 결과
- 사과
- 복숭아
- 딸기
- 포도
    - 청포도
    - 샤인 머스켓
    - 거봉포도		 <ul>
    <li>사과</li>
    <li>복숭아</li>
    <li>딸기</li>
    <li>포도</li>
    <ul>
        <li>청포도</li>
        <li>샤인머스켓</li>
        <li>거봉포도</li>
    </ul>
</ul>
  • 사과
  • 복숭아
  • 딸기
  • 포도
    • 청포도
    • 샤인머스켓
    • 거봉포도

 

Code & Code Blocks (코드 & 코드 블록)

한 줄 코드의 경우

` (backtick)을 사용합니다. 처음 시작과 끝을  ` (backtick)을 사용하면 됩니다.

escape 하려면 `` (double backticks) 사용하면 됩니다.

 

여려 줄 코드의 경우

코드 블록은 일반적으로 공백 4개 또는 탭 1개로 들여 쓰기 하면 됩니다.

Markdown HTML 결과
중간에 `코드`를 넣어보자 중간에 <code>코드</code>를 넣어보자 중간에 코드를 넣어보자
    functioin Add(a, b) {
        return a + b;
    }		 <code>
functioin Add(a, b) {
        return a + b;
}
</code>		 functioin Add(a, b) {
        return a + b;
}

 

Links (링크)

링크를 만들려면 [] (brakets) 사이에 링크 이름을 넣고 곧바로 http 링크를 기록합니다.

() (parentheses) 안에 링크를 넣을 경우 링크 주소를 안 보이게 할 수 있습니다.

 

[대디동동 티스토리 바로가기](https://daddydongdong.tistory.com)

<a href=" https://daddydongdong.tistory.com "> 대디동동 티스토리 바로가기</a> 

 

Images (이미지)

! (Exclamation Mark)와 [] (brakets)을 사용하고 곧바로 이미지 주소를 기록합니다.

[] 사이에는 이미지에 대한 설명을 넣습니다.

 

![대디동동 썸네일](https://tistory3.daumcdn.net/tistory/6510919/attach/4f28ac20840d4967aea976746ef3d019)

 

마크다운이라는 언어에 대해서 알아보았습니다.

예전에는 프로그램 하나만 잘해도 인정 받는 시대였지만,

이제는 다릅니다. 새로운 트랜드를 분석하고 사용해서 작은 차이를 통한 경쟁력을 만드시기 바랍니다.

 

더 자세한 내용을 알기 원하면 아래의 링크를 통해서 학습하시길 추천합니다.

https://www.markdownguide.org/

 

https://stackedit.io/

 

반응형

'코딩강좌 > 코딩상식' 카테고리의 다른 글

ipconfig all 말고도 좋은 기능이 있다는 것 알고 계시나요?  (1) 2023.11.03
체크섬(checksum)을 알아야 해킹 피해를 막을 수 있다 - 사용 이유  (0) 2023.11.01
애플 비전 프로 (Vision Pro OS) Xcode 개발 샘플 테스트  (0) 2023.10.28
많이 사용하는 DNS 네임 서버 주소 알아보기, 설정하기  (1) 2023.10.27
CPU, RAM, 모니터 성능 측정 단위 Hz (헤르츠) 높으면 다 좋을까?  (0) 2023.09.21

관련글

티스토리툴바