[basic] BS4 - Card (BS카드) - Well (BS웰) + Panel (BS패널) + Thumbnail (BS썸네일) 대체.

목차

1. Card 정의
2. Card 기본
3. Card Header (머리글) / Footer (꼬리말)
4. Card Color (배경색깔)
5. Card Title (제목) / Text (텍스트) / Link (링크)
6. Card Image (이미지)
7. Card Stretch Link (링크 영역/범위 확대)
8. Card Image Overlay (이미지 위에 배치)
9. Card Column(열) - column 높이 다르며, 서로 떨어진 형태
10. Card Deck (데크) - Column 높이 동일하며, 서로 떨어진 형태
11. Card Group (그룹) - Column 높이 동일하며 서로 붙은 형태

 

Card 정의

 

내용 주위에 약간의 패딩 있는 테두리 있는 상자.

 

---

 

headers (머리글), footers(꼬리말), content (내용), colors (색깔) 옵션 포함.

BS3의 panel, well, thumbnail 등 대체. 

 

 

Card 기본

 

<div class="card">

  <div class="card-body">내용</div>

</div>

 

 

Card Header (머리글) / Footer (꼬리말)

 

<div class="card">

  <div class="card-header">머리글</div>

  <div class="card-body">내용</div>

  <div class="card-footer">꼬리말</div>

</div>

 

 

Card Color (배경색깔)

 

<div class="card">

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

</div>

<div class="card bg-primary text-white">

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

</div>

<div class="card bg-success text-white">

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

</div>

<div class="card bg-info text-white">

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

</div>

<div class="card bg-warning text-white">

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

</div>

<div class="card bg-danger text-white">

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

</div>

<div class="card bg-secondary text-white">

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

</div>

<div class="card bg-dark text-white">

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

</div>

<div class="card bg-light text-dark">

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

</div> 

 

 

Card Title (제목) / Text (텍스트) / Link (링크)

 

<div class="card">

    <div class="card-body">

        <h4 class="card-title">제목</h4>

        <p class="card-text">내용</p>

        <a href="#" class="card-link">링크1</a>

        <a href="#" class="card-link">링크2</a>

    </div>

</div> 

 

 

Card Image (이미지)

 

<div class="card" style="width:400px">

    <img class="card-img-top" src="hz.png" alt="이미지">

    <div class="card-body">

        <h4 class="card-title">제목</h4>

        <p class="card-text">내용</p>

        <a href="#" class="btn btn-primary">링크</a>

    </div>

</div> 

 

 

Card Stretch Link (링크 영역/범위 확대)

 

<a href="#" class="btn btn-primary stretched-link">링크</a> 

 

 

Card Image Overlay (이미지 위에 배치)

 

<div class="card" style="width:500px">

    <img class="card-img-top" src="hz.png" alt="이미지">

    <div class="card-img-overlay">

        <h4 class="card-title">제목</h4>

        <p class="card-text">내용</p>

        <a href="#" class="btn btn-primary">링크</a>

    </div>

</div> 

 

 

Card Column(열) - column 높이 다르며, 서로 떨어진 형태

 

<div class="card-columns">

    <div class="card bg-primary">

        <div class="card-body text-center">

            <p class="card-text">내용1</p>

        </div>

    </div>

    <div class="card bg-warning">

        <div class="card-body text-center">

            <p class="card-text">내용2</p>

        </div>

    </div>

    <div class="card bg-success">

        <div class="card-body text-center">

            <p class="card-text">내용3</p>

        </div>

    </div>

    <div class="card bg-danger">

        <div class="card-body text-center">

            <p class="card-text">내용4</p>

        </div>

    </div>

    <div class="card bg-light">

        <div class="card-body text-center">

            <p class="card-text">내용5</p>

        </div>

    </div>

    <div class="card bg-info">

        <div class="card-body text-center">

            <p class="card-text">내용6</p>

        </div>

    </div>

</div> 

 

 

Card Deck (데크) - Column 높이 동일하며, 서로 떨어진 형태

 

<div class="card-deck">

    <div class="card bg-primary">

        <div class="card-body text-center">

            <p class="card-text">내용1</p>

        </div>

    </div>

    <div class="card bg-warning">

        <div class="card-body text-center">

            <p class="card-text">내용2</p>

        </div>

    </div>

    <div class="card bg-success">

        <div class="card-body text-center">

            <p class="card-text">내용3</p>

        </div>

    </div>

    <div class="card bg-danger">

        <div class="card-body text-center">

            <p class="card-text">내용4</p>

        </div>

    </div>

</div>  

 

 

Card Group (그룹) - Column 높이 동일하며 서로 붙은 형태

<div class="card-group">

    <div class="card bg-primary">

        <div class="card-body text-center">

            <p class="card-text">내용1</p>

        </div>

    </div>

    <div class="card bg-warning">

        <div class="card-body text-center">

            <p class="card-text">내용2</p>

        </div>

    </div>

    <div class="card bg-success">

        <div class="card-body text-center">

            <p class="card-text">내용3</p>

        </div>

    </div>

    <div class="card bg-danger">

        <div class="card-body text-center">

            <p class="card-text">내용4</p>

        </div>

    </div>

</div>