11/27 - MDX 문법

MDX(Markdown + JSX)는 Markdown과 React JSX를 결합하여 문서를 작성할 수 있는 마크업 언어다. 기본적인 Markdown 문법에 JSX 구문을 추가하여 동적인 콘텐츠를 작성할 수 있다.

 

Markdown 문법 (MDX에서 사용 가능)

헤더(Header)

Markdown처럼 #, ##, ###를 사용하여 헤더를 작성한다.

# 헤더 1
## 헤더 2
### 헤더 3

텍스트 스타일링

• 굵게: **텍스트** 또는 __텍스트__
• 기울임: *텍스트* 또는 _텍스트_
• 굵고 기울임: ***텍스트***
• 취소선: ~~텍스트~~

**굵은 텍스트**
*기울어진 텍스트*
***굵고 기울어진 텍스트***
~~취소선이 있는 텍스트~~

리스트

- 순서 없는 리스트

- 항목 1
- 항목 2
  - 하위 항목 1
  - 하위 항목 2

- 순서 있는 리스트

1. 첫 번째 항목
2. 두 번째 항목
  1. 하위 항목
  2. 하위 항목

코드 블록

- 인라인 코드

`코드`

- 블록 코드

```javascript
console.log("Hello, MDX!");

yaml

---
### e. 링크와 이미지
#### - 링크
```mdx
[tistory](https://arajo.tistory.com)

이미지


인용

> 인용 문구입니다.
>> 중첩된 인용입니다.

테이블

| 헤더 1 | 헤더 2 |
|--------|--------|
| 데이터 1 | 데이터 2 |
| 데이터 3 | 데이터 4 |

 

 JSX 문법 (MDX의 고유 기능)

컴포넌트 삽입

MDX는 JSX를 사용할 수 있어 React 컴포넌트를 문서에 삽입할 수 있다.

<MyComponent title="MDX 사용법">
  여기에 MDX를 사용한 문서 작성법을 설명합니다.
</MyComponent>

동적인 변수 사용

export const name = "MDX 유저";
<p>안녕하세요, {name}님!</p>

Props 전달

<MyButton color="blue" onClick={() => alert('클릭!')}>
  버튼 텍스트
</MyButton>

 

Markdown과 JSX 혼합

MDX 문서에서는 Markdown과 JSX를 함께 사용할 수 있다.

# Markdown 헤더

<MyComponent>
  <p>이곳은 JSX로 작성된 문단입니다.</p>
</MyComponent>

## Markdown과 JSX를 혼합할 수 있습니다!

# 제목
여기는 **굵은 텍스트**입니다.
<span style={{ color: 'red' }}>이 텍스트는 빨간색입니다.</span>
또한, 아래는 JSX로 작성된 문장입니다.

<MyComponent>
  <p style={{ fontStyle: 'italic', color: '#2ecc71' }}>React 컴포넌트를 활용한 기울임 텍스트</p>
</MyComponent>

레이아웃 설정

MDX 파일에서 페이지의 레이아웃을 설정할 수 있다.

export const layout = ({ children }) => <div className="layout">{children}</div>;

# 레이아웃 테스트
이 문서는 "layout"이 적용된 상태입니다.

하이라이트

Markdown 기본 문법으로는 하이라이트를 지원하지 않지만, JSX를 사용하면 가능하다.

<span style={{ backgroundColor: 'yellow' }}>하이라이트 텍스트</span>

텍스트 크기 변경

<span style={{ fontSize: '20px' }}>큰 텍스트</span>

텍스트 색상 변경

<span style={{ color: 'red' }}>빨간색 텍스트</span>
<span style={{ color: '#3498db' }}>파란색 텍스트 (HEX 코드)</span>

CSS 클래스 사용

CSS 클래스를 정의한 후 MDX에서 className을 통해 사용할 수 있다.

<style jsx>
{`
  .text-blue {
    color: blue;
  }
  .text-green {
    color: green;
  }
`}
</style>

<p className="text-blue">파란색 텍스트</p>
<p className="text-green">초록색 텍스트</p>

커스텀 텍스트 스타일링 (JSX 활용)

MDX에서는 JSX를 통해 다양한 텍스트 스타일링을 할 수 있다.

→ 굵기, 크기, 색상 조합
<span style={{ fontWeight: 'bold', fontSize: '24px', color: 'purple' }}>
  굵고, 큰, 보라색 텍스트
</span>

→ 글꼴 변경
<span style={{ fontFamily: 'Courier New, monospace' }}>특정 글꼴 텍스트</span>

→ 텍스트 정렬
<p style={{ textAlign: 'center' }}>가운데 정렬된 텍스트</p>
<p style={{ textAlign: 'right' }}>오른쪽 정렬된 텍스트</p>

텍스트 강조 효과 확장 (CSS 애니메이션)

MDX는 CSS를 직접 작성할 수 있어 애니메이션 효과를 추가할 수 있다.

<style jsx>
{`
  .highlight {
    background: linear-gradient(90deg, yellow, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient 2s infinite;
  }

  @keyframes gradient {
    0% { background-position: 0%; }
    100% { background-position: 100%; }
  }
`}
</style>

<p className="highlight">그라데이션 강조 텍스트</p>

커스텀 컴포넌트 활용

React 컴포넌트를 MDX에서 정의하면 복잡한 스타일링을 재사용할 수 있다.

export const Highlight = ({ children }) => (
  <span style={{ color: 'orange', fontWeight: 'bold' }}>{children}</span>
);

# 사용 예시
<Highlight>강조된 텍스트</Highlight>

 

MDX 문법과 Markdown 차이

Markdown 기능	MDX 확장 기능
정적인 문서 작성	동적인 React 컴포넌트 사용 가능
HTML 태그 제한적 사용	JSX로 모든 React 태그 및 스타일링 가능
링크, 이미지 등 단순	props와 상호작용을 통해 사용자 지정 가능

 

MDX 텍스트 스타일링 문법

기능	문법 예시	설명
굵게	**텍스트**	텍스트를 굵게 표시
기울임	*텍스트*	텍스트를 기울임
취소선	~~텍스트~~	텍스트에 취소선 추가
텍스트 색상 변경	<span style={{ color: 'red' }}>텍스트</span>	JSX로 색상 변경
텍스트 크기 조정	<span style={{ fontSize: '24px' }}>큰 텍스트</span>	JSX로 크기 조정
하이라이트	<span style={{ backgroundColor: 'yellow' }}>텍스트</span>	배경색을 통해 강조
정	<p style={{ textAlign: 'center' }}>가운데 정렬</p>	텍스트 정렬 설정

 

color

black	olive	beige	cornflowerblue	darkmagenta	darkviolet	gold	lavenderblush	lightsalmon	mediumblue
white	yellow	bisque	cornsilk	darkolivegreen	deeppink	goldenrod	lawngreen	lightseagreen	mediumorchid
gray	navy	blanchedalmond	crimson	darkorange	deepskyblue	greenyellow	lemonchiffon	lightskyblue	mediumpurple
silver	blue	blueviolet	cyan	darkorchid	dimgray	honeydew	lightblue	lightslategray	mediumseagreen
maroon	teal	brown	darkblue	darkred	dodgerblue	hotpink	lightcoral	lightsteelblue	mediumslateblue
red	aqua	burlywood	darkcyan	darksalmon	firebrick	indianred	lightcyan	lightyellow	mediumspringgreen
purple	aliceblue	cadetblue	darkgoldenrod	darkseagreen	floralwhite	indigo	lightgoldenrodyellow	limegreen	mediumturquoise
fuchsia	antiquewhite	chartreuse	darkgray	darkslateblue	forestgreen	ivory	lightgray	linen	mediumvioletred
green	aquamarine	chocolate	darkgreen	darkslategray	gainsboro	khaki	lightgreen	magenta	midnightblue
lime	azure	coral	darkkhaki	darkturquoise	ghostwhite	lavender	lightpink	mediumaquamarine	mintcream