bootStrap //타이포그라피 & 이미지 & 테이블

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

https://getbootstrap.com/docs/5.2/content/images/

Typography

https://getbootstrap.com/docs/5.2/content/tables/

Typography

 

 

#자주쓸거

    <p class="lead">hello <mark>highlight</mark> good</p>

하이라이트 주는거..

 

    <figure class="text-center">

        <blockquote class="blockquote">

          <p>A well-known quote, contained in a blockquote element.</p>

        </blockquote>

        <figcaption class="blockquote-footer">

          Someone famous in <cite title="Source Title">Source Title</cite>

        </figcaption>

      </figure>

이쁜듯?

 

 

    <kbd><kbd>cntl</kbd></kbd>

 

 

 

 

## 이미지

 

    <div class="container">

        <div class="row">

            <div class="col-md-4 b">

                <img class="img-fluid" src="karkiv.jpg">

            </div>

            <div class="col-md-4 b">

                <img class="img-fluid rounded-circle" src="karkiv.jpg">

            </div>

            <div class="col-md-4 b">

                <img class="img-fluid img-thumbnail" src="karkiv.jpg">

            </div>

        </div>

    </div>

이미지 다루는거~

- img-fluid 현재 디브에 크기 맞춰주는거.

- rounded-circle 둥글게 해주는거

- img-thumbnail 액자만들어주는거

 

독스 읽어봤는데 생각보다 별거업음. 섬네일 많이 쓸듯.

 

 

 

# 테이블

    <table class="table">

        <thead>

          <tr>

            <th scope="col">#</th>

            <th scope="col">First</th>

            <th scope="col">Last</th>

            <th scope="col">Handle</th>

          </tr>

        </thead>

        <tbody>

          <tr>

            <th scope="row">1</th>

            <td>Mark</td>

            <td>Otto</td>

            <td>@mdo</td>

          </tr>

          <tr>

            <th scope="row">2</th>

            <td>Jacob</td>

            <td>Thornton</td>

            <td>@fat</td>

          </tr>

          <tr>

            <th scope="row">3</th>

            <td colspan="2">Larry the Bird</td>

            <td>@twitter</td>

          </tr>

        </tbody>

      </table>

테이블태그에 table-striped 을 넣으면

    <table class="table table-striped">

요러케됨.

이외에도

머이런거 있음..

 

 

 

            <td class="table-active">Jacob</td>

각각에 로우에다가도 줄수있음. 

제이콥만 액티브됨.

 

테이블은 조~온나 많타 걍 필요할떄 찾아보자