WebTools

Useful Tools & Utilities to make life easier.

HTML To Markdown

HTML 코드를 간결한 마크다운 문법으로 변환합니다.

HTML to Markdown 변환이란?

HTML은 <h1>, <strong>, <a href>처럼 태그로 문서 구조를 표현하는 언어입니다. 반면 마크다운(Markdown)#, **, [텍스트](주소)처럼 짧은 기호로 같은 구조를 나타내는 훨씬 간결한 표기법입니다. 이 도구는 태그로 빼곡한 HTML 코드를 읽어, 사람이 보고 쓰기 편한 마크다운 문법으로 바꿔 줍니다.

웹페이지에서 복사한 본문, 워드프레스나 티스토리에서 내보낸 글, 이메일 서식 코드처럼 HTML로 된 글을 깃허브 리드미(README)나 노션, 블로그 마크다운 편집기로 옮길 때 특히 유용합니다. 태그를 하나하나 지우고 다시 쓰는 수작업 없이, 붙여넣고 버튼 한 번이면 마크다운 초안이 만들어집니다.

사용 방법

  1. 위쪽 편집기에 변환할 HTML 코드를 붙여넣습니다. 웹페이지 소스나 서식이 담긴 코드 조각을 그대로 넣으면 됩니다.
  2. 아래의 변환 버튼을 누르면 잠시 후 마크다운 결과가 나타납니다.
  3. 결과 편집기 오른쪽 위의 복사 버튼으로 마크다운을 클립보드에 담아 원하는 곳에 붙여넣습니다.

결과 편집기는 읽기 전용이라 실수로 지워질 걱정이 없습니다. 원본 HTML을 조금 고쳐서 다시 변환하고 싶다면 위쪽 편집기 내용만 수정한 뒤 변환 버튼을 다시 누르면 됩니다. 입력한 HTML은 접속한 분의 브라우저 안에서만 처리되고 서버로 전송되지 않으니, 외부에 공개하기 곤란한 코드도 안심하고 넣을 수 있습니다.

어떤 태그가 어떤 기호로 바뀌나요?

주요 HTML 태그가 마크다운으로 어떻게 대응되는지 정리하면 다음과 같습니다.

HTML (입력)마크다운 (출력)의미
<h1>제목</h1># 제목가장 큰 제목
<h2>소제목</h2>## 소제목둘째 단계 제목
<strong>굵게</strong>**굵게**굵은 글씨
<em>기울임</em>*기울임*기울인 글씨
<a href="/tool/qr-generator">링크</a>[링크](/tool/qr-generator)하이퍼링크
<li>항목</li>- 항목목록 항목

표 태그(<table>)와 취소선, 할 일 목록(체크박스) 같은 확장 문법도 함께 변환되도록 설정되어 있어, 단순한 문단뿐 아니라 표가 들어간 문서도 마크다운 표 문법으로 바꿔 줍니다.

자주 묻는 질문

반대로 마크다운을 HTML로 바꿀 수도 있나요?

네, 방향만 반대인 마크다운 → HTML 변환 도구를 따로 준비해 두었습니다. 마크다운으로 쓴 글을 웹페이지에 넣을 HTML로 바꾸고 싶을 때 그 도구를 사용하시면 됩니다.

변환 결과가 원본과 조금 다를 수 있나요?

마크다운은 HTML보다 표현 범위가 좁기 때문에, 복잡한 표나 특수한 서식은 완벽히 옮겨지지 않을 수 있습니다. 변환 후에는 제목 단계, 링크 주소, 목록 들여쓰기 정도를 눈으로 한 번 확인하고 필요한 부분만 손보는 것을 권합니다.

스타일(색상·글꼴)이나 <div> 같은 태그는 어떻게 되나요?

마크다운에는 글자 색이나 글꼴 같은 시각적 서식을 담는 문법이 없습니다. 그래서 style 속성이나 의미 없는 <div>·<span>은 대체로 사라지고, 제목·강조·링크·목록처럼 구조를 나타내는 부분만 마크다운으로 남습니다. 이것이 마크다운의 장점이자 한계입니다.

변환한 마크다운을 다시 웹에 쓰려면 어떻게 하나요?

마크다운을 깃허브·노션처럼 마크다운을 지원하는 곳에 넣으면 그곳이 알아서 화면에 표시해 줍니다. 직접 HTML이 필요하다면 위에서 안내한 마크다운 → HTML 도구로 다시 변환하면 됩니다.