마크다운(markdown) 작성법

sikkzz·2023년 6월 20일
post-thumbnail

마크다운이란?

Markdown은 텍스트 기반의 마크업 언어로 2004년 존그루버에 의해 개발되었다. 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 README 파일이나 온라인 게시물에 많이 사용된다. 최우선 설계 목표는 가장 읽기 쉽고 쓰기 쉽게 만드는 것이였다고 한다.

마크다운의 장점

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

마크다운의 단점

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

📝 마크다운 사용법(문법)

1.  제목(Header)

h1부터 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 H1

This is a H2

This is a H3

This is a H4

This is a H5
This is a H6

2.  인용문(BlockQuote)

인용문 작성은 >를 사용합니다.

🖊️  마크다운 문법

> This is a first blockqute.

🖨️  결과

This is a first blockqute.

>의 갯수에 따라 중첩이 가능하다

🖊️  마크다운 문법

> This is a first blockqute.
>> This is a second blockqute.
>>> This is a third blockqute.

🖨️  결과

This is a first blockqute.

This is a second blockqute.

This is a third blockqute.

3.  목록(list)

3.1  순서있는 목록 번호 리스트

숫자.을 이용하여 작성할 수 있습니다.

🖊️  마크다운 문법

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

🖨️  결과

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

번호를 이상하게 입력해도 순서는 내림차순으로 정의됩니다.

🖊️  마크다운 문법

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

🖨️  결과

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

3.2  순서없는 목록 번호 리스트

순서 없는 목록, 글머리 기호

🖊️  마크다운 문법

  * 빨강
    * 녹색
      * 파랑
  + 빨강
    + 녹색
      + 파랑  
  - 빨강
    - 녹색
      - 파랑 

🖨️  결과

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

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

🖊️  마크다운 문법

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

🖨️  결과

  • 1단계
    • 2단계
      • 3단계
        • 4단계

4.  인라인코드

백틱(`)을 이용하여 인라인 코드를 작성할 수 있다.
🖊️  마크다운 문법

`인라인 코드 작성법`

🖨️  결과
인라인 코드 작성법

5.  코드 블럭

5.1  들여쓰기 코드 블럭

4개의 공백 또는 하나의 탭으로 들여쓰기 변환을 통해 코드 블럭 생성이 가능합니다.
들여쓰지 않은 행을 만날때까지 이어지며 줄바꿈을 적용 안하면 제대로 인식되지 않는 단점이 있습니다.

🖨️  결과

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

5.2  백틱을 이용한 코드 블럭

백틱(`)을 3개 사용하여 코드 블럭을 만들 수 있습.
언어 선언으로 문법 강조가 가능한데 html, css, javascript, java등 기본 언어들은 다 가능합니다.

🖊️  마크다운 문법

```javascript
function gcd(num1, num2){
	let num = num1 % num2
	if(num === 0) return num2
	return gcd(num2, num)
}
```

🖨️  결과

function gcd(num1, num2){
    let num = num1 % num2
    if(num === 0) return num2
    return gcd(num2, num)
}

6.  수평선

* 이나 - 를 3개 이상 입력하면 작성할 수 있습니다.
🖊️  마크다운 문법
(5가지 모두 동일한 수평선을 만듭니다)

  * * *
  ***
  *****
  - - -
  -----------------------

🖨️  결과






7.  링크

참조링크와 외부링크가 있으며 이메일 등에 자동 연결 링크도 가능합니다.

7.1  참조링크

🖊️  마크다운 문법

참조링크
[Google](https://www.google.com)

🖨️  결과

Google

7.2  외부링크

🖊️  마크다운 문법

[Google](https://google.com, "google link")

🖨️  결과

Google

7.3  자동연결링크

🖊️  마크다운 문법

외부링크: <https://google.com/>
이메일링크: <sling0623@google.com>

🖨️  결과

외부링크: https://google.com/
이메일링크: sling0623@google.com

8.  폰트

굵게, 기울이기, 취소선 등이 가능합니다.

🖊️  마크다운 문법

__굵은 글씨__
**굵은 글씨**
_기울인 글씨_
*기울인 글씨*
~~취소선~~

🖨️  결과

굵은 글씨
굵은 글씨
기울인 글씨
기울인 글씨
취소선

9. 이미지 링크

이미지 링크 사용법은 아래와 같습니다.
🖊️  마크다운 문법

![pooh](https://encrypted-tbn0.gstatic.com/images
q=tbn:ANd9GcQW0Z94iqO01RBz7uaesVFC5hG-J4y-ldNCHg&usqp=CAU)

🖨️  결과

pooh

사이즈 조절 기능은 따로 없기에 HTML태그 이용해서 사이즈를 조절해야 합니다.

🖊️  마크다운 문법

  <img src="https://encrypted-tbn0.gstatic.com/images?
  
  q=tbn:ANd9GcQW0Z94iqO01RBz7uaesVFC5hG-J4y-ldNCHg&usqp=CAU" 
  
  width="200px" height="200px" alt="alt">

🖨️  결과

alt

마치며

velog 기본 기능을 이용하면 간단한 마크다운 문서는 작성이 가능하지만 알아두면 좋을 거 같아서 간단한 문법들만 정리해서 작성했습니다.

마크다운에서도 HTML태그를 이용하면 더 다채로운 문서 작성이 가능하지만 마크다운만의 문법들을 이용하여 작성하는것도 알아두면 좋을 거 같네요.

profile
FE Developer

0개의 댓글