Markdown to HTML 변환기
브라우저에서 Markdown을 HTML로 변환 — GFM 전체 지원, 실시간 미리보기, 구문 강조. 웹·이메일용 인라인 스타일 HTML 내보내기. 100% 비공개, 업로드 없음.
사용자 정의 CSS
Markdown to HTML 변환이란 무엇인가요?
Markdown to HTML 변환은 Markdown으로 작성된 일반 텍스트 문서 — 제목에 `#`, `**굵게**`, 목록에 `- `, 링크에 `[text](url)` — 를 브라우저, 콘텐츠 관리 시스템, 이메일 클라이언트가 실제로 표시하는 HTML로 바꿉니다. Markdown은 그 자체로 읽기 쉽고 쓰기 쉽게 설계되었지만, 브라우저는 `# Heading`을 이해하지 못합니다. 브라우저는 <h1>Heading</h1>을 이해합니다. 변환이 그 간극을 메웁니다.
내부적으로 Markdown 처리기는 먼저 소스를 추상 구문 트리(AST)로 파싱합니다 — 제목, 단락, 목록, 코드 블록이 각자의 내용과 속성을 가진 별개의 노드로 표현되는 구조입니다. 그런 다음 그 트리를 HTML로 직렬화하여 올바른 태그와 중첩을 내보냅니다. 정규식으로 텍스트를 바꾸는 대신 AST를 거치기에 변환기가 중첩 목록, 테이블, 내장 HTML을 정확하고 예측 가능하게 처리합니다. 인정되는 두 문법은 정밀한 표준인 CommonMark와, 테이블·작업 목록·취소선·자동 링크로 이를 확장하는 GitHub Flavored Markdown(GFM)입니다.
애초에 변환하는 이유는 거의 모든 게시 대상이 Markdown이 아니라 HTML을 원하기 때문입니다. 정적 사이트 생성기, CMS 리치 텍스트 필드, 이메일 템플릿, 브라우저 탭 모두 HTML을 렌더링합니다. 그래서 일반적인 워크플로는 편안한 Markdown으로 작성하고 — README, 문서, 블로그 초안, 노트 — 게시 시점에 HTML로 변환하는 것입니다. 이 도구는 그 변환을 로컬에서 수행하고 실시간 미리보기를 보여 주므로, 렌더링된 결과를 보고 필요한 모양 그대로 — 조각, 완전한 페이지, 또는 이메일용 인라인 스타일 마크업 — 정확한 HTML을 복사할 수 있습니다.
반대 연산 — HTML을 다시 Markdown으로 — 은 기존 웹 콘텐츠를 Markdown 기반 시스템으로 이전할 때 똑같이 유용합니다. 그러려면 HTML → Markdown 탭으로 전환하거나 전용 HTML to Markdown 변환기를 여십시오.
Markdown in:
# Release Notes
We shipped **tables** and `code`:
| Feature | Status |
| ------- | ------ |
| GFM | Done |
- [x] Parse to an AST
- [ ] Profit
HTML out:
<h1>Release Notes</h1>
<p>We shipped <strong>tables</strong> and <code>code</code>:</p>
<table>
<thead><tr><th>Feature</th><th>Status</th></tr></thead>
<tbody><tr><td>GFM</td><td>Done</td></tr></tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" checked disabled> Parse to an AST</li>
<li class="task-list-item"><input type="checkbox" disabled> Profit</li>
</ul> 주요 기능
실시간 분할 창 미리보기
왼쪽에서 Markdown을 입력하면 오른쪽에서 실시간으로 렌더링되고, 진행하는 동안 그 아래에 HTML 출력이 쌓입니다. 미리보기는 샌드박스 iframe에서 렌더링되므로 보이는 것이 브라우저가 보여 줄 것이며 — 붙여 넣은 스크립트는 실행될 수 없습니다.
GitHub Flavored Markdown 전체
CommonMark만이 아니라 GFM 상위 집합 전체: 파이프 테이블, 작업 목록(`- [x]`), 취소선(`~~`), 자동 링크 URL, 펜스 코드 블록. GitHub용으로 작성한 README나 이슈가 여기서도 그곳과 정확히 똑같이 렌더링됩니다.
구문 강조
펜스 코드 블록에 언어를 표시하면(```js, ```python, ```sql) 변환기가 강조하여 토큰을 span으로 감싸고 <code> 요소에 언어 클래스를 붙입니다. 색을 위해 페이지에 강조 스타일시트를 함께 두십시오.
세 가지 출력 형식
HTML 조각(템플릿이나 CMS용 본문 마크업), 완전한 문서(.html로 저장할 수 있는 독립 페이지), 또는 Outlook 등 클라이언트가 올바르게 렌더링하도록 스타일을 각 요소로 옮긴 이메일 인라인 HTML로 내보내십시오.
사용자 정의 CSS 패널
실시간 미리보기에 내 CSS를 주입해 사이트의 타이포그래피를 맞추거나 GitHub의 README 스타일을 흉내 내십시오. h1 { color: #0969da; } 같은 규칙을 입력하면 복사하는 깔끔한 HTML은 건드리지 않고 미리보기가 즉시 갱신됩니다.
GFM 구문 치트 시트
HTML을 만드는 구문 빠른 참조: `# H1` → 제목, `**bold**` → <strong>, `*italic*` → <em>, `- item` → 목록, `1. item` → 순서 목록, `[text](url)` → 링크, `` `code` `` → 인라인 코드, ` ```lang ` → 펜스 코드, `> quote` → 인용, `| a | b |` → 테이블, `- [ ]` → 작업 목록, `~~text~~` → 취소선.
100% 비공개, 브라우저 내부
모든 변환이 JavaScript로 로컬에서 실행됩니다 — Markdown과 HTML이 기기를 떠나지 않고, 서버에 닿지 않으며, 페이지 로드 후 오프라인에서 작동합니다. 미공개 문서, 내부 README, 엠바고 중인 릴리스 노트에 안전합니다.
예시
GFM 테이블을 HTML <table>로
| Tool | Speed | | ---- | ----- | | GFM | Fast |
<table> <thead><tr><th>Tool</th><th>Speed</th></tr></thead> <tbody><tr><td>GFM</td><td>Fast</td></tr></tbody> </table>
GitHub Flavored Markdown의 파이프 테이블은 일반 CommonMark의 일부가 아니지만, 이 변환기는 이를 이해하고 <thead>와 <tbody>를 갖춘 적절한 시맨틱 <table>을 생성합니다 — 스타일을 입히거나 CMS에 바로 넣을 수 있습니다.
작업 목록을 체크박스 HTML로
- [x] Write the README - [ ] Convert it to HTML
<ul class="contains-task-list"> <li class="task-list-item"><input type="checkbox" checked disabled> Write the README</li> <li class="task-list-item"><input type="checkbox" disabled> Convert it to HTML</li> </ul>
GFM 작업 목록 구문 `- [x]` / `- [ ]`는 GitHub이 체크리스트를 렌더링하는 방식 그대로 실제 비활성화된 체크박스 입력이 됩니다 — 복사한 README가 내 페이지에서도 똑같이 보입니다.
펜스 코드 블록을 강조된 <pre><code>로
```js const html = md.render(src) ```
<pre><code class="language-js"><span class="hljs-keyword">const</span> html = md.render(src) </code></pre>
여는 펜스 뒤에 언어를 붙이면 변환기가 구문 강조를 적용하여 토큰을 span으로 감싸고 <code> 요소에 language-js 클래스를 붙입니다. 강조 스타일시트와 함께 쓰면 코드에 색이 입혀집니다.
README를 완전한 HTML 문서로
# My Project A short description and a [link](https://example.com).
<!doctype html> <html lang="en"> <head><meta charset="utf-8"><title>My Project</title></head> <body> <h1>My Project</h1> <p>A short description and a <a href="https://example.com">link</a>.</p> </body> </html>
출력을 완전한 문서로 전환하면 변환기가 렌더링된 HTML을 <head>와 charset을 갖춘 완전한 페이지로 감쌉니다 — 어떤 브라우저에서도 열거나 바로 다운로드할 수 있는 독립 .html 파일입니다.
Markdown을 HTML로 변환하는 방법
- 1
Markdown 입력 또는 붙여넣기
Markdown — README, 릴리스 노트, 이슈 본문 — 을 입력 창에 넣으십시오. GitHub Flavored Markdown 전체가 지원됩니다: 테이블, 작업 목록, 취소선, 자동 링크, 펜스 코드 블록. 실시간 미리보기와 HTML 출력이 입력하는 대로 전부 브라우저에서 갱신됩니다.
- 2
출력 형식 선택
템플릿이나 CMS에 붙여 넣으려면 HTML 조각을, 독립 .html 페이지에는 완전한 문서를, Outlook에서도 살아남는 인라인 스타일 HTML에는 이메일 인라인을 고르십시오. 구문 강조를 위해 코드 펜스에 언어 태그를 붙이고, 사용자 정의 CSS 패널로 미리보기에 스타일을 입히십시오.
- 3
복사 또는 다운로드
복사를 클릭해 HTML을 가져가거나 다운로드로 파일로 저장하십시오. 변환을 되돌리려면 HTML → Markdown 탭으로 전환해 HTML을 붙여 넣으면 깔끔한 Markdown을 돌려받습니다.
흔한 함정
본문에서 삼켜진 이스케이프되지 않은 HTML
Markdown은 원시 HTML을 통과시키므로 텍스트로 의도한 꺾쇠 — 예컨대 <Component>나 일반적인 List<T>에 대해 쓸 때 — 가 HTML 태그로 파싱되어 출력에서 사라집니다. 꺾쇠를 백슬래시나 HTML 엔터티로 이스케이프하거나, 리터럴로 렌더링되도록 텍스트를 코드 스팬으로 감싸십시오.
Use the <Header> component to wrap pages. <!-- <Header> is parsed as a tag and vanishes -->
Use the `<Header>` component to wrap pages. <!-- backticks keep it literal: renders <Header> -->
어긋나거나 잘못된 테이블 파이프
GFM 테이블에는 헤더 행, 대시로 된 구분 행, 그리고 행마다 최소 하나의 파이프가 필요합니다. 구분 행을 빠뜨리거나 헤더와 열 수가 다르면 테이블이 깨집니다 — 파이프로 된 일반 단락으로 되돌아갑니다. 셀이 시각적으로 정렬될 필요는 없지만 모든 행은 열 수가 같아야 합니다.
| Name | Role | | Alice | Admin | <!-- no |---|---| delimiter row: not a table -->
| Name | Role | | ---- | ---- | | Alice | Admin | <!-- delimiter row present: renders a table -->
언어 없는 코드 펜스
언어 정보 문자열이 없는 펜스 코드 블록은 언어 클래스가 없는 <pre><code> 블록으로 렌더링되어 구문 강조를 받지 못합니다. 코드는 여전히 나타나지만 단색입니다. 강조를 켜려면 여는 백틱 바로 뒤에 언어를 추가하십시오. 백틱과 이름 사이의 공백은 강조를 끕니다.
``` const x = 1 ``` <!-- no language → no highlighting -->
```js const x = 1 ``` <!-- language-js → highlighted -->
완전한 문서가 필요한 곳에 조각 사용
HTML 조각 출력을 복사해 .html 파일로 바로 저장하면 doctype도, charset도, <html>/<head>/<body>도 없는 페이지가 됩니다. 브라우저가 그래도 렌더링하는 경우가 많지만, 쿼크 모드와 빠진 charset이 강세 문자와 레이아웃을 깨뜨릴 수 있습니다. HTML이 독립적으로 존재해야 할 때는 완전한 문서 형식으로 전환하십시오.
<h1>Title</h1> <p>Saved as page.html — no doctype, no charset.</p>
<!doctype html> <html lang="en"><head><meta charset="utf-8"><title>Title</title></head> <body><h1>Title</h1><p>Complete, standalone page.</p></body></html>
일반적인 활용 사례
- 정적 사이트나 CMS에 게시
- 콘텐츠를 Markdown으로 작성하고 HTML 조각으로 변환하여 정적 사이트 템플릿이나 CMS 리치 텍스트 필드에 붙여 넣으십시오. 페이지 래퍼가 방해하지 않는 깔끔한 시맨틱 마크업 — 제목, 목록, 테이블 — 을 얻습니다.
- 푸시하기 전에 README 미리보기
- README.md를 붙여 넣고 실시간 미리보기가 GFM 전체로 — 테이블, 작업 목록, 펜스 코드 — 렌더링하는 모습을 보십시오. 깨진 테이블이나 빠진 코드 펜스를 GitHub이 세상에 보여 주기 전, 커밋 전에 잡아냅니다.
- 노트를 공유 가능한 웹 페이지로
- Markdown으로 쓴 회의 노트, 설계 문서, 초안이 한 번의 클릭으로 완전한 HTML 페이지가 됩니다. 완전한 문서를 골라 .html 파일을 다운로드하면 어떤 브라우저에서도 열거나 어디에든 호스팅할 수 있습니다.
- 이메일용 인라인 스타일 HTML 생성
- 이메일 클라이언트는 <style> 블록을 제거하므로 메시지를 Markdown으로 작성하고 CSS를 각 요소에 style 속성으로 옮기는 이메일 인라인 형식으로 내보내십시오. 결과는 문서 수준 스타일을 무시하는 Outlook 등 클라이언트에서도 올바르게 렌더링됩니다.
- .md 파일을 다운로드 가능한 .html로 변환
- Markdown 문서의 오프라인 자체 완결형 HTML 버전이 필요하신가요? 붙여 넣고 완전한 문서를 골라 다운로드하면 — 적절한 doctype와 charset을 갖춘 독립 .html 파일을 빌드 도구나 명령줄 없이 얻습니다.
- 앱에 렌더링된 문서 임베드
- 저장소에 보관된 Markdown으로 문서, 변경 이력, 도움말 콘텐츠를 생성하시나요? 이 도구로 특정 Markdown 소스가 정확히 어떤 HTML을 만드는지 확인해 앱의 렌더러에 맞추고 출력에 스타일을 입히십시오.
기술 세부사항
- CommonMark 대 GitHub Flavored Markdown
- CommonMark는 제목, 강조, 목록, 링크, 코드 블록이 정확히 어떻게 파싱되는지 정의하는 엄격하고 모호함 없는 Markdown 사양입니다. GitHub Flavored Markdown(GFM)은 엄격한 상위 집합입니다: CommonMark가 정의하는 모든 것을 유지하고 네 가지 확장을 더합니다 — 파이프 테이블, 작업 목록 항목(`- [x]`), 취소선(`~~text~~`), 자동 링크된 맨 URL. GFM은 기능만 더하므로 유효한 CommonMark 문서는 모두 유효한 GFM이기도 합니다. 이 변환기는 GFM 상위 집합을 구현하므로 두 문법 중 어느 쪽으로 작성한 문서든 올바르게 렌더링됩니다.
- XSS 안전 샌드박스 렌더링
- Markdown은 의도적으로 내장 원시 HTML을 허용하므로 Markdown 문서에 <script> 태그나 onerror 같은 이벤트 핸들러가 들어 있을 수 있습니다. 실시간 미리보기는 스크립팅이 비활성화된 <iframe sandbox=""> 안에서 렌더링하여 이를 방어하므로, 미리보는 동안 입력의 능동 콘텐츠가 실행될 수 없습니다 — 신뢰할 수 없는 출처의 Markdown을 변환할 때 중요합니다. 도구가 출력하는 직렬화된 HTML은 입력을 충실히 렌더링한 것입니다. 신뢰할 수 없는 Markdown에서 파생된 HTML을 게시할 계획이라면 제공 전에 서버에서 DOMPurify 같은 정화기를 거치십시오.
- 이메일 HTML 호환성
- HTML 이메일은 CSS 지원이 악명 높게 제한적인 잡다한 엔진들이 렌더링합니다. Windows의 Outlook은 Word의 렌더링 엔진을 사용하며 문서 head의 <style> 블록을 무시하므로 클래스 기반 스타일이 조용히 사라집니다. 신뢰할 수 있는 방법은 각 요소의 인라인 style 속성이며, 이것이 이메일 인라인 출력이 생성하는 것입니다. 이미지도 또 다른 함정입니다: 많은 클라이언트가 수신자가 동의할 때까지 원격 이미지를 차단하므로 작은 이미지를 데이터 URI로 포함하면 즉시 렌더링되는 반면 큰 원격 이미지는 전혀 나타나지 않을 수 있습니다. 마크업을 단순하게 유지하고 대상 클라이언트 전반에서 테스트하십시오.
- 동기식 브라우저 내 강조
- 펜스 코드 블록이 언어 정보 문자열(```js)을 지니면, 변환기가 그 내용에 동기식 강조기를 실행하여 소스를 토큰화하고 각 토큰을 hljs-keyword나 hljs-string 같은 클래스를 가진 <span>으로 감싸며 <code> 요소에 language-js 클래스를 붙입니다. 강조는 구조만 다룹니다 — 색이 아니라 클래스를 추가하므로 — 대상 페이지에 색상표를 렌더링할 일치하는 강조 스타일시트가 필요합니다. 브라우저에서 동기적으로 실행되므로 강조된 HTML이 입력하는 즉시 나타나며 네트워크 호출이 없습니다.
모범 사례
- 대상에 맞는 출력 형식을 고르세요
- 형식을 HTML이 갈 곳에 맞추십시오. CMS 필드나 템플릿은 이미 페이지 래퍼가 있으므로 HTML 조각을 붙여 넣으십시오. 브라우저에서 바로 열 파일에는 doctype와 charset을 갖춘 완전한 문서가 필요합니다. 이메일에는 <style> 블록을 제거하는 클라이언트에서도 스타일이 살아남도록 이메일 인라인이 필요합니다. 잘못된 모양을 붙여 넣는 것이 가장 흔한, 피할 수 있는 실수입니다.
- 항상 코드 펜스에 언어를 표시하세요
- 여는 백틱 바로 뒤에 언어를 쓰십시오 — ```js, ```python, ```sql — 공백 없이, 변환기가 블록을 강조하고 올바른 언어 클래스를 추가할 수 있도록. 맨 펜스는 스타일 없는 강조되지 않은 코드를 만듭니다. 강조기가 인식하는 언어를 쓰십시오. 알 수 없거나 잘못 쓴 이름은 일반 텍스트로 되돌아갑니다.
- 신뢰할 수 없는 Markdown은 게시 전에 정화하세요
- 미리보기는 샌드박스되어 있지만 도구가 내보내는 HTML은 충실한 렌더링이며 — 입력의 원시 HTML이나 <script>를 포함합니다. 그 Markdown이 사용자나 다른 신뢰할 수 없는 출처에서 왔고 결과를 다른 사람에게 제공하려 한다면, 먼저 서버에서 DOMPurify 같은 정화기를 거치십시오. 샌드박스는 변환 중의 당신을 보호할 뿐, 게시 후의 방문자를 보호하지 않습니다.
- 이메일 HTML은 단순하고 인라인으로 유지하세요
- 이메일에는 이메일 인라인 형식을 선호하고, 레이아웃을 단순하게 유지하며, Outlook 등 클라이언트가 버리는 CSS 기능을 피하십시오. 원격 이미지가 차단되어도 렌더링되도록 작은 이미지를 데이터 URI로 인라인하고, 넓게 보내기 전에 항상 스스로에게 테스트를 보내십시오 — 이메일 렌더링은 HTML이 가진 가장 까다로운 대상입니다.
- 텍스트의 리터럴 HTML 문자를 이스케이프하세요
- 리터럴 < 또는 &가 태그나 엔터티로 해석되지 않고 텍스트로 나타나길 원한다면 백슬래시(\<)나 HTML 엔터티(<)로 이스케이프하십시오. Markdown은 원시 HTML을 그대로 통과시키므로 본문의 이스케이프되지 않은 <example>은 알 수 없는 태그로 삼켜져 렌더링 출력에서 사라질 수 있습니다.
자주 묻는 질문
GitHub Flavored Markdown(GFM)을 지원하나요?
이메일용 인라인 스타일 HTML은 어떻게 얻나요?
HTML 조각과 완전한 문서의 차이는 무엇인가요?
렌더링된 HTML은 미리보기에 XSS 안전한가요?
미리보기에 내 CSS를 추가할 수 있나요?
내 파일이나 텍스트가 서버로 업로드되나요?
오프라인에서 작동하나요?
Markdown(.md) 파일을 HTML 파일로 어떻게 변환하나요?
내 코드 블록이 왜 강조되지 않나요?
HTML을 다시 Markdown으로 변환할 수 있나요?
관련 도구
모든 도구 보기 →Base64 디코더 · 인코더 (Base64 Decoder & Encoder)
인코딩 & 포매팅
Base64를 온라인에서 무료로 인코딩하고 디코딩합니다. UTF-8과 이모지를 완벽 지원하는 실시간 변환으로, 100% 브라우저에서 처리되어 회원 가입이 필요 없습니다.
Base64 이미지 변환기 (온라인)
인코딩 & 포매팅
Base64 문자열이나 데이터 URI를 온라인 브라우저에서 이미지로 디코딩합니다. 미리보고, 치수와 MIME을 읽은 뒤 PNG, JPG, GIF, SVG로 다운로드하세요. 업로드 없음.
CSV to JSON 변환기 (CSV to JSON Converter)
인코딩 & 포매팅
브라우저에서 CSV를 JSON으로 변환합니다. RFC 4180, 타입 추론, 헤더 행, 큰 정수 안전 처리. 100% 비공개, 업로드 없음.
HTML to Markdown 변환기
인코딩 & 포매팅
브라우저에서 HTML을 깔끔한 Markdown으로 변환 — GFM 테이블·작업 목록·링크, ATX/Setext와 인라인·참조 링크 선택. 웹 이전·LLM 입력에 적합. 100% 비공개.
이미지 Base64 변환기 (온라인)
인코딩 & 포매팅
이미지를 온라인 브라우저에서 Base64 데이터 URI로 변환합니다 — PNG, JPG, SVG, ICO. HTML, CSS, Markdown, JSON 출력을 복사하세요. 100% 비공개, 업로드 없음.
JSON Diff 비교
인코딩 & 포매팅
두 JSON 파일을 브라우저에서 즉시 Diff 비교하세요. 나란히 보기 하이라이팅, RFC 6902 JSON Patch 출력, 타임스탬프·ID 같은 노이즈 필드 무시. 비공개, 업로드 없음.