본문으로 건너뛰기

Markdown to HTML 변환기

마크다운 문법을 HTML로 실시간 변환하는 도구입니다. 작성한 마크다운을 즉시 미리보기하고 HTML 코드를 생성할 수 있습니다.

Markdown Input

Preview

HTML Output

주요 기능​

  • 실시간 마크다운 프리뷰
  • HTML 코드 자동 생성
  • 다양한 마크다운 문법 지원
  • 원클릭 HTML 복사 기능
  • 5가지 예제 템플릿 제공

지원하는 마크다운 문법​

1. 제목 (Headings)​

# H1 제목
## H2 제목
### H3 제목
#### H4 제목
##### H5 제목
###### H6 제목

2. 텍스트 스타일​

**굵은 글씨** 또는 __굵은 글씨__
*기울임체* 또는 _기울임체_
~~취소선~~
`인라인 코드`

3. 목록​

## 순서 없는 목록
- 항목 1
- 항목 2
  - 중첩 항목
  - 또 다른 중첩 항목

## 순서 있는 목록
1. 첫 번째
2. 두 번째
3. 세 번째

4. 링크와 이미지​

[링크 텍스트](https://example.com)
![대체 텍스트](이미지URL)

5. 코드 블록​

```javascript
function hello() {
  console.log("Hello World");
}
```

6. 인용구​

> 이것은 인용구입니다.
> 여러 줄로 작성할 수 있습니다.

7. 테이블​

| 제목1 | 제목2 | 제목3 |
|------|------|------|
| 내용1 | 내용2 | 내용3 |
| 내용4 | 내용5 | 내용6 |

8. 수평선​

---
***
___

사용 사례​

블로그 글 작성​

# 나의 첫 블로그 포스트

안녕하세요! 오늘은 **마크다운**에 대해 알아보겠습니다.

## 마크다운이란?

마크다운은 *간단한 문법*으로 문서를 작성할 수 있는
경량 마크업 언어입니다.

### 장점
1. 배우기 쉬움
2. 읽기 쉬움
3. 다양한 플랫폼 지원

문서 작성​

# API 문서

## 엔드포인트

### GET /api/users

사용자 목록을 조회합니다.

**응답 예시:**
```json
{
  "users": [
    {"id": 1, "name": "John"}
  ]
}

### README 작성
```markdown
# 프로젝트 이름

프로젝트에 대한 간단한 설명

## 설치 방법

```bash
npm install

사용 방법​

  1. 저장소 클론
  2. 의존성 설치
  3. 서버 실행

## 활용 팁

1. **실시간 확인**: 왼쪽에서 마크다운을 작성하면 중앙에서 즉시 프리뷰를 확인할 수 있습니다.

2. **HTML 복사**: 오른쪽 패널의 'Copy HTML' 버튼으로 생성된 HTML을 복사할 수 있습니다.

3. **예제 활용**: 상단의 예제 버튼들을 클릭하여 다양한 마크다운 문법을 학습할 수 있습니다.

4. **블로그 작성**: 마크다운으로 글을 작성하고 HTML로 변환하여 블로그에 바로 게시할 수 있습니다.

5. **문서 작성**: 기술 문서나 README 파일을 미리 확인하고 싶을 때 유용합니다.

## 관련 도구

- [Base64 Encoder](/docs/playground/base64-encoder)
- [URL Encoder](/docs/playground/url-encoder)
- [HTML Formatter](/docs/playground/html-formatter)
- [Text Diff Checker](/docs/playground/text-diff-checker)