부트스트랩 카드
부트스트랩 카드는 가장 인기 있는 구성 요소 중 하나이며 그럴만한 이유가 있습니다. 매우 유연한 미디어 컨테이너 역할을 하며 멋진 사전 설정 스타일과 서식이 있습니다.
카드 콘텐츠는 텍스트, 이미지, 링크, 버튼, 목록 등 무엇이든 될 수 있으며 머리글과 바닥글도 포함할 수 있습니다.
부트스트랩 카드 기본 사항
부트스트랩 카드는 flexbox로 만들어지며 기본적으로 포함하는 요소의 너비로 확장됩니다. 다른 너비를 지정하려면 카드 요소 자체에 부트스트랩의 너비 유틸리티 클래스를 사용하거나 카드를 포함하는 요소로 래핑하고 부트스트랩의 열 클래스로 크기를 지정할 수 있습니다.
몇 가지 예를 살펴보겠습니다.
<div class="container-fluid bg-light"> <div class="card p-4 m-4">card 1</div> <div class="card p-4 m-4">card 2</div> <div class="card p-4 m-4">card 3</div> <div class="card-group m-4"> <div class="card p-4">card 4</div> <div class="card p-4">card 5</div> <div class="card p-4">card 6</div> </div> <div class="card-deck m-4"> <div class="card p-4 m-4">card 7</div> <div class="card p-4 m-4">card 8</div> <div class="card p-4 m-4">card 9</div> </div> </div>
부트스트랩의 경험 법칙은 내부에 있는 모든 것을 CONTAINER 요소로 감싸서 내부의 모든 것을 반응형으로 만드는 것입니다.
즉, 현재 화면 크기에 따라 크기와 레이아웃이 이동합니다.
이 예에서는 가로 여백을 추가하고 페이지 중앙에 배치하는 CONTAINER와 달리 요소를 전체 너비로 만드는 CONTAINER-FLUID를 사용했습니다.
다음으로, 우리는 3장의 첫 번째 카드 세트를 가지고 있습니다. 컨테이너 외에 상위 요소가 없으므로 기본 카드 동작을 가지며 스크린샷에서 볼 수 있듯이 위에서 아래로 정렬됩니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

코드 스니펫에서 볼 수 있는 p-4 및 m-4는 각각 1.5rem의 모든 면에서 패딩을 나타내고 1.5rem의 모든 면에서 여백을 나타냅니다.
부트스트랩 크기 조정 유틸리티 값:
0 =0 렘;
1 =0.25렘;
2 =0.5렘;
3 =1렘;
4 =1.5렘;
5 =3렘;
그런 다음 CARD-GROUP 클래스와 함께
마지막으로 카드 7, 8, 9는 CARD-DECK 클래스가 있는
수동으로 카드 크기 조정
수동으로 크기를 조정하는 카드를 만들기 전에 Bootstrap의 레이아웃과 중단점 시스템에 대해 알아보겠습니다.
부트스트랩 열
Bootstrap은 쉬운 레이아웃 개발을 위해 페이지를 12개의 열로 나눕니다.
다음은 시각화하는 빠른 데모입니다.
<div class="row"> <div class="col border p-5">column 1</div> <div class="col border p-5">column 2</div> <div class="col border p-5">column 3</div> <div class="col border p-5">column 4</div> <div class="col border p-5">column 5</div> <div class="col border p-5">column 6</div> <div class="col border p-5">column 7</div> <div class="col border p-5">column 8</div> <div class="col border p-5">column 9</div> <div class="col border p-5">column 10</div> <div class="col border p-5">column 11</div> <div class="col border p-5">column 12</div> </div>
먼저 ROW라고 하는 열에 대한 래퍼가 있습니다. 이는 열에 대한 플렉스박스 컨테이너일 뿐입니다. COL-SCREEN SIZE BREAKPOINT-NUMBER OF COLUMNS TO OCCUY를 작성하여 요소의 크기를 선언합니다.
위의 예에서 우리는 화면 크기에 관계없이 이 크기 조정을 원하기 때문에 중단점을 제공하지 않았고, 생략하면 기본적으로 COL-1이 되어 자연스러운 12개의 열을 얻을 수 있기 때문에 열 수를 지정하지 않았습니다. 다음과 같습니다.

부트스트랩 중단점:
Bootstrap은 모바일 우선 프레임워크입니다. 즉, Bootstrap으로 개발할 때 모바일 레이아웃의 우선 순위를 지정하고 위쪽으로 작업해야 합니다. 모든 클래스는 제공된 중단점 이상부터 요소에 영향을 줍니다.
초소형이 기본값이므로 P-4와 같이 중단점을 완전히 생략하는 것은 XS 화면 크기와 모든 더 큰 화면 크기에 적용하는 P-XS-4를 작성하는 것과 같습니다.

즉, 모든 화면에 적용되는 규칙을 원하면 중단점을 생략하면 됩니다.
중간 화면 크기 이상에서 예제의 패딩을 0.5rem으로 줄이려면 동일한 요소에 P-MD-2 클래스를 추가합니다.

중단점 픽셀 값:
- xs – 화면 크기가 576픽셀 미만입니다. 이것이 기본값입니다.
- sm – 576픽셀 이상의 화면 크기
- md – 768픽셀 이상의 화면 크기
- lg – 992픽셀 이상의 화면 크기
- xl – 1200픽셀 이상의 화면 크기
이제 이것을 사용하여 화면 크기에 따라 레이아웃을 변경해 보겠습니다.
<div class="row"> <div class="col-5 col-md-7"> <div class="card p-4">left column card</div> <div class="card p-4">left column card</div> <div class="card p-4">left column card</div> <div class="card p-4">left column card</div> </div> <div class="col-7 col-md-5"> <div class="card p-4">right column card</div> <div class="card p-4">right column card</div> <div class="card p-4">right column card</div> <div class="card p-4">right column card</div> </div> </div>
다시 말하지만, ROW 래퍼가 있고

너비가 767픽셀이고 왼쪽
1픽셀 위로 768로 올라가면 반대 방향으로 바뀝니다.

카드 하위 구성요소
이제 모든 하위 구성 요소를 시험해 보고 카드의 모든 기능을 활용해 보겠습니다.
머리글과 바닥글이 있는 카드
<div class="card"> <div class="card-header text-center p-4">I'm a header</div> <div class="card-body"> <p class="card-text"> first paragraph </p> <p class="card-text"> second paragraph </p> <a href="#" class="card-link">Link 1</a> <a href="#" class="card-link">Link 2</a> <a href="#" class="card-link">Link 3</a> </div> <div class="card-footer"> Footer of a Bootstrap card </div> </div>
테두리와 밝은 회색 배경이 있는 중앙 카드 헤더와 그 아래에 약간의 패딩을 제공하는 카드 본문이 있는 카드를 만들었습니다.
본문에는 정렬을 위해 CARD-TEXT가 있는 단락이 몇 개 있고 CARD-LINK가 있는 링크가 몇 개 있으므로 파란색으로 표시되고 서로 옆에 배치됩니다.
마지막으로 머리글과 같은 스타일의 카드 바닥글을 만들었지만 이번에는 텍스트를 가운데에 맞추지 않았습니다.

이미지 캡이 있는 카드
이번에는 카드에 이미지 캡을 추가하고 카드 본문에 제목과 부제를 추가하고 목록 항목으로 링크가 있는 목록 그룹을 추가합니다.
<div class="card"> <img src="https://via.placeholder.com/100" alt="" class="card-img-top" /> <div class="card-body"> <h3 class="card-title">card title in the card's body</h3> <h4 class="card-subtitle mb-4">card subtitle</h4> <p>list group with links inside:</p> <ul class="list-group"> <li class="list-group-item"> <a href="#" class="card-link">List link 1</a> </li> <li class="list-group-item"> <a href="#" class="card-link">List link 2</a> </li> <li class="list-group-item"> <a href="#" class="card-link">List link 3</a> </li> </ul> </div> </div>
저는 플레이스홀더라고 불리는 편리한 이미지 도구를 사용하고 있습니다. 끝에 있는 숫자는 이미지의 픽셀 너비 x 높이이지만 CARD-IMG-TOP이 이미지를 카드의 전체 너비로 늘리거나 줄이므로 여기서는 무시됩니다. 제목과 부제목에 멋진 형식이 지정되었으며 패딩 및 여백에 Bootstrap의 방향 유틸리티 중 하나를 사용했습니다. 자막에 보이는 MB-4는 마진 바텀을 의미합니다.
부트스트랩 패딩 및 여백 방향:
- pt/mt – 패딩/마진 상단
- pb/mb – 패딩/여백 하단
- pl/ml – 왼쪽 여백/여백
- pr/mr – 오른쪽 여백/여백
- py/my – 패딩/여백 y축(상단 및 하단)
- px/mx – 패딩/여백 x 축(왼쪽 및 오른쪽)
그런 다음 목록을 다시 캡슐화하는 목록 그룹이 있으며 가볍고 둥근 테두리가 있는 개별 요소입니다. 결과는 다음과 같습니다.

하단 이미지 캡
부트스트랩에는 CARD-IMG-BOTTOM이 없지만 카드 하단에 div를 만들고 그 안에
<div class="card"> <div class="card-body"> <p class="card-text"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas unde corporis sed nam ad eius, pariatur, consectetur modi asperiores dolorem id quaerat eos quod nesciunt repudiandae aut temporibus rerum possimus. </p> </div> <img src="https://via.placeholder.com/100" alt="" class="card-img-top" /> </div>
나는 또한 좋은 측정을 위해 좋은 오래된 lorem ipsum을 추가했습니다.

측면 이미지 캡
카드 내부에 ROW 래퍼를 추가하여 가로로 배치한 다음 COL을 사용하여 이미지의 크기와 카드의 나머지 부분을 정의하여 가로로 만들 수도 있습니다.
<div class="card"> <div class="row"> <img src="https://via.placeholder.com/100" alt="" class="card-img-top col-6" /> <div class="card-body col-6"> <h3 class="card-title">card title in the card's body</h3> <h4 class="card-subtitle mb-4">card subtitle</h4> <p>list group with links inside:</p> <ul class="list-group"> <li class="list-group-item"> <a href="#" class="card-link">List link 1</a> </li> <li class="list-group-item"> <a href="#" class="card-link">List link 2</a> </li> <li class="list-group-item"> <a href="#" class="card-link">List link 3</a> </li> </ul> </div> </div> </div>
카드의 모든 내용을
이미지와 카드 본문 모두에 COL-6을 추가하여 카드를 50-50으로 만듭니다.

배경으로 카드 이미지
우리는 또한 전체 카드에 이미지를 확장하고 그 위에 텍스트, 목록, 링크 등을 배치할 수 있습니다. 우리는 단순히 클래스에 CARD-IMG 클래스를 제공하고 다른 모든 것을 CARD-IMG-OVERLAY 클래스와 함께
<div class="card"> <img src="https://via.placeholder.com/100" alt="" class="card-img" /> <div class="card-img-overlay"> <h4 class="card-title">Overlay Title</h4> <p class="card-text"> Image text overlay </p> <p>second paragraph</p> <p>third paragraph</p> <p>fourth paragraph</p> <div class="btn-group w-100"> <button class="btn btn-primary">blue</button> <button class="btn btn-info">teal</button> <button class="btn btn-danger">red</button> <button class="btn btn-dark">black</button> <button class="btn btn-success">green</button> </div> </div> </div>
여기에서 처음으로 너비 유틸리티를 사용했습니다. BTN-GROUP의 W-100.
부트스트랩 너비 및 높이 유틸리티:

w/h-25/50/75/100 – 너비/높이 25%/50%/75%/100%
우리의 경우 100%에서 CARD-BODY가 적용하는 패딩과 동일한 패딩을 뺀 값입니다. 이는 CARD-IMG-OVERLAY에 의해 여기에 적용됩니다.
카드 열
카드가 위에서 아래로 먼저 이동하고 열이 채워진 경우에만 새 카드에서 시작하도록 열에 카드를 배치하는 이 옵션도 있습니다.
<div class="card-columns"> <div class="card"> <h3 class="card-title text-center p-2">Title of card 1</h3> <div class="card-body"> <p class="card-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, rerum excepturi voluptate... </p> </div> </div> <div class="card"> <h3 class="card-title text-center p-2">Title of card 2</h3> <div class="card-body"> <p class="card-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, rerum excepturi voluptate... </p> </div> </div> <div class="card"> <h3 class="card-title text-center p-2">Title of card 3</h3> <div class="card-body"> <p class="card-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, rerum excepturi voluptate... </p> </div> </div> <div class="card"> <h3 class="card-title text-center p-2">Title of card 4</h3> <div class="card-body"> <p class="card-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, rerum excepturi voluptate... </p> </div> </div> </div>
우리는 단순히 모든 카드를

부트스트랩 카드 스타일링
부트스트랩 카드 스타일 지정과 관련하여 배경 및 텍스트 색상은 물론 테두리 색상과 모양도 변경할 수 있습니다.
스타일은 전체 카드, 별도의 하위 구성 요소 또는 둘 다에 적용할 수 있습니다. 다음은 확인해야 할 몇 가지 스타일 카드입니다.
<div class="card bg-primary"> <div class="card-header"><h3>Header 1</h3></div> <div class="card-body"> <p>Body 1</p> </div> <div class="card-footer"><p>Footer 1</p></div> </div> <div class="card bg-success text-white"> <div class="card-header"><h3>Header 2</h3></div> <div class="card-body"> <p>Body 2</p> </div> <div class="card-footer text-danger"><p>Footer 2</p></div> </div> <div class="card bg-info text-dark border-danger"> <div class="card-header"><h3>Header 3</h3></div> <div class="card-body"> <p>Body 3</p> </div> <div class="card-footer"><p>Footer 3</p></div> </div> <div class="card border-primary bg-dark text-white"> <div class="card-header border-success"><h3>Header 4</h3></div> <div class="card-body text-danger"> <p>Body 4</p> </div> <div class="card-footer bg-warning text-info"><p>Footer 4</p></div> </div>
첫 번째 카드는 카드 자체에 파란색 배경(BG-PRIMARY)이 있어 전체 카드의 스타일을 지정합니다.
두 번째 카드에는 전체 카드에 녹색 배경(BG-SUCCESS)과 흰색 텍스트(TEXT-WHITE)가 있지만 바닥글에는 빨간색 텍스트(TEXT-DANGER)가 있어 상위 요소의 TEXT-WHITE를 무시합니다.
세 번째 카드에는 진한 파란색 배경(BG-INFO), 검정색 텍스트(TEXT-DARK) 및 빨간색 테두리(BORDER-DANGER)가 있습니다.
마지막으로 네 번째 카드는 전체 카드에 파란색 테두리(BORDER-PRIMARY), 검정색 배경(BG-DARK), 흰색 텍스트(TEXT-WHITE)가 있습니다.
머리글에 녹색 테두리(BORDER-SUCCESS), 본문에 빨간색 텍스트(TEXT-DANGER), 바닥글에 노란색 배경(BG-WARNING) 및 진한 파란색 텍스트(TEXT-INFO).
레인보우 카드는 다음과 같습니다.

요약
Bootstrap 카드는 많은 옵션이 있는 매우 강력한 구성 요소입니다. 그것들은 분리되고 응집력 있는 전체를 위한 카드 데크로 그룹화되거나 단일 개체로 융합하기 위해 카드 그룹으로 그룹화될 수 있습니다. 그들은 연속으로 흩어져 있거나 다른 모양을 위해 카드 열에 펼칠 수 있습니다.
다양한 레이아웃으로 이미지, 목록 및 링크를 호스팅할 수 있습니다.
그들은 또한 미리 설정된 스타일과 서식이 있는 고유한 머리글과 바닥글을 가질 수 있지만 사용자 정의할 수 있도록 열려 있습니다.
매우 유연하며 이전 설정이 거의 없이 짧은 시간에 Bootstrap으로 얼마나 많은 작업을 수행할 수 있는지 보여주는 가장 좋은 예 중 하나일 것입니다.