HTML을 Markdown으로 변환기

HTML 마크업을 깨끗하고 읽기 쉬운 Markdown 구문으로 변환하는 무료 온라인 도구인 HTML to Markdown 변환기에 오신 것을 환영합니다. CMS의 콘텐츠를 정적 사이트로 마이그레이션하든, 문서를 작성하든, README 파일을 준비하든, GitHub나 Jekyll과 같은 플랫폼용 블로그 포스트를 변환하든 이 변환기는 제목, 링크, 이미지, 표, 코드 블록, 목록 등을 정밀하게 처리합니다.

Markdown이란 무엇인가요?

Markdown은 2004년 John Gruber가 만든 경량 마크업 언어입니다. # 제목, **굵게**, - 목록 항목, [링크](url)와 같은 간단한 일반 텍스트 서식 규칙을 사용하여 원시 형태에서도 읽기 쉽고 웹 표시를 위해 HTML로 변환할 수 있는 구조화된 문서를 생성합니다. Markdown은 README 파일, 개발자 문서, 블로그, 포럼 및 메모 앱의 표준 형식입니다.

왜 HTML을 Markdown으로 변환해야 하나요?

1. 콘텐츠 마이그레이션

WordPress, Drupal 또는 기타 HTML 기반 CMS 플랫폼에서 Jekyll, Hugo 또는 Gatsby와 같은 정적 사이트 생성기로 콘텐츠를 이동하려면 HTML을 Markdown으로 변환해야 합니다. 이 도구는 해당 프로세스를 자동화합니다.

2. 문서화

GitHub, GitLab 및 Bitbucket의 개발자 문서는 Markdown을 사용합니다. 기존 HTML 문서를 Markdown으로 변환하면 유지 관리, 버전 관리 및 협업이 더 쉬워집니다.

3. 가독성

Markdown은 원시 형태에서 HTML보다 훨씬 가독성이 좋습니다. HTML을 Markdown으로 변환하면 꺽쇠 괄호와 닫는 태그를 다루지 않고도 사람이 콘텐츠를 훑어보고 편집하고 검토하기가 더 쉬워집니다.

4. 휴대성

Markdown 파일은 수백 개의 플랫폼과 도구에서 작동합니다. HTML을 Markdown으로 변환하면 콘텐츠의 휴대성이 높아지고 미래에도 사용 가능해집니다.

지원되는 HTML 요소

이 도구 사용 방법

1. HTML 붙여넣기: 변환하려는 HTML 콘텐츠를 복사하여 왼쪽의 입력 편집기에 붙여넣으세요. 빠른 예제를 클릭하여 작동 방식을 확인할 수도 있습니다.
2. 옵션 설정: 원하는 제목 스타일(ATX 또는 Setext), 목록 마커(- 또는 *), 코드 펜스 스타일(백틱 또는 물결표)을 선택하세요.
3. Markdown 출력 확인: 변환된 Markdown은 입력하는 즉시 오른쪽 패널에 나타납니다.
4. 복사 또는 다운로드: 복사를 클릭하여 Markdown을 클립보드에 복사하거나 다운로드를 클릭하여 .md 파일로 저장하세요. 미리보기를 설정하여 Markdown이 어떻게 렌더링되는지 확인할 수도 있습니다.

링크 스타일 옵션

인라인 (기본값)

인라인 스타일은 [text](url)와 같이 링크 주소를 링크 텍스트 바로 옆에 배치합니다. HTML에 링크 제목이 있는 경우 주소 뒤에 따옴표로 묶어 유지합니다.

참조

참조 스타일은 링크 텍스트를 [text][1]로 작성하고, 각 주소를 Markdown 출력 끝에 번호가 매겨진 목록으로 모읍니다(예: [1]: url). 이렇게 하면 긴 URL이 본문에서 빠지므로 긴 글에 유용합니다.

제목 스타일 옵션

ATX 스타일 (기본값)

ATX 스타일은 제목 텍스트 앞에 해시 기호(#)를 사용합니다. 6가지 제목 수준을 모두 지원하며 현대 Markdown에서 가장 널리 사용되는 스타일입니다.

# 제목 1 | ## 제목 2 | ### 제목 3

압축률 계산 방법

압축률은 HTML 입력의 길이와 Markdown 출력의 길이를 문자 수 기준으로 비교한 값입니다. 계산 방식은 100%에서 (Markdown 문자 수 ÷ HTML 문자 수)를 뺀 값이며, 가장 가까운 정수 퍼센트로 반올림합니다. 예를 들어 HTML이 1,000자이고 Markdown이 600자이면 압축률은 40%로 표시됩니다. 값이 높을수록 Markdown이 HTML보다 짧다는 뜻이며, 음수이면 Markdown이 HTML보다 길다는 뜻입니다.

Setext 스타일

Setext 스타일은 제목 텍스트 아래에 밑줄을 사용합니다. h1 및 h2만 지원합니다(h3-h6은 ATX로 대체됨). 일부 작가는 원시 Markdown에서의 시각적 강조 때문에 최상위 제목에 이 스타일을 선호합니다.

일반적인 사용 사례

CMS 마이그레이션

WordPress, Ghost 또는 Squarespace에서 Hugo, Jekyll, Gatsby 또는 Next.js와 같은 Markdown 기반 플랫폼으로 블로그 콘텐츠를 마이그레이션하는 경우입니다. HTML 소스를 붙여넣고 새 사이트에 사용할 수 있는 깨끗한 Markdown을 얻으세요.

GitHub README 파일

GitHub 리포지토리용으로 HTML 문서 또는 디자인 목업을 Markdown으로 변환하는 경우입니다. 변환기는 GitHub Flavored Markdown이 지원하는 표, 코드 블록 및 중첩 목록을 처리합니다.

이메일을 문서로 변환

HTML 이메일 콘텐츠 또는 웹 페이지 콘텐츠를 내부 문서 위키 또는 지식 베이스용 Markdown 형식으로 변환하는 경우입니다.

메모 작성

Obsidian, Notion, Bear 또는 Typora와 같은 앱을 위해 웹 콘텐츠를 Markdown으로 변환하는 경우입니다. Markdown 메모는 휴대성이 뛰어나고 미래에도 사용 가능합니다.

최상의 결과를 위한 팁

먼저 HTML 정리하기

최상의 결과를 얻으려면 과도한 인라인 스타일이 없는 깨끗한 HTML을 사용하세요. 변환기는 의미론적 HTML 구조에 집중하므로 불필요한 style 및 class 속성을 제거하면 더 깨끗한 출력이 생성됩니다.

표 정렬 확인

Markdown 표는 셀 병합을 지원하지 않으므로 병합된 셀(colspan/rowspan)이 있는 복잡한 HTML 표는 완벽하게 변환되지 않을 수 있습니다. 단순한 표는 정확하게 변환됩니다.

중첩 목록

변환기는 적절한 들여쓰기를 사용하여 중첩 목록을 올바르게 처리합니다. HTML에 깊게 중첩된 목록이 있는 경우 출력을 검토하여 중첩이 예상과 일치하는지 확인하세요.

자주 묻는 질문

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

HTML to Markdown 변환기는 HTML 마크업을 그에 상응하는 Markdown 구문으로 변환하는 온라인 도구입니다. 제목, 굵게, 기울임꼴, 링크, 이미지, 목록, 표, 코드 블록과 같은 HTML 태그를 Markdown 대응물로 변환하여 깨끗하고 읽기 쉬운 일반 텍스트 형식의 콘텐츠를 생성합니다.

이 변환기를 사용할 때 내 HTML 콘텐츠는 안전한가요?

네, 완전히 안전합니다. 모든 HTML에서 Markdown으로의 변환은 클라이언트 측 JavaScript를 사용하여 브라우저 내에서 전적으로 이루어집니다. 콘텐츠가 서버로 전송되거나 저장되거나 전송되지 않습니다. 귀하의 HTML은 완전히 비공개로 유지됩니다.

이 변환기는 어떤 HTML 요소를 지원하나요?

이 변환기는 제목(h1-h6), 단락, 굵게, 기울임꼴, 취소선, 링크, 이미지, 순서 있는 목록 및 순서 없는 목록, 중첩 목록, 표, 코드 블록, 인라인 코드, 인용문, 가로선, 줄바꿈 및 서식 있는 텍스트를 포함한 모든 일반적인 HTML 요소를 지원합니다.

ATX와 Setext 제목 스타일의 차이점은 무엇인가요?

ATX 스타일은 제목 텍스트 앞에 해시 기호(예: ## 제목 2)를 사용하는 반면, Setext 스타일은 제목 텍스트 아래에 밑줄(예: h2의 경우 대시 라인)을 사용합니다. ATX는 6가지 제목 수준(h1-h6)을 모두 지원하지만 Setext는 h1 및 h2만 지원합니다. 현대 Markdown에서는 ATX가 더 일반적으로 사용됩니다.

HTML 표를 Markdown으로 변환할 수 있나요?

네. 이 변환기는 HTML 표를 지원하며 파이프와 대시를 사용하여 적절한 열 정렬이 포함된 GitHub Flavored Markdown(GFM) 표 구문으로 변환합니다. thead, tbody, th, td 요소를 올바르게 처리합니다.

추가 리소스

• GitHub Flavored Markdown 가이드