마크다운 → HTML 변환기

자주 쓰는 마크다운 문법을 안전한 HTML로 변환합니다.

미리보기

마크다운 예시

굵은 글씨기울임을 조합해 사용할 수 있어요.

리스트

  • 첫 번째 항목
  • 두 번째 항목
  • 세 번째 항목

코드

인라인 const x = 1; 코드도 가능합니다.

function hello() {
  return "안녕";
}

인용

좋은 글은 다듬는 만큼 좋아진다.

링크

자세한 내용은 에서 확인하세요.


이상입니다.

HTML 코드 보기
<h1>마크다운 예시</h1>
<p><strong>굵은 글씨</strong>와 <em>기울임</em>을 조합해 사용할 수 있어요.</p>
<h2>리스트</h2>
<ul><li>첫 번째 항목</li><li>두 번째 항목</li><li>세 번째 항목</li></ul>
<h2>코드</h2>
<p>인라인 <code>const x = 1;</code> 코드도 가능합니다.</p>
<pre><code>function hello() {
  return &quot;안녕&quot;;
}</code></pre>
<h2>인용</h2>
<blockquote>좋은 글은 다듬는 만큼 좋아진다.</blockquote>
<h2>링크</h2>
<p>자세한 내용은 <a href="https://sem.kr" target="_blank" rel="noopener noreferrer">셈</a>에서 확인하세요.</p>
<hr>
<p>이상입니다.</p>

사용 방법

  1. 왼쪽에 마크다운을 입력합니다

    마크다운 텍스트를 직접 작성하거나 기존 문서를 붙여넣으세요. 입력하는 즉시 오른쪽에 미리보기가 갱신됩니다.

  2. 변환 결과를 확인합니다

    오른쪽 패널에 렌더링된 HTML 미리보기가 표시됩니다. 'HTML 코드 보기'를 펼치면 원시 HTML도 확인할 수 있습니다.

  3. HTML을 복사해 사용합니다

    HTML 복사 버튼으로 변환 결과를 클립보드에 복사한 뒤 블로그·웹사이트 등에 붙여넣으세요.

지원하는 문법

문법예시결과
헤더# 제목<h1>제목</h1>
굵게**굵게**<strong>굵게</strong>
기울임*기울임*<em>기울임</em>
링크[셈](https://sem.kr)<a href="...">셈</a>
인라인 코드`code`<code>code</code>
리스트- 항목<ul><li>...
인용> 인용<blockquote>...
가로선---<hr>

자주 묻는 질문

이미지나 표는 지원하지 않나요?

본 v1에서는 이미지·표·중첩 리스트·순서 있는 리스트(1. 2. 3.)는 지원하지 않습니다. 자주 쓰는 단순 마크다운 변환에 초점을 맞췄으며, 추후 확장될 수 있습니다.

javascript: URL은 왜 변환되지 않나요?

XSS(크로스사이트 스크립팅) 공격 방지를 위해 http://, https://로 시작하는 URL만 링크로 변환합니다. javascript:, data:, vbscript: 같은 위험한 스킴은 일반 텍스트로 처리됩니다.

HTML 태그를 직접 입력하면?

본 도구는 입력된 HTML 태그를 모두 이스케이프 처리합니다. 즉 입력한 &lt;script&gt; 태그는 그대로 텍스트로 표시되고 실행되지 않습니다.

GitHub 마크다운과 다른 부분이 있나요?

있습니다. 본 도구는 단순 변환에 집중하므로 GitHub Flavored Markdown의 표(table), 작업 목록(- [x]), 체크박스, 자동 링크 등은 지원하지 않습니다. 정밀한 GFM 변환이 필요하면 GitHub의 미리보기를 사용하세요.

복사한 HTML을 어디에 사용할 수 있나요?

워드프레스, 티스토리, 노션 임포트 등 HTML을 입력으로 받는 거의 모든 블로그·CMS에서 사용할 수 있습니다. 일부 플랫폼은 자체 CSS가 적용되므로 시각 결과는 다를 수 있습니다.

관련 도구