마크다운 → HTML 변환
붙여넣으면 바로 HTML로. 미리보기까지 한 화면에서.
입력하면 아래 미리보기가 자동으로 갱신됩니다
설명
제목·굵게·기울임·목록·링크·코드 등 기본 마크다운 문법을 HTML로 변환하고 미리보기를 제공합니다.
관련 도구
마크다운으로 작성한 텍스트를 HTML 코드로 즉시 변환하고 실제 렌더링 결과를 함께 미리볼 수 있는 도구입니다. 개발자가 README 파일을 작성하거나 블로그 편집기에 붙여 넣기 전에 최종 모양을 확인하고 싶을 때, 혹은 마크다운 문법이 익숙하지 않은 상태에서 결과를 바로 확인하며 배우고 싶을 때 특히 유용합니다.
사용 방법
입력창에 마크다운 텍스트를 붙여 넣거나 직접 입력하면 아래 미리보기 카드에 HTML 렌더링 결과가 실시간으로 업데이트되고, 그 아래 코드 카드에 변환된 HTML 소스가 함께 표시됩니다. 복사 버튼으로 HTML 소스를 클립보드에 바로 저장할 수 있습니다. 제목(#, ##, ###), 굵게(**), 기울임(*), 인라인 코드(`), 링크([텍스트](URL)), 목록(-) 문법을 지원합니다. 변환은 브라우저 안에서만 처리되므로 민감한 내용을 입력해도 서버로 전송되지 않습니다.
이럴 때 유용해요
GitHub README, GitLab 위키, Notion 내보내기 결과물을 다른 CMS에 옮길 때 마크다운을 그대로 붙여 넣으면 서식이 깨집니다. 이 도구로 HTML로 변환한 뒤 붙여 넣으면 제목·목록·링크 구조가 그대로 유지됩니다. 기술 문서를 이메일로 보내야 하는 상황에서도 HTML로 변환하면 대부분의 이메일 클라이언트에서 서식이 정상 표시됩니다. 또한 마크다운을 처음 배우는 팀원이 작성한 문서의 결과물을 공유 검토할 때, 렌더링 환경 없이도 미리 검토할 수 있어 편집 회의 시간을 줄여줍니다.
알아두면 좋은 점
이 변환기는 제목, 굵게, 기울임, 인라인 코드, 링크, 목록 등 자주 쓰는 기본 문법을 다룹니다. 표, 코드 블록, 인용구, 순서 있는 목록, 취소선 같은 확장(GFM) 문법은 처리하지 않으므로, 이런 요소가 필요하면 변환한 뒤 HTML을 직접 편집해 추가하세요. 변환된 HTML에는 인라인 스타일이 없으므로 실제 웹사이트에 삽입할 때는 CSS를 별도로 적용해야 합니다. 변환 결과의 태그 구조를 확인해 두면 나중에 직접 스타일을 입힐 때 어떤 선택자를 써야 할지 바로 알 수 있습니다.
자주 묻는 질문
변환된 HTML을 워드프레스에 바로 붙여 넣을 수 있나요?
표(table) 문법이 렌더링되지 않아요.
입력한 내용이 서버에 저장되나요?
이미지 마크다운()도 변환되나요?
HTML 결과에 스타일(CSS)이 포함되어 있지 않아요.
개인정보처리방침
모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의 kjh920424@gmail.com
이 도구가 하는 일
왼쪽 입력창에 마크다운 문법으로 글을 쓰면, 오른쪽에 변환된 HTML 결과가 실시간으로 나타납니다. 제목(#), 굵게(**), 기울임(*), 목록(-), 링크([]()), 인라인 코드(`) 같은 마크다운 기호를 브라우저가 이해하는 <h1>, <b>, <i>, <ul>, <a>, <code> 태그로 바꿔줍니다. 변환은 서버로 글을 보내지 않고 브라우저 안에서 즉시 처리되므로, 붙여넣는 순간 결과가 갱신됩니다.
실제 사용법
깃허브 README, 노션·옵시디언에서 복사한 메모, 챗봇이 뱉어낸 마크다운 답변을 그대로 왼쪽에 붙여넣으세요. 오른쪽 미리보기로 렌더링 결과를 확인한 뒤, 필요한 형태로 가져가면 됩니다. 보통 두 가지를 뽑아 쓸 수 있습니다. 하나는 <h2><p><ul> 같은 태그가 들어간 HTML 소스 코드로, 티스토리·워드프레스·이메일 템플릿의 HTML 편집 모드에 그대로 붙일 때 씁니다. 다른 하나는 렌더링된 화면 자체로, 블로그 에디터나 한글·워드 문서에 서식을 살려 복사할 때 유용합니다.
변환 규칙 이해하기
마크다운은 표준이 여러 갈래라 도구마다 세부 처리가 다릅니다. 이 변환기가 다루는 대표 기호는 아래와 같습니다.
| 마크다운 입력 | 변환 결과 |
|---|---|
| # 제목 | <h1>제목</h1> |
| **굵게** / *기울임* | <b> / <i> |
| - 항목 / * 항목 | <ul><li> |
| `코드` | <code> |
| [글자](주소) | <a href> |
줄바꿈은 입력한 그대로 처리됩니다. 엔터를 한 번 누르면 그 자리에서 줄이 바뀌고(<br>), 빈 줄을 하나 두면 문단이 나뉩니다(<p>). 표(table)·코드 블록(```)·인용구(>)·순서 있는 목록(1.) 같은 확장 문법은 지원하지 않으므로, 이런 요소가 필요하면 변환 후 HTML을 직접 편집해 추가하세요.
활용 상황과 팁
챗봇 답변을 블로그에 옮길 때 마크다운 기호(##, **)가 글에 그대로 노출돼 지저분해진 경험이 있다면, 이 도구를 거쳐 HTML로 바꾼 뒤 붙여넣으면 깔끔합니다. 팁 하나는, 변환 후 HTML 소스에서 불필요한 인라인 스타일 없이 순수 태그만 나오는지 확인하는 것입니다. 그래야 붙여넣는 사이트의 자체 서식과 충돌하지 않습니다. 또 입력한 < > & 기호는 자동으로 < 형태로 이스케이프 처리되므로, 예제 코드나 태그를 안전하게 옮길 수 있습니다.
자주 묻는 질문
입력한 글이 서버로 전송되나요?
변환은 브라우저 안에서 이뤄집니다. 미공개 문서나 초안을 붙여넣어도 외부로 업로드되지 않으므로 비교적 안심하고 쓸 수 있습니다.
표나 체크박스가 변환이 안 돼요.
표와 체크박스는 GitHub 확장(GFM) 문법으로, 이 도구의 기본 변환 범위에는 포함되지 않습니다. 표가 필요하면 변환된 HTML에 <table> 태그를 직접 추가해 사용하세요.
줄바꿈은 어떻게 처리되나요?
이 도구는 엔터를 누른 그대로 줄을 바꿔줍니다. 엔터 한 번은 줄바꿈(<br>)으로, 빈 줄(엔터 두 번)은 문단 나눔(<p>)으로 변환됩니다. 표준 마크다운처럼 공백 두 칸을 넣지 않아도 입력한 모양 그대로 줄이 유지됩니다.
HTML을 다시 마크다운으로 되돌릴 수 있나요?
이 도구는 마크다운에서 HTML로 향하는 한 방향 변환입니다. 반대 방향(HTML → 마크다운)은 지원하지 않습니다.