[CSS Framework] Bootstrap | Typography | Utilities

Typography (타이포그래피)

Typography는 Component에 속하지 않는다. Typography는 문서 전체 걸친 변경 사항을 알려준다. (예를 들면, 변경된 글꼴, 정의된 전체 글꼴 크기 등등 보이는 모든것을 말이다. )

 

Display headdings

돋보이는 헤딩을 만들때 display heading을 사용하면 된다. (기본값은 반응형이 아니지만 바꿀 수 있다.)

display 클래스는 4 종류가 있다. display-1,display-2, display-3, display4 

    <div class="container-md">
    <h1 class="display-1">Bootstrap Playholder</h1>
    <h2 class="display-4">Buttons</h2>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-success" disabled>Success Disabled</button>
    <button type="button" class="btn btn-info">Info</button>
    <button class="btn btn-outline-warning">Warning Outline</button>
    <button class="btn btn-outline-danger">Danger Outline</button>
    <button class="btn btn-outline-info btn-lg">Info Outline</button>
    <button>Primary</button>
    
    <h2 class="display-4">Typography</h2>

Lead

lead 클래스를 사용하면 단락이 더 돋보인다. 

 <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Alias omnis excepturi aliquam ea ut earum officia illum 
        eligendi tempore quam ab dignissimos, enim sit esse doloribus. 
        Facilis animi cum debitis.Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Alias omnis excepturi aliquam ea ut earum officia illum 
        eligendi tempore quam ab dignissimos, enim sit esse doloribus. 
        Facilis animi cum debitis.</p>

글꼴 크기와 글꼴 굵기가 바뀌었다. 페이지의 태그 라인이나 리드 텍스트 같은데 쓰면 좋을 거같다.

 

Blockquote

blockquote는 HTML의 요소로 블록 형태의 인용문을 만듣다. 

 

<blockquote><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Alias omnis excepturi aliquam ea ut earum officia illum 
        eligendi tempore quam ab dignissimos, enim sit esse doloribus. 
        Facilis animi cum debitis.Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Alias omnis excepturi aliquam ea ut earum officia illum 
        eligendi tempore quam ab dignissimos, enim sit esse doloribus. 
        Facilis animi cum debitis.</p></blockquote>

class를 blockquote로 줄 수 있는데 그것은 CSS의 요소이다. 

  <blockquote class="blockquote"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Alias omnis excepturi aliquam ea ut earum officia illum 
        eligendi tempore quam ab dignissimos, enim sit esse doloribus. 
        Facilis animi cum debitis.Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Alias omnis excepturi aliquam ea ut earum officia illum 
        eligendi tempore quam ab dignissimos, enim sit esse doloribus. 
        Facilis animi cum debitis.</p></blockquote>

블록 인용문 요소는 인용문에 많이 쓰인다. 위의 인용문은 blockquote 클래스를 적용하니 폰트 사이즈가 더욱 커지고 굵어졌다.  

Footer

출처, 시맨틱에 footer 요소를 사용한다.

<blockquote class="blockquote"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Alias omnis excepturi aliquam ea ut earum officia illum 
        eligendi tempore quam ab dignissimos, enim sit esse doloribus. 
        Facilis animi cum debitis.Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Alias omnis excepturi aliquam ea ut earum officia illum 
        eligendi tempore quam ab dignissimos, enim sit esse doloribus. 
        Facilis animi cum debitis.</p>
        <footer class="blockquote-footer">Mr. Lorem Ipsum</footer>
    </blockquote>

회색은 기본 값 스타일이다.

<blockquote class="blockquote"><p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Alias omnis excepturi aliquam ea ut earum officia illum 
        eligendi tempore quam ab dignissimos, enim sit esse doloribus. 
        Facilis animi cum debitis.Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Alias omnis excepturi aliquam ea ut earum officia illum 
        eligendi tempore quam ab dignissimos, enim sit esse doloribus. 
        Facilis animi cum debitis.</p>
        <footer class="blockquote-footer">Mr. Lorem Ipsum</footer>
    </blockquote>

 

 

mb-0으로 적으니 여백이 사라져서 이  footer가 거의 밑에 다으려한다. mb-0는 여백을 추가하는 쉬운 방법이다. 

 

텍스트를 정렬하는 다양한 유틸리티 및 방법

text-center 중앙

 <h1 class="display-1 text-center">Bootstrap Playholder</h1>

text-right 우측

 <blockquote class="blockquote text-right"><p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Alias omnis excepturi aliquam ea ut earum officia illum 
        eligendi tempore quam ab dignissimos, enim sit esse doloribus. 
        Facilis animi cum debitis.Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Alias omnis excepturi aliquam ea ut earum officia illum 
        eligendi tempore quam ab dignissimos, enim sit esse doloribus. 
        Facilis animi cum debitis.</p>
        <footer class="blockquote-footer">Mr. Lorem Ipsum</footer>
    </blockquote>

※부트스트랩은 이런 기능과 스타일을 더 빠르고 쉽게 적용할 수 있게 해준다. 

Utilities

부트스트랩의 유틸리티는 내용을 가운데 정렬하거나 색상을 바꾸거나 테두리를 추가하고 디스플레이나 위피 특성을 변경하거나 그림자를 추가하는 등의 작업을 빠르게 할 수 있다. 사실상 컴포넌트가 아니다. 독립형은 아니라서 다른 요소에 추가해야한다. 

colors

텍스트의 색상을 바꿀 수 있는 "text-"클래스가 있다. 뒤에는 이전에 배운 시맨틱 색상 중 아무거나 사용하면 된다. 

    <h1 class="display-1 text-center text-primary">Bootstrap Playholder</h1>

 

primary의 기본 색상인 파랑색이 적용된다. 

background-color

bg뒤에 bg-primary, bg-secondary 이렇게 작성하면 된다. 

<blockquote class="blockquote text-right bg-info"><p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Alias omnis excepturi aliquam ea ut earum officia illum 
        eligendi tempore quam ab dignissimos, enim sit esse doloribus. 
        Facilis animi cum debitis.Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Alias omnis excepturi aliquam ea ut earum officia illum 
        eligendi tempore quam ab dignissimos, enim sit esse doloribus. 
        Facilis animi cum debitis.</p>

https://getbootstrap.com/docs/5.2/helpers/color-background/

Color & background