[Web][Bootstrap] Bootstrap v5.1 간단히 따라하기 - 4.Carousel 캐러셀/ 카드

 캐러쉘이란 콘텐츠의 슬라이드쇼와 비슷하다.

 

다음 컨테츠로 넘어가는 양식으로 스라이드와 덮어씌우기(fade)가 있다.

 

카드는 컨테이너의 일종으로 주로 가격표나 게시판처럼 쓴다.

1. 어떤 carousel을 쓰느냐

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel"></div>

가장 상위 div으로 css선택자에 id, class, data-bs-ride의 값을 입력한다. 

id의 값으로 "carouselExample어쩌구" 

class 의 값으로 "carousel slide" +fade 효과 "carousel-fade"을 공백 다음에 넣어준다.

data-bs-ride은 "carousel"이다

2. inner을 꾸려준다.

  <div class="carousel-inner">

안에 각 슬라이드쇼 하나마다 넣을 이미지 혹은 문구를 <div class="carousel-item">으로 넣어준다.

<div class="carousel-item active" data-bs-interval="10000">

다음 캐러셀 아이팀으로 넘어가는 지연시간을 변경하려면 data-bs-interval의 값을 바꿔준다.

 

중요한 것은 가장 처음 슬라이드를 활성 클래스로 표시해야한다. 

따라서 제일 처음은 active을 넣어줘야한다.

    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>

이미지 뿐만아니라 h1 p 등등 사용할 수 있다.

3. 선택사항으로 이전 , 다음 버튼을 추가한다.

이때 부모는 carousel-inner로 button요소를 불러온다

  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample어쩌구" 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="#carouselExample어쩌구" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>

버튼 다음으로 <a>으로도 상요할 수 잇는데 role="button"이 필요하다.

aria-hidden은 웹사이트 접근에 문제가 있는 사람들을 위한 것이다.

 

4. 카드 

컨테이너의 일종인 카드는 header body footer으로 구분되고 

body안에는 card-title / caard-subtitle / card-text으로 또 구분할 수 있다.

body가 아니여도 목록으로 list을 만들수 있다. 

<ul class='list-group list-group-flush'>
	<li class='list-group-item'>hello</li>
</ul>

grid을 이용해서 크기와 배치를 해결할 수 있다.이것은 이전 포스팅을 참조하자