<div style="max-width:640px;margin:0 auto;line-height:1.6">

<h1 style="text-align:center;color:#2b6cb0;font-size:xx-large"><strong>HTML 서식 종합 테스트</strong></h1>
<p style="text-align:center;color:#888888;font-size:small">아래 서식이 그대로 등록되면, 노하우 HTML도 문제없이 들어갑니다.</p>
<hr>

<h2 style="color:#d89400">1. 글자 꾸밈</h2>
<p style="text-indent:10px;color:#2d3748">
<strong>굵게</strong> · <em>기울임</em> · <u>밑줄</u> · <s>취소선</s> · <del>삭제</del> ·
<span style="color:#e53e3e">빨강</span> · <span style="color:#2f855a">초록</span> ·
<span style="background-color:#fff3cd;color:#856404">형광</span> ·
<span style="font-size:large;letter-spacing:2px">자간넓게</span> ·
H₂O · x²
</p>

<h2 style="color:#d89400">2. 정렬</h2>
<p style="text-align:left;color:#4a5568">왼쪽 정렬</p>
<p style="text-align:center;color:#4a5568">가운데 정렬</p>
<p style="text-align:right;color:#4a5568">오른쪽 정렬</p>

<h2 style="color:#d89400">3. 상자 · 강조</h2>
<div style="border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin:12px 0;background-color:#f7fafc;box-shadow:0 1px 3px #cccccc">
<span style="color:#2b6cb0;font-size:large"><strong>테두리 + 둥근모서리 + 그림자 상자</strong></span>
</div>
<div style="border-left:4px solid #2b6cb0;padding:8px 14px;margin:12px 0;background-color:#ebf8ff">
<span style="color:#2c5282">왼쪽 색 띠로 강조한 인용 느낌의 문단</span>
</div>
<blockquote style="border-left:3px solid #cbd5e0;margin:12px 0;padding-left:12px;color:#718096">인용문 블록(blockquote)입니다.</blockquote>

<h2 style="color:#d89400">4. 목록</h2>
<ul style="color:#2d3748">
<li>점 목록 첫째</li>
<li>둘째 <span style="color:#d89400"><strong>(강조)</strong></span></li>
</ul>
<ol style="color:#2d3748">
<li>번호 목록 첫째</li>
<li>번호 목록 둘째</li>
</ol>

<h2 style="color:#d89400">5. 표 (병합 포함)</h2>
<table border="1" cellpadding="7" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead>
<tr>
<th style="background-color:#2b6cb0;color:#ffffff;text-align:center">항목</th>
<th style="background-color:#2b6cb0;color:#ffffff;text-align:center">설명</th>
<th style="background-color:#2b6cb0;color:#ffffff;text-align:center">가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" style="text-align:center;vertical-align:middle"><strong>묶음</strong></td>
<td style="text-align:left">기본형</td>
<td style="text-align:right;color:#e53e3e"><strong>10,000원</strong></td>
</tr>
<tr>
<td style="text-align:left">고급형</td>
<td style="text-align:right;color:#e53e3e"><strong>20,000원</strong></td>
</tr>
<tr>
<td colspan="3" style="text-align:center;background-color:#edf2f7"><span style="color:#718096;font-size:small">※ 2칸 병합한 안내 줄</span></td>
</tr>
</tbody>
</table>

<h2 style="color:#d89400">6. 버튼형 링크 (A형)</h2>
<div style="text-align:center;margin:20px 0">
<a href="https://example.com" style="display:inline-block;padding:12px 28px;margin:4px;background-color:#2b6cb0;color:#ffffff;border-radius:8px;text-decoration:none;font-size:large"><strong>채움 버튼</strong></a>
<a href="https://example.com" style="display:inline-block;padding:12px 28px;margin:4px;background-color:#ffffff;color:#2b6cb0;border:2px solid #2b6cb0;border-radius:8px;text-decoration:none;font-size:large"><strong>테두리 버튼</strong></a>
<a href="https://example.com" style="display:inline-block;padding:10px 24px;margin:4px;background-color:#d89400;color:#ffffff;border-radius:24px;text-decoration:none"><strong>알약 버튼</strong></a>
</div>

<h2 style="color:#d89400">7. 코드 · 약한 글씨</h2>
<pre style="background-color:#f7fafc;border:1px solid #e2e8f0;padding:10px;border-radius:6px"><code>print("hello")</code></pre>
<p style="opacity:0.6;color:#2d3748">투명도 0.6 적용한 약한 문단</p>

</div>