MarkDown파일은 사용법이 쉽고, 빠르게 문서를 정리할 수 있는 장점이 있습니다.
확장자는 .md로 HTML 마크업을 대신하여서 표현되고 있습니다.
각 프로젝트의 README.md 처럼 글씨와 간단한 이미지로 표현하는 문서입니다.
현 프로젝트의 모든 글들은 mdx파일들로 이루어져 있습니다.

.mdx

mdx파일은 .md파일과 동일한 문법으로 작성이 되는데,
거기에 더불어 리엑트 컴포넌트와 함께 사용이 가능한 확장자입니다.
따라서 현재 OMS-Tech-Blog는 MDX Remote를 이용해 .mdx파일을 해석하고,
이를 하나의 블로그 글처럼 만들어주는 역할을 하고 있습니다.

마크다운 문법

마크다운의 문법은 기본적인것은 비슷하나,
적용되는 컨텐츠에 따라 약간씩 다르게 적용될 수 있습니다.
ex) github, bitbucket등의 사이트에서 README.md도 서로 다르게 적용됩니다.

frontmatter

frontmatter는 파일 시작 시 파일에 대해 작성하는 구역입니다.
파일에 맨 위에 파일에 대한 정보를 작성해 주면 됩니다.

md
1 ---
2 title: 'MarkDown 작성법'
3 date: '2023-04-03'
4 description: 'OMS-Tech-Blog에서 mdx 파일 작성법에 대한 글입니다.'
5 authorId: 'show5116'
6 authorName: '유영진'
7 tags: ['md']
8 thumbnail: '/front-end/markdown.png'
9 ---

제목

<h1> 태그부터 <h6> 태그 까지 제목을 표현할 수 있습니다.

md
1 제목 작성법
2 	# 제목 1
3 	## 제목 2
4 	### 제목 3
5 	#### 제목 4
6 	##### 제목 5
7 	###### 제목 6

강조

md
1 이텔릭체는 *별표(asterisks)*를 사용하세요.
2 강조는 **별표(asterisks)** 또는 `백틱(backtick)`을 사용하세요.
3 <del>취소선은</del> `<del></del>`를 사용하세요.
4 <u>밑줄</u>은 `<u></u>`를 사용하세요.

이텔릭체는 *별표(asterisks)*를 사용하세요. 강조는 별표(asterisks) 또는 백틱(backtick)을 사용하세요. ~~취소선은~~ <del></del>를 사용하세요. 밑줄은 <u></u>를 사용하세요.

<ol>, <ul> 목록 태그로 변환됩니다.

md
1 1. 순서가 필요한 목록
2 
3 2. 순서가 필요한 목록
4     - 순서가 필요하지 않은 목록(서브)
5     - 순서가 필요하지 않은 목록(서브)
6 
7 3. 순서가 필요한 목록
8     1. 순서가 필요한 목록(서브)
9     2. 순서가 필요한 목록(서브)
10 
11 4. 순서가 필요한 목록
12 
13 - 순서가 필요하지 않은 목록에 사용 가능한 기호
14     - 대쉬(hyphen)
15     * 별표(asterisks)
16     + 더하기(plus sign)

순서가 필요한 목록
순서가 필요한 목록

순서가 필요하지 않은 목록(서브)
순서가 필요하지 않은 목록(서브)

순서가 필요한 목록
순서가 필요한 목록(서브)
순서가 필요한 목록(서브)
순서가 필요한 목록

순서가 필요하지 않은 목록에 사용 가능한 기호
- 대쉬(hyphen)
- 별표(asterisks)
- 더하기(plus sign)

링크

외부 링크는 <a>태그로 변환되고,
내부 링크는 Next.Link로 변환됩니다.

md
1 [GOOGLE](https://google.com)
2 
3 [NAVER](https://naver.com "링크 설명(title)을 작성하세요.")
4 
5 [상대적 참조](/about)
6 
7 [제목](#제목)

이미지

외부 링크는 <img>태그로 변환되고,
이미지 파일은 Next.Image로 변환됩니다.

md
1 ![대체텍스트를 작성해주세요.](http://www.gstatic.com/webp/gallery/1.jpg)
2 ![대체텍스트란에 사이즈 지정이 가능합니다. size:800*600](http://www.gstatic.com/webp/gallery/1.jpg "링크 설명(title)을 작성하세요.")
3 ![프로젝트내 이미지 파일은 사이즈 지정을 하지 않으면 고정된 크기로 나옵니다.](/front-end/dog.png)
4 ![사이즈 지정을 해주세요 size:500*300](/front-end/dog.png)

대체텍스트를 작성해주세요. 대체텍스트란에 사이즈 지정이 가능합니다. size:800*600 프로젝트내 이미지 파일은 사이즈 지정을 하지 않으면 고정된 크기로 나옵니다. 사이즈 지정을 해주세요 size:500*300

이미지에 링크

이미지안에 링크를 사용할 수 있습니다.

md
1 [![Google size:330*130](/front-end/google.png)](https://www.google.com/)

코드블록

코드 종류에 따라 블록을 작성할 수 있습니다.
백틱 3번과 그 옆에 언어 종류를 적어주시면 됩니다.
❗주의 remoteMdx 라이브러리가 java를 지원하지 않아 하이라이터 적용이 안됩니다.

md
1 ```java
2 String a = "aa";
3 ```
4 
5 ```sql
6 SELECT a.* FROM user a;
7 ```
8 
9 ```yml
10 spring:
11 	post: 8081
12 ```
13 
14 ```html
15 <h2>안녕하세요</h2>
16 ```
17 
18 ```css
19 a {
20 	background: black;
21 }
22 ```
23 
24 ```ts
25 const a: string = 'aa';
26 ```
27 
28 ```tsx
29 <Link>
30 	{Array(5)
31 	.fill(null)
32 	.map((item, index) => (
33 		<p>{index}번째 입니다.</p>
34 ))}
35 </Link>
36 ```
37 
38 ```bash
39 yarn start
40 git pull origin master
41 ```
42 
43 ```groovy
44 dependencies {
45 	implementation 'org.springframework.boot:spring-boot-starter-web'
46 	implementation 'org.springframework.boot:spring-boot-starter-webflux'
47 }
48 ```

java
1 String a = "aa";

sql
1 SELECT a.* FROM user a;

yml
1 spring:
2 	post: 8081

html
1 <h2>안녕하세요</h2>

css
1 a {
2 	background: black;
3 }

ts
1 const a: string = 'aa';

tsx
1 <Link>
2 	{Array(5)
3 	.fill(null)
4 	.map((item, index) => (
5 		<p>{index}번째 입니다.</p>
6 ))}
7 </Link>

bash
1 yarn start
2 git pull origin master

groovy
1 dependencies {
2 	implementation 'org.springframework.boot:spring-boot-starter-web'
3 	implementation 'org.springframework.boot:spring-boot-starter-webflux'
4 }

인용문

<blockquote> 태그로 변환됩니다.

md
1 인용문(blockQuote)
2 
3 > 남의 말이나 글에서 직접 또는 간접으로 따온 문장.<br/>
4 > _(네이버 국어 사전)_
5 
6 break!
7 
8 > 인용문을 작성하세요!
9 >> 중첩된 인용문(nested blockquote)을 만들 수 있습니다.
10 >>> 중중첩된 인용문 1<br/>
11 >>> 중중첩된 인용문 2<br/>
12 >>> 중중첩된 인용문 3<br/>

인용문(blockQuote)

남의 말이나 글에서 직접 또는 간접으로 따온 문장.
(네이버 국어 사전)

break!

인용문을 작성하세요!

중첩된 인용문(nested blockquote)을 만들 수 있습니다.

중중첩된 인용문 1
중중첩된 인용문 2
중중첩된 인용문 3

수평선

<hr>태그로 변환됩니다.

md
1 ---
2 (Hyphens)
3 
4 ***
5 (Asterisks)
6 
7 ___
8 (Underscores)

(Hyphens)

(Asterisks)

(Underscores)

줄바꿈

<br/>태그를 사용하거나, 띄어쓰기 2번을 이용해 줄바꿈을 할 수 있습니다.

md
1 동해물과 백두산이 마르고 닳도록
2 하느님이 보우하사 우리나라 만세  <!--띄어쓰기 2번-->
3 무궁화 삼천리 화려 강산<br/>
4 대한 사람 대한으로 길이 보전하세

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세

JSX 태그

JSX 태그를 그대로 사용할 수 있습니다.

md
1 <p>
2 	<span style={{ color: 'red' }}>빨간색</span><br/>
3 	<a href='/front-end/downloadMdx.mdx' download>예시 다운로드</a>
4 	<div
5 		style={{
6 			width: 0,
7 			height: 0,
8 			borderBottom '50px solid transparent',
9 			borderTop: '50px solid transparent',
10 			borderLeft: '50px solid skyblue',
11 			borderRight: '50px solid transparent',
12 		}}
13 	></div>
14 </p>

빨간색
예시 다운로드

요약

펼쳐졌다 닫히는 details 태그를 사용할 수 있습니다.

md
1 <details>
2 	<summary>요약입니다.</summary>
3 	<p>Elit voluptate labore eiusmod aliqua in excepteur ea in.</p>
4 </details>

요약입니다.

Elit voluptate labore eiusmod aliqua in excepteur ea in.

커스텀 기능

md
1 **주의 주의사항 입니다.**<br/>
2 강조구문에 주의 라는 글자로 시작하면 주의 구문이 생성됩니다.

❗주의사항 입니다.
강조구문에 주의 라는 글자로 시작하면 주의 구문이 생성됩니다.

IDE 활용

.md 파일의 경우에는 Intellij와 VS Code에서 자동완성, 미리보기를 지원합니다.
이를 활용해 작성하게 되면 좀더 편리하게 가능합니다.

1	---
2	title: 'MarkDown 작성법'
3	date: '2023-04-03'
4	description: 'OMS-Tech-Blog에서 mdx 파일 작성법에 대한 글입니다.'
5	authorId: 'show5116'
6	authorName: '유영진'
7	tags: ['md']
8	thumbnail: '/front-end/markdown.png'
9	---

1	제목 작성법
2	# 제목 1
3	## 제목 2
4	### 제목 3
5	#### 제목 4
6	##### 제목 5
7	###### 제목 6

1	이텔릭체는 별표(asterisks)를 사용하세요.
2	강조는 별표(asterisks) 또는 `백틱(backtick)`을 사용하세요.
3	<del>취소선은</del> `<del></del>`를 사용하세요.
4	<u>밑줄</u>은 `<u></u>`를 사용하세요.

1	1. 순서가 필요한 목록
2
3	2. 순서가 필요한 목록
4	- 순서가 필요하지 않은 목록(서브)
5	- 순서가 필요하지 않은 목록(서브)
6
7	3. 순서가 필요한 목록
8	1. 순서가 필요한 목록(서브)
9	2. 순서가 필요한 목록(서브)
10
11	4. 순서가 필요한 목록
12
13	- 순서가 필요하지 않은 목록에 사용 가능한 기호
14	- 대쉬(hyphen)
15	* 별표(asterisks)
16	+ 더하기(plus sign)

1	[GOOGLE](https://google.com)
2
3	[NAVER](https://naver.com "링크 설명(title)을 작성하세요.")
4
5	[상대적 참조](/about)
6
7	[제목](#제목)

1	![대체텍스트를 작성해주세요.](http://www.gstatic.com/webp/gallery/1.jpg)
2	![대체텍스트란에 사이즈 지정이 가능합니다. size:800*600](http://www.gstatic.com/webp/gallery/1.jpg "링크 설명(title)을 작성하세요.")
3	![프로젝트내 이미지 파일은 사이즈 지정을 하지 않으면 고정된 크기로 나옵니다.](/front-end/dog.png)
4	![사이즈 지정을 해주세요 size:500*300](/front-end/dog.png)

1	```java
2	String a = "aa";
3	```
4
5	```sql
6	SELECT a.* FROM user a;
7	```
8
9	```yml
10	spring:
11	post: 8081
12	```
13
14	```html
15	<h2>안녕하세요</h2>
16	```
17
18	```css
19	a {
20	background: black;
21	}
22	```
23
24	```ts
25	const a: string = 'aa';
26	```
27
28	```tsx
29	<Link>
30	{Array(5)
31	.fill(null)
32	.map((item, index) => (
33	<p>{index}번째 입니다.</p>
34	))}
35	</Link>
36	```
37
38	```bash
39	yarn start
40	git pull origin master
41	```
42
43	```groovy
44	dependencies {
45	implementation 'org.springframework.boot:spring-boot-starter-web'
46	implementation 'org.springframework.boot:spring-boot-starter-webflux'
47	}
48	```

1	인용문(blockQuote)
2
3	> 남의 말이나 글에서 직접 또는 간접으로 따온 문장.<br/>
4	> _(네이버 국어 사전)_
5
6	break!
7
8	> 인용문을 작성하세요!
9	>> 중첩된 인용문(nested blockquote)을 만들 수 있습니다.
10	>>> 중중첩된 인용문 1<br/>
11	>>> 중중첩된 인용문 2<br/>
12	>>> 중중첩된 인용문 3<br/>

1	동해물과 백두산이 마르고 닳도록
2	하느님이 보우하사 우리나라 만세 <!--띄어쓰기 2번-->
3	무궁화 삼천리 화려 강산<br/>
4	대한 사람 대한으로 길이 보전하세

1	<p>
2	<span style={{ color: 'red' }}>빨간색</span><br/>
3	<a href='/front-end/downloadMdx.mdx' download>예시 다운로드</a>
4	<div
5	style={{
6	width: 0,
7	height: 0,
8	borderBottom '50px solid transparent',
9	borderTop: '50px solid transparent',
10	borderLeft: '50px solid skyblue',
11	borderRight: '50px solid transparent',
12	}}
13	></div>
14	</p>

1	<details>
2	<summary>요약입니다.</summary>
3	<p>Elit voluptate labore eiusmod aliqua in excepteur ea in.</p>
4	</details>

1	주의 주의사항 입니다.<br/>
2	강조구문에 주의 라는 글자로 시작하면 주의 구문이 생성됩니다.