liminfoMarkdown Reference
마크다운 문법 레퍼런스 및 실시간 미리보기
제목 1
제목 2
제목 3
일반 텍스트 단락입니다. 굵게, 기울임, 취소선, 인라인 코드를 사용할 수 있습니다.
링크와 이미지
목록
인용문
이것은 인용문입니다.
여러 줄에 걸쳐 작성할 수 있습니다.
코드 블록
function hello() {
console.log("Hello, World!");
}표
| 헤더 1 | 헤더 2 | 헤더 3 |
| 셀 1 | 셀 2 | 셀 3 |
| 셀 4 | 셀 5 | 셀 6 |
체크리스트
각주
텍스트에 각주를 추가합니다[1].
[1]: 이것은 각주 내용입니다.
Markdown Reference 소개
마크다운 레퍼런스 도구는 실시간 분할 창 에디터와 포괄적인 문법 레퍼런스 가이드를 하나의 도구에 결합했습니다. 에디터 + 미리보기 모드에서는 왼쪽에서 마크다운을 입력하면 오른쪽에서 렌더링된 HTML 미리보기가 즉시 업데이트됩니다. 탭을 전환하거나 빌드 단계를 실행할 필요가 없습니다. 도구는 모든 주요 문법 기능을 보여주는 전체 샘플 문서를 한국어와 영어로 제공하므로, 페이지가 로드될 때 각 요소가 어떻게 렌더링되는지 즉시 확인할 수 있습니다.
작가, 개발자, 기술 문서 작성자, README 관리자 모두 이 도구를 일상적인 동반자로 사용합니다. 마크다운은 GitHub README, Confluence와 Notion 같은 문서 플랫폼, Jekyll과 Hugo 같은 정적 사이트 생성기, Stack Overflow와 Reddit 같은 플랫폼의 댓글 시스템을 위한 범용 경량 마크업 언어가 되었습니다. 라이브 렌더링이 포함된 치트 시트는 특정 문법이 최종 출력에 어떻게 표시되는지에 대한 추측을 없애줍니다. 문법 레퍼런스 탭에는 15개의 문법 항목이 두 열 카드 레이아웃으로 제시됩니다. 한쪽에는 원시 마크다운 문법, 반대쪽에는 동일한 HTML 출력이 표시됩니다.
렌더링 엔진은 서드파티 라이브러리가 아닌 컴포넌트에 내장된 커스텀 순수 JavaScript 마크다운 파서입니다. 특정 순서로 일련의 정규식 치환을 수행합니다. 먼저 코드 블록(내부 콘텐츠가 수정되지 않도록), 그 다음 인라인 코드, 제목(H1~H6), 수평선, 굵게, 기울임, 취소선, 이미지, 링크, 인용문, 체크리스트, 순서 없는 목록과 순서 있는 목록, 표, 각주 순으로 처리됩니다. 단락은 빈 줄로 형성됩니다. 렌더링된 HTML은 dangerouslySetInnerHTML을 통해 스크롤 가능한 미리보기 창에 삽입되며, 전체 파싱은 useMemo 내부에서 실행되어 마크다운 텍스트가 변경될 때만 재계산됩니다.
주요 기능
- 분할 창 라이브 에디터: 왼쪽에 마크다운 작성, 오른쪽에 렌더링된 HTML 미리보기를 동시에 확인
- 원시 마크다운과 동일한 HTML 출력을 나란히 보여주는 15개 항목 문법 레퍼런스 탭
- H1~H6 제목, 굵게, 기울임, 취소선, 인라인 코드, 언어 태그 있는 코드 블록 지원
- 파이프 문법 표, 순서 없는 목록, 순서 있는 목록, 중첩 목록 들여쓰기 렌더링
- 체크된 체크박스와 미체크 체크박스 렌더링을 지원하는 체크리스트(- [x] 및 - [ ])
- 왼쪽 테두리 스타일의 인용문, 제목 속성 있는 이미지 삽입, 클릭 가능한 링크
- 미리보기에서 위첨자 참조로 렌더링되는 각주 문법([^1])
- 모든 문법을 한 번에 보여주는 로케일에 따른 한국어/영어 샘플 문서 미리 로드
자주 묻는 질문
마크다운이란 무엇이며 왜 사용하나요?
마크다운은 2004년 John Gruber가 만든 경량 마크업 언어로, 일반 텍스트 형식 문법을 사용해 HTML을 생성합니다. GitHub README, 문서 사이트, 블로그 게시물, 노트 앱에 널리 사용됩니다. 일반 텍스트로도 읽기 쉽지만 형식화된 HTML로 렌더링할 수 있기 때문입니다. 문법은 직관적입니다: 제목에는 #, 굵게에는 **텍스트**, 기울임에는 *텍스트*를 사용합니다.
라이브 미리보기는 어떻게 작동하나요?
왼쪽 에디터 창에 입력하면 도구가 커스텀 JavaScript 파서로 마크다운 텍스트를 파싱하고 오른쪽 미리보기 창에 HTML로 렌더링합니다. 렌더링은 React의 useMemo 훅을 사용해 텍스트가 변경될 때만 실행됩니다. 출력은 dangerouslySetInnerHTML을 사용해 표시되어 렌더링된 HTML이 DOM에 직접 삽입됩니다.
어떤 마크다운 문법 요소를 지원하나요?
# 기호를 사용하는 H1~H6 제목, 굵게(**텍스트**), 기울임(*텍스트*), 취소선(~~텍스트~~), 인라인 코드(`코드`), 펜스 코드 블록(```lang), 수평선(---), 순서 없는 목록(- 항목), 순서 있는 목록(1. 항목), 인용문(> 텍스트), 링크([텍스트](url)), 이미지(), 표(파이프 문법), 체크리스트(- [x] 및 - [ ]), 각주([^1])를 지원합니다.
마크다운에서 표를 만드는 방법은?
파이프 문자로 열을 구분하고 하이픈 행으로 헤더와 본문을 구분합니다. 예를 들어 첫 번째 줄에 | 열 A | 열 B |, 두 번째 줄에 | --- | --- |, 세 번째 줄에 | 값 1 | 값 2 |를 입력합니다. 표에는 구분 행이 최소 하나 있어야 합니다. 이 에디터에서는 열 정렬이 지원되지 않지만 GitHub Flavored Markdown 사양에서는 지원됩니다.
인라인 코드와 코드 블록의 차이는 무엇인가요?
인라인 코드는 문장 내에 짧은 코드 조각을 삽입할 때 사용합니다. 텍스트를 단일 백틱으로 감쌉니다: `console.log()`. 코드 블록은 여러 줄의 코드 샘플을 위한 것입니다. 별도 줄에 세 개의 백틱으로 감쌉니다: 시작 부분에 ```javascript, 끝 부분에 ```. 코드 블록은 공백과 줄바꿈을 보존하며, 언어 이름(javascript, python, bash 등)을 지정해 일부 렌더러에서 구문 강조를 사용할 수 있습니다.
마크다운에서 체크리스트는 어떻게 작동하나요?
체크리스트는 대괄호 표기법과 목록 문법을 사용합니다: - [x]는 체크된 항목, - [ ]는 미체크 항목. 이 에디터에서는 항목 텍스트 옆에 비활성화된 HTML 체크박스로 렌더링됩니다. 이 문법은 GitHub Flavored Markdown(GFM)에서 시작되었으며 GitHub, GitLab, Notion을 포함한 대부분의 최신 마크다운 렌더러에서 지원됩니다.
각주란 무엇이며 어떻게 추가하나요?
각주는 주요 콘텐츠를 복잡하게 만들지 않고 텍스트에 참조 노트를 추가할 수 있게 해줍니다. 각주 표시를 원하는 텍스트에 [^1]을 사용하고, 문서 하단 별도 줄에 [^1]: 각주 내용으로 각주 내용을 정의합니다. 이 에디터에서 각주 표시는 미리보기에서 위첨자 숫자로 렌더링됩니다.
GitHub README 파일 작성에 이 에디터를 사용할 수 있나요?
네. 이 에디터가 지원하는 마크다운 문법은 GitHub README, 이슈, 풀 리퀘스트에 사용되는 표준인 GitHub Flavored Markdown(GFM)을 밀접하게 따릅니다. 여기서 README 콘텐츠를 작성하고 미리보고 저장소의 README.md 파일에 직접 복사할 수 있습니다. 단, GFM 특화 확장인 경고(@note, @warning)와 mermaid 다이어그램은 이 에디터에서 지원되지 않습니다.