본문 바로가기

HTML → Markdown 변환기

브라우저 처리

HTML 코드를 Markdown으로 바꿉니다. 제목, 굵게·기울임, 링크·이미지, 순서·하위 목록, 코드 블록, 표, 인용을 변환하고 script·style은 지웁니다.

사용 전 확인
  • 파일·이미지·문서 처리 도구는 브라우저 안에서 처리되더라도 원본에 개인정보나 민감 정보가 포함될 수 있습니다. 공유·제출 전 원본과 결과를 한 번 더 확인하세요.
도구 실행입력 후 결과 확인
HTML → Markdown 변환기 샘플 실행

웹 페이지나 HTML 메일, 예전 CMS 글을 Markdown 기반 블로그나 노션, GitHub로 옮길 때 태그를 하나하나 지우고 기호로 바꾸는 일은 시간이 많이 듭니다. 이 변환기는 HTML 코드를 붙여 넣으면 같은 구조의 Markdown으로 바꿔 줍니다.

브라우저 처리
샘플 결과
# 안내

Hello **world** and [link](https://a.com).  
다음 줄

3. 셋
4. 넷
   - 하위

```js
const a = 1;
```

| 이름 | 값 |
| --- | --- |
| A | 1 |
자바스크립트가 활성화되면 이 영역이 실제 입력, 실행, 결과 패널로 바뀝니다.

HTML → Markdown 변환기 사용 가이드

웹 페이지나 HTML 메일, 예전 CMS 글을 Markdown 기반 블로그나 노션, GitHub로 옮길 때 태그를 하나하나 지우고 기호로 바꾸는 일은 시간이 많이 듭니다. 이 변환기는 HTML 코드를 붙여 넣으면 같은 구조의 Markdown으로 바꿔 줍니다.

h1~h6은 #, strong·em·del은 **·*·~~, a·img는 [글](주소)·![설명](주소), ul·ol은 - 와 1. 목록(하위 목록은 들여쓰기), pre는 ```언어 코드 블록, table은 | 표, blockquote는 > 인용, hr은 ---로 바뀝니다. HTML 소스의 줄바꿈과 들여쓰기 공백은 한 칸으로 합칩니다.

script, style, noscript, template 안의 내용은 지우며, 변환은 브라우저 안에서만 이뤄집니다. span, font 같은 꾸밈 태그는 글자만 남습니다.

사용 방법

  1. 'HTML' 칸에 변환할 HTML 코드를 붙여 넣습니다. 페이지 전체를 넣어도 body 안의 내용만 변환합니다.
  2. '실행'을 누르면 Markdown 결과가 나옵니다.
  3. 결과를 Markdown 소스·렌더링 비교기 등으로 확인한 뒤 '결과 복사'해 옮길 곳에 붙여 넣습니다.

예시: 목록·코드·표가 섞인 글

입력
<h1>안내</h1>
<p>Hello <strong>world</strong> and <a href="https://a.com">link</a>.<br>다음 줄</p>
<ol start="3"><li>셋</li><li>넷<ul><li>하위</li></ul></li></ol>
<pre><code class="language-js">const a = 1;</code></pre>
<table><tr><th>이름</th><th>값</th></tr><tr><td>A</td><td>1</td></tr></table>
결과
# 안내

Hello **world** and [link](https://a.com).  
다음 줄

3. 셋
4. 넷
   - 하위

```js
const a = 1;
```

| 이름 | 값 |
| --- | --- |
| A | 1 |

<br>은 줄 끝 공백 두 칸으로, ol의 start="3"은 3번부터 시작하는 번호로, code의 language-js는 ```js로 바뀝니다.

이럴 때 쓰면 좋아요

  • 워드프레스 등 HTML 글을 Markdown 블로그로 옮길 때
  • 웹 페이지의 표나 목록을 노션·GitHub 문서로 가져올 때
  • HTML 메일 템플릿의 본문을 Markdown 원고로 정리할 때
  • 에디터가 만든 HTML을 사람이 읽기 쉬운 원문으로 바꿀 때

문제가 생겼을 때

표 안의 줄바꿈이 사라짐

Markdown 표는 한 칸을 한 줄로만 쓸 수 있어 칸 안의 줄바꿈과 목록은 한 줄로 합쳐집니다. 긴 내용은 표 밖 본문으로 옮기세요.

글자 색, 정렬, 크기가 사라짐

Markdown에는 색과 크기 표기가 없어 style과 font 꾸밈은 지워집니다. 꼭 필요하면 옮길 곳의 편집기에서 다시 적용하세요.

활용 팁

  • 웹 페이지 전체를 넣으면 메뉴와 바닥글까지 변환됩니다. 개발자 도구로 본문 영역(article 등)의 HTML만 복사해 넣으면 결과가 깔끔합니다.
  • 변환 후 표 칸 너비를 맞추려면 결과의 표 부분을 Markdown 표 포맷터에 넣으세요.

자주 묻는 질문

이미지 파일도 함께 옮겨지나요?

아니요. ![설명](주소)로 주소만 남습니다. 상대 경로 이미지라면 옮길 곳에 같은 파일을 올리고 주소를 맞추세요.

HTML 안의 스크립트는 실행되나요?

아니요. script, style 같은 태그는 내용째 지운 뒤 변환하고, 붙여 넣은 HTML을 화면에 띄우지도 않습니다.

하위 목록은 몇 칸 들여쓰나요?

위 항목의 글자가 시작하는 위치에 맞춰 들여씁니다. '- ' 항목 아래는 2칸, '1. ' 항목 아래는 3칸이라 대부분의 Markdown 편집기에서 하위 목록으로 보입니다.