본문 바로가기
Developer/Dev

마크 다운(Markdown) 사용법 및 문법

by 아우럼 2024. 7. 29.
반응형

글을 작성할 때 html 대신 간단하게 사용할 수 있는 마크다운(Markdown) 언어를 대부분의 웹사이트에서 사용하고 있어 소개하려고 합니다.

 

마크다운(Markdown) 장점, 단점은?

  • 문법이 쉽고 간결해서 대부분 개발자는 10분 만에 이해하고 사용할 수 있습니다.
  • 마크다운(Markdown)은 관리하기 매우 편합니다.
  • 대부분은 프로그램 및 플랫폼에서 지원하고 있습니다.
  • 마크다운(Markdown) 표준이 없어 적용 가능 문법을 플랫폼, 프로그램마다 숙지하고 있어야 합니다.
  • 간단한 기능은 지원되지만, 섬세한 기능은 태그를 사용해야 합니다.

마크다운(Markdown) 사용법

1. 마크다운(Markdown)에서 title 크기를 변경하는 방법.

  • html 문법에서는 h1, h2, h3, h4, h5, h6로 사용합니다.
# aurumguide title1 
## aurumguide title2 
### aurumguide title3 
#### aurumguide title4  
##### aurumguide title5 
###### aurumguide title6

실행 결과 :

title 크기를 변경하는 방법.
title 크기를 변경하는 방법.

2. 줄 바꿈(Line Breaks) 사용법.

줄 바꿈은 스페이스 3칸을 입력하거나 </br> 태그를 사용합니다.

실행 결과 :

줄 바꿈(Line Breaks) 사용법.
줄 바꿈(Line Breaks) 사용법.

 

3. 구분 선(Division Line) 사용법.

  • 구분선은  '---' 표시합니다.
마크다운(Markdown) 구분 선 이전
---
마크다운(Markdown) 구분 선 이후

실행 결과 :

 

구분 선(Division Line) 사용법.
구분 선(Division Line) 사용법.

4. 들여 쓰기 사용법.

들여 쓰기 '>' 사용하세요.

마크다운(Markdown) 들여쓰기 적용 안 하면 버전.
> 마크다운(Markdown) 들여쓰기 버전1
> 마크다운(Markdown) 들여쓰기 버전2

실행 결과 :

들여쓰기 사용법.
들여쓰기 사용법.

5. 불릿(Bullet) 사용법.

  • 대부분 '-' 사용하지만 '+', '*' 사용할 수 있습니다.
- 마크다운(Markdown) bullet
    - 마크다운(Markdown) bullet
    - 마크다운(Markdown) bullet
    - 마크다운(Markdown) bullet

실행 결과 :

불릿(Bullet) 사용법.
불릿(Bullet) 사용법.

6. 숫자 사용법.

1. 마크다운(Markdown) Indexing1
2. 마크다운(Markdown) Indexing2
3. 마크다운(Markdown) Indexing3
4. 마크다운(Markdown) Indexing4
5. 마크다운(Markdown) Indexing5

실행 결과 :

숫자 사용법.
숫자 사용법.

7. 하이퍼 링크 설정하기.

  • <링크 주소>
  • [링크 이름](링크 주소)
  • [링크 이름](링크 주소, "부연 설명")
  • 부연 설명의 경우 마우스를 가져다 대면 보임
<https://aurumguide.tistory.com>
[아우럼 가이드 이동하기] (https://aurumguide.tistory.com/)
[아우럼 가이드 이동하기] (https://aurumguide.tistory.com/, "아우럼 가이드 이동합니다.")

실행 결과 :

하이퍼 링크 설정하기.
하이퍼 링크 설정하기.

8. 이미지 설정하기.

  • ! [이미지 설명](이미지 주소)
![아우럼 가이드](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FQjoEw%2FbtsIx1papag%2Fh9kWbiZkak1SB8ZGNSoubK%2Fimg.png)

실행 결과 :

아우럼 가이드

9. 마크다운(Markdown) 글자 강조 사용법.

글자를 기울게 표시.

  • 마크다운(Markdown)에서는 '*' 한 개를 사용하면 글자를 기울게 표시할 수 있습니다.
  • <em> 태그도 사용할 수 있습니다.
 *아무렴 가이드 기울게 글씨 보기*
 <em> 아무럼 가이드 기울게 글씨 보기</em>

실행 결과 :

기울게 글씨 보기.
기울게 글씨 보기.

글자 강조 표시.

  • 마크다운(Markdown)에서는 '**' 두 개를 사용하면 글자를 강조해서 표시할 수 있습니다.
  • <strong> 태그도 사용할 수 있습니다.
 **아무럼 가이드 강조 글씨 보기**
 <strong> 아무럼 가이드 강조 글씨 보기</strong>

실행 결과 :

강조해서 표시.
강조해서 표시.

글자 기울게, 강조해서 표시.

  • 마크다운(Markdown)에서는 '***' 세 개를 사용하면 글자를 기울게, 강조해서 표시할 수 있습니다.
*** 아무렴 가이드 강조, 기울게 글씨 보기 ***

실행 결과 :

글자를 기울게, 강조해서 표시할 수 있습니다.
글자를 기울게, 강조해서 표시할 수 있습니다.

글자에 밑줄 표시.

  • 마크다운(Markdown)에서는 '__' 사용하면 글자에 밑줄 표시할 수 있습니다.
  • <u> 태그도 사용할 수 있습니다.
 __아무렴 가이드 밑줄 표시 글씨 보기__ 
 <u> 아무럼 가이드 밑줄 표시 글씨 보기</u>

실행 결과 :

글자에 밑줄 표시할 수 있습니다.
글자에 밑줄 표시할 수 있습니다.

 

 

취소선 표시.

  • 마크다운(Markdown)에서는 <del> 사용하면 취소선 표시할 수 있습니다.
<del> 아무럼 가이드 취소선 글씨 보기</del>

실행 결과 :

취소선 표시할 수 있습니다.
취소선 표시할 수 있습니다.

 

글자에 색상 적용.

  • 마크다운(Markdown)에서 글자에 색상 적용하는 방법.
  • 보통 html 태그와 같이 사용합니다.
<span style="color:blue">
아무렴 가이드 색상 표시하기
</span>

실행 결과 :

글자에 색상 적용하는 방법.
글자에 색상 적용하는 방법.

10. 마크다운(Markdown)에서 인용구(Quote) 사용하는 방법.

  • '>' 사용하면 마크다운(Markdown)에서 인용구로 사용할 수 있습니다.
  • 계층구조로 사용하고 싶다면 '>' 연속적으로 사용하면 가능합니다.
> 아우럼 가이드 인용 표시 1.
>> 아우럼 가이드 인용 표시 2-1.
>> 아우럼 가이드 인용 표시 2-2.
>>> 아우럼 가이드 인용 표시 3.

  실행 결과 :

인용구(Quote) 사용하는 방법.
인용구(Quote) 사용하는 방법.

11. 마크다운(Markdown)에서 체크박스(checkbox) 사용법.

[] 체크가 되지 않은 체크박스 예제입니다.
[x] 체크가 되어 있는 체크박스 예제입니다.

실행 결과 :

체크박스(checkbox) 사용법.
체크박스(checkbox) 사용법.

12. 마크다운(Markdown)에서 표 만드는 기본적인 문법입니다.

  • html에서 태그로 변환되는 '표(Table)'를 마크다운(Markdown)에서도 가능합니다.
  • 테이블 헤더를 구분하기 위해, 3개 이상의 -(hyphen/dash) 기호를 사용합니다.
|아우럼1|아우럼2|아우럼3|아우럼4|아우럼5|
|---|---|---|---|---|
|내용1|내용2|내용3|내용4|내용5|
|내용1|내용2|내용3|내용4|내용5|
|내용1|내용2|내용3|내용4|내용5|
|내용1|내용2|내용3|내용4|내용5|

실행 결과 :

표 만드는 기본적인 문법입니다.
표 만드는 기본적인 문법입니다.

 

셀 정렬하는 방법.

  • 테이블 헤더를 구분하며 :(Colons) 기호를 추가해 셀(열/칸) 안에 내용을 정렬할 수 있습니다.
  • :--- 은 좌측 정렬을 표현합니다.
  • :---:은 가운데 정렬을 표현합니다.
  • ---:은 우측 정렬을 표현합니다.
|아우럼1|아우럼2|아우럼3|아우럼4|아우럼5|
|:---|---|:---:|---|---:|
|왼쪽정렬1|내용2|가운데정렬3|내용4|오른쪽정렬5|
|왼쪽정렬1|내용2|가운데정렬3|내용4|오른쪽정렬5|
|왼쪽정렬1|내용2|가운데정렬3|내용4|오른쪽정렬5|
|왼쪽정렬1|내용2|가운데정렬3|내용4|오른쪽정렬5|

실행 결과 :

셀 정렬하는 방법.
셀 정렬하는 방법.

 

표 만들 때 사용하는 tip.

  • 버티컬바 기호 사용
  • 마크다운에서 버티컬바(|) 기호는 테이블을 표현할 때 사용하는 문법인데,
  • 만약 테이블 안에서 버티컬바(|) 출력하고 싶다면은, \이스케이프(Escape) 기호를 앞에 사용하시면 됩니다.
칸에 공백을 넣고 싶을 때는?
|아우럼1|아우럼2|아우럼3|
|:---|:---:|---:|
||내용1||
|||내용2|
|내용3|||

실행 결과 :

칸에 공백을 넣고 싶을 때.
칸에 공백을 넣고 싶을 때.

13. 마크다운(Markdown)에서 코드 블록(code block) 사용법.

마크다운(Markdown)에서 인라인으로 코드 사용하는 방법.

  • 문장 중간 사이에 백 쿼트(`) 한 개를 사용해 입력하면 인라인으로 소스 코드를 표시할 수 있습니다.
변수 선언 코드는 `let numType = 123` 입니다.

실행 결과 :

인라인으로 코드 사용하는 방법.
인라인으로 코드 사용하는 방법.

 

마크다운(Markdown)에서 코드 블록으로 사용하는 방법.

  • 백 쿼트(`) 세 개를 사용하여 코드 블록을 사용할 수 있음
```SQL
 SELECT *
   FROM DUAL
```

실행 결과 :

코드 블록으로 사용하는 방법.
코드 블록으로 사용하는 방법.

14. 마크다운(Markdown)에서 주석(Comment) 사용하는 방법.

  • 주석(Comment)을 표현합니다. /**/
반응형