cards, 카드, 반응형 카드, 버튼

부트스트랩에서 카드를 만들어 자료 구조를 시각화해보자.

 

1. card-header, body, footer

카드는 html이 헤드, 바디, 푸터로 나누어 코드를 작성하는 것처럼 코드를 쓴다.

이번에는 헤더와 바디만 써보도록 하자.

<div class="card">
    <div class="card-header">
        card header
    </div>
    <div class="card-body">
        card body 
    </div>
</div>

 

2. 크기에 따른 반응형 

class ="row", class="col-lg-6" 등을 사용하여 반응형 카드를 만들어보자. 

 

col-lg-4 

화면의 크기가 'lg' 이상일 때는 한 줄의 4/12만큼의 크기로 존재하다가, 

그 이하로 줄어들면 화면의 100%로 바뀐다.

<div class="row">
  <div class="col-lg-4">
   <div class="card">
     <div class="card-body">
      첫 번째 카드
     </div>
   </div>
  </div>

  <div class="col-lg-4">
    <div class="card">
      <div class="card-body">
      두 번째 카드
      </div>
    </div>
  </div>

  <div class="col-lg-4">
    <div class="card">
      <div class="card-body">
       세 번째 카드
      </div>
    </div>
  </div>
</div>

 

이번에는 이 상태에서 col-md-6, col-md-12를 추가하여

첫 번째, 두 번째 카드는 가로 사이즈가 md 이상일 때는 전체의 6/12 만큼, 세 번째 카드는 전체의 12/12의 크기가 되도록

화면의 크기를 조정한다.

<div class="row">
<div class="col-lg-4 col-md-6">
<div class="card">
    <div class="card-body">
        첫 번째 카드
    </div>
</div>
</div>

<div class="col-lg-4 col-md-6">
<div class="card">
    <div class="card-body">
        두 번째 카드
    </div>
</div>
</div>

<div class="col-lg-4 col-md-12">
<div class="card">
    <div class="card-body">
        세 번째 카드
    </div>
</div>
</div>
</div>

 

 

>> 화면으로 보자.

큰 화면에서는 나란히 있다가,

화면이 줄어들면, 

1, 2번 카드는 나란히, 3번은 아래에 100%로 바뀐다.

마지막으로 화면이 모바일 사이즈 만큼 줄어들면,

1,2,3 카드 모두 아래로 나열되며 100%로 바뀐다.

 

3. 버튼 만들기

- 솔리드 타입

 <a href="#" class="btn btn-primary">버튼</a>

- 아웃라인 타입

 <a href="#" class="btn btn-primary-outline">버튼</a>

- 사이즈 조절(sm/lg)

 <a href="#" class="btn btn-primary btn-lg">버튼</a>

        <div class="row">
          <div class="col-lg-4 col-md-6">
            <div class="card">
              <div class="card-body">
                첫 번째 카드
                <a href="#" class="btn btn-primary btn">Go somewhere</a>

              </div>
            </div>
          </div>

          <div class="col-lg-4 col-md-6">
            <div class="card">
              <div class="card-body">
                두 번째 카드
                <a href="#" class="btn btn-outline-primary btn-sm">Go somewhere</a>

              </div>
            </div>
          </div>

          <div class="col-lg-4 col-md-12">
            <div class="card">
              <div class="card-body">
                세 번째 카드
                <a href="#" class="btn btn-primary btn-lg">Go somewhere</a>
              </div>

            </div>
          </div>
        </div>

 

더 많은 설명은 부트스트랩 다큐먼트에서 확인하자.

https://getbootstrap.com/docs/5.0/components/card/

Cards