데이터 분석가

HTML 프로젝트(Feat.BootStrap) 웹페이지 본문

HTML 프로젝트

HTML 프로젝트(Feat.BootStrap) 웹페이지

PlintAn 2023. 4. 26. 10:00

안녕하세요 !

 

 

이번 시간에는 BootStrap을 이용하여 아주 간단하게 웹 페이지를 만들어 보겠습니다 !

 

어떤 페이지를 구현해 볼거냐면, Tindog 라는 웹 페이지입니다 !

 

Tinder이라는 데이팅 app을 아시나요 ??

 

제가 구현할 Tindog 라는 웹 페이지는 웹 강아지를 입양하는 프로그램입니다 !

 

금액에 차등에 따라 옵션이 주어지며

 

기본 옵션은 하루에 10번 사용자에게 강아지가 메세지를 보냅니다 !

 

 

 

저희가 만들어볼 웹 페이지는 다음과 같습니다 !

 

 

Tindog 프로젝트

 

 

https://an-ju-seong-coding.tistory.com/45

 

Bootstrap을 이용한 HTML 사이트 만들기

안녕하세요 ~ 이번 시간에는 HTML 개발에 유용한 부트스트랩을 이용해서 HTML 사이트를 만들어보겠습니다 ! 근데 부트스트랩이 뭐야 ?? 부트스트랩(Bootstrap)은 HTML, CSS, JavaScript를 이용해 웹 페이지

an-ju-seong-coding.tistory.com

 

해당 사이트에서 예제 연습

 

bootstrap-examples 를 다운로드 받는다면 여러 종류의 html 파일, css 파일을 이용할 수 있습니다

 

자 이제 예제에서 다운로드 받은 파일들을 구성하여 웹 페이지를 만들어 봅시다 !

 

첫번째 코드

 

기본적인 설정에 해당하는데요

 

HTML 문서의 유형을 선언하고 상황에 맞는 설정을 진행합니다. 그리고 가장 맨 처음 보여줄 화면이므로

 

웹 페이지의 제목 등을 설정합니다

 

<!-- 이HTML 문서 유형을 선언. -->
<!DOCTYPE html>
<!-- HTML 문서를 열고, 영어를 사용한다는 것을 나타낸다 -->
<html lang="en">
<!-- 이 태그는 문서의 메타데이터를 포함합니다. -->
<head>
  <!-- 문서의 문자 인코딩을 UTF-8로 선언-->
  <meta charset="UTF-8">
  <!-- 페이지의 뷰포트를 기기의 너비로 설정하고, 초기 줌 레벨을 1.0으로 설정 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 웹 페이지의 제목을 "TinDog"로 설정 -->
  <title>TinDog</title>
  <!-- 웹 페이지를 스타일링하기 위해 외부 스타일시트(Bootstrap 5.3.0-alpha3)에 연결 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  <!-- 웹 페이지를 추가로 스타일링하기 위해 또 다른 외부 스타일시트(solution.css)에 연결 -->
  <link rel="stylesheet" href="./css/solution.css">
</head>
<!-- 이 태그는 웹 페이지에 표시될 콘텐츠를 포함합니다. -->
<body>
<!--웹 페이지의 콘텐츠가 들어간다-->
</body>
<!-- 웹 페이지 콘텐츠의 끝을 표시 -->
</html>
<!-- HTML 문서의 끝을 표시 -->

 

두번째 코드

 

CSS 파일을 이용하여 조금 더 디테일하게 웹 페이지를 꾸며주는 역할을 할 거에요

 

그리고 사용할 이미지를 삽입하고 배경을 꾸미고, 다운로드할 수 있도록 아이폰, 안드로이드 APP 다운로드를

 

지원하는 버튼을 추가합니다 ! 왜냐면 이 웹 페이지는 틴더와 같은 APP 서비스 플랫폼이니까요

 

<!-- 타이틀 섹션 시작, 그라데이션 배경 스타일 적용 -->
<section id="title" class="gradient-background">
  <!-- 넓이 조정을 위한 컨테이너 생성 -->
  <div class="container col-xxl-8 px-4 pt-5">
    <!-- row 클래스로 행 생성, flex-lg-row-reverse 클래스로 반응형으로 역순으로 정렬 -->
    <div class="row flex-lg-row-reverse align-items-center g-5 pt-5">
      <!-- col-* 클래스를 사용하여 열 생성, 이미지 삽입 -->
      <div class="col-10 col-sm-8 col-lg-6">
        <img src="./images/iphone.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" height="200"
          loading="lazy">
      </div>
      <!-- col-* 클래스를 사용하여 열 생성, 텍스트와 버튼 삽입 -->
      <div class="col-lg-6">
        <!-- 대제목 삽입 -->
        <h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">Meet new and interesting dogs nearby.</h1>
        <!-- 버튼 생성 -->
        <div class="d-grid gap-2 d-md-flex justify-content-md-start">
          <!-- 애플 스토어용 버튼 생성 -->
          <button type="button" class="btn btn-light btn-lg px-4 me-md-2"><svg xmlns="http://www.w3.org/2000/svg"
              width="16" height="16" fill="currentColor" class="bi bi-apple mb-1" viewBox="0 0 16 16">
              <path
                d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013

두 번째 코드까지 실행한 결과는 다음과 같습니다

 

첫번째, 두번째 코드 실행

아주 귀여운 강아지가 등장했네요 ! 그리고 버튼과 지정한 문구가 나타났습니다

 

 

 

세번째 코드

 

기능을 추가하는 코드입니다

 

앞서 배운 HTML 그리드 시스템을 이용한 HTML 코드인데

 

"Easy to use"  기능을 추가하는 코드이다. 그리드 시스템을 이용하여 3개의 열과 행을 생성하여

 

모바일과 같은 작은 화면에는 한 열씩, 큰 화면에는 3개의 열이 표시된다.

 

<!-- Features -->
<section id="features">
  <div class="container mt-5">
    <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
      <!-- 첫 번째 기능 -->
      <div class="col d-flex align-items-start">
        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
          <svg xmlns="http://www.w3.org/2000/svg" height="30" fill="currentColor" class="bi bi-check2-circle"
            viewBox="0 0 16 16">
            <path
              d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z" />
            <path
              d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z" />
          </svg>
        </div>
        <div>
          <h3 class="fs-2">Easy to use.</h3>
          <p>So easy to use, even your dog could do it.</p>
        </div>
      </div>
      <!-- 두 번째 기능 -->
      <div class="col d-flex align-items-start">
        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
          <svg xmlns="http://www.w3.org/2000/svg" height="30" fill="currentColor" class="bi bi-mortarboard"
            viewBox="0 0 16 16">
            <path
              d="M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917l-7.5-3.5ZM8 8.46 1.758 5.965 8 3.052l6.242 2.913L8 8.46Z" />
            <path
              d="M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.

 

네번째 코드

 

해당 코드에서는 웹 페이지 하단에 대한 백 그라운드 설정과 이미지를 이용한

 

웹 페이지에 대한 부가적인 설명의 코드입니다.

 

  <!-- Testimonial 섹션 -->
  <section id="testimonial">
    <div class="my-5">
      <!-- 백그라운드 컬러 및 패딩 설정 -->
      <div class="p-5 text-center bg-body-tertiary">
        <div class="container py-5">
          <!-- 인용구와 프로필 이미지, 이름 등을 나타내는 HTML 요소 -->
          <h2 class="text-body-emphasis">"I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof."</h2>
          <img class="profile-img mt-5" src="./images/dog-img.jpg" alt="dog image">
          <p class="col-lg-8 mx-auto lead mt-2">Pebbles, New York</p>
        </div>
        <div class="container">
          <div class="row">
            <!-- 로고 이미지 -->
            <div class="col-lg-3 col-sm-12">
              <img src="./images/techcrunch.png" alt="techcrunch" height="30">
            </div>
            <div class="col-lg-3 col-sm-12">
              <img src="./images/mashable.png" alt="mashable" height="30">
            </div>
            <div class="col-lg-3 col-sm-12">
              <img src="./images/bizinsider.png" alt="bizinsider" height="30">
            </div>
            <div class="col-lg-3 col-sm-12">
              <img src="./images/tnw.png" alt="tnw" height="30">
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

해당 코드를 실행하게 되면 아래와 같이 웹 페이지에 구성됩니다 

세번째, 네번째 코드 실행

여러가지 후원사의 로고와 함께 보니까 뭔가 좀 설득력이 있는 정상적인 웹 페이지처럼 보이네요 !

 

 

다섯 번째 코드

 

해당 코드에서는 가격에 대한 소개를 구성하는 웹 페이지의 최하단 부분입니다

 

가격에 따라 무료인 치와와, 월 15달러 레브라도, 월29달러 마스티프 견종으로 나누어 지는데요

 

가격이 높을수록 매치할 수 있는 수와 메세지를 받을 수 있는 빈도가 늘어납니다 !

 

<!-- Pricing 섹션 -->
<section id="pricing">
  <div class="container">
    <!-- 가격 제목과 설명 -->
    <div class="pricing-header p-3 pb-md-4 mx-auto text-center">
      <h2 class="display-4 fw-normal">A Plan for Every Dog's Needs</h2>
      <p class="fs-5 text-body-secondary">Simple and affordable price plans for you and your dog.</p>
    </div>

    <!-- 가격 플랜들의 그리드 -->
    <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
      <!-- 치와와 플랜 -->
      <div class="col">
        <div class="card mb-4 rounded-3 shadow-sm">
          <div class="card-header py-3">
            <h4 class="my-0 fw-normal">Chihuahua</h4>
          </div>
          <div class="card-body">
            <h1 class="card-title pricing-card-title">$0<small class="text-body-secondary fw-light">/mo</small></h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>5 Matches Per Day</li>
              <li>10 Messages Per Day</li>
              <li>Unlimited App Usage</li>
            </ul>
            <button type="button" class="w-100 btn btn-lg btn-outline-dark">Sign up for free</button>
          </div>
        </div>
      </div>

      <!-- 레브라도 플랜 -->
      <div class="col">
        <div class="card mb-4 rounded-3 shadow-sm">
          <div class="card-header py-3">
            <h4 class="my-0 fw-normal">Labrador</h4>
          </div>
          <div class="card-body">
            <h1 class="card-title pricing-card-title">$15<small class="text-body-secondary fw-light">/mo</small></h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>Unlimited Matches</li>
              <li>Unlimited Messages</li>
              <li>Unlimited App Usage</li>
            </ul>
            <button type="button" class="w-100 btn btn-lg btn-dark">Get started</button>
          </div>
        </div>
      </div>

      <!-- 마스티프 플랜 -->
      <div class="col">
        <div class="card mb-4 rounded-3 shadow-sm border-dark">
          <div class="card-header py-3 text-bg-dark border-dark">
            <h4 class="my-0 fw-normal">Mastiff</h4>
          </div>
          <div class="card-body">
            <h1 class="card-title pricing-card-title">$29<small class="text-body-secondary fw-light">/mo</small></h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>Pirority Listing</li>
              <li>Unlimited Matches & Messages</li>
              <li>Unlimited App Usage</li>
            </ul>
            <button type="button" class="w-100 btn btn-lg btn-dark">Contact us</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

여섯 번째 코드

 

가장 최하단을 장식하는 해당 코드에서는

 

맨 앞에서 했던 방식과 같은 그리드 방식으로 행과 열을 설정하여

 

각각의 행열에 원하는 정보를 입력합니다.

 

 

<!-- Footer 섹션 -->
<section id="contact" class="gradient-background">
  <div class="container ">
    <!-- 푸터의 5개 열 -->
    <footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 mt-5 border-top">
      <!-- Tindog 로고와 저작권 정보 -->
      <div class="col mb-3">
        <p class="text-body-secondary">© Tindog</p>
      </div>

      <!-- 비어있는 열 -->
      <div class="col mb-3"></div>

      <!-- 메뉴 링크가 있는 세 가지 섹션 -->
      <div class="col mb-3">
        <h5>Section</h5>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
        </ul>
      </div>

      <div class="col mb-3">
        <h5>Section</h5>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
        </ul>
      </div>

      <div class="col mb-3">
        <h5>Section</h5>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
        </ul>
      </div>
    </footer>
   </div>
  </section>

5,6 번째 코드를 정상적으로 실행시킨다면

 

다음과 같이 나타납니다 !

 

다섯번째, 여섯번째 코드 실행

강아지한테 메세지를 받고 원하는 강아지와 매칭을 받는다라...

 

사실 저에게는 크게 매력적인 APP은 아닌거 같네요.. 

 

그래도 유사한 웹 페이지를 만드는데 참고가 될 것 같습니다 !

 

 

이상 Bootstrap 예제를 이용한 Tindog 웹페이지(app) html 설정이었습니다 !

 

 

 

 

Comments