마크다운 → HTML 변환
마크다운을 HTML 코드와 미리보기로 변환
입력한 텍스트는 브라우저에서만 처리되며 서버로 전송·저장되지 않습니다.
마크다운 변환기란?
마크다운 변환기는 #, **, - 같은 간단한 기호로 작성한 마크다운 텍스트를 실시간으로 HTML로 변환하고 미리보기를 보여주는 도구입니다. README 작성, 블로그 초안, 게시글 미리보기 등에 유용합니다.
지원 문법
- 제목:
# ~ ###### - 굵게
**text**/ 기울임*text* - 인라인 코드
`code`/ 코드 블록``` - 링크
[text](url)/ 이미지 - 순서 있는/없는 목록, 인용문
>, 수평선---
참고: 표·각주 등 확장 문법은 지원하지 않으며, 기본적인 GitHub Flavored Markdown 요소 위주로 지원합니다.
안전한 변환(XSS 방지)
입력 텍스트는 먼저 HTML 특수문자를 이스케이프한 뒤 마크다운 서식을 적용하므로 <script> 같은 태그를 입력해도 실행되지 않고 문자 그대로 표시됩니다. 모든 변환은 브라우저 안에서만 이루어지며 서버로 전송되지 않습니다.
마크다운의 철학과 CommonMark 표준화
마크다운은 2004년 존 그루버(John Gruber)가 "글쓴이가 서식 기호를 최소화해도 원문 자체가 읽기 쉬워야 한다"는 철학으로 만든 경량 문법입니다. HTML 태그 대신 #·*·- 같은 익숙한 기호를 쓰기 때문에 변환 전 원문도 이미 문서처럼 읽힙니다. 다만 초기 마크다운은 명세가 느슨해 도구마다 세부 동작(줄바꿈·중첩 목록·강조 처리 등)이 조금씩 달랐고, 이 문제를 해결하기 위해 2014년 CommonMark 프로젝트가 여러 구현체 비교 테스트(Babelmark)를 거쳐 엄격한 표준 명세를 정리했습니다. GitHub·GitLab 등 대부분의 현대 플랫폼은 CommonMark를 기반으로 한 확장 문법(GitHub Flavored Markdown 등)을 씁니다.
자주 틀리는 문법 3가지 (이 도구 기준 실례)
- ① 줄바꿈: CommonMark 표준은 문단 안에서 줄 끝에 공백 두 칸(또는 백슬래시)을 남겨야
<br>로 줄바꿈됩니다. 이 도구는 더 단순하게 동작해, 빈 줄로 나누지 않은 각 줄도 전부 별도의<p>문단으로 렌더링합니다. - ② 단어 중간의 *:
5*3=15 그리고 *중요*처럼 곱셈 기호로*를 쓰면 첫*부터 다음*까지 통째로 기울임으로 묶여5<em>3=15 그리고 </em>중요*처럼 의도치 않은 서식이 생깁니다. 강조 목적이 아닌*는 다른 기호로 바꾸는 것이 안전합니다. - ③ 중첩 목록 미지원: 표준 마크다운은 들여쓰기로 하위 목록을 중첩할 수 있지만, 이 도구는
-·*·숫자.줄을 들여쓰기와 무관하게 항상 한 단계짜리 평면 목록으로만 처리합니다.
자주 묻는 질문
마크다운(Markdown)이란 무엇인가요?
마크다운은 `#`, `*`, `-` 같은 간단한 기호로 제목·굵게·목록 등의 서식을 표현하는 경량 문서 작성 문법입니다. GitHub README, 블로그, 메모 앱 등에서 널리 쓰이며, 일반 텍스트처럼 읽기 쉬우면서도 HTML로 손쉽게 변환할 수 있습니다.
어떤 마크다운 문법을 지원하나요?
제목(# ~ ######), 굵게(**text**), 기울임(*text*), 인라인 코드(`code`), 코드 블록(```), 링크([text](url)), 이미지(), 순서 있는/없는 목록, 인용문(>), 수평선(---), 문단을 지원합니다.
변환된 HTML이 안전한가요? (XSS 방지)
네. 입력한 텍스트는 먼저 HTML 특수문자를 이스케이프한 뒤 마크다운 서식을 적용하므로 <script> 같은 태그를 입력해도 실행되지 않고 문자 그대로 표시됩니다. 링크의 javascript: 스킴도 차단해 미리보기 화면에서 스크립트가 실행되지 않도록 합니다.
GitHub README 작성에 사용할 수 있나요?
네. 기본적인 GitHub Flavored Markdown 문법(제목·목록·코드블록·링크·이미지 등)을 지원하므로 README.md 초안을 작성하고 결과를 미리 확인하는 용도로 유용합니다. 표·각주 등 고급 확장 문법은 지원하지 않습니다.
입력한 내용이 서버로 전송되나요?
아니요. 모든 변환과 미리보기는 사용자의 브라우저 안에서만 이루어지며, 입력한 마크다운 텍스트는 서버로 전송되거나 저장되지 않습니다.
마크다운은 왜 이런 기호 방식으로 설계되었나요?
2004년 존 그루버가 '글쓴이가 서식 기호를 최소화해도 원문 자체가 읽기 쉬워야 한다'는 철학으로 만들었습니다. HTML 태그 대신 #·*·- 같은 익숙한 기호를 쓰기 때문에 변환 전 원문도 이미 문서처럼 읽힙니다.
CommonMark는 무엇이고 왜 필요했나요?
초기 마크다운은 명세가 느슨해 도구마다 줄바꿈·중첩 목록·강조 처리 같은 세부 동작이 조금씩 달랐습니다. 2014년 CommonMark 프로젝트가 여러 구현체를 비교 테스트해 엄격한 표준 명세를 정리했고, GitHub 등 대부분의 플랫폼이 이를 기반으로 합니다.
이 도구에서 자주 틀리는 마크다운 문법은 무엇인가요?
① 줄 끝 공백 두 칸으로 줄바꿈하는 표준 규칙이 이 도구엔 없어 각 줄이 전부 별도 문단이 됩니다. ② '5*3=15 그리고 *중요*'처럼 곱셈에 *를 쓰면 첫 *부터 다음 *까지 통째로 기울임 처리됩니다. ③ 이 도구는 들여쓰기 기반의 중첩 목록을 지원하지 않고 항상 평면 목록으로 렌더링합니다.
광고