HTML-Markdown 변환기
HTML을 붙여넣으면 구조가 유지된 Markdown을 얻을 수 있습니다. 제목, 굵게와 기울임, 링크, 이미지, 목록, 인용문, 코드 블록, 간단한 표가 대상입니다. 스크립트, 스타일, 레이아웃 래퍼는 버려지며, 결과가 얼마나 짧아졌는지도 페이지에 표시됩니다. 무료이며 회원가입이 필요 없고, HTML은 브라우저에서 파싱되며 업로드되지 않습니다.
HTML-Markdown 변환기 사용 방법
- 1. HTML을 붙여넣으세요. 조각이든 전체 페이지든 모두 됩니다. 본문(body)만 변환됩니다.
- 2. Markdown으로 변환을 누르세요. 아래에 Markdown이 나타나며, 세 개의 카운터가 HTML 문자 수, Markdown 문자 수, 크기 감소율을 보여 줍니다.
- 3. 결과를 확인하세요. 원본과 비교해 읽어 보세요. 특히 표와 중첩된 목록은 아래 한계를 참고하세요.
- 4. 복사하세요. Markdown 복사는 텍스트를 클립보드에 넣으며, README, 정적 사이트 생성기, 메모 앱에 바로 쓸 수 있습니다.
각 HTML 요소가 되는 형태
도구는 브라우저 자체의 HTML 파서로 HTML을 파싱하고 트리를 순회하므로, 잘못된 마크업은 브라우저가 고치는 방식대로 고쳐집니다. 그다음 각 요소를 대응하는 Markdown으로 바꿉니다:
| HTML | Markdown |
|---|---|
h1부터 h6 | #부터 ######까지, 뒤에 제목 텍스트 |
p | 빈 줄로 구분된 문단 |
br, hr | 줄바꿈. --- |
strong, b | **굵게** |
em, i | *기울임* |
code | 백틱 한 개로 감싼 텍스트 |
pre | 백틱 세 개로 된 펜스 블록, 언어 표시 없음 |
a | [텍스트](주소) |
img |  |
ul, ol | - 글머리 기호, 또는 1부터 다시 번호 매긴 1. 2. 3.. 하위 목록은 단계마다 공백 두 칸씩 들여씁니다 |
blockquote | 각 줄 앞에 > |
table | 파이프 표이며, 첫 행이 헤더가 됩니다 |
div, span, section, 그 밖의 모든 것 | 래퍼로 벗겨짐: 태그는 사라지고 내용은 남습니다 |
script, style, head, meta, link, title, noscript, template, iframe | 내용과 함께 제거됩니다 |
실제 예시
HTML
<h1>Citation Basics</h1><p>Use <strong>APA</strong> or <em>MLA</em>; see the <a href="https://apastyle.apa.org">APA site</a>.</p><ul><li>Author</li><li>Year<ul><li>Month</li></ul></li></ul><table><tr><th>Style</th><th>Year</th></tr><tr><td>APA</td><td>7th</td></tr></table>
Markdown
# Citation Basics 제목, 그 뒤 문단 Use **APA** or *MLA*; see the [APA site](https://apastyle.apa.org)., 목록 - Author, - Year와 들여쓴 - Month, 그리고 --- 구분선과 한 행(APA, 7th)이 있는 두 열 파이프 표.
카운터
HTML 문자 273개, Markdown 문자 159개, 42% 감소.
Markdown은 HTML이 표현할 수 있는 모든 것을 표현하지는 못하며, 그것이 Markdown의 요점입니다. 출력은 문서의 구조이고, 표현은 담지 않습니다.
확인할 한계
- 표는 평평해집니다. 각 셀은 일반 텍스트로 줄어들므로 셀 안의 링크와 강조는 사라지고, 파이프는 이스케이프되며, 병합된 셀은 이해하지 못합니다. 파이프 표는 GitHub Flavored Markdown의 확장이며 핵심 CommonMark에는 없으니, 목적지가 지원하는지 확인하세요.
- 일부 인라인 태그는 버려집니다. 밑줄, 취소선, 위첨자, 아래첨자는 여기서 Markdown으로 표현할 수 없으므로, 그 텍스트는 서식 없이 남습니다.
- 특수 문자는 이스케이프되지 않습니다. 텍스트의 별표나 밑줄은 그대로 남으며, Markdown 렌더러가 강조로 읽을 수 있습니다.
- 중첩된 번호 목록은 단계마다 공백 두 칸씩 들여쓰는데, 대부분의 렌더러는 이를 받아들이지만 일부는
1.표시 아래에서 세 칸을 원합니다. - 링크와 이미지는 원래 주소를 유지하므로, 상대 경로는 상대 경로로 남습니다.
어떤 도구가 필요한가요?
HTML에서 Markdown으로 옮길 때 구조를 유지하려면 이 페이지를 쓰세요. 단어만 필요하다면 HTML 태그 제거기가 일반 텍스트를 출력합니다. 반대 방향으로는 마크다운을 HTML로가 Markdown을 렌더링하고, 마크다운을 텍스트로는 Markdown을 일반 텍스트로 벗겨 냅니다. 변환 전에 HTML을 정리하려면 HTML 포맷터를 쓰세요.
자주 묻는 질문
- 어떤 HTML 요소가 Markdown으로 변환되나요?
- 제목, 문단, 줄바꿈, 가로줄, 굵게, 기울임, 인라인 코드, 코드 블록, 링크, 이미지, 순서 있는 목록과 순서 없는 목록, 인용문, 간단한 표입니다. 위의 표가 정확한 대응 관계를 보여 줍니다.
- 중첩된 목록도 처리하나요?
- 네. 하위 목록은 단계마다 공백 두 칸씩 들여쓰며, 순서 있는 목록은 1부터 다시 번호가 매겨집니다. HTML에서
start="5"처럼 다른 숫자로 시작하는 목록도 1부터 다시 번호가 매겨집니다. - 변환기가 인식하지 못하는 태그는 어떻게 되나요?
- 래퍼로 벗겨집니다. 태그는 버려지고 텍스트는 남습니다. div나 span은 흔적 없이 사라지고, script, style 같은 요소는 내용과 함께 제거됩니다.
- HTML 표도 변환할 수 있나요?
- 간단한 표는 됩니다. 첫 행을 헤더로 한 파이프 표가 됩니다. 병합된 셀, 중첩된 표, 셀 안의 링크나 서식은 보존되지 않습니다.
- 웹페이지 전체에도 쓸 수 있나요?
- 네. 다만 본문 전체를 변환하므로 탐색 메뉴와 바닥글도 일반 텍스트와 링크로 포함됩니다. 글 하나를 변환하려면 글의 HTML만 붙여넣으세요.
- Markdown이 원래 페이지보다 밋밋해 보이는 이유는 무엇인가요?
- Markdown은 제목, 강조, 링크, 목록 같은 구조를 기록하며, 색상, 글꼴, 레이아웃은 기록하지 않습니다. CSS, 양식, 삽입된 위젯은 설계상 제외됩니다.
- 제 HTML이 서버로 업로드되나요?
- 아니요. 변환은 브라우저 내장 DOMParser를 사용해 브라우저에서 이루어집니다. 붙여넣은 HTML의 스크립트는 실행되지 않으며, 붙여넣은 내용은 기기 밖으로 나가지 않습니다.