마크다운을 HTML로 변환

마크다운을 HTML로 변환은 마크다운 조각을 웹사이트, 콘텐츠 시스템, 개발 워크플로에서 사용할 수 있는 원시 HTML 코드로 바꿔 주는 무료 도구입니다.

어떤 마크다운을 HTML로 변환하나요?

마크다운 서식을 그에 해당하는 HTML 요소로 변환합니다. 제목은 제목 요소로, 링크는 앵커 요소로, 글머리 기호 목록은 목록 항목이 포함된 순서 없는 목록으로 바뀝니다.

마크다운은 README 파일, 기술 문서, 이슈 설명, 정적 사이트 콘텐츠에 널리 쓰이는 일반 텍스트 마크업 형식입니다. 웹사이트 템플릿, 이메일 시스템, 콘텐츠 관리 시스템의 입력란처럼 마크다운이 아닌 HTML을 요구하는 곳에 콘텐츠를 넣을 때 유용합니다.

마크다운에는 여러 방언이 있습니다. CommonMark, GitHub Flavored Markdown, 애플리케이션별 파서는 표, 작업 목록, 줄바꿈, 삽입된 HTML을 서로 다르게 처리할 수 있습니다. 이 도구의 출처 정보에는 특정 방언이 명시되어 있지 않으므로, 일반적인 제목, 문단, 링크, 목록을 벗어나는 문법은 결과를 배포하기 전에 확인하세요.

마크다운을 HTML로 어떻게 변환하나요?

Markdown 입력란에 원본 텍스트를 넣고 변환한 다음, HTML 입력란에서 생성된 코드를 확인하거나 복사하세요.

1. 서식 기호의 일부만 넣지 말고 완전한 조각을 붙여 넣으세요.
2. 텍스트를 변환한 뒤 반환된 HTML의 요소 구조를 살펴보세요.
3. 링크, 중첩 목록, 코드 블록은 실제로 표시할 애플리케이션에서 확인하세요.
4. 대상에 적절한 CSS가 없다면 사이트 스타일을 별도로 적용하세요.

변환은 서버에서 이루어집니다. 입력 내용은 HTTPS를 통해 서버로 전송되며 저장되지 않습니다. 처리 과정에서 텍스트가 기기 외부로 전송되므로, 조직 정책상 서버 측 도구 사용이 금지된 자격 증명, 비공개 키 또는 기밀 자료는 제출하지 마세요.

변환된 HTML은 어떻게 확인하나요?

결과는 마크다운의 구조를 나타내는 요소가 포함된 원시 HTML 코드로 확인하세요. 기존 페이지, 템플릿 또는 콘텐츠 입력란 안에 넣을 수는 있지만, doctype, 메타데이터, 스타일, 스크립트까지 갖춘 완전한 HTML 문서라고 볼 수는 없습니다.

간단한 제목 예시의 일반 텍스트 입력은 다음과 같습니다.

# Release notes

일반적인 HTML 결과는 다음과 같습니다.

<h1>Release notes</h1>

짧은 목록 입력은 다음과 같습니다.

- Alpha

- Beta

이에 해당하는 구조는 두 개의 목록 항목 요소가 포함된 순서 없는 목록입니다.

<ul>

<li>Alpha</li>

<li>Beta</li>

</ul>

대부분의 마크다운 오류는 정식 파서 오류로 나타나지 않습니다. 짝이 맞지 않는 서식 기호, 잘못된 들여쓰기, 목록 기호 뒤의 누락된 공백이 일반 텍스트로 표시될 수 있습니다. 반환된 HTML은 유효해 보이지만 구조가 잘못됐다면 출력 요소를 의도한 문서 계층과 비교하세요.

• 제목이 예상한 수준을 사용하는지, 불필요하게 중간 수준을 건너뛰지는 않는지 확인하세요.
• 마크다운 원본에서 중첩된 목록 항목의 들여쓰기가 일관적인지 확인하세요.
• 게시하기 전에 링크 대상을 살펴보세요. 특히 제3자 콘텐츠를 처리할 때는 주의해야 합니다.
• 닫히지 않은 펜스가 문서의 나머지 부분까지 코드로 처리할 수 있으므로 펜스형 코드 블록을 꼼꼼히 확인하세요.
• 원본에 원시 HTML이 있는지 살펴보세요. 마크다운 구현에 따라 이를 유지하거나 이스케이프하거나 거부할 수 있습니다.

변환 시 알아둘 세부 사항

마크다운 변환은 텍스트 자체의 언어가 아니라 구조를 바꿉니다. 악센트가 있는 문자, 비라틴 문자, 숫자, 일반 문장 부호는 생성된 요소 안에 텍스트 콘텐츠로 유지될 수 있습니다. HTML에서 특별한 의미를 갖는 문자를 마크업이 아닌 문자 그대로 표시하려면 엔티티 인코딩이 필요할 수 있습니다.

공백과 빈 줄은 파싱에 영향을 줄 수 있습니다. 일반적으로 빈 줄은 문단을 나누며, 들여쓰기는 중첩 목록이나 코드 블록을 만들 수 있습니다. 줄바꿈 처리 방식도 마크다운 방언마다 다르므로, 원본의 줄바꿈 하나가 항상 HTML에서 보이는 줄바꿈으로 바뀌는 것은 아닙니다.

빈 입력에는 변환할 만한 문서 구조가 없습니다. 입력이 매우 길다면 로컬 빌드 과정에서 처리하는 편이 나을 수 있습니다. 그러면 버전을 관리하고 테스트할 수 있으며, 프로덕션에서 사용하는 것과 같은 파서로 일관되게 변환할 수 있습니다. 어떤 변환기도 제목 수준, 링크 대상 또는 목록 계층이 프로젝트의 의미에 맞게 올바른지 판단할 수는 없습니다.

마크다운을 HTML로 변환하면 언제 유용한가요?

원본 자료는 마크다운으로 작성되거나 제공되지만 이후 시스템에서 HTML을 받아야 할 때 변환할 가치가 있습니다. 제3자 문서를 가져오기 전에 확인하거나, 정적 사이트 빌드를 디버깅하거나, HTML 전용 편집기에 넣을 릴리스 노트를 준비하거나, 배포 전에 생성된 마크업을 검토할 때 주로 사용합니다.

콘텐츠를 기계만 읽고 마크다운이 이미 필요한 형식으로 제대로 작동한다면 보통 HTML로 변환할 필요가 없습니다. 또한 작성자가 계속 마크다운으로 작업해야 하는 경우, 처리 과정의 초기에 HTML로 변환하면 이후 편집이 더 어려워질 수 있습니다.

HTML 구조를 디버깅하는 동안에는 코드를 축소하지 마세요. 읽기 쉬운 마크업일수록 잘못된 중첩과 예상치 못한 요소를 쉽게 찾을 수 있습니다. 출력을 확인하고 프로덕션에 배포할 준비가 끝나면 HTML 미니파이어로 불필요한 공백을 줄일 수 있습니다.

자주 묻는 질문

변환된 HTML에 CSS 스타일도 포함되나요?

포함되지 않습니다. HTML은 구조를 나타내고 CSS는 대부분의 표현 방식을 제어합니다. 브라우저, 애플리케이션 또는 테마가 스타일을 제공하므로 같은 제목 요소도 사이트마다 다르게 보일 수 있습니다. 마크다운 원본이 최종 모양까지 지정한다고 기대하지 말고, 대상에서 CSS를 추가하거나 기존 CSS를 재사용하세요.

마크다운 표와 작업 목록도 변환할 수 있나요?

파서가 사용하는 마크다운 방언에 따라 지원 여부가 달라집니다. 표와 작업 목록 체크박스는 모든 마크다운에 공통으로 적용되는 문법이 아니라 널리 쓰이는 확장 기능입니다. 더 큰 문서에 사용하기 전에 대표적인 짧은 예시를 변환하고 반환된 요소를 확인하세요.

신뢰할 수 없는 마크다운을 변환해도 안전한가요?

신뢰할 수 없는 마크다운은 변환한 뒤에도 신뢰할 수 없는 콘텐츠로 취급하세요. 파서와 사용 대상에 따라 삽입된 HTML이나 안전하지 않은 링크 스킴을 새니타이즈해야 할 수 있습니다. 이 변환기는 형식을 바꿀 뿐이며, 변환 자체를 보안 필터로 간주해서는 안 됩니다.

HTML을 WordPress나 다른 CMS에 붙여 넣어도 되나요?

편집기에 HTML 보기 또는 코드 보기가 있고 반환된 요소를 허용한다면 보통 가능합니다. 일부 콘텐츠 관리 시스템은 붙여 넣은 마크업을 새니타이즈하거나, 지원하지 않는 속성을 제거하거나, 문단 간격을 변경합니다. 제출 후 CMS가 콘텐츠를 바꿀 수 있으므로 미리보기와 저장된 버전을 모두 확인하세요.

코드 블록이 제대로 표시되지 않는 이유는 무엇인가요?

여는 펜스와 닫는 펜스가 서로 일치하고 각각 별도 줄에 있는지 확인하세요. 주변 목록의 들여쓰기가 일관적이지 않으면 들여쓰기 방식의 코드 블록도 깨질 수 있습니다. 구문 강조가 필요하다면 대상 시스템이 언어 식별자를 인식해야 하며, 자체 강조 스크립트나 스타일도 제공해야 합니다.

변환한 뒤에도 마크다운을 보관해야 하나요?

마크다운이 편집 가능한 원본 기록이라면 계속 보관하세요. 생성된 HTML은 별도로 저장하거나 빌드 과정에서 다시 만들어, 이후 수정 사항이 두 형식에서 서로 달라지지 않도록 하세요. 게시하기 전에는 원시 코드만 확인하지 말고 링크를 검증한 뒤 실제 대상에서 해당 조각을 살펴보세요.