마크다운(Markdown)은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다. - 위키백과 -

• 마크다운(MarkDown)은 일반 텍스트 기반의 경량 마크업 언어이다.
• 문법이 간결하고 HTML삽입이 가능하다.
• .md, .markdown의 확장자명을 가진다. (* 마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지)

1. 헤더(Header)

• #로 시작하는 텍스트.
• 1~6의 여섯개 단계로 지정 가능.
• #이 늘어나면 제목의 스케일이 낮아짐.
• H1은 =으로도 가능.
• H2는 --으로도 가능.

❓ 사용법

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 4
###### Header 6

Header 1,과 2는 '#' 외에도 '=', '--' 기호도 사용 가능합니다.
Header 1
=
Header 2
--

✅ 결과

Header 1

Header 2

Header 3

Header 4

Header 4

Header 6

Header 1,과 2는 # 외에도 =, -- 기호도 사용 가능합니다. Header 1 = Header 2 --

2. Emphasis 강조 (폰트)

• 글자의 굵기, 기울임, 취소선 등을 변경 가능합니다.
• 기울여 쓰기(italic) : * 또는 _로 감싼 텍스트.
• 두껍게 쓰기(bold) : ** 또는 __로 감싼 텍스트.
• 취소선 : ~~로 감싼 텍스트.
• 기울임과 볼드체를 같이 사용 가능.

❓ 사용법

*italic 입니다.*
_italic 입니다._
**bold 입니다.**
__bold 입니다.__
~~취소선 입니다.~~
*italic **bold** 함께 사용 가능.*

✅ 결과

italic 입니다. italic 입니다. bold 입니다. bold 입니다. 취소선 입니다. italic bold 함께 사용 가능.

3. Blockquotes 인용

• >으로 시작하는 텍스트.
• >는 3개까지 가능.(velog는 더 가능...?)
• 중첩해서 사용 가능.

❓ 사용법

> 헬로우
>> 중첩입니다.
>>> 중첩의 중첩입니다.
.
.
.

✅ 결과

헬로우

중첩입니다.

중첩의 중첩입니다.

4. Lists 목록

4-1. Unordered lists 순서가 없는 목록

• *, +, -를 이용해서 순서없는 목록을 만들 수 있다.
• 들여쓰기를 하면 모양이 바뀐다.(스페이스 두번, 텝은 안먹힘)
• <ul>태그

4-2. Ordered lists 순서가 있는 목록

• 숫자를 기입하면 순서가 있는 목록이 된다.
• 숫자에 상관없이 연속적으로 숫자가 표기된다.(ex. 125 -> 123)
• 들여쓰기를 하면 모양이 바뀐다.
• <ol>태그

  ❓ 사용법

  ```
• 한식
• 중식
• 양식
  • 파스타
    • 알리오 올리오
    • 까르보나라
  • 피자

1. 한식
   1. 김치
      1. 총각김치
      2. 갓김치
      3. 배추김치
   2. 장아찌
   3. 찌개
2. 중식
3. 양식

1. 도형
   • 삼각형
   • 사각형
     • 사다리꼴
     • 마름모
2. 동물
   • 포유류
   • 파충류
     1. 도마뱀
     2. 거북이 ```

        ✅ 결과

• 한식
• 중식
• 양식
  • 파스타
    • 알리오 올리오
    • 까르보나라
  • 피자

1. 한식
   1. 김치
      1. 총각김치
      2. 갓김치
      3. 배추김치
   2. 장아찌
   3. 찌개
2. 중식
3. 양식

1. 도형
   • 삼각형
   • 사각형
     • 사다리꼴
     • 마름모
2. 동물
   • 포유류
   • 파충류
     1. 도마뱀
     2. 거북이

5. Backslash Escapes

• 특수문자를 표현할 때, 표시될 문자 앞에 \를 넣고 특수문자를 쓰면 됩니다.
• \ + #,_,*,[],{},<> 등등...

❓ 사용법

* 특수문자 출력안됨
- 특수문자 출력안됨

\* 특수문자 출력됨
\- 특수문자 출력됨

\*literal asterisks\*
\#hash mark\#
\[squre brackets\]

✅ 결과

• 특수문자 출력안됨
• 특수문자 출력안됨

* 특수문자 출력됨 - 특수문자 출력됨

*literal asterisks*
#hash mark# [squre brackets]

6. 이미지

• 링크와 비슷하지만 앞에 !가 붙는다.
• 인라인 이미지 : ![텍스트](이미지파일경로)
• 링크 이미지 : ![텍스트](이미지파일URL)
• 이미지의 사이즈 변경을 위해서는 <img width="OOOpx" height="OOOpx"></img>와 같이 표현.
• ![텍스트](이미지파일경로 "이미지이름") : 이미지에 마우스를 올렸을때 나오는 이미지 이름을 지정해줄 수 있다.

❓ 사용법

<!-- 이미지파일 -->
![텍스](https://velog.velcdn.com/images/h_nso_o/post/30e82cb7-86c4-4dc3-9679-5b46a52fe09e/image.jpg "물총새")
<!-- 이미지URL -->
![텍스트](https://images.unsplash.com/photo-1715673558305-21709a9b2553?q=80&w=1976&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D "나무나무나무나무")

✅ 결과

7. Links (Anchor) 링크

7-1. External Links 외부 링크

• 인라인 링크 : [링크](http://example.com "링크 제목")
• url 링크 : <example.com>, <example@example.com>;
  • <>꺽쇠 괄호 없어도 자동으로 링크를 사용

    ❓ 사용법

    [Google](http://www.google.com "구글")
    [Naver](http://www.naver.com "네이버")
    [Github](http://www.github.com "깃허브")
    <!-- <꺽쇠 괄호  -->
    구글 https://www.google.com
    네이버 <https://www.naver.com>

    ✅ 결과

    Google Naver Github 구글 https://www.google.com 네이버 https://www.naver.com

7-2. Internal Links 내부 링크

• [보여지는 내용](#이동할 헤드의 제목)
• 괄호 안의 링크를 쓸 때는 띄어쓰기는 -로 연결
• 영어는 모두 소문자로 작성.
• 특수문자, 이모지는 생략하고 작성.

  ❓ 사용법

  [1. 헤더(Header)](#1-헤더header)
  [2. Emphasis 강조 (폰트)](#2-emphasis-강조-폰트)
  [3. Blockquotes 인용](#3-blockquotes-인용)

  ✅ 결과

  1. 헤더(Header) 2. Emphasis 강조 (폰트) 3. Blockquotes 인용
  

8. Fenced Code Blocks 코드 블럭

• 간단한 인라인 코드는 텍스트를 앞뒤로 `기호로 감싸면 된다.
• ``` 혹은 ~~~코드.
• 코드가 여러 줄인 경우, 줄 앞에 공백 네 칸을 추가하면 됩니다.
• ``` 옆에 언어를 지정해주면 syntax color가 적용됩니다.

  ❓ 사용법

  ```
  This is code blocks.
  ```
  ~~~
  This is code blocks.
  ~~~
    4 spaces
  ```javascript
  function test() {
  console.log("look ma’, no spaces");
  }
  ```

  ✅ 결과

  This is code blocks.

  This is code blocks.

  4 spaces

  function test() {
  console.log("look ma’, no spaces");
  }

  
  

9. Task List 체크 리스트

• 줄 앞에 - [x]를 써서 완료된 리스트 표시.
• 줄 앞에 - [ ]를 써서 미완료된 리스트 표시.
• 체크 안에서 강조 외에 여러가지 기능 사용 가능

❓ 사용법

- [x] 체크된 박스입니다.
- [ ] 체크되지 않은 박스입니다.

- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported

✅ 결과

• 체크된 박스입니다.
• 체크되지 않은 박스입니다.
• @mentions, #refs, links, formatting, and tags supported

10. Horizontal Rules 수평선

• - 또는 * 또는 _ 을 3개 이상 작성.
• 단, -을 사용할 경우 header로 인식할 수 있으니 이 전 라인은 비워두어야 합니다.

  ❓ 사용법

### ✅ 결과
* * *
***
*****
- - -
-------------------

<br>

***
## 11. Table 테이블
- 헤더와 셀을 구분할 때 3개 이상의 `-`(hyphen/dash) 기호가 필요합니다.
- 헤더 셀을 구분하면서 `:`(Colons) 기호로 셀(열/칸) 안에 내용을 정렬할 수 있습니다.
- 가장 좌측과 가장 우측에 있는 `|`(vertical bar) 기호는 생략 가능합니다.
### ❓ 사용법

테이블 생성

테이블 정렬

테이블 정렬

12. Line Breaks 줄바꿈

• <br>를 활용해서 줄바꿈이 가능합니다.
• (원래는 엔터를 두 번 해야 줄바꿈이지만 velog에서는 한 번만 해도 줄바꿈 되는듯.)

❓ 사용법

Su-su-su-supernova<br><br>사건은 다가와 ah, oh, ayy
거세게 커져가 ah, oh, ayy
질문은 계속돼 ah, oh, ayy<br>우린 어디서 왔나 oh, ayy

✅ 결과

Su-su-su-supernova

사건은 다가와 ah, oh, ayy 거세게 커져가 ah, oh, ayy 질문은 계속돼 ah, oh, ayy
우린 어디서 왔나 oh, ayy

✋🏻마치며

개발 공부 내용을 정리할 목적으로 velog를 시작합니다. 본격적인 시작에 앞서 Markdown 문법에 대해 정리해 보았습니다. 공부하면서 글을 작성하려고 하니 시간이 좀 걸렸지만, 정리해 놓으니 뿌듯하네요. 읽어주셔서 감사합니다.🙂

📚참고 자료

• https://inpa.tistory.com/entry/MarkDown-%F0%9F%93%9A-%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4-%EB%AC%B8%EB%B2%95-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC
• https://github.com/jinkyukim-me/markdown_ko?tab=readme-ov-file
• https://velog.io/@joohe11/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4-%EB%AC%B8%EB%B2%95-%EB%AC%B8%EC%84%9C-%EB%82%B4%EB%B6%80-%EB%A7%81%ED%81%AC-%EB%84%A3%EA%B8%B0