마크다운과 HTML: 콘텐츠에 어떤 것을 사용해야 할까요?
빠른 답변
소스의 가독성이 중요한 산문이 많은 콘텐츠(README, 문서, 블로그 게시물, 채팅)에 Markdown을 사용하세요. 정확한 레이아웃, 대화형 요소, 의미론적 태그(양식, colspan이 있는 테이블, 사용자 정의 데이터 속성) 또는 DOM에 대한 완전한 제어가 필요한 경우 HTML을 사용하세요. Markdown Preview를 사용하여 Markdown을 HTML 라이브로 렌더링하세요.
소개
마크다운은 HTML의 작은 하위 집합에 매핑되는 경량 마크업 언어입니다. HTML은 모든 기능을 갖춘 웹의 마크업 언어입니다. 마크다운은 HTML으로 변환되는 사람이 읽을 수 있는 소스를 선호합니다. HTML은 최종 렌더링된 출력을 정밀하게 제어하는 것을 선호합니다. 그들은 다양한 추상화 수준의 도구만큼 경쟁자가 아니며 대부분의 Markdown 렌더러는 HTML을 출력합니다.
단계별
-
소스 가독성 비교
마크다운 소스는 **굵게**, *기울임꼴*, # 제목, - 목록 항목 등 일반 텍스트에 가깝습니다. HTML 소스는 장황합니다: <strong>굵게</strong>, <em>기울임꼴</em>, <h1>제목</h1>, <ul><li>...</li></ul>. 산문의 경우 Markdown은 일반 텍스트 편집기에서 읽고 편집하기가 훨씬 쉽습니다.
-
표현력 비교
마크다운은 제목, 단락, 목록, 강조, 링크, 이미지, 코드 블록, 인용문 등 HTML의 ~20%를 다룹니다. HTML은 양식, rowspan/colspan이 있는 테이블, 의미 체계 태그(<article>, <nav>, <aside>), 데이터 속성, 내장된 SVG, 스크립트 등을 100% 포괄합니다. Markdown에 부족한 기능이 필요한 경우 인라인 HTML으로 전환하거나 HTML으로 완전히 전환하세요.
-
학습 곡선 비교
마크다운 구문은 한 페이지에 들어가며 10분 안에 배울 수 있습니다. HTML에는 ~140개의 요소, 속성 및 DOM 모델이 있습니다. 더 가파르지만 여전히 접근 가능한 곡선입니다. 기술적인 지식이 없는 작성자(PM, 마케팅 담당자, 지원 직원)에게는 Markdown이 확실한 승리입니다.
-
렌더링 및 이식성 비교
마크다운은 브라우저에 표시되기 위해 HTML(또는 다른 형식)으로 렌더링되어야 합니다. 렌더링은 표시, 설명 또는 CommonMark와 같은 라이브러리에서 수행됩니다. HTML은 빌드 단계 없이 모든 브라우저에서 직접 렌더링됩니다. 마크다운은 다양한 출력 형식(HTML, PDF, EPUB, docx)으로 이식 가능합니다. HTML은 변환 없이 웹 전용입니다.
-
사용 사례에 따라 결정하세요.
문서, README, 채팅, 댓글, 블로그 게시물: Markdown. 마케팅 페이지, 대화형 UI, 이메일 템플릿, 복잡한 테이블, 의미 구조: HTML. 많은 시스템(GitHub, Notion, 정적 사이트 생성기)은 두 가지 모두를 최대한 활용하기 위해 HTML이 내장된 Markdown을 허용합니다.
예
굵게 및 이탤릭체
입력: Markdown: **bold** and *italic* | HTML: <strong>bold</strong> and <em>italic</em>
산출: 둘 다 다음으로 렌더링됩니다: 볼드체 및 이탤릭체
링크가 있는 제목
입력: Markdown: ## [FreeOnlineTools](https://freeonlinetoolsgo.com) | HTML: <h2><a href="https://freeonlinetoolsgo.com">FreeOnlineTools</a></h2>
산출: Both render as an <h2> containing a clickable link to freeonlinetoolsgo.com
테이블 —Markdown 대 HTML
입력: Markdown: | A | B |\n|---|---|\n| 1 | 2 | | HTML: <table><tr><th>A</th><th>B</th></tr><tr><td>1</td><td>2</td></tr></table>
산출: 둘 다 2x2 테이블을 렌더링합니다. colspan, rowspan 또는 스타일이 지정된 셀에는 HTML이 필요합니다.
Markdown이 할 수 없는 것 — 양식 입력
입력: HTML: <input type="email" placeholder="[email protected]">
산출: 마크다운에는 양식 컨트롤에 대한 구문이 없습니다. 인라인 HTML을 사용하거나 HTML으로 완전히 전환해야 합니다.
일반적인 문제
- Markdown 방언 조각화: CommonMark, GFM, MultiMarkdown 및 MDX는 표, 각주, 작업 목록 및 수학이 다릅니다. 예상치 못한 렌더링 차이를 방지하려면 방언과 이를 명시적으로 지원하는 렌더러를 선택하세요.
- Markdown에서 인라인 HTML을 통한 XSS: 대부분의 렌더러는 기본적으로 원시 HTML을 허용하므로 사용자 제공 Markdown은 <script>를 삽입할 수 있습니다. 신뢰할 수 없는 입력에 대해 원시 HTML을 삭제(예: DOMPurify)하거나 비활성화하도록 렌더러를 구성합니다.
- 공백 민감도: Markdown은 빈 줄로 구분되지 않는 한 인접한 줄을 하나의 단락으로 축소하고 코드 블록을 4칸 들여씁니다. 풍부한 편집기에서 복사하여 붙여넣으면 빈 줄이 사라지고 구조가 깨지는 경우가 많습니다.
- 의미 구조 없음: Markdown의 ##은 <h2>이지만 수준 이상의 의미를 전달하지 않습니다. 액세스 가능한 탐색(<nav>), 기사(<article>) 및 옆(<aside>)의 경우 Markdown 출력 주위에 HTML 래퍼가 필요합니다.
팁
- 문서 본문에는 Markdown을 사용하고 페이지 셸에는 HTML을 사용하세요. 대부분의 정적 사이트 생성기(Astro, Eleventy, Next)는 이 분할을 기본적으로 지원합니다.
- 사용자 Markdown 입력을 허용할 때 항상 DOMPurify로 렌더링된 HTML을 삭제하여 <script>, on* 속성 및 javascript를 제거합니다. URLs - 렌더러의 기본 이스케이프를 절대 신뢰하지 마세요.
- Markdown Preview를 사용하여 README 또는 문서에 커밋하기 전에 렌더러가 Markdown을 HTML으로 변환하는 방법을 정확히 확인하세요.
- 복잡한 테이블(colspan, caption, 스타일 헤더)의 경우 HTML에 작성하고 Markdown에 포함합니다. 대부분의 렌더러는 변경되지 않은 상태로 인라인 HTML을 전달합니다.