carousel,cards

carousel

 <div
      id="carouselExampleAutoplaying"
      class="carousel slide"
      data-bs-ride="carousel"

      <div class="carousel-indicators">
        <button
          data-bs-target="#carouselExampleAutoplaying"
          data-bs-slide-to="0"
          class="active"
</button>
        <button
          data-bs-target="#carouselExampleAutoplaying"
          data-bs-slide-to="1"
</button>
        <button
          data-bs-target="#carouselExampleAutoplaying"
          data-bs-slide-to="2"
</button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="image/bg.webp" class="d-block w-100 v-50 c-img" alt="..." />
          <div class="carousel-caption d-none d-md-block">
            <h5>모자</h5>
          </div>
        </div>
        <div class="carousel-item">
          <img
            src="image/bg1.webp"
            class="d-block w-100 v-50 c-img"
            alt="..."
          />
          <div class="carousel-caption d-none d-md-block">
            <h5>향수</h5>
          </div>
        </div>
        <div class="carousel-item">
          <img
            src="image/bg3.webp"
            class="d-block w-100 v-50 c-img"
            alt="..."
          />
          <div class="carousel-caption d-none d-md-block">
            <h5>향수</h5>
          </div>
        </div>
      </div>
      <button
        class="carousel-control-prev"
        type="button"
        data-bs-target="#carouselExampleAutoplaying"
        data-bs-slide="prev"

        <!-- id 이름과 동일하여야됨 target 임 -->
        <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="#carouselExampleAutoplaying"
        data-bs-slide="next"

        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>

cards

<div class="container py-5">
      <!-- CARDS TOP IMAGE-->
      <div class="card">
        <img src="image/bg3.webp" alt="" class="card-img-top w-100 v-50" />
        <div class="card-body">
          <h5 class="card-title">향수</h5>
          <p class="card-text">prada</p>
        </div>
      </div>
      <br /><br />
      <hr />
      <br /><br />
      <!-- CARDS BOTTOM IMAGE 이미지 안에 글자 겹치게 하는것-->
      <div class="card">
        <img src="image/bg1.webp" alt="" class="card-img-top w-100 v-50" />
        <div class="card-body">
          <h5 class="card-title">향수</h5>
          <p class="card-text">chanel no.5</p>
        </div>
        <img src="img/slide1.jpg" alt="" class="card-img-bottom" />
      </div>
      <br /><br />
      <hr />
      <br /><br />
      <!-- CARDS OVERLAY IMAGE-->
      <div class="card text-white">
        <img src="image/bg3.webp" alt="" class="card-img" />
        <div class="card-img-overlay">
          <h2 class="card-title">향수를 소개합니다.</h2>
          <p class="card-text">prada</p>
        </div>
      </div>
      <br /><br />
      <hr />
      <br /><br />
      <!-- CARD LINK -->
      <div class="card">
        <img src="img/slide1.jpg" alt="" class="card-img-top" />
        <div class="card-body">
          <h5 class="card-title">Card Title</h5>
          <p class="card-text">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus
            saepe ducimus mollitia magni pariatur enim nemo harum voluptate
            dicta quaerat.
          </p>
          <a href="#" class="card-link">Card link</a>
          <a href="#" class="card-link">Card link</a>
          <ui class="list-group list-group-flush">
            <li class="list-group-item">First item</li>
            <li class="list-group-item">second item</li>
            <li class="list-group-item">third item</li>
          </ui>
        </div>
      </div>
      <br /><br />
      <hr />
      <br /><br />
      <!-- CARD HEADER AND FOOTER -->
      <div class="card">
        <div class="card-header">Card Header</div>
        <div class="card-body">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
            rerum asperiores impedit labore iusto optio distinctio autem,
            doloremque sint maiores!
          </p>
        </div>
        <div class="card-footer">This is a card footer</div>
      </div>
      <br /><br />
      <hr />
      <br /><br />
      <!-- CARD DANGER -->
      <div class="card bg-danger text-white">
        <div class="card-header">Header</div>
        <div class="card-body">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
            rerum asperiores impedit labore iusto optio distinctio autem,
            doloremque sint maiores!
          </p>
        </div>
      </div>
    </div>