WebTools

Useful Tools & Utilities to make life easier.

Markdown To HTML

마크다운 텍스트를 웹용 HTML 코드로 변환합니다.

Markdown to HTML 변환이란?

마크다운(Markdown)#, **, - 같은 간단한 기호로 글의 구조를 적는 표기법입니다. 쓰기는 편하지만, 웹페이지나 이메일 서식, 게시판 HTML 편집기에 그대로 넣으면 기호가 글자 그대로 보일 뿐 제목이나 목록으로 표시되지 않습니다. 이 도구는 마크다운으로 쓴 글을 브라우저가 이해하는 HTML 코드로 바꿔 줍니다.

마크다운으로 초안을 빠르게 쓴 다음, 워드프레스·티스토리·자체 홈페이지처럼 HTML을 입력해야 하는 곳에 옮길 때 유용합니다. 변환된 HTML은 사람이 읽기 좋게 들여쓰기(2칸)로 정리되어 나오므로, 결과를 그대로 붙여넣어도 되고 필요한 부분만 손봐서 사용할 수도 있습니다.

사용 방법

  1. 위쪽 편집기에 마크다운으로 작성한 글을 붙여넣습니다. 제목은 #, 굵게는 **처럼 마크다운 문법을 그대로 쓰면 됩니다.
  2. 아래 변환 버튼을 누르면 정리된 HTML 코드가 결과 편집기에 나타납니다.
  3. 결과 오른쪽 위의 복사 버튼으로 HTML을 클립보드에 담아 원하는 곳에 붙여넣습니다.

결과 편집기는 읽기 전용이라 실수로 지워질 걱정이 없습니다. 입력한 마크다운은 접속한 분의 브라우저 안에서만 HTML로 바뀌고 서버로 전송되지 않으므로, 공개 전 원고도 안심하고 넣을 수 있습니다.

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

대표적인 마크다운 기호와 변환되는 HTML 태그를 짝지어 보면 다음과 같습니다.

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

표, 취소선, 할 일 목록(체크박스) 같은 확장 문법도 인식하도록 설정되어 있어, 마크다운 표를 넣으면 <table> 태그로 이루어진 HTML 표로 바꿔 줍니다.

자주 묻는 질문

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

네, 방향이 반대인 HTML → 마크다운 변환 도구를 따로 준비해 두었습니다. 웹에서 복사한 HTML 본문을 마크다운으로 정리하고 싶을 때 그 도구를 사용하시면 됩니다.

변환한 HTML을 홈페이지에 넣으면 바로 보이나요?

본문 구조를 나타내는 태그(<h1>·<p>·<ul> 등)로 변환되므로, HTML을 지원하는 게시판이나 페이지 본문 영역에 붙여넣으면 제목과 목록이 정상적으로 표시됩니다. 다만 글자 색이나 여백 같은 디자인은 그 사이트의 스타일(CSS)에 따라 달라집니다.

결과 HTML의 들여쓰기가 마음에 들지 않으면 어떻게 하나요?

변환 결과는 2칸 들여쓰기로 정리되어 나옵니다. 배포 전에 파일 크기를 더 줄이고 싶다면 HTML 포맷터로 들여쓰기를 다시 다듬거나, 압축 도구로 공백을 걷어낼 수 있습니다.

마크다운 문법을 잘 몰라도 쓸 수 있나요?

제목 앞에 #, 강조할 단어를 **로 감싸는 정도만 알아도 대부분의 글을 작성할 수 있습니다. 위의 대응 표를 참고해 조금씩 익히면, 태그를 일일이 쓰는 것보다 훨씬 빠르게 문서를 만들 수 있습니다.