마크다운 문법 총정리🔥

해당 글은 패스트캠퍼스의 '네카라쿠배 프론트엔드 취업완성 스쿨 2기'를 참고하여 작성되었습니다.

1. 제목

마크다운에서 h1부터 h6까지의 제목을 표현 할 수 있습니다👍🏼

# 제목 1 
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6

제목 1과 제목 2는 특별하게 굳이 앞에 #을 붙이지 않고도 표현이 가능하지만, 플랫폼마다 이러한 문법이 가능한 플랫폼도 있고 그렇지 않은 플랫폼도 있습니다.

제목 1
=====
제목 2
-----

2. 강조

기울기는 <em> 태그로 변환되고, 굵게는 <strong> 태그로, 취소선은 <del> 태그로 변환됩니다. 하지만 밑줄 태그는 따로 존재하지 않아. 동일하게 <u>태그를 사용하시면 됩니다.

기울게: *하나의 별표* 혹은 _하나의 언더바_ 사용하기
굵게: **두개의 별표** 혹은 __두개의 언더바__ 사용하기
기울고 굵게: **_기울고 굵게_** 를 함께 사용하기
밑줄: <u>밑줄 긋기</u> <u>태그 사용하기</u>
취소선: ~~물결표시 두개~~ 사용하기

기울게: 하나의 별표 혹은 하나의 언더바 사용하기
굵게: 두개의 별표 혹은 두개의 언더바 사용하기
기울고 굵게: 기울고 굵게 를 함께 사용하기
밑줄: 밑줄 긋기 <u> </u> 태그 사용하기.
취소선: 물결표시 두개 사용하기

3. 목록

순서가 있는 <ol> 태그와 순서가 필요 없는 <ul> 태그의 목록 태그

1. 순서가 필요한 목록
1. 순서가 필요한 목록
   - 순서가 필요하지 않은 목록(서브)
1. 순서가 필요한 목록
   1. 순서가 필요한 목록(서브)
   1. 순서가 필요한 목록(서브)
1. 순서가 필요한 목록

- 순서가 필요하지 않은 목록에 사용 가능한 기호
   - 대쉬
   * 별표
   + 더하기

1. 순서가 필요한 목록
2. 순서가 필요한 목록
   • 순서가 필요하지 않은 목록(서브)
3. 순서가 필요한 목록
   1. 순서가 필요한 목록(서브)
   2. 순서가 필요한 목록(서브)
4. 순서가 필요한 목록

• 순서가 필요하지 않은 목록에 사용 가능한 기호
  • 대쉬
  • 별표
  • 더하기

4. 링크

<a> 태그로 변환되는 역할

[GOOGLE](https://google.com)
[Instagram](https://instagram.com "링크 설명을 작성하세요.")
[상대적 참조](.../user/login)
[Something][Something link]
[Github][link]

문서 안에서 [참조 링크] 그대로 사용 가능

[Something link]: https://velog.io/@jennyfromdeblock
[1]: https://github.com
[참조 링크]: https://naver.com "네이버로 이동합니다"

GOOGLE
Instagram
상대적 참조
Something
Github

문서 안에서 참조 링크 그대로 사용 가능

5. 이미지

생긴건 링크와 비슷하지만 앞에 !가 붙음. img src alt를 잘 생각하면서 사용하시면 더 이해하기 쉽습니다😉

![텍스트 입력하기](https://icons-for-free.com/iconfiles/png/512/ant+design+++filled+icons+markdown-1324441558617467874.png "링크 설명")
![Markdown][logo]
[logo]: https://icons-for-free.com/iconfiles/png/512/ant+design+++filled+icons+markdown-1324441558617467874.png "markdown"
[![Markdown](https://heropy.blog/css/images/vendor_icons/markdown.png)]()

6. 코드강조

<pre> 와 <code>로 변환된다. 작은 따옴표가 아닌 grave(`)임을 주의💥

(1) 인라인 코드 강조하기.

`background` 혹은 `background-image` 속성으로 요소에 배경 이미지를 삽입할 수 있다. 

background 혹은 background-image 속성으로 요소에 배경 이미지를 삽입할 수 있다.

(2) 블록 코드 강조하기

` 을 3번이상 입력하고 코드 종류를 적으면 된다. 어떠한 종류의 코드인지를 보여주기 위해서 grave 3번 바로 다음에 코드의 종류를 적어주면 된다. 예시를 아래에서 함께 보자💁🏼‍♀️

<a href="https://velog.io/@jennyfromdeblock/" target="_blank">velog</a>

h1 {
  color:#F00010;
  background-color:#000000;
}

public class Main {
   public static void main(String args[])
}

7. 표

• <table> 태그로 변환된다
• 헤더 셀을 구분할 때 3개 이상의 - (대쉬) 기호가 필요
• 헤더 셀 구분하면서 : (콜론) 기호로 셀안에 내용을 정렬 할 수 있음
• 가장 좌측과 가장 우측에 있는 | (vertical bar) 기호는 생략 가능

| 값 | 의미 | 기본값 |
|:---|:---:|---:|
|`static`|유형 없음/배치 불가능|`static`|
|`relative`|요소 자신을 기준으로 배치| |
|`absolute`|위치 상 부모 요소를 기준으로 배치| |
`fixed`|브라우저 창을 기준으로 배치| 

8. 인용문

<blockquote> 태그로 변환된다.

> 남의 말이나 글에서 직접 또는 간접으로 따온 문장
>> _두번째 인용문_

남의 말이나 글에서 직접 또는 간접으로 따온 문장

두번째 인용문

9. 원시 HTML

<blockquote>원시 HTML 인용문입니다. </blockquote>

원시 HTML 인용문입니다.

<img src="https://heropy.blog/css/images/vendor_icons/markdown.png" alt="markdown" width="150px">

10. 수평선

--- = *** = ___