마크다운 HTML 변환 사용 방법
- 왼쪽 입력 칸에 마크다운 문법으로 글을 쓰거나 README.md 내용을 붙여 넣습니다.
- 오른쪽 미리보기에서 실제로 보이는 모습을, HTML 코드 탭에서 변환된 태그를 확인합니다.
- HTML 복사로 블로그 HTML 편집기나 이메일 템플릿에 붙여 넣거나, .html 파일로 저장해 브라우저로 엽니다.
- 작성 중인 내용은 이 브라우저에 자동 저장되어 다시 방문해도 남아 있습니다.
마크다운 문법 정리 (자주 쓰는 표기)
| 표현 | 마크다운 | HTML 결과 |
|---|---|---|
| 제목 | # 제목1, ## 제목2 | <h1>, <h2> |
| 굵게 / 기울임 | **굵게**, *기울임* | <strong>, <em> |
| 취소선 | ~~취소~~ | <del> |
| 링크 | [툴집](https://tooljip.com) | <a href> |
| 이미지 |  | <img> |
| 목록 | - 항목, 1. 항목 | <ul>, <ol> |
| 체크리스트 | - [x] 완료 | 체크박스 목록 |
| 인용 | > 인용문 | <blockquote> |
| 인라인 코드 | `code` | <code> |
| 코드 블록 | ```js … ``` | <pre><code> |
| 표 | | 이름 | 값 ||---|---| | <table> |
| 구분선 | --- | <hr> |
마크다운이 HTML로 바뀌는 규칙과 주의점
마크다운은 사람이 읽기 쉬운 텍스트 기호로 문서 구조를 표시하고, 변환기가 이를 HTML 태그로 바꾸는 방식입니다. 툴집은 널리 쓰이는 marked 라이브러리의 GitHub 방식(GFM) 규칙을 사용하므로, 깃허브 README와 거의 같은 결과가 나옵니다.
- 줄바꿈: 엔터를 한 번만 치면 같은 문단으로 이어집니다. 문단을 나누려면 빈 줄을 한 줄 넣으세요.
- 목록 들여쓰기: 하위 목록은 스페이스 2~4칸으로 들여씁니다.
- 특수 기호:
*나#를 글자 그대로 보이려면 앞에 역슬래시(\*)를 붙입니다. - HTML 직접 쓰기: 마크다운 안에 HTML 태그를 섞어 쓸 수 있으며 결과 코드에 그대로 남습니다.
미리보기는 안전하게 격리되어 있습니다
다른 곳에서 복사한 마크다운에 <script> 같은 코드가 들어 있어도 툴집의 미리보기는 스크립트를 실행하지 않는 격리된 영역(sandbox iframe)에서 보여 줍니다. 따라서 미리보기를 보는 것만으로 내 브라우저에 영향을 주지 않습니다.
단, 변환된 HTML 코드를 내 웹사이트에 그대로 올릴 때는 이야기가 다릅니다. 외부에서 받은 마크다운을 게시판이나 서비스에 쓴다면 서버에서 허용된 태그만 남기는 처리(sanitize)를 꼭 거치세요.
블로그·README 작성에 활용하기
깃허브 README, 노션·옵시디언 메모, 기술 블로그는 대부분 마크다운을 씁니다. 반대로 일부 블로그 서비스나 이메일 뉴스레터 편집기는 HTML만 받습니다. 마크다운으로 빠르게 초안을 쓰고 이 도구로 HTML을 뽑아 붙여 넣으면 서식 작업 시간을 크게 줄일 수 있습니다. 글 분량이 궁금하다면 글자수 세기로 확인해 보세요.
자주 묻는 질문
깃허브 README 미리보기로 써도 되나요?
네. GitHub Flavored Markdown(표, 체크리스트, 취소선, 자동 링크)을 지원하므로 대부분 같은 모습으로 보입니다. 다만 깃허브 전용 기능(이슈 번호 자동 링크, 수식, 다이어그램)은 지원하지 않습니다.
"완전한 HTML 문서로 저장"은 무엇이 다른가요?
체크하면 <html>, <head>, 한글 문자 설정(utf-8)과 기본 스타일을 포함한 파일로 저장해 바로 브라우저에서 열 수 있습니다. 체크를 끄면 본문 태그만 저장해 다른 페이지에 끼워 넣기 좋습니다.
작성한 마크다운이 저장되나요?
작성 중인 내용은 이 브라우저에만 자동 저장되며 서버로 전송되지 않습니다. 지우기 버튼을 누르면 저장된 내용도 함께 지워집니다.
HTML을 마크다운으로 바꿀 수도 있나요?
현재는 마크다운에서 HTML 방향만 지원합니다. HTML 코드를 마크다운으로 바꾸는 기능은 제공하지 않습니다.