HTML 임베딩

마크다운의 강력한 기능 중 하나는 HTML 코드를 직접 삽입할 수 있다는 점으로, 문서에 더 풍부한 표현력과 기능 확장을 제공합니다.

기본 HTML 임베딩

인라인 HTML 요소

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

markdown

이것은 <strong>굵은 텍스트</strong>와 <em>기울임 텍스트</em>가 포함된 문단입니다.

<code>인라인 코드</code> 또는 <mark>하이라이트 텍스트</mark>를 사용할 수 있습니다.

여기는 <a href="https://www.markdownlang.com" target="_blank">외부 링크</a>입니다.

렌더링 결과:

이것은 굵은 텍스트와 기울임 텍스트가 포함된 문단입니다.

인라인 코드 또는 하이라이트 텍스트를 사용할 수 있습니다.

여기는 외부 링크입니다.

블록 레벨 HTML 요소

markdown

<div class="alert alert-info">
  <h4>정보</h4>
  <p>HTML로 만든 정보 알림 박스입니다.</p>
</div>

<blockquote style="border-left: 4px solid #007bff; padding-left: 1rem; color: #6c757d;">
  <p>이것은 커스텀 스타일의 인용문입니다.</p>
  <footer>—— 출처</footer>
</blockquote>

렌더링 결과:

정보

HTML로 만든 정보 알림 박스입니다.

이것은 커스텀 스타일의 인용문입니다.
—— 출처

일반적인 HTML 확장

이미지 확장

이미지 크기 제어

markdown

<!-- HTML로 이미지 크기 정밀 제어 -->
<img src="example.jpg" alt="샘플 이미지" width="300" height="200">

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

<!-- 이미지 정렬 -->
<div align="center">
  <img src="example.jpg" alt="가운데 정렬 이미지" width="400">
</div>

이미지 갤러리

markdown

<div style="display: flex; gap: 10px; justify-content: center;">
  <img src="img1.jpg" alt="이미지 1" style="width: 200px;">
  <img src="img2.jpg" alt="이미지 2" style="width: 200px;">
  <img src="img3.jpg" alt="이미지 3" style="width: 200px;">
</div>

<!-- 이미지 그리드 -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
  <img src="img1.jpg" alt="이미지 1" style="width: 100%;">
  <img src="img2.jpg" alt="이미지 2" style="width: 100%;">
  <img src="img3.jpg" alt="이미지 3" style="width: 100%;">
  <img src="img4.jpg" alt="이미지 4" style="width: 100%;">
</div>

동영상 및 미디어 임베딩

동영상 임베딩

markdown

<!-- YouTube 동영상 -->
<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

<!-- Bilibili 동영상 -->
<iframe src="//player.bilibili.com/player.html?bvid=BV_ID&page=1" 
        scrolling="no" 
        border="0" 
        frameborder="no" 
        framespacing="0" 
        allowfullscreen="true" 
        width="100%" 
        height="400">
</iframe>

<!-- HTML5 동영상 -->
<video controls width="100%" height="400">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  사용 중인 브라우저는 video 태그를 지원하지 않습니다.
</video>

오디오 임베딩

markdown

<!-- HTML5 오디오 -->
<audio controls style="width: 100%;">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  사용 중인 브라우저는 audio 요소를 지원하지 않습니다.
</audio>

<!-- NetEase Cloud Music -->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" 
        width="330" height="86" 
        src="//music.163.com/outchain/player?type=2&id=SONG_ID&auto=1&height=66">
</iframe>

표 확장

복잡한 표 구조

markdown

<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #f8f9fa;">
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">제품</th>
      <th colspan="2" style="border: 1px solid #ddd; padding: 8px;">매출 데이터</th>
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">총 수익</th>
    </tr>
    <tr style="background-color: #f8f9fa;">
      <th style="border: 1px solid #ddd; padding: 8px;">Q1</th>
      <th style="border: 1px solid #ddd; padding: 8px;">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">제품 A</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">₩100,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">₩120,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;">₩220,000</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">제품 B</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">₩80,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">₩90,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;">₩170,000</td>
    </tr>
  </tbody>
</table>

렌더링 결과:

제품	매출 데이터		총 수익
제품	Q1	Q2	총 수익
제품 A	₩100,000	₩120,000	₩220,000
제품 B	₩80,000	₩90,000	₩170,000

양식 및 상호작용 요소

기본 양식 요소

markdown

<form>
  <div style="margin-bottom: 1rem;">
    <label for="name" style="display: block; margin-bottom: 0.5rem;">Name:</label>
    <input type="text" id="name" name="name" 
           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
  </div>
  
  <div style="margin-bottom: 1rem;">
    <label for="email" style="display: block; margin-bottom: 0.5rem;">Email:</label>
    <input type="email" id="email" name="email" 
           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
  </div>
  
  <div style="margin-bottom: 1rem;">
    <label for="message" style="display: block; margin-bottom: 0.5rem;">Message:</label>
    <textarea id="message" name="message" rows="4" 
              style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
    </textarea>
  </div>
  
  <button type="submit" 
          style="background-color: #007bff; color: white; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer;">
    Submit
  </button>
</form>

상호작용 요소

markdown

<!-- 콜라이드 컨텐츠 -->
<details>
  <summary style="cursor: pointer; font-weight: bold;">Click to expand for more details</summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    <p>This is the detailed content inside the collapsible section.</p>
    <p>You can include any HTML content here.</p>
  </div>
</details>

<!-- 진행률 바 -->
<div style="margin: 1rem 0;">
  <label>Project Progress:</label>
  <progress value="32" max="100" style="width: 100%;">32%</progress>
  <span>32%</span>
</div>

<!-- 별점 -->
<div style="font-size: 1.5rem; color: #ffc107;">
  ★★★★☆
</div>

렌더링 결과:

Click to expand for more details

This is the detailed content inside the collapsible section.

You can include any HTML content here.

Project Progress:32%32%

★★★★☆

레이아웃 및 스타일링

Flexbox 레이아웃

markdown

<div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: #f8f9fa; border-radius: 8px;">
  <div style="flex: 1;">
    <h4 style="margin: 0;">Title</h4>
    <p style="margin: 0.5rem 0 0 0; color: #6c757d;">This is a description text</p>
  </div>
  <div>
    <button style="background-color: #28a745; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px;">
      Action
    </button>
  </div>
</div>

<!-- 카드 레이아웃 -->
<div style="display: flex; gap: 1rem; margin: 1rem 0;">
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Card 1</h5>
    <p>Card content description</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Card 2</h5>
    <p>Card content description</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Card 3</h5>
    <p>Card content description</p>
  </div>
</div>

그리드 레이아웃

markdown

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0;">
  <div style="padding: 1rem; background-color: #e3f2fd; border-radius: 8px;">
    <h6>Feature 1</h6>
    <p>Feature description</p>
  </div>
  <div style="padding: 1rem; background-color: #f3e5f5; border-radius: 8px;">
    <h6>Feature 2</h6>
    <p>Feature description</p>
  </div>
  <div style="padding: 1rem; background-color: #e8f5e8; border-radius: 8px;">
    <h6>Feature 3</h6>
    <p>Feature description</p>
  </div>
  <div style="padding: 1rem; background-color: #fff3e0; border-radius: 8px;">
    <h6>Feature 4</h6>
    <p>Feature description</p>
  </div>
</div>

알림 및 경고

다양한 유형의 알림

markdown

<!-- 정보 알림 -->
<div style="padding: 1rem; background-color: #d1ecf1; border: 1px solid #bee5eb; border-radius: 4px; margin: 1rem 0;">
  <strong>💡 Info:</strong> This is an info alert box.
</div>

<!-- 성공 알림 -->
<div style="padding: 1rem; background-color: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>✅ Success:</strong> The operation was completed successfully.
</div>

<!-- 경고 알림 -->
<div style="padding: 1rem; background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; margin: 1rem 0;">
  <strong>⚠️ Warning:</strong> Please pay attention to this important notice.
</div>

<!-- 오류 알림 -->
<div style="padding: 1rem; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>❌ Error:</strong> An error has occurred.
</div>

렌더링 결과:

💡 Info: This is an info alert box.

✅ Success: The operation was completed successfully.

⚠️ Warning: Please pay attention to this important notice.

❌ Error: An error has occurred.

외부 콘텐츠 임베딩

소셜 미디어

markdown

<!-- Twitter embed -->
<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">This is a tweet content...</p>
  <a href="https://twitter.com/user/status/123456789">Tweet Link</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<!-- Weibo embed -->
<iframe width="100%" height="500" class="share_self" 
        frameborder="0" scrolling="no" 
        src="https://widget.weibo.com/weiboshow/index.php?language=&width=0&height=500&fansRow=1&ptype=1&speed=0&skin=1&isTitle=1&noborder=1&isWeibo=1&isFans=1&uid=1234567890&verifier=a1b2c3d4">
</iframe>

온라인 서비스

markdown

<!-- CodePen embed -->
<iframe height="300" style="width: 100%;" scrolling="no" title="CSS Animation Example" 
        src="https://codepen.io/user/embed/EXAMPLE?default-tab=html%2Cresult" 
        frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>

<!-- JSFiddle embed -->
<iframe width="100%" height="300" 
        src="//jsfiddle.net/user/example/embedded/js,html,css,result/" 
        allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0">
</iframe>

<!-- Google Maps embed -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3048.0!2d116.4074!3d39.9042!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMznCsDU0JzE1LjEiTiAxMTbCsDI0JzI2LjYiRQ!5e0!3m2!1szh-CN!2scn!4v1234567890" 
        width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>

사용자 정의 컴포넌트

태그 및 뱃지

markdown

<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #007bff; color: white; border-radius: 3px;">
  Frontend
</span>
<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #28a745; color: white; border-radius: 3px;">
  React
</span>
<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #ffc107; color: black; border-radius: 3px;">
  JavaScript
</span>

렌더링 결과:

Frontend React JavaScript

타임라인

markdown

<div style="position: relative; padding-left: 2rem;">
  <div style="position: absolute; left: 0.5rem; top: 0; bottom: 0; width: 2px; background-color: #ddd;"></div>
  
  <div style="position: relative; margin-bottom: 2rem;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #007bff; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #007bff;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">December 2023</h5>
    <p style="margin: 0;">Project started, requirements analysis and technology selection completed.</p>
  </div>
  
  <div style="position: relative; margin-bottom: 2rem;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #28a745; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #28a745;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">January 2024</h5>
    <p style="margin: 0;">Core features developed, entered testing phase.</p>
  </div>
  
  <div style="position: relative;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #6c757d; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #6c757d;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">February 2024</h5>
    <p style="margin: 0;">Project launched and started promotion.</p>
  </div>
</div>

노트 및 제한

HTML 보안

markdown

<!-- ✅ 안전한 HTML -->
<div style="color: blue;">Safe style</div>
<strong>Bold text</strong>
<em>Italic text</em>

<!-- ❌ 필터링된 콘텐츠 -->
<script>alert('Unsafe script')</script>
<iframe src="javascript:alert('XSS')"></iframe>
<object data="malicious.swf"></object>

Markdown 파서 호환성

다른 Markdown 파서들은 HTML 지원 수준이 다릅니다:

파서	HTML 지원	제한
GitHub	부분적	스크립트 및 위험 태그 필터링
GitLab	부분적	보안 필터링
VitePress	전체	설정에 따름
Jekyll	전체	설정 가능
Hugo	부분적	활성화 필요

모범 사례 권고

markdown

✅ 권장:
1. 의미론적 HTML 태그 사용
2. 적절한 스타일 확장 추가
3. 콘텐츠 접근성 확보
4. 코드 깔끔하고 유지보수 용이

❌ 피하기:
1. 복잡한 HTML 과도 사용
2. 위험한 스크립트 임베딩
3. 모바일 적응성 무시
4. 사용되지 않는 태그 사용

실용적인 시나리오

1. 제품 문서화

markdown

<div style="display: flex; align-items: center; margin: 2rem 0; padding: 1.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 10px;">
  <div style="flex: 1;">
    <h2 style="margin: 0 0 0.5rem 0;">🚀 제품 기능</h2>
    <p style="margin: 0; opacity: 0.9;">우리의 최신 기능과 개선 사항을 경험해보세요</p>
  </div>
  <div>
    <button style="background: rgba(255,255,255,0.2); border: 2px solid white; color: white; padding: 0.75rem 1.5rem; border-radius: 25px; cursor: pointer; backdrop-filter: blur(10px);">
      Learn More
    </button>
  </div>
</div>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #007bff;">
    <h4 style="color: #007bff; margin: 0 0 1rem 0;">⚡ 고성능</h4>
    <p style="color: #666; line-height: 1.6;">최적화된 알고리즘과 아키텍처로 최고의 성능을 제공합니다.</p>
  </div>
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #28a745;">
    <h4 style="color: #28a745; margin: 0 0 1rem 0;">🔒 안전하고 신뢰할 수 있음</h4>
    <p style="color: #666; line-height: 1.6;">기업 수준의 보안, 암호화된 데이터 전송 및 저장.</p>
  </div>
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #ffc107;">
    <h4 style="color: #e68900; margin: 0 0 1rem 0;">🎨 사용하기 쉬움</h4>
    <p style="color: #666; line-height: 1.6;">직관적인 사용자 인터페이스와 간소화된 워크플로우.</p>
  </div>
  
</div>

2. API 문서화

markdown

<div style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin: 1rem 0;">
  <div style="display: flex; align-items: center; margin-bottom: 1rem;">
    <span style="background: #28a745; color: white; padding: 0.25rem 0.75rem; border-radius: 4px; font-weight: bold; font-size: 0.875rem;">POST</span>
    <code style="margin-left: 1rem; flex: 1; background: #e9ecef; padding: 0.5rem; border-radius: 4px;">/api/v1/users</code>
  </div>
  
  <h4 style="margin: 0 0 1rem 0;">Create User</h4>
  <p style="color: #6c757d; margin: 0;">Create a new user account</p>
</div>

<details style="margin: 1rem 0;">
  <summary style="cursor: pointer; font-weight: bold; padding: 0.5rem; background: #e9ecef; border-radius: 4px;">
    📋 Request Parameters
  </summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    
<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background: #f8f9fa;">
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Parameter</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Type</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Required</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 0.5rem;"><code>name</code></td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">string</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">✅</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">User name</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 0.5rem;"><code>email</code></td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">string</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">✅</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">Email address</td>
    </tr>
  </tbody>
</table>

  </div>
</details>

3. 팀 소개

markdown

<div style="text-align: center; margin: 3rem 0;">
  <h2 style="margin-bottom: 2rem; color: #333;">👥 팀원</h2>
  
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; max-width: 800px; margin: 0 auto;">
    
    <div style="text-align: center;">
      <img src="avatar1.jpg" alt="Zhang San" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 4px solid #007bff;">
      <h4 style="margin: 0 0 0.5rem 0; color: #333;">Zhang San</h4>
      <p style="color: #007bff; font-weight: bold; margin: 0 0 0.5rem 0;">Frontend Engineer</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">React와 Vue 개발에 집중하며, 사용자 경험 디자인에 열정을 가집니다.</p>
      <div style="margin-top: 1rem;">
        <a href="#" style="color: #007bff; text-decoration: none; margin: 0 0.5rem;">GitHub</a>
        <a href="#" style="color: #007bff; text-decoration: none; margin: 0 0.5rem;">LinkedIn</a>
      </div>
    </div>
    
    <div style="text-align: center;">
      <img src="avatar2.jpg" alt="Li Si" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 4px solid #28a745;">
      <h4 style="margin: 0 0 0.5rem 0; color: #333;">Li Si</h4>
      <p style="color: #28a745; font-weight: bold; margin: 0 0 0.5rem 0;">Backend Engineer</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">Node.js와 Python에 능숙하며, 시스템 아키텍처 설계에 집중합니다.</p>
      <div style="margin-top: 1rem;">
        <a href="#" style="color: #28a745; text-decoration: none; margin: 0 0.5rem;">GitHub</a>
        <a href="#" style="color: #28a745; text-decoration: none; margin: 0 0.5rem;">LinkedIn</a>
      </div>
    </div>
    
  </div>
</div>

도구 및 리소스

HTML/CSS 프레임워크

Bootstrap: 빠른 프로토타이핑 및 반응형 디자인
Tailwind CSS: 유틸리티 퍼스트 CSS 프레임워크
Bulma: 현대적인 CSS 프레임워크
Foundation: 반응형 프론트엔드 프레임워크

온라인 도구

CodePen: 온라인 HTML/CSS/JS 에디터
JSFiddle: 코드 스니펫 테스트
CSS Grid Generator: CSS 그리드 레이아웃 생성기
Flexbox Froggy: Flexbox 학습 게임

브라우저 개발자 도구

Chrome DevTools: 요소 검사 및 스타일 디버깅
Firefox Developer Tools: 그리드 및 Flexbox 디버깅
Safari Web Inspector: macOS/iOS 디버깅
Edge DevTools: 접근성 확인

HTML 임베딩은 강력하지만, 문서의 가독성과 유지보수성을 위해 적절히 사용하세요.

HTML 임베딩 ​

기본 HTML 임베딩 ​

인라인 HTML 요소 ​

블록 레벨 HTML 요소 ​

정보

일반적인 HTML 확장 ​

이미지 확장 ​

이미지 크기 제어 ​

이미지 갤러리 ​

동영상 및 미디어 임베딩 ​

동영상 임베딩 ​

오디오 임베딩 ​

표 확장 ​

복잡한 표 구조 ​

양식 및 상호작용 요소 ​

기본 양식 요소 ​

상호작용 요소 ​

레이아웃 및 스타일링 ​

Flexbox 레이아웃 ​

그리드 레이아웃 ​

알림 및 경고 ​

다양한 유형의 알림 ​

외부 콘텐츠 임베딩 ​

소셜 미디어 ​

온라인 서비스 ​

사용자 정의 컴포넌트 ​

태그 및 뱃지 ​

타임라인 ​

노트 및 제한 ​

HTML 보안 ​

Markdown 파서 호환성 ​

모범 사례 권고 ​

실용적인 시나리오 ​

1. 제품 문서화 ​

2. API 문서화 ​

3. 팀 소개 ​

관련 구문 ​

도구 및 리소스 ​

HTML/CSS 프레임워크 ​

온라인 도구 ​

브라우저 개발자 도구 ​

HTML 임베딩

기본 HTML 임베딩

인라인 HTML 요소

블록 레벨 HTML 요소

일반적인 HTML 확장

이미지 확장

이미지 크기 제어

이미지 갤러리

동영상 및 미디어 임베딩

동영상 임베딩

오디오 임베딩

표 확장

복잡한 표 구조

양식 및 상호작용 요소

기본 양식 요소

상호작용 요소

레이아웃 및 스타일링

Flexbox 레이아웃

그리드 레이아웃

알림 및 경고

다양한 유형의 알림

외부 콘텐츠 임베딩

소셜 미디어

온라인 서비스

사용자 정의 컴포넌트

태그 및 뱃지

타임라인

노트 및 제한

HTML 보안

Markdown 파서 호환성

모범 사례 권고

실용적인 시나리오

1. 제품 문서화

2. API 문서화

3. 팀 소개

관련 구문

도구 및 리소스

HTML/CSS 프레임워크

온라인 도구

브라우저 개발자 도구