HTML 코드를 Markdown으로 변환하는 방법

HTML 변환의 목적과 확인 범위

HTML을 Markdown 스타일 텍스트로 바꾸려면 원문을 입력하고 변환을 실행한 뒤 결과의 구조를 검토하면 됩니다. 이 도구는 입력된 HTML을 정해진 텍스트 변환 규칙으로 처리합니다. 제목, 링크, 이미지, 강조, 코드, 목록, 인용문, 문단, 줄 바꿈과 같은 요소가 지원되는 형태라면 Markdown 스타일 표기로 바뀔 수 있습니다.

사용 목적은 HTML 문서의 구조를 사람이 읽기 쉬운 텍스트 형태로 옮기는 것입니다. 문서 초안, 안내문, 메모처럼 구조 확인이 필요한 자료에 활용할 수 있습니다. 다만 HTML의 모든 문법을 해석하는 방식은 아닙니다. 태그의 속성, 따옴표, 중첩, 여는 태그와 닫는 태그의 배치가 정해진 패턴과 다르면 원하던 표기가 나오지 않을 수 있습니다.

변환 전에는 원문을 보존해 두고, 결과를 원본과 나란히 비교하는 편이 좋습니다. 특히 제목의 단계, 링크의 대상, 이미지의 대체 텍스트, 목록의 순서, 코드의 경계를 먼저 확인하세요. 변환 결과만 보고 원본 구조가 완전히 재현되었다고 판단하지 않는 것이 안전합니다. 짧은 HTML로 먼저 형태를 확인한 다음 본문을 처리하면 차이를 찾기 쉽습니다.

입력부터 결과 검토까지의 절차

1. 변환할 HTML을 입력 영역에 붙여 넣습니다. 제목에는 h1부터 h6까지의 요소를 사용할 수 있습니다. 입력을 생략하거나 비워 두는 경우도 작업 자체는 성공적으로 끝나지만, 결과 텍스트는 비어 있게 됩니다.

2. 변환을 실행합니다. 결과가 표시되면 먼저 제목을 살펴보세요. 1단계부터 6단계까지의 제목 요소는 Markdown 제목 접두사로 바뀌고, 제목 안의 일반 텍스트는 유지됩니다. 제목 요소에 복잡한 속성이나 다른 구조가 결합된 경우에는 일치 여부를 따로 확인해야 합니다.

3. 문단, 목록, 인용문, 줄 바꿈, 수평선, 일반 블록의 결과를 확인합니다. 이런 요소는 특정 태그 패턴에 맞을 때 Markdown 스타일 텍스트나 간격으로 처리됩니다. 순서 없는 목록과 순서 있는 목록은 컨테이너와 항목의 구조가 규칙에 맞는지 함께 봐야 합니다. 중첩이 깊거나 속성이 붙은 구조는 기대한 모양과 달라질 수 있습니다.

4. 링크와 이미지를 검토합니다. 작은따옴표 또는 큰따옴표로 작성된 특정 href 속성은 Markdown 링크 표기로 바뀔 수 있습니다. 큰따옴표로 작성된 특정 src 속성의 이미지는 Markdown 이미지 표기로 처리될 수 있습니다. 일치한 형태에서 대체 텍스트가 src 뒤에 있으면 그 텍스트가 사용되고, 해당 위치에 없으면 대체 텍스트가 비어 있을 수 있습니다.

5. 강조와 코드를 확인합니다. 속성이 없는 strong, b, em, i 요소는 강조 표식으로 바뀔 수 있습니다. 속성이 없는 code 요소가 규칙에 맞으면 인라인 코드가 됩니다. 정확히 맞는 pre 안의 code 구조는 펜스 코드 블록으로 처리되지만, 다른 속성이나 배치는 일치하지 않을 수 있습니다.

6. 변환 뒤 남은 태그와 문자를 살핍니다. 지원되는 처리가 끝난 뒤에도 변환기의 규칙에 맞는 남은 태그 문법은 제거되며, 그 태그 안에 있던 일반 텍스트는 보존됩니다. 지정된 이름 있는 엔터티와 십진 숫자 문자 참조는 일부 해독될 수 있습니다. 결과에서 원하지 않는 태그 문법, 빠진 표기, 어색한 공백이 있는지 확인한 뒤 필요한 부분을 원문에서 고쳐 다시 실행합니다.

변환된 텍스트를 읽는 기준과 한계

결과는 HTML 문서를 그대로 복제한 파일이 아니라, 일치하는 패턴을 Markdown 스타일 텍스트로 바꾼 값입니다. 따라서 같은 의미의 HTML이라도 속성의 위치, 따옴표의 종류, 태그의 중첩 방식에 따라 결과가 달라질 수 있습니다. 변환된 제목은 단계별 접두사를 확인하고, 링크는 대상 주소가 빠지지 않았는지 살펴보세요. 이미지에서는 대체 텍스트가 포함되었는지와 비어 있는지 구분해야 합니다.

코드 결과는 두 종류로 나누어 볼 수 있습니다. 속성이 없는 code 요소가 맞는 형태로 처리되면 본문 안의 인라인 코드처럼 보입니다. pre와 code가 정확한 구조로 함께 있으면 여러 줄을 감싸는 펜스 코드 블록이 됩니다. 구조가 조금만 달라도 이 변환이 적용되지 않을 수 있으므로, 코드가 중요하다면 결과의 시작과 끝을 직접 확인하세요.

script와 style 블록은 대소문자를 구분하지 않는 여는 패턴과 닫는 패턴에 맞을 때 내용이 제거됩니다. 닫는 태그가 없거나 다른 형태로 작성된 블록까지 제거된다고 보기는 어렵습니다. 남은 태그 문법은 규칙에 맞는 경우 제거되지만, 태그 사이의 일반 텍스트는 남을 수 있으므로 텍스트 손실과 태그 잔류를 서로 다르게 판단해야 합니다.

공백도 결과의 일부입니다. 네 개 이상 이어진 줄 바꿈은 세 개로 줄어들고, 결과의 앞뒤 공백은 제거됩니다. 이 정리는 본문 중간의 모든 간격을 같은 방식으로 바꾼다는 뜻은 아닙니다. 단락 간격이나 코드 블록 주변의 모양이 중요하면 변환 후 줄 수를 확인하세요.

문자 참조는 선별적으로 해독됩니다. 숫자만 있는 &#digits; 형식은 문자 변환 대상으로 전달되지만, 잘못된 형식은 그대로 남을 수 있습니다. 숫자만 있는 값이라도 문자 변환 함수의 유효 범위를 벗어나면 예외가 발생할 수 있습니다. 그러므로 외부에서 받은 HTML은 문자 참조를 포함한 결과를 먼저 읽어 보고, 오류가 의심되는 값을 작은 입력으로 나누어 점검하세요.

사용 예시

문서 작성자가 <h2>설치 안내</h2><strong>먼저 백업하세요.</strong>를 입력해 제목과 강조 표기가 어떤 결과 형태로 나타나는지 확인합니다.

h2 제목과 strong 강조 문장을 포함한 짧은 HTML을 입력한 다음 변환을 실행하고, 결과에서 제목 줄과 강조 표기의 존재를 확인합니다.

입력한 h2 요소는 Markdown 제목 접두사가 붙은 줄로 나타나고, 속성 없는 strong 요소의 문장은 강조 표기로 표시됩니다.

제한 사항

• 패턴 기반 처리이므로 HTML의 모든 변형을 다루지 않으며, 맞지 않는 블록은 예상과 다르게 남을 수 있습니다. 유효 범위를 벗어난 십진 숫자 문자 참조는 변환 중 오류를 일으킬 수 있습니다.

자주 발생하는 오류

• 속성이나 중첩 구조가 있는 요소가 바뀌지 않는다면 지원되는 패턴과 입력 형태가 다를 수 있습니다. 단순한 속성 없는 요소와 규칙에 맞는 따옴표 및 태그 구조로 줄인 테스트 입력을 먼저 실행하고, 결과를 확인한 뒤 본문을 다시 구성하세요.

자주 묻는 질문

HTML 입력을 비워 두면 어떻게 되나요?

입력을 생략하거나 빈 문자열을 넣은 조건에서는 작업이 성공적으로 완료되고 변환된 텍스트가 비어 있습니다. 내용이 있는 HTML을 처리하려면 입력 영역에 원문을 넣어야 합니다.

HTML 코드 블록도 Markdown 코드로 바뀌나요?

pre와 code가 정확한 형태로 함께 있는 조건에서는 펜스 코드 블록으로 바뀌며, 규칙에 맞는 속성 없는 code 요소는 인라인 코드로 처리됩니다. 다른 속성이나 구조는 변환되지 않을 수 있습니다.

모든 HTML 링크가 Markdown 링크로 변환되나요?

링크의 href가 지원되는 따옴표 형식과 태그 구조에 맞는 조건에서는 Markdown 링크로 바뀝니다. 다른 속성 배치나 구조라면 원래 태그가 남거나 해당 표기가 만들어지지 않을 수 있습니다.