Oh MyUtils

HTML to Markdown 변환기 - HTML과 Markdown 상호 변환 온라인

GFM 지원으로 HTML과 Markdown 형식을 양방향 변환합니다. 테이블, 작업 목록, 취소선을 지원합니다. 100% 클라이언트 처리, 데이터가 서버로 전송되지 않습니다.

자주 묻는 질문

HTML to Markdown 변환기란 무엇인가요?

HTML to Markdown 변환기는 HTML 마크업(웹 페이지 구조를 위한 태그 기반 언어)을 Markdown 구문(가볍고 읽기 쉬운 서식 언어)으로 변환하는 도구입니다. 예를 들어 <code>&lt;h1&gt;제목&lt;/h1&gt;</code>은 <code># 제목</code>으로, <code>&lt;strong&gt;굵게&lt;/strong&gt;</code>는 <code>**굵게**</code>로, <code>&lt;a href="url"&gt;링크&lt;/a&gt;</code>는 <code>[링크](url)</code>로 변환됩니다. HTML 기반 CMS(WordPress, Drupal)에서 Markdown 기반 시스템(Hugo, Jekyll, Gatsby)으로 콘텐츠를 마이그레이션하거나, 웹 스크래핑된 콘텐츠를 정리하거나, HTML 문서를 GitHub 리포지토리와 위키용 Markdown 파일로 변환할 때 유용합니다.

이 HTML to Markdown 변환기를 어떻게 사용하나요?

1. 변환 방향을 선택합니다: <strong>HTML → Markdown</strong> 또는 <strong>Markdown → HTML</strong>. 2. 입력 영역(데스크톱에서는 왼쪽, 모바일에서는 상단)에 콘텐츠를 붙여넣거나, <strong>Sample</strong> 버튼으로 예제를 불러오거나, <strong>Upload</strong> 버튼으로 파일을 업로드합니다. 3. 입력하는 즉시 실시간으로 변환됩니다. 4. HTML→Markdown 방향에서는 서식 옵션(제목 스타일, 글머리 기호, 코드 블록 스타일)을 조절할 수 있습니다. 5. 출력 영역에서 변환된 결과를 확인합니다. 6. <strong>Copy</strong> 버튼으로 클립보드에 복사하거나 <strong>Download</strong>로 파일로 저장합니다. 7. <strong>Swap</strong> 버튼으로 현재 출력을 입력으로 사용하여 변환 방향을 빠르게 전환합니다.

데이터가 안전한가요? 서버로 전송되나요?

데이터는 100% 안전하며 브라우저 밖으로 절대 나가지 않습니다. 이 변환기는 Turndown 라이브러리(HTML→Markdown)와 Marked 라이브러리(Markdown→HTML)를 사용하며, 둘 다 클라이언트 사이드 JavaScript로만 실행됩니다. 어떤 서버로도 데이터가 전송되지 않고, 데이터베이스에 저장되지 않으며, 로그가 기록되지 않습니다. 모든 파싱과 변환은 사용자의 기기에서 로컬로 처리됩니다. 인터넷 연결을 끊어도 작동하는 것으로 확인할 수 있습니다. 독점 HTML 템플릿, 내부 문서, 민감한 콘텐츠를 변환하기에 안전합니다.

Markdown으로 변환 시 어떤 HTML 요소가 지원되나요?

이 변환기는 Markdown에 해당하는 모든 표준 HTML 요소를 지원합니다: 제목(h1-h6), 단락(p), 굵게(strong/b), 기울임(em/i), 취소선(del/s), 링크(a), 이미지(img), 정렬/비정렬 목록(ol/ul/li), 인용문(blockquote), 코드 블록(pre/code), 인라인 코드(code), 수평선(hr), 테이블(table/thead/tbody/tr/th/td). GitHub Flavored Markdown 확장인 테이블, 작업 목록(체크박스), 취소선도 지원합니다. Markdown에 해당하지 않는 HTML 요소(div, span, 폼 요소 등)는 텍스트 내용만 보존하면서 깔끔하게 제거됩니다.

HTML로 변환 시 어떤 Markdown 구문이 지원되나요?

Markdown→HTML 방향은 CommonMark 전체 사양과 GitHub Flavored Markdown(GFM) 확장을 지원합니다. 제목(ATX # 및 Setext 밑줄), 강조 및 굵게(* 및 **), 링크(인라인 및 참조), 이미지, 언어 힌트가 있는 펜스 코드 블록, 들여쓰기 코드 블록, 인용문, 정렬/비정렬 목록(중첩 포함), 수평선, GFM 테이블, 작업 목록, 취소선, 자동 링크 URL을 포함합니다. 출력은 웹 페이지에 직접 삽입할 수 있는 깔끔하고 유효한 HTML입니다.

Markdown 출력 형식을 사용자 정의할 수 있나요?

네, HTML→Markdown 변환 시 여러 출력 서식 옵션을 설정할 수 있습니다: <strong>제목 스타일</strong>(# 기호를 사용하는 ATX 또는 밑줄을 사용하는 Setext), <strong>글머리 기호</strong>(대시 -, 별표 *, 더하기 +), <strong>코드 블록 스타일</strong>(백틱 펜스 또는 4칸 들여쓰기). 이 옵션들로 프로젝트나 팀에서 사용하는 Markdown 규칙에 맞출 수 있습니다. 모든 옵션은 URL에 동기화되므로 설정이 포함된 링크를 공유할 수 있습니다. 참고: 이 옵션은 HTML→Markdown 방향에만 적용됩니다.

변환 시 HTML의 CSS 스타일과 JavaScript는 어떻게 되나요?

CSS 스타일(인라인 style 속성과 클래스명), JavaScript 코드(script 태그와 이벤트 핸들러), 기타 비콘텐츠 요소는 변환 중에 제거됩니다. 변환기는 콘텐츠 수준의 변환에만 집중합니다 — HTML에서 시각적 스타일이 아닌 의미 구조와 텍스트 내용을 추출합니다. Markdown은 스타일을 지원하지 않는 콘텐츠 형식이므로 의도된 동작입니다. 특정 서식을 보존해야 하는 경우 Markdown 내에서 인라인 HTML을 사용하는 것을 고려하세요(대부분의 Markdown 렌더러는 내장 HTML을 지원합니다).

코드 예제

// HTML to Markdown conversion using Turndown library
// Install: npm install turndown turndown-plugin-gfm

const TurndownService = require('turndown');
const { gfm } = require('turndown-plugin-gfm');

function htmlToMarkdown(html, options = {}) {
  const {
    headingStyle = 'atx',
    bulletListMarker = '-',
    codeBlockStyle = 'fenced',
  } = options;

  try {
    const turndownService = new TurndownService({
      headingStyle,
      bulletListMarker,
      codeBlockStyle,
      hr: '---',
      fence: '```',
      emDelimiter: '_',
      strongDelimiter: '**',
      linkStyle: 'inlined',
    });
    turndownService.use(gfm);
    const markdown = turndownService.turndown(html);
    return { success: true, output: markdown };
  } catch (error) {
    return { success: false, error: error.message };
  }
}

// Markdown to HTML using marked
// Install: npm install marked
const { marked } = require('marked');

function markdownToHtml(markdown) {
  try {
    const html = marked.parse(markdown, { gfm: true });
    return { success: true, output: html };
  } catch (error) {
    return { success: false, error: error.message };
  }
}

// Example usage
const html = '<h1>Hello</h1><p>This is <strong>bold</strong></p>';
const result = htmlToMarkdown(html);
console.log(result.output);
// Output: # Hello\n\nThis is **bold**

관련 도구