부트스트랩(bootstrap) 2 - card, carousel

질문 내용

1. 아래 부트스트랩에서의 기본 예제를 들어 설명하시오.

• card
• carousel

개인 작성

기본 예제는 부트스트랩에서 가져온 것

• card
  - 카드 형태.
  - 카드에는 너비가 고정되어 있지 않기 때문에, 자연스럽게 부모 요소의 너비에 맞춰짐.
  -> 이는, 너비를 제한하여 보여주고 싶다면 부모 요소에서 너비의 값을 설정해줘야 한다는 말과 같다.
  • body : 카드를 빌드하는 클래스는 .card-body임. 카드 내에 여백에 필요할 때 사용함.
  • img : .card-img-top 및 .card-img-bottom은 각 카드의 테두리와 일치하도록 상하단 모서리를 둥글게 설정
  • title : 제목. <h*> 태그에 추가하는 클래스는 .card-title
  • text : 내용. 추가하는 클래스는 .card-text
    

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

• carousel
  - 이미지 슬라이드 쇼.
  - 슬라이드 중 하나에 반드시 active 클래스를 추가해줘야 함.
  -> 접속 시 처음 나오는 이미지를 정하기 위한 초기값 설정이라고 보면 됨.
  • 슬라이드 크기가 자동으로 조정되지 않는다. 조정하고 싶다면 CSS를 설정하거나 관련 클래스를 추가한다.
  • indicator : 위치 표시 기능.
  • carousel-inner : 슬라이드 쇼 내용물들을 담는 클래스. 해당 클래스 내에서 carousel-item을 통해 내용물들을 추가할 수 있다.
  • carousel-control-prev, carousel-control-next : 왼쪽 혹은 오른쪽 버튼 아이콘. 페이지 한 장씩 넘기기 가능.

<div id="carouselExampleIndicators" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>