프론트엔드/HTML & CSS 연습과제 해답

부트스트랩 연습과제 (2)

syleemomo 2023. 7. 14. 18:08
728x90

부트스트랩 5 를 사용하였고, 화면 상단에는 슬라이드 애니메이션이 동작합니다.  

완성화면 - 데스크탑 PC (1)
완성화면 - 데스크탑 PC (2)
완성화면 - 데스크탑 PC (3)
완성화면 - 데스크탑 PC (4)
완성화면 - 모바일 (1)
완성화면 - 모바일 (2)

 

images 폴더에 pet1.jpg, pet2.jpg, pet3.jpg, pet4.jpg 파일이 있어야 합니다. 

https://unsplash.com/ko

 

아름다운 무료 이미지 및 사진 | Unsplash

어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다.

unsplash.com

해당 사이트에서 무료 이미지를 다운로드 받으실수 있습니다. 

 

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>프로필 섹션 페이지</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-dark text-white">
      <div class="container-fluid">
        <div class="fs-5 me-4">
          <a class="nav-link active" aria-current="page" href="#">Carousel</a>
        </div>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active text-white" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-white opacity-50" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled text-white opacity-25">Disabled</a>
            </li>
          </ul>
          <form class="d-flex" role="search">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>

    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel" >
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="images/pet1.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-md-block text-start pb-5">
            <h5>First slide label</h5>
            <p>Some representative placeholder content for the first slide.</p>
            <button class="btn btn-primary btn-lg">Sign Up today</button>
          </div>
        </div>
        <div class="carousel-item">
          <img src="images/pet2.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-md-block text-center pb-5">
            <h5>Second slide label</h5>
            <p>Some representative placeholder content for the second slide.</p>
            <button class="btn btn-primary btn-lg">Learn more</button>
          </div>
        </div>
        <div class="carousel-item">
          <img src="images/pet3.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-md-block text-end pb-5">
            <h5>Third slide label</h5>
            <p>Some representative placeholder content for the third slide.</p>
            <button class="btn btn-primary btn-lg">Browse gallery</button>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>

    <div class="row justify-content-evenly align-items-start my-5 mx-auto">
      <div class="img-container col-xl-3 d-flex flex-column align-items-center justify-content-center text-center">
        <img src="images/pet1.jpg" alt="" class="rounded-circle">
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <button class="btn btn-outline-dark ">
          View Details<i class="bi bi-caret-right"></i>
        </button>
      </div>
      <div class="img-container col-xl-3 d-flex flex-column align-items-center justify-content-center text-center">
        <img src="images/pet1.jpg" alt="" class="rounded-circle">
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <button class="btn btn-outline-dark ">
          View Details<i class="bi bi-caret-right"></i>
        </button>
      </div>
      <div class="img-container col-xl-3 d-flex flex-column align-items-center justify-content-center text-center">
        <img src="images/pet1.jpg" alt="" class="rounded-circle">
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
        <button class="btn btn-outline-dark ">
          View Details<i class="bi bi-caret-right"></i>
        </button>
      </div>
    </div>

    <div class="section row justify-content-between align-items-start my-5 mx-auto">
      <div class="col-md-6">
        <h1 class="display-4 opacity-75">First featurette heading. <span>It’ll blow your mind.</span></h1>
        <p class="fs-5 opacity-75 fw-lighter" style="color: #6c757d">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
      </div>
      <div class="col-md-4">
        <img src="images/pet3.jpg" alt="">
      </div>
    </div>

    <div class="section row justify-content-between align-items-start my-5 mx-auto">
      <div class="col-md-4">
        <img src="images/pet2.jpg" alt="">
      </div>
      <div class="col-md-6">
        <h1 class="display-4 opacity-75">Oh yeah, it’s that good. <span>See for yourself.</span></h1>
        <p class="fs-5 opacity-75 fw-lighter" style="color: #6c757d">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
      </div>
    </div>

    <div class="section row justify-content-between align-items-start my-5 mx-auto">
      <div class="col-md-6">
        <h1 class="display-4 opacity-75">And lastly, this one.<span>Checkmate.</span></h1>
        <p class="fs-5 opacity-75 fw-lighter" style="color: #6c757d">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
      </div>
      <div class="col-md-4">
        <img src="images/pet4.jpg" alt="">
      </div>
    </div>

    <footer class="d-flex justify-content-between p-5 mx-5">
      <p>
        © 2017–2023 Company, Inc.<i class="bi bi-dot text-muted"></i>
        <a href="#">Privacy</a> <i class="bi bi-dot text-muted"></i> <a href="#">Terms</a>
      </p>
      <a href="#">Back to top</a>
    </footer>
     
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </body>
</html>
#carouselExampleCaptions img{
  max-height: 500px;
  object-fit: cover;
  object-position: center;
}
.img-container img{
  width: 150px; height: 150px;
  object-fit: cover;
  object-position: center;
}
.row{
  border-bottom: 1px solid #eee;
  padding-bottom: 6rem;
  max-width: 90%;
}
.section img{
  width: 100%;
  height: 100%;
  max-height: 350px;
}
footer i{
  font-size: .5rem;
}
728x90