고급 마크다운 사용법

기본 및 확장 마크다운 문법만으로 특정 요구를 충족할 수 없을 때, 몇 가지 고급 팁과 우회 방법을 익혀야 합니다. 이 장에서는 마크다운의 한계를 돌파하여 더 복잡한 서식과 기능을 구현하는 방법을 소개합니다.

고급 사용이란?

고급 사용(우회 방법)은 마크다운 문법의 한계 내에서 창의적인 방법으로 특정 서식 효과를 달성하는 것을 의미합니다. 이러한 팁은 보통 다음을 포함합니다:

• HTML 코드 임베딩
• 다양한 문법 요소 조합
• 플랫폼별 확장 기능 활용
• 서드파티 도구 및 플러그인 사용

주요 활용 시나리오

레이아웃 제어

• 텍스트 정렬
• 다단 레이아웃
• 텍스트와 이미지 혼합
• 간격 조정

스타일 커스터마이즈

• 색상 설정
• 글꼴 변경
• 크기 조절
• 특수 효과

고급 콘텐츠

• 수식
• 순서도 및 다이어그램
• 인터랙티브 요소
• 미디어 임베딩

HTML 확장

기본 HTML 태그

마크다운 문서에서 HTML 태그를 직접 사용할 수 있습니다:

<div style="text-align: center;">
  <strong style="color: red;">가운데 정렬된 굵은 빨간 텍스트</strong>
</div>

<img src="image.jpg" width="300" height="200" alt="지정 크기 이미지">

<table border="1">
  <tr>
    <td style="background-color: #f0f0f0;">커스텀 스타일 테이블</td>
  </tr>
</table>

스타일 제어

CSS 스타일을 사용해 정밀하게 제어할 수 있습니다:

<p style="color: blue; font-size: 18px; text-align: center;">
  파란색, 18px, 가운데 정렬 문단
</p>

<div style="border: 2px solid #333; padding: 10px; border-radius: 5px;">
  테두리가 있는 콘텐츠 영역
</div>

고급 이미지 처리

이미지 정렬

<!-- 왼쪽 정렬 -->
<img src="image.jpg" align="left" width="200">

<!-- 오른쪽 정렬 -->
<img src="image.jpg" align="right" width="200">

<!-- 가운데 정렬 -->
<div align="center">
  <img src="image.jpg" width="300">
</div>

이미지 크기 조절

<!-- 고정 너비와 높이 -->
<img src="image.jpg" width="300" height="200">

<!-- 반응형 이미지 -->
<img src="image.jpg" style="max-width: 100%; height: auto;">

<!-- 테두리 있는 이미지 -->
<img src="image.jpg" style="border: 2px solid #ddd; border-radius: 8px;">

텍스트와 이미지 혼합

<div style="display: flex; align-items: center;">
  <img src="avatar.jpg" width="80" height="80" style="margin-right: 15px;">
  <div>
    <h3 style="margin: 0;">사용자명</h3>
    <p style="margin: 5px 0;">이곳은 사용자의 소개 텍스트...</p>
  </div>
</div>

표 확장

표 스타일 커스터마이즈

<table style="border-collapse: collapse; width: 100%;">
  <thead style="background-color: #f2f2f2;">
    <tr>
      <th style="border: 1px solid #ddd; padding: 8px;">열 제목 1</th>
      <th style="border: 1px solid #ddd; padding: 8px;">열 제목 2</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: #f9f9f9;">
      <td style="border: 1px solid #ddd; padding: 8px;">데이터 1</td>
      <td style="border: 1px solid #ddd; padding: 8px;">데이터 2</td>
    </tr>
  </tbody>
</table>

복잡한 표 구조

<table>
  <tr>
    <td rowspan="2">행 병합</td>
    <td>일반 셀</td>
  </tr>
  <tr>
    <td>일반 셀</td>
  </tr>
  <tr>
    <td colspan="2">열 병합</td>
  </tr>
</table>

수식 지원

LaTeX 문법

많은 플랫폼에서 LaTeX 수식을 지원합니다:

인라인 수식: $E = mc^2$

블록 수식:
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

행렬:
$$
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
$$

MathJax 통합

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

순서도 및 다이어그램

Mermaid 다이어그램

graph TD
    A[시작] --> B{조건}
    B -->|예| C[작업 A 실행]
    B -->|아니오| D[작업 B 실행]
    C --> E[종료]
    D --> E

간트 차트

gantt
    title 프로젝트 계획
dateFormat  YYYY-MM-DD
section 설계 단계
요구사항 분석      :done,    des1, 2023-01-01,2023-01-15
UI 설계       :active,  des2, 2023-01-16, 3d
section 개발 단계
프론트엔드 개발     :         dev1, after des2, 20d
백엔드 개발     :         dev2, after des2, 25d

인터랙티브 요소

접을 수 있는 콘텐츠

<details>
  <summary>클릭하여 펼치기</summary>
  <p>이것은 접힌 콘텐츠입니다...</p>
</details>

진행률 표시줄

<progress value="70" max="100">70%</progress>

버튼 스타일

<button style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px;">
  버튼 클릭
</button>

레이아웃 팁

다단 레이아웃

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
  <div>
    <h3>왼쪽 열 콘텐츠</h3>
    <p>이것은 왼쪽 열의 콘텐츠입니다...</p>
  </div>
  <div>
    <h3>오른쪽 열 콘텐츠</h3>
    <p>이것은 오른쪽 열의 콘텐츠입니다...</p>
  </div>
</div>

카드 레이아웃

<div style="border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin: 16px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
  <h3 style="margin-top: 0;">카드 제목</h3>
  <p>카드 콘텐츠 설명...</p>
  <a href="#" style="color: #007bff; text-decoration: none;">더 알아보기</a>
</div>

플랫폼별 기능

GitHub 기능

<!-- 작업 목록 -->
- [x] 완료된 작업
- [ ] 미완료 작업

<!-- 사용자 언급 -->
@사용자명

<!-- 이슈 참조 -->
#123

<!-- 코드 차이 -->
```diff
- 삭제된 줄
+ 추가된 줄

### GitLab 기능

```markdown
<!-- 비디오 임베드 -->
![video](video.mp4)

<!-- 오디오 임베드 -->
![audio](audio.mp3)

모범 사례 권장사항

호환성 고려사항

• 다양한 플랫폼에서 고급 문법을 테스트하세요
• 지원되지 않는 플랫폼을 위한 대안 솔루션을 제공하세요
• 표준 마크다운 문법을 선호하세요

성능 최적화

• 인라인 스타일의 과도한 사용을 피하세요
• 통일된 스타일링을 위해 외부 CSS 파일을 사용하세요
• 이미지와 미디어 파일을 압축하세요

유지보수성

• 코드를 깔끔하고 읽기 쉽게 유지하세요
• 필요한 주석을 추가하세요
• 문서 관리를 위해 버전 관리를 사용하세요

도구 및 리소스

권장 에디터

• Typora - WYSIWYG 에디터
• Obsidian - 지식 관리 도구
• Mark Text - 실시간 미리보기 에디터

온라인 도구

• Markdown Tables Generator
• Mermaid Live Editor
• LaTeX Formula Editor

참조 리소스

• CommonMark Spec
• GitHub Flavored Markdown
• Markdown Guide

추가 학습

• HTML 임베딩 설명
• 수식 문법
• 순서도 생성
• 모범 사례 가이드