Bootstrap 4 / Cards - 카드 만들기

콘텐츠 목록을 보여줄 때 카드형 배열을 많이 사용합니다. Bootstrap을 이용하면 카드 목록을 쉽게 만들 수 있습니다.

기본

카드를 만드는 기본적인 마크업은 다음과 같습니다.

  • .card-header에는 카드 제목을 입력합니다.
  • .card-body에는 카드 내용이 들어갑니다. .card-title로 제목을, .card-text로 내용을 구분합니다.

다음은 카드 두 개를 만든 간단한 예제입니다.

이미지 또는 제목 제거하기

이미지 또는 제목을 제거해도 카드 모양으로 잘 나옵니다. 단, 제목 없이 이미지가 바로 나올 경우 이미지 태그에 class="card-img-top"를 추가합니다.

이미지 위에 텍스트 넣기, 가로로 배열하기

마크업이 복잡해지지만, 이미지 위에 텍스트가 오버레이되게 하거나, 이미지와 텍스트를 가로로 배열할 수도 있습니다.

배경색 만들기

bg-primary 등을 추가하여 Bootstrap의 기본색들로 배경색을 정할 수 있습니다.