도구상자FREE ONLINE TOOLS
← 모든 도구

마크다운 → HTML 변환

왼쪽에 마크다운을 입력하면 오른쪽에 실시간 미리보기가 나타나고, 변환된 HTML 코드를 복사할 수 있습니다.

사용법
  1. 왼쪽 입력창에 마크다운 문서를 작성하거나 붙여넣습니다.
  2. 오른쪽 미리보기가 입력과 동시에 갱신되어 최종 모습을 확인할 수 있습니다.
  3. 아래 "변환된 HTML" 칸에 정제된 HTML 코드가 함께 표시됩니다.
  4. "HTML 복사"로 코드를 클립보드에 담아 블로그·메일·문서에 붙여 넣으세요.
마크다운이란 무엇일까

마크다운(Markdown)은 기호 몇 개로 서식을 표현하는 가벼운 문법입니다. 워드처럼 버튼을 누르지 않고도 '#'으로 제목, '*'로 강조, '-'로 목록을 만들 수 있어 깃허브·노션·블로그에서 널리 쓰입니다.

  • 제목: # 개수로 단계(h1~h6)를 정합니다.
  • 강조: *기울임*, **굵게**, ~~취소선~~.
  • 목록·표·코드: -·1.로 목록, 파이프(|)로 표, 백틱 세 개로 코드 블록을 만듭니다.

작성한 마크다운이 실제로 어떻게 보일지 이 미리보기로 확인하고, 필요하면 HTML로 변환해 가져갈 수 있습니다. 문법은 마크다운 문법 가이드에 정리했습니다.

활용 팁
  • README 게시 전 점검: 깃허브에 올리기 전 README나 위키 문서를 여기 붙여 넣으면, 제목 단계·목록·표가 의도대로 나오는지 미리 확인할 수 있습니다. 코드 펜스(```)로 감싼 예제 코드의 줄바꿈이 깨지지 않는지 보기에 좋습니다.
  • 메일·노션 글을 HTML로: 마크다운으로 빠르게 쓴 글을 HTML로 변환해, HTML 입력을 지원하는 뉴스레터 도구나 게시판에 붙여 넣을 수 있습니다. 굵게·링크·목록 같은 서식이 그대로 유지됩니다.
  • 안전하게 남의 마크다운 보기: 출처가 불분명한 마크다운에 악성 스크립트가 숨어 있어도, 이 도구는 정제 후 렌더하므로 미리보기에서 코드가 실행되지 않습니다. 내용만 안전하게 확인하고 싶을 때 쓰세요.
자주 묻는 질문
Q. 미리보기에서 스크립트나 위험한 HTML은 어떻게 처리되나요?

변환된 HTML은 화면에 그리기 전에 DOMPurify로 정제합니다. script 태그, onclick 같은 이벤트 속성, javascript: 링크처럼 코드를 실행할 수 있는 요소는 제거되거나 무력화되어 미리보기에서 실행되지 않습니다. 외부에서 받은 마크다운을 붙여 넣어 확인할 때도 XSS 걱정 없이 볼 수 있습니다.

Q. GitHub 같은 표 문법(GFM)도 지원하나요?

네. 파이프(|)로 칸을 나누는 GitHub 스타일 표, 코드 펜스(```), 취소선, 자동 링크 등 GitHub Flavored Markdown의 주요 문법을 인식합니다. 작성한 README나 문서가 깃허브에서 어떻게 보일지 게시 전에 대략 확인하는 용도로 활용하기 좋습니다.

Q. 변환한 HTML을 내 블로그에 붙여도 되나요?

됩니다. 'HTML 복사'를 누르면 정제된 HTML 코드가 클립보드에 담기므로 티스토리·워드프레스 같은 블로그의 HTML 모드나 정적 사이트 글에 그대로 붙여 넣을 수 있습니다. 다만 표시 스타일(글꼴·여백)은 붙여 넣는 사이트의 CSS를 따르므로 약간 다르게 보일 수 있습니다.

Q. 작성한 마크다운이 저장되나요?

변환·미리보기는 모두 브라우저 안에서만 이뤄지며 입력한 내용은 서버로 전송·저장되지 않습니다. 페이지를 닫으면 사라지므로, 보관하려면 결과 HTML이나 원문을 따로 복사해 두세요.

Q. 이미지도 미리보기에 보이나요?

마크다운 이미지 문법(![설명](주소))으로 넣은 외부 이미지 주소는 미리보기에 표시됩니다. 다만 내 컴퓨터의 로컬 파일 경로는 보이지 않으므로, 웹에 올라간 이미지의 URL을 사용해야 합니다.

함께 쓰면 좋은 도구