<div style="max-width:640px;margin:0 auto;line-height:1.6;color:#2d3748;font-family:'Malgun Gothic',sans-serif;font-size:16px"> <h1 style="text-align:center;color:#2b6cb0;font-size:28px;font-weight:bold;margin:16px 0">HTML 서식 종합 테스트</h1> <p style="text-align:center;color:#888888;font-size:13px;margin:6px 0">아래 서식이 그대로 등록되면, 노하우 HTML도 문제없이 들어갑니다.</p> <hr style="border:none;border-top:1px solid #e2e8f0;margin:14px 0"> <h2 style="color:#d89400;font-size:20px;font-weight:bold;margin:18px 0 8px">1. 글자 꾸밈</h2> <p style="color:#2d3748;font-size:16px;text-indent:10px;margin:8px 0"> <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="letter-spacing:2px">자간넓게</span> · H₂O · x² </p> <h2 style="color:#d89400;font-size:20px;font-weight:bold;margin:18px 0 8px">2. 정렬</h2> <p style="text-align:left;color:#4a5568;font-size:16px;margin:4px 0">왼쪽 정렬</p> <p style="text-align:center;color:#4a5568;font-size:16px;margin:4px 0">가운데 정렬</p> <p style="text-align:right;color:#4a5568;font-size:16px;margin:4px 0">오른쪽 정렬</p> <h2 style="color:#d89400;font-size:20px;font-weight:bold;margin:18px 0 8px">3. 상자 · 강조</h2> <div style="border:1px solid #cbd5e0;padding:16px;margin:12px 0;background-color:#f7fafc"> <span style="color:#2b6cb0;font-size:18px"><strong>테두리 + 배경 상자</strong></span> </div> <div style="border-left:4px solid #2b6cb0;padding:8px 14px;margin:12px 0;background-color:#ebf8ff"> <span style="color:#2c5282;font-size:16px">왼쪽 색 띠로 강조한 인용 느낌의 문단</span> </div> <blockquote style="border-left:3px solid #cbd5e0;margin:12px 0;padding-left:12px;color:#718096;font-size:16px">인용문 블록(blockquote)입니다.</blockquote> <h2 style="color:#d89400;font-size:20px;font-weight:bold;margin:18px 0 8px">4. 목록</h2> <ul style="margin:8px 0;padding-left:24px;color:#2d3748;font-size:16px"> <li style="color:#2d3748;font-size:16px;margin:3px 0">점 목록 첫째</li> <li style="color:#2d3748;font-size:16px;margin:3px 0">둘째 <span style="color:#d89400"><strong>(강조)</strong></span></li> </ul> <ol style="margin:8px 0;padding-left:24px;color:#2d3748;font-size:16px"> <li style="color:#2d3748;font-size:16px;margin:3px 0">번호 목록 첫째</li> <li style="color:#2d3748;font-size:16px;margin:3px 0">번호 목록 둘째</li> </ol> <h2 style="color:#d89400;font-size:20px;font-weight:bold;margin:18px 0 8px">5. 표 (병합 포함)</h2> <table style="border-collapse:collapse;width:100%;border:1px solid #cbd5e0;font-size:16px"> <thead> <tr> <th style="border:1px solid #cbd5e0;padding:8px;background-color:#2b6cb0;color:#ffffff;text-align:center">항목</th> <th style="border:1px solid #cbd5e0;padding:8px;background-color:#2b6cb0;color:#ffffff;text-align:center">설명</th> <th style="border:1px solid #cbd5e0;padding:8px;background-color:#2b6cb0;color:#ffffff;text-align:center">가격</th> </tr> </thead> <tbody> <tr> <td rowspan="2" style="border:1px solid #cbd5e0;padding:8px;color:#2d3748;text-align:center;vertical-align:middle"><strong>묶음</strong></td> <td style="border:1px solid #cbd5e0;padding:8px;color:#2d3748;text-align:left">기본형</td> <td style="border:1px solid #cbd5e0;padding:8px;color:#e53e3e;text-align:right"><strong>10,000원</strong></td> </tr> <tr> <td style="border:1px solid #cbd5e0;padding:8px;color:#2d3748;text-align:left">고급형</td> <td style="border:1px solid #cbd5e0;padding:8px;color:#e53e3e;text-align:right"><strong>20,000원</strong></td> </tr> <tr> <td colspan="3" style="border:1px solid #cbd5e0;padding:8px;color:#718096;font-size:13px;text-align:center;background-color:#edf2f7">※ 2칸 병합한 안내 줄</td> </tr> </tbody> </table> <h2 style="color:#d89400;font-size:20px;font-weight:bold;margin:18px 0 8px">6. 버튼형 링크</h2> <div style="text-align:center;margin:20px 0"> <a href="https://example.com" style="padding:12px 28px;margin:4px;background-color:#2b6cb0;color:#ffffff;font-size:18px;text-decoration:none"><strong>채움 버튼</strong></a> <a href="https://example.com" style="padding:12px 28px;margin:4px;background-color:#ffffff;color:#2b6cb0;border:2px solid #2b6cb0;font-size:18px;text-decoration:none"><strong>테두리 버튼</strong></a> <a href="https://example.com" style="padding:12px 28px;margin:4px;background-color:#d89400;color:#ffffff;font-size:18px;text-decoration:none"><strong>색강조 버튼</strong></a> </div> <h2 style="color:#d89400;font-size:20px;font-weight:bold;margin:18px 0 8px">7. 코드 · 약한 글씨</h2> <pre style="background-color:#f7fafc;border:1px solid #e2e8f0;padding:10px;margin:8px 0;color:#2d3748;font-size:14px;font-family:'Courier New',monospace">print("hello")</pre> <p style="color:#a0aec0;font-size:16px;margin:8px 0">연한 색으로 약하게 쓴 문단</p> </div>