[부트스트랩] Content - Typography

https://getbootstrap.com/docs/5.1/content/typography/

Typography

 

.text-muted

$text-muted: $gray-600;

.text-muted
	--bs-text-opacity: 1;
	color: #6c757d!important;

 

<p class="h3">
    Class <small class="text-muted">.text-muted</small>
</p>

 

.display-*

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;

.display-1
	font-size: calc(1.625rem + 4.5vw);
	font-weight: 300;
	line-height: 1.2;
    
.display-2
	font-size: calc(1.575rem + 3.9vw);
	font-weight: 300;
	line-height: 1.2;

 

<p class="display-1">display-1</p>
<p class="display-2">display-2</p>
<p class="display-3">display-3</p>
<p class="display-4">display-4</p>
<p class="display-5">display-5</p>
<p class="display-6">display-6</p>

 

.mark(<mark>)

.mark
	margin-top: 0;
	margin-bottom: 1rem;

 

<p class="mark">.mark</p>

 

.small(<small>)

font-size: .875em;

 

<p class="small">.small</p>

 

.text-decoration-underline(<u>)

text-decoration: underline!important;

 

<p class="text-decoration-underline">.text-decoration-underline</p>

 

.text-decoration-ling-through(<s>)

text-decoration: line-through!important;

 

<p class="text-decoration-line-through">.text-decoration-line-through</p>

 

.blockquote

margin-bottom: 1rem;
font-size: 1.25rem;

 

<p class="blockquote">.blockquote</p>

 

.blockquote-footer

margin-top: -1rem;
margin-bottom: 1rem;
font-size: .875em;
color: #6c757d;

 

<div>
    <p class="blockquote">.blockquote</p>
    <p class="blockquote-footer">
        <em>제목</em> 내용
    </p>
</div>

 

.text-center, .text-end

.text-center
	text-align: center!important;
    
.text-end
	text-align: right!important;

 

<div class="border bg-light">
    <p class="blockquote">.blockquote</p>
    <p class="blockquote-footer">
        <em>제목</em> 내용
    </p>
</div>

<div class="text-center border bg-light">
    <p class="blockquote">.blockquote</p>
    <p class="blockquote-footer">
        <em>제목</em> 내용
    </p>
</div>

<div class="text-end border bg-light">
    <p class="blockquote">.blockquote</p>
    <p class="blockquote-footer">
        <em>제목</em> 내용
    </p>
</div>

 

.list-inline & .list-inline-item

.list-inline
	padding-left: 0;
	list-style: none;
    
.list-inline-item
	display: inline-block;
    
//.list-inline-item 첫 번째와 두 번째 호출됨
//.list-inline-item 마지막은 호출 안됨
//.list-inline-item 호출이 마지막 자식(:last-child)이라면 호출하지 마라(:not) 이지 않을까...
.list-inline-item:not(:last-child)
	margin-right: 0.5rem;

 

<ul class="list-inline">
    <li class="list-inline-item border bg-light">.list-inline-item</li>
    <li class="list-inline-item border bg-light">.list-inline-item</li>
    <li class="list-inline-item border bg-light">.list-inline-item</li>
</ul>

 

.text-truncate

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

 

<p class="col-1 text-truncate border bg-light">.text-truncate</p>