[참고용] HTML 서식 종합 테스트 (지우지마세요), 상담받고 싶습니다
페이지 정보
작성자 coolwind9484 (220.♡.244.115) 댓글 0건 조회 2회 작성일 2026-10-28 13:05본문
<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<sub>2</sub>O · x<sup>2</sup> </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>
댓글목록
등록된 댓글이 없습니다.