📝 마크다운 → HTML 변환기
마크다운을 붙여넣으면 미리보기와 HTML 소스가 바로 나와요. 표·목록·코드 블록·링크를 지원해요.
사용법
- 위 입력칸에 마크다운을 붙여넣거나 직접 써요. 처음에는 예시 문서가 들어 있고, "예시 지우기"로 비울 수 있어요.
- 입력하는 즉시 아래에 미리보기와 HTML 소스가 나와요. 변환 버튼을 따로 누를 필요가 없어요.
- "HTML 복사"를 눌러 블로그 편집기의 HTML 모드나 이메일 템플릿, CMS에 붙여넣어요. "
<body>없이 조각만" 나오는 형태라 기존 페이지에 끼워 넣기 좋아요. - 옵션에서 전체 문서(
<!doctype html>) 형태로 감쌀지 선택할 수 있어요.
지원하는 문법 한눈에 보기
| 쓰는 법 | 결과 HTML |
|---|---|
# 제목 ~ ###### 제목 | <h1> ~ <h6> |
**굵게**, __굵게__ | <strong> |
*기울임*, _기울임_ | <em> |
~~취소선~~ | <del> |
`코드` | <code> |
| ```언어 … ``` 블록 | <pre><code class="language-언어"> |
[글자](주소) | <a href> |
 | <img src alt> |
- 항목, 1. 항목 | <ul>, <ol> (2칸 들여쓰기로 중첩) |
> 인용 | <blockquote> |
--- | <hr> |
파이프 표 (| a | b |) | <table> (정렬 :-- :-: --: 지원) |
문단 안에서 줄을 바꾸고 싶으면 줄 끝에 공백을 두 칸 넣어요. 빈 줄은 문단을 나눠요. 이 변환기는 마크다운 표준(CommonMark)과 GitHub 표 문법의 자주 쓰는 부분만 구현했어요. 각주, 작업 목록 체크박스, 정의 목록, 줄 안에 직접 쓴 HTML 태그는 지원하지 않아요.
보안: 입력한 HTML은 어떻게 처리하나
이 도구는 입력한 글을 먼저 전부 이스케이프(< → <)한 뒤에 마크다운 문법으로 태그를 만들어요. 그래서 글 속에 <script>나 onclick 같은 코드를 써 넣어도 실행되지 않고 글자로만 보여요. 링크 주소는 http://, https://, mailto:, 상대 경로, 앵커(#)만 허용하고, javascript: 같은 주소는 #으로 바꿔요. 다만 만든 HTML을 다른 곳에 붙여넣을 때는 그곳의 보안 규칙을 따로 확인하세요. 사용자 입력을 서버에서 HTML로 바꿔 보여 주는 서비스를 만든다면 서버 쪽에서도 반드시 정화(sanitize) 라이브러리를 써야 해요.
어디에 쓰나요
- 블로그·카페 글 — 마크다운으로 쓴 글을 HTML을 받는 편집기(티스토리 HTML 모드 등)에 옮길 때
- 이메일 뉴스레터 — 표나 목록이 들어간 안내문을 HTML로 바꿔 메일 템플릿에 붙일 때
- README·문서 확인 — GitHub README에 올리기 전에 표가 깨지지 않는지 미리 볼 때
- 개발 학습 — 마크다운 문법이 어떤 HTML 태그로 바뀌는지 직접 비교하며 익힐 때
실제 변환 예시
| 입력 | 출력 |
|---|---|
## 가격표 | <h2>가격표</h2> |
**무료** 도구 | <p><strong>무료</strong> 도구</p> |
- 가 | <ul><li>가</li><li>나</li></ul> |
[홈](https://smithlab.co.kr) | <a href="https://smithlab.co.kr">홈</a> |
자주 겪는 문제
- 목록이 안 만들어져요 — 목록 앞에 빈 줄이 필요한 편집기가 있어요. 이 변환기는 문단 바로 아래에 목록이 와도 알아서 나눠 줘요. 항목 기호(
-) 뒤에 공백 한 칸을 꼭 넣으세요. - 표가 일반 글자로 나와요 — 표 머리 아래 줄에
| --- | --- |가 있어야 해요. 줄마다 파이프 개수는 같게 맞추세요. - 밑줄 단어가 기울어져요 —
snake_case처럼 낱말 안의 밑줄은 기울임이 아니에요. 이 변환기는 낱말 중간의 밑줄은 그대로 둬요. - 줄바꿈이 사라져요 — 마크다운은 한 줄 바꿈을 같은 문단으로 이어요. 줄 끝에 공백 두 칸을 넣거나 빈 줄로 문단을 나누세요.
변환한 HTML을 쓸 때 알아둘 점
- 제목은 h1 하나 — 웹 페이지에서는 보통 페이지 제목에만 h1을 쓰고 본문 소제목은 h2부터 써요. 마크다운에서
#하나로 시작했다면, 붙여넣을 곳에 이미 h1이 있는지 확인하세요. - 스타일은 따로 — 변환 결과는 태그만 있고 디자인(CSS)이 없어요. 붙여넣은 곳의 스타일에 따라 표 테두리나 코드 배경이 달라져요. 이메일은 외부 CSS를 막는 클라이언트가 많아 표나 코드 블록 스타일을 인라인으로 직접 넣어야 할 수 있어요.
- 이미지 alt —
에서 설명이 비어 있으면 접근성과 검색에 불리해요. 이미지가 무엇인지 한 문장으로 쓰세요. - 외부 링크 — 광고·제휴 링크는
rel속성이 필요할 수 있어요. 이 변환기는 속성을 붙이지 않으니 붙여넣은 뒤 필요하면 직접 추가하세요. - 코드 블록 언어 —
```js처럼 언어를 쓰면class="language-js"가 붙어요. 하이라이트 라이브러리는 이 클래스를 읽어서 색을 입혀요.
마크다운과 HTML, 언제 어느 쪽이 편할까
| 상황 | 더 편한 쪽 |
|---|---|
| 빠르게 글을 쓰고 서식은 단순할 때 | 마크다운 |
| 개발 문서, README, 노트 앱 | 마크다운 |
| 색, 칸 병합, 정렬 같은 세밀한 디자인 | HTML |
| 이메일 템플릿, 기존 웹페이지 일부 교체 | 마크다운으로 쓰고 HTML로 변환 |
마크다운은 읽기 쉬운 평문으로 서식을 표현하는 방식이라 글쓰기에 집중하기 좋고, 최종 결과물이 HTML이어야 할 때 이 변환기로 한 번에 바꾸면 돼요.
변환은 전부 이 브라우저 안에서 일어나고 입력한 글은 서버로 보내지 않아요. 마크다운 표만 만들려면 마크다운 표 생성기가, 글자 수와 줄 수는 글자 수 세기가 편해요. 마크다운 문법의 원문 규격은 CommonMark 명세에서 볼 수 있어요.