HTML ↔ Markdown 변환

HTML과 마크다운을 서로 변환합니다.

README를 블로그에 옮기려는데 ##이 그대로 보이거나, 반대로 웹에서 복사한 글에 <div> 태그가 잔뜩 딸려오는 일이 있습니다. 두 표기법은 목적이 달라서 그대로 붙여넣으면 서식이 깨집니다.

이 도구는 마크다운과 HTML을 양방향으로 바꿔줍니다. 문서를 옮길 때, 에디터가 요구하는 형식이 다를 때 중간 단계로 쓰면 편합니다.

어떻게 계산되나요

두 방향, 두 버튼

입력창에 내용을 붙여넣고 방향에 맞는 버튼을 누릅니다. Markdown → HTML은 마크다운 기호를 HTML 태그로 바꾸고, HTML → Markdown은 반대로 태그를 마크다운 기호로 되돌립니다. 결과는 아래 칸에 나오며 결과 복사로 클립보드에 담을 수 있습니다.

변환 규칙

Markdown → HTML은 GFM(GitHub Flavored Markdown) 기준이라 표·할 일 목록·취소선을 인식하고, 엔터 한 번도 줄바꿈(<br>)으로 살립니다. HTML → Markdown은 제목을 # 방식(ATX)으로, 코드 블록을 백틱 세 개로 감싸는 방식으로 씁니다.

주의할 점

마크다운에 대응하는 표현이 없는 요소(<div>, <span>, 인라인 style, 셀 병합 등)는 그대로 남거나 사라질 수 있습니다. 변환은 브라우저 안에서만 이뤄지므로 입력한 내용이 서버로 전송되지는 않습니다.

용어 정리

GFM: GitHub에서 쓰는 마크다운 확장 문법. 표, 할 일 목록, 취소선, 자동 링크 등을 지원합니다.
ATX 제목: `#`, `##`처럼 샵 기호로 제목 단계를 표시하는 방식. 밑줄로 표시하는 Setext 방식과 구분됩니다.
펜스 코드 블록: 백틱 세 개로 코드를 감싸는 표기. 들여쓰기 4칸 방식보다 언어 지정이 쉽습니다.
인라인 HTML: 마크다운 문서 안에 직접 써 넣은 HTML 태그. 변환 시 그대로 통과되는 경우가 많습니다.

자주 묻는 질문

변환한 HTML을 그대로 웹페이지에 붙여도 되나요?

본문 조각(`<h2>`, `<p>` 등)만 만들어지므로 페이지 틀과 CSS는 따로 필요합니다. 외부에서 받은 문서를 변환했다면 스크립트나 이벤트 속성이 섞이지 않았는지 확인한 뒤 사용하세요.

표가 제대로 변환되지 않아요

Markdown → HTML은 GFM 표 문법(`| 열 | 열 |`과 구분선)을 지켜야 인식합니다. 반대 방향에서는 셀 병합(rowspan·colspan)처럼 마크다운에 없는 구조를 표현할 수 없어 형태가 무너질 수 있습니다.

붙여넣은 내용이 서버에 저장되나요?

변환은 브라우저에서 실행되며 입력한 내용은 전송되거나 저장되지 않습니다. 다만 공용 PC라면 사용 후 입력창을 비우는 편이 안전합니다.

줄바꿈이 의도와 다르게 처리됩니다

이 도구는 한 번의 엔터도 줄바꿈으로 살리도록 설정돼 있습니다. 문단을 나누려면 빈 줄을 하나 넣고, 줄만 바꾸려면 엔터를 한 번 치면 됩니다.