📝 Markdown 미리보기

Markdown 미리보기란?

마크다운(Markdown) 문법을 실시간으로 HTML로 변환하여 미리보기할 수 있는 무료 온라인 도구입니다. 왼쪽에 마크다운 문법을 입력하면 오른쪽에 즉시 렌더링된 결과가 표시됩니다. 브라우저에서만 동작하여 서버로 데이터가 전송되지 않으므로 개인정보가 완전히 보호됩니다.

이런 분들에게 추천합니다

• README 파일을 작성하는 개발자
• 기술 문서를 작성하는 테크니컬 라이터
• 마크다운 문법을 배우고 있는 초보자
• 블로그 포스트를 마크다운으로 작성하는 블로거
• GitHub, GitLab 등에서 문서를 작성하는 모든 사용자

사용 방법

1. 마크다운 입력: 왼쪽 편집기에 마크다운 문법 입력
2. 실시간 미리보기: 오른쪽에 즉시 HTML로 변환된 결과 확인
3. HTML 복사: "HTML 복사" 버튼으로 변환된 HTML 코드 복사
4. 지우기: "지우기" 버튼으로 입력 내용 초기화

지원하는 마크다운 문법

• 제목: # 제목1, ## 제목2, ### 제목3
• 굵게: **굵은 글씨** 또는 __굵은 글씨__
• 기울임: *기울임* 또는 _기울임_
• 굵게+기울임: ***굵고 기울임*** 또는 ___굵고 기울임___
• 링크: [링크 텍스트](URL)
• 이미지: 
• 인라인 코드: `코드`
• 목록: - 항목 또는 * 항목

주요 기능

• 실시간 변환: 입력과 동시에 즉시 HTML로 변환
• 분할 화면: 편집기와 미리보기를 동시에 확인
• HTML 복사: 변환된 HTML 코드를 클립보드에 복사
• 지우기 기능: 한 번에 모든 내용 초기화
• 서버 전송 없음: 브라우저에서만 처리되어 안전
• 반응형 디자인: 모바일에서도 사용 가능

활용 사례

• GitHub README: 프로젝트 README.md 파일 작성 및 미리보기
• 기술 문서: API 문서, 가이드 작성
• 블로그 포스트: 마크다운 기반 블로그 글 작성
• 학습 자료: 마크다운 문법 연습 및 학습
• 이슈/PR: GitHub 이슈나 Pull Request 작성
• 위키 페이지: 위키 문서 작성 및 편집

마크다운 작성 팁

• 제목 계층: #의 개수로 제목 레벨 조정 (최대 6개)
• 빈 줄: 문단 구분을 위해 빈 줄 사용
• 링크 새 탭: 이 도구에서 생성된 링크는 자동으로 새 탭에서 열림
• 이미지 크기: 이미지는 자동으로 최대 너비에 맞춰짐
• 코드 강조: 인라인 코드는 백틱(`)으로 감싸기

마크다운 문법 예제

• 제목: # 큰 제목, ## 중간 제목, ### 작은 제목
• 강조: **중요한 내용**, *강조할 내용*
• 링크: [Google](https://google.com)
• 목록: - 첫 번째 항목, - 두 번째 항목
• 코드: `console.log('Hello')`

자주 묻는 질문 (FAQ)