타이포그래피
분류: 타이포그래피
HandStack 화면에서 사용할 수 있는 기본 텍스트 서식 요소를 한 카드에 모은 참고표입니다. 순서 없는/있는 목록, 스타일 없는 목록, 인용문(blockquote), 강조·취소선·밑줄 등 인라인 텍스트 요소, 시맨틱 텍스트 색상(text-primary, text-danger 등), 주소(address), 그리고 h1~h6 제목 크기를 각각 별도 컬럼으로 비교해서 보여줍니다. 새 화면에서 본문 텍스트를 꾸밀 때 이 표에서 필요한 요소를 그대로 가져다 쓰면 됩니다.
소스
<div class="card overflow-auto mt-3">
<div class="card-status-top bg-dark-overlay"></div>
<div class="card-header">
<h3 class="card-title">타이포그래피</h3>
</div>
<div class="card-body">
<div class="row g-4">
<div class="col-md-4">
<h3>순서 없는 목록</h3>
<ul>
<li>목록 항목 예시</li>
<li>
목록 항목 예시
<ul>
<li>중첩된 목록 항목</li>
<li>중첩된 목록 항목</li>
</ul>
</li>
<li>목록 항목 예시</li>
<li>목록 항목 예시</li>
</ul>
</div>
<div class="col-md-4">
<h3>순서 있는 목록</h3>
<ol>
<li>목록 항목 예시 1</li>
<li>목록 항목 예시 2</li>
<li>목록 항목 예시 3</li>
<li>목록 항목 예시 4</li>
<li>목록 항목 예시 5</li>
<li>목록 항목 예시 6</li>
</ol>
</div>
<div class="col-md-4">
<h3>스타일 없는 목록</h3>
<ul class="list-unstyled">
<li>목록 항목 예시</li>
<li>목록 항목 예시</li>
<li>목록 항목 예시</li>
<li>목록 항목 예시</li>
<li>목록 항목 예시</li>
<li>목록 항목 예시</li>
</ul>
</div>
<div class="col-12">
<h3>인용문</h3>
<blockquote class="blockquote">
<p>이곳에 인용문을 넣을 수 있습니다. 이것은 인용문의 예시 텍스트입니다. 독자에게 영감을 주거나 중요한 내용을 강조할 때 사용됩니다.</p>
<footer class="blockquote-footer">율리우스 카이사르</footer>
</blockquote>
</div>
<div class="col-md-4">
<h3>텍스트 요소</h3>
<div>mark 태그를 사용하여 텍스트를 <mark>강조</mark>할 수 있습니다.</div>
<div><s>이 텍스트 줄은 삭제된 것으로 처리됩니다.</s></div>
<div><u>이 텍스트 줄은 밑줄이 그어져 렌더링됩니다.</u></div>
<div><small>이 텍스트 줄은 작은 글씨로 처리됩니다.</small></div>
<div>다음 텍스트는 <strong>굵게 렌더링됩니다.</strong></div>
<div>다음 텍스트는 <em>기울임꼴로 렌더링됩니다.</em></div>
<div>다음 텍스트는 유용한 키보드 단축키를 보여줍니다: <kbd>⌘</kbd> + <kbd>C</kbd> 또는 <kbd>ctrl</kbd> + <kbd>C</kbd>.</div>
</div>
<div class="col-md-4">
<h3>텍스트 색상</h3>
<div class="text-primary">이것은 기본 텍스트의 예시입니다.</div>
<div class="text-secondary">이것은 보조 텍스트의 예시입니다.</div>
<div class="text-body">이것은 본문 텍스트의 예시입니다.</div>
<div class="text-success">이것은 성공 텍스트의 예시입니다.</div>
<div class="text-info">이것은 정보 텍스트의 예시입니다.</div>
<div class="text-warning">이것은 경고 텍스트의 예시입니다.</div>
<div class="text-danger">이것은 위험 텍스트의 예시입니다.</div>
<div class="text-pink">이것은 분홍색 텍스트의 예시입니다.</div>
</div>
<div class="col-md-4">
<h3>주소</h3>
<address>
<strong>
(주)아무개 <br>
</strong>서울시 강남구 테헤란로 123, 9층 <br>
서울, 대한민국 06123 <br>
<abbr title="전화">P: </abbr>(02) 123-4567
</address>
<address>
<strong>
홍길동 <br>
</strong><a href="mailto:#">first.last@example.com</a>
</address>
</div>
<div class="col-md-4">
<h3>타이포그래피</h3>
<div>
<h1>H1 제목 예시입니다</h1>
<h2>H2 제목 예시입니다</h2>
<h3>H3 제목 예시입니다</h3>
<h4>H4 제목 예시입니다</h4>
<h5>H5 제목 예시입니다</h5>
<h6>H6 제목 예시입니다</h6>
</div>
</div>
</div>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
blockquote | 인용문 블록의 글자 크기·여백을 강조 스타일로 지정 |
blockquote-footer | 인용문 출처(작성자 등)를 흐린 보조 텍스트로 표시 |
list-unstyled | 목록의 글머리 기호와 들여쓰기를 제거 |
text-primary / text-secondary / text-body / text-success / text-info / text-warning / text-danger / text-pink | 텍스트 색상을 각 시맨틱/팔레트 색상으로 지정 |
row, g-4, col-12, col-md-4 | Bootstrap 그리드 행/열. g-4는 열 사이 간격, col-md-4는 md 이상에서 1/3 너비 |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/타이포그래피.html 경로에서 렌더링 결과를 확인할 수 있습니다.