HTML Markdown 변환기

HTML을 GFM Markdown으로 옮기고, 빠진 곳까지 보여 줍니다

HTML Markdown 변환기는 HTML의 제목·문단·목록·표·코드·링크를 GitHub Flavored Markdown(GFM) 문법으로 바꾸는 도구입니다. <h2>는 ##로, <strong>은 **로, 링크는 [글자](주소)로, 표는 |로 칸을 나눈 Markdown 표로 바뀝니다. 태그를 지워 글자만 남기는 것이 아니라 문서의 뼈대를 그대로 옮기므로, 결과를 GitHub README나 Markdown을 쓰는 메모 앱에 바로 붙여 넣을 수 있습니다.

HTML 코드를 붙여 넣어도 되고, 웹 페이지나 구글 문서에서 복사한 글을 그대로 붙여 넣어도 됩니다. 화면에서 복사한 글은 브라우저가 함께 넘겨주는 HTML 서식으로 받아 변환합니다. 결과 아래에는 문서가 어떤 블록 순서로 옮겨졌는지 보여 주는 구조 지도와, 병합 셀·상대 주소·삽입 영상처럼 Markdown에 그대로 담지 못해 빼거나 다르게 적은 곳을 모은 변환 기록이 나옵니다.

HTML을 Markdown으로 바꾸는 상황

• 블로그·CMS 글을 다른 곳으로 옮길 때: 워드프레스 같은 CMS의 글은 HTML로 저장되어 있습니다. 정적 사이트 생성기나 Markdown 기반 메모 앱으로 옮기려면 제목·목록·링크를 다시 입력하지 않고 Markdown으로 바꾸는 편이 빠릅니다.
• 웹 문서를 README나 개발 문서로 정리할 때: 설치 방법이 적힌 웹 페이지를 복사해 붙이면 코드 블록의 언어 표시(language-bash)와 할 일 체크 상자까지 GFM 문법으로 옮겨집니다.
• 구글 문서·회의록을 Markdown 노트로 옮길 때: 문서 편집기에서 복사한 글은 굵게·기울임을 태그가 아니라 style 값으로 적는 경우가 많습니다. 이 변환기는 그 값을 읽어 **굵게**와 *기울임*으로 옮깁니다.
• AI 도구나 메모에 웹 글을 짧게 넣을 때: class·style 같은 꾸밈 속성과 스크립트를 걷어 내면 같은 내용이 훨씬 짧아집니다. 위 예시의 '문서 편집기에서 복사'는 1,085바이트가 258바이트로, '뉴스레터 메일'은 1,033바이트가 390바이트로 줄었습니다.
• 뉴스레터·메일을 보관할 때: 메일 HTML은 칸 나누기용 표와 열람 확인용 1×1 그림이 많습니다. 배치용 표는 풀어서 글로 옮기고 추적 그림은 빼므로 읽을 수 있는 문서만 남습니다.

쓰는 법

1. HTML 넣기: HTML 칸에 코드를 붙여 넣거나, 웹 페이지에서 원하는 부분을 선택해 복사(Ctrl+C)한 뒤 붙여 넣습니다. HTML·HTM 파일은 '파일 열기'로 고르거나 칸에 끌어다 놓습니다. 예시가 그대로 있을 때 붙여 넣으면 예시를 통째로 바꿉니다.
2. 붙여 넣은 형식 확인: 화면에서 복사한 글은 HTML 서식으로, 코드 편집기에서 복사한 HTML 코드는 글자 그대로 들어갑니다. 원하는 쪽이 아니면 상태 줄의 '글자만 붙이기'나 '화면 서식으로 붙이기'를 누릅니다.
3. Markdown 모양 고르기: 제목 기호(# 또는 밑줄), 목록 기호(- * +), 강조 기호, 코드 블록 울타리, 링크 방식, 표 형식을 고릅니다. 바꾸는 즉시 결과가 다시 적힙니다.
4. 기준 주소 넣기: /images/a.jpg 같은 상대 주소가 있으면 원래 페이지 주소를 기준 주소 칸에 넣어 전체 주소로 바꿉니다. HTML 안에 base·canonical·og:url이 있으면 자동으로 들어갑니다.
5. 확인하고 가져가기: 미리 보기에서 모양을 보고, 구조 지도의 띠를 눌러 결과의 해당 부분으로 이동하며, 변환 기록을 읽습니다. 'Markdown 복사'나 '.md 저장'으로 가져갑니다. 결과 칸에서 Ctrl+Enter(⌘Enter)를 눌러도 복사됩니다.

태그별로 이렇게 바뀝니다

기본 설정(제목 #, 목록 -, 강조 *, 코드 ```, 링크 문장 안, Markdown 표)에서 이 도구가 실제로 내놓는 결과입니다.

한국어 문서에서 Markdown이 깨지는 네 자리

Markdown 기호는 앞뒤 글자에 따라 먹기도 하고 먹지 않기도 합니다. 한국어는 낱말 바로 뒤에 조사가 붙고 범위를 물결표로 쓰며 날짜를 '2026. 10. 22.'처럼 적기 때문에, 기호를 단순하게 바꾸기만 하면 아래처럼 깨집니다. '그대로 적으면' 칸은 CommonMark 0.31.2 구현(markdown-it)과 GFM 구현(marked)으로 렌더해 확인한 결과입니다.

반대로 꼭 필요하지 않은 역슬래시는 붙이지 않습니다. snake_case처럼 낱말 안의 밑줄은 강조가 되지 않으므로 그대로 두고, C#처럼 줄 머리가 아닌 #도 그대로 둡니다. 강조 기호를 _로 고른 경우에는 '__중요__합니다'처럼 낱말 안에서 먹지 않는 자리만 **로 바꿔 적습니다.

웹 화면과 구글 문서에서 붙여 넣을 때

브라우저에서 글을 복사하면 클립보드에는 보이는 글자(text/plain)와 화면 서식(text/html)이 함께 담깁니다. 이 변환기는 붙여 넣기 순간 두 가지를 모두 읽고, 글자 쪽에 태그가 보이면 HTML 코드를 복사한 것으로, 태그가 없으면 화면을 복사한 것으로 판단합니다. 그래서 웹 페이지를 드래그해 복사하면 그 부분의 HTML이 들어오고, 코드 편집기에서 HTML 코드를 복사하면 편집기의 색칠 서식이 아니라 코드 글자가 들어옵니다.

구글 문서는 복사한 범위 전체를 <b style="font-weight:normal" id="docs-internal-guid-…">로 감싸고, 실제 굵게와 기울임은 span의 font-weight:700·font-style:italic으로 적습니다. 감싼 b 태그를 그대로 굵게로 읽으면 붙여 넣은 글 전체가 **…**로 묶이는 문제가 여러 편집기에서 보고되었습니다. 이 변환기는 font-weight:normal인 b 태그를 굵게로 보지 않고, 안쪽 span의 style 값으로 굵게·기울임·취소선·위첨자를 옮깁니다. 위 예시 '문서 편집기에서 복사'가 그런 HTML입니다.

표를 옮길 때 알아 둘 것

GFM 표는 첫 줄이 머리글이고, 둘째 줄에 ---로 된 구분 줄이 와야 합니다. 구분 줄의 콜론 위치가 정렬입니다: :---는 왼쪽, ---:는 오른쪽, :---:는 가운데입니다. 이 변환기는 HTML의 align 속성이나 style의 text-align에서 정렬을 가져오고, 한글을 두 칸으로 세어 원문 Markdown에서도 열이 맞도록 빈칸을 채웁니다(한 열이 40칸을 넘으면 채우지 않습니다).

• 칸 안의 |: 칸 경계와 헷갈리지 않도록 \|로 적습니다. GFM 명세에 따라 코드나 링크 안의 |도 똑같이 적어야 합니다.
• 칸 안의 여러 줄: GFM 표 칸에는 문단·목록 같은 블록을 넣을 수 없어 줄을 <br>로 잇습니다.
• 병합 셀: Markdown 표는 셀을 합칠 수 없습니다. 기본값은 합쳐진 자리를 빈 칸으로 펼치고, 표 설정을 HTML로 바꾸면 class·style을 걷어 낸 HTML 표를 rowspan·colspan과 함께 그대로 둡니다.
• 머리글 없는 표: 머리글 줄은 꼭 있어야 하므로 첫 줄을 머리글로 씁니다. 변환 기록에 개수가 나옵니다.
• 배치용 표: role="presentation"이 붙었거나, 표 안에 표가 있거나, 열이 하나뿐인 표는 데이터가 아니라 칸 나누기용으로 보고 칸의 내용을 차례로 풀어 글로 옮깁니다. 메일 HTML에서 흔합니다.

Markdown 모양 고르는 기준

Markdown은 얼마나 가벼워지나

같은 내용이라도 꾸밈 속성과 스크립트, 배치용 표를 걷어 내면 크기가 크게 줄어듭니다. 아래는 이 도구의 예시를 열었을 때 크기 막대에 나오는 값(UTF-8 바이트)입니다. style 값이 많은 문서 편집기 HTML과 메일 HTML이 가장 많이 줄었습니다.

자주 틀리는 경우

• 페이지 소스 전체를 넣고 메뉴까지 옮겨지는 경우: 소스 보기 코드에는 상단 메뉴·바닥글 링크도 들어 있습니다. 본문만 필요하면 화면에서 본문 부분만 선택해 복사한 뒤 붙여 넣으세요.
• 상대 주소를 그대로 둔 채 다른 곳에 올리는 경우: /uploads/a.jpg는 원래 사이트에서만 열립니다. 기준 주소를 넣어 전체 주소로 바꾸세요.
• 미리 보기에서 그림이 보이지 않는다고 오해하는 경우: 미리 보기는 개인 정보와 속도를 위해 그림을 불러오지 않고 '그림' 표시와 대체 텍스트만 보여 줍니다. 결과의 ![설명](주소)는 정상입니다.
• Markdown 표의 빈 칸을 빠진 값으로 착각하는 경우: 병합 셀을 펼친 자리일 수 있습니다. 변환 기록에 '병합 셀'이 있으면 원본 표와 비교하거나 표를 HTML로 두세요.
• 줄 끝 공백 두 칸을 지우는 경우: 줄바꿈(br)은 줄 끝 공백 두 칸으로 적습니다. 저장할 때 줄 끝 공백을 자동으로 지우는 편집기를 쓰면 줄바꿈이 사라집니다.
• HTML 태그를 받지 않는 곳에 붙이는 경우: 위첨자·키보드·접기와 HTML 표, 조사 앞 굵게는 태그로 적습니다. HTML을 지우는 편집기라면 그 자리의 글자는 남지만 꾸밈이 빠집니다.

한계

• Markdown은 문서 구조를 적는 형식이라 CSS의 색·글꼴·여백·배치는 옮기지 않습니다.
• 웹 주소(URL)를 넣어 페이지를 가져오지 않습니다. 로그인 뒤에만 보이거나 스크립트가 나중에 채우는 내용은 화면에서 복사해 붙여 넣어야 합니다.
• 그림·영상 파일은 .md에 들어가지 않고 주소만 남습니다. data: 주소로 글 속에 넣은 그림은 결과가 지나치게 길어져 뺍니다.
• iframe·video·audio는 주소 링크로만 남고, 양식(입력 칸·버튼)과 SVG 그림은 옮기지 않습니다.
• 워드 프로세서가 목록을 글머리 글자가 붙은 문단으로 적은 HTML은 목록이 아니라 문단으로 옮겨질 수 있습니다.
• 입력은 2 MB까지 읽습니다. 결과가 GitHub에서 어떻게 보이는지는 GFM 명세 기준이며, 편집기마다 HTML 태그 처리와 줄바꿈 표시는 다를 수 있습니다.

출처

기준: Markdown 문법은 GFM 0.29-gfm 명세와 CommonMark 0.31.2 명세, 브라우저 동작은 MDN 문서를 2026년 10월 22일에 확인했습니다. 한국어 표의 렌더 결과는 markdown-it(CommonMark)과 marked(GFM)로, 위 표의 Markdown은 이 도구의 출력으로 확인했습니다.

• 01GitHub Flavored Markdown Spec 0.29-gfm4.10 표(구분 줄·정렬·칸 안 \|는 코드 안에서도 — 예시 200·블록 금지), 5.3 할 일 목록, 6.5 취소선(물결표 하나 또는 둘, 예시 491), 6.11 걸러지는 HTML 태그
• 02CommonMark Spec 0.31.2강조의 좌우 경계(flanking) 규칙, 역슬래시 이스케이프, 순서 목록 번호(9자리까지), 줄바꿈
• 03MDN — DOMParser.parseFromString()text/html로 읽은 문서의 script는 실행되지 않음
• 04MDN — Element: paste eventclipboardData.getData()로 붙여 넣는 내용을 읽고 기본 동작을 바꾸는 방법
• 05RFC 7763 — The text/markdown Media Type.md 파일의 형식 이름 text/markdown(2016년 3월)
• 06MarkText #4688 — Pasting from Google Docs makes the whole paragraph bold구글 문서의 docs-internal-guid b 래퍼와 span font-weight 값

자주 묻는 질문

함께 쓰는 도구