Markdown to HTML — MD를 깔끔한 HTML로 변환 온라인
Markdown의 제목, 목록, 링크, 표, 코드 펜스를 CMS에 바로 붙여넣을 수 있는 깔끔한 HTML로 바꾸고, 입력하는 동안 실시간으로 미리 봅니다. GitHub 확장 문법을 지원합니다.
예시
# Hi **bold** and a [link](https://325tools.com)
<h1>Hi</h1> <p><strong>bold</strong> and a <a href="https://325tools.com">link</a></p>
각 Markdown 구문이 그에 맞는 의미 있는 HTML 요소로 변환됩니다.
- one - two - three
<ul> <li>one</li> <li>two</li> <li>three</li> </ul>
연속된 - 항목은 <li> 자식을 가진 하나의 <ul>이 됩니다.
사용 방법
- 입력 상자에 Markdown을 붙여넣습니다.
- HTML과 미리보기가 갱신되는 것을 확인합니다.
- HTML 출력을 복사합니다.
Markdown to HTML 소개
Markdown to HTML은 Markdown 문법 — 제목의 #, 굵게의 **, 목록 항목의 -, ``` 코드 블록 펜스, 링크, 표 — 을 파싱해 그에 대응하는 의미 있는(semantic) HTML 태그로 내보냅니다. 실시간 미리보기가 생성된 마크업 옆에 렌더링 결과를 보여줍니다. 일반 Markdown에 더해 표와 작업 목록 같은 GitHub 확장(GFM)을 지원하므로, 출력이 GitHub나 대부분의 정적 사이트 생성기에서 보는 것과 일치해 블로그, 문서 페이지, 이메일 템플릿에 바로 넣을 수 있습니다.
사양
| 입력 문법 | CommonMark + GitHub Flavored Markdown |
|---|---|
| 출력 | 의미 있는 HTML (h1–h6, p, ul/ol, a, code, table…) |
| 확장 | 표와 작업 목록 지원 |
| 미리보기 | HTML 옆에 실시간 렌더링 미리보기 |
팁과 주의점
- 일반 Markdown에 더해 GitHub 확장 문법(GFM)을 지원하므로 표와 작업 목록도 변환됩니다.
- 생성된 HTML을 CMS나 템플릿에 바로 붙여넣으세요. CMS가 class를 제거하더라도 의미 있는 태그가 구조를 그대로 유지합니다.
- Markdown에서는 빈 줄이 문단을 나눕니다 — 빈 줄이 없으면 두 줄이 하나의 <p>로 합쳐질 수 있습니다.
- 중첩 목록 항목은 두 칸이나 네 칸 들여써서 별도의 목록이 아니라 제대로 중첩되게 하세요.
주요 기능
- Markdown을 깔끔한 HTML로 변환
- GitHub Flavored Markdown (표, 작업 목록)
- 렌더링 결과 실시간 미리보기
- HTML 출력 복사
- 제목, 목록, 링크, 이미지, 코드 블록
이럴 때 사용하세요
- Markdown으로 글을 쓴 뒤, Markdown 편집기가 없는 CMS에 HTML을 붙여넣을 때.
- README를 HTML로 변환해 문서 사이트나 랜딩 페이지에 넣을 때.
- Markdown 메모를 이메일이나 뉴스레터용 서식 있는 HTML로 바꿀 때.
- 정적 블로그 템플릿용 HTML 조각을 Markdown에서 생성할 때.
이 도구는 브라우저에서 실행됩니다. 파일과 텍스트는 서버로 업로드되지 않으며, 입력 내용을 저장하지 않습니다.
자주 묻는 질문
어떤 Markdown 기능이 지원되나요?+
일반 Markdown에 표, 작업 목록 같은 GitHub 확장을 더해 지원하므로, 출력이 GitHub에서 보는 것과 일치합니다.
두 줄이 왜 한 문단으로 합쳐졌나요?+
Markdown에서는 한 번의 줄바꿈으로 새 문단이 시작되지 않습니다 — 블록 사이에 빈 줄이 필요합니다. 빈 줄을 넣거나, 부드러운 줄바꿈을 원하면 첫 줄 끝에 공백 두 칸을 두세요.
WordPress 같은 CMS에 HTML을 붙여넣을 수 있나요?+
네. 출력은 표준 의미 있는 HTML입니다. 편집기의 HTML/코드 보기에 붙여넣으면 테마가 다시 스타일을 입혀도 제목, 목록, 링크가 그대로 유지됩니다.
코드 블록이 그대로 유지되나요?+
네. 펜스 코드 블록과 인라인 코드는 <pre>/<code>로 감싸져 Markdown으로 파싱되지 않고 코드로 렌더링됩니다.