마크다운 스타일 테스트
마크다운테스트MDX
제목 (Headings)
H1 제목 - 가장 큰 제목
H2 제목 - 두 번째 큰 제목
H3 제목 - 세 번째 큰 제목
H4 제목 - 네 번째 큰 제목
H5 제목 - 다섯 번째 큰 제목
H6 제목 - 가장 작은 제목
텍스트 스타일 (Text Styles)
일반 텍스트입니다. 이것은 굵은 텍스트이고, 이것은 기울임 텍스트입니다.
굵은 기울임 텍스트도 가능합니다.
취소선 텍스트는 이렇게 표시됩니다.
인라인 코드는 이렇게 표시됩니다.
목록 (Lists)
순서 없는 목록
- 첫 번째 항목
- 두 번째 항목
- 중첩된 항목 1
- 중첩된 항목 2
- 더 깊이 중첩된 항목
- 세 번째 항목
순서 있는 목록
- 첫 번째 단계
- 두 번째 단계
- 세부 단계 A
- 세부 단계 B
- 세 번째 단계
체크리스트
- 완료된 작업
- 또 다른 완료된 작업
- 아직 안 한 작업
- 해야 할 작업
인용문 (Blockquotes)
이것은 인용문입니다. 여러 줄로 작성할 수 있습니다.
중요한 인용문
인용문 안에서도 마크다운 문법을 사용할 수 있습니다.
- 목록도 가능
- 두 번째 항목
테이블 (Tables)
| 이름 | 역할 | 경험 |
|---|---|---|
| 렌 | 프론트엔드 개발자 | 5년 |
| 클로드 | AI 어시스턴트 | ∞ |
| 리액트 | 라이브러리 | 10년+ |
정렬된 테이블
| 왼쪽 정렬 | 가운데 정렬 | 오른쪽 정렬 |
|---|---|---|
| 텍스트 | 텍스트 | 텍스트 |
| 긴 텍스트 예시 | 가운데 | 123,456 |
| 짧음 | 중간 | 999 |
코드 블록 (Code Blocks)
JavaScript (실행 가능)
JavaScript
React (실행 가능)
React
HTML (실행 가능)
HTML
멀티파일 플레이그라운드 (HTML + CSS + JS)
HTML, CSS, JavaScript를 탭으로 분리해서 작성하고 함께 실행할 수 있습니다. 경계선을 드래그하면 코드/결과 영역 크기를 조절할 수 있습니다.
Playground인터랙티브 카드
CSS (데모 포함)
CSS
TypeScript (실행 가능 - Babel 변환)
TypeScript
Python (실행 가능 - Pyodide)
첫 실행 시 Pyodide 로딩에 몇 초 소요됩니다.
Python(Pyodide)
Rust (하이라이팅만)
Rust
C++ (하이라이팅만)
C++
이미지 (Images)
이미지는 아직 추가하지 않았습니다. imgs/ 폴더에 이미지를 추가하고 아래처럼 사용하세요:
Markdown
수평선 (Horizontal Rules)
위 아래 내용을 구분하는 수평선입니다.
세 가지 방법 모두 동일한 수평선을 만듭니다.
이스케이프 문자
특수 문자를 표시하려면 백슬래시를 사용합니다:
*별표* `백틱` [대괄호] #해시
마무리
이 페이지는 모든 마크다운 스타일을 테스트하기 위한 예시입니다. 코드 블록에서:
- JavaScript, React, HTML, CSS: 왼쪽 코드 수정 → 오른쪽 실시간 결과 확인
- TypeScript, Python, Rust, C++ 등: 문법 하이라이팅만 제공
자유롭게 코드를 수정해보세요! 🎉