영화감상기록 홈페이지 만들기 1

Cozler·2024년 8월 10일
CARDCSSPOSTPostingbootstrapboxflixhtmlimageposting box구글폰트기록만들기부트스트랩사진영화영화감상영화감상 페이지카드페이지포스팅박스폰트활용하기

WEB기초

목록 보기
7/9
post-thumbnail

영화감상기록 홈페이지 만들기 1

1. 기본 세팅

우선 이전에 학습한 부트스트랩 기본세팅과 구글폰트를 미리 세팅한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 제목 -->
    <title>스파르타플릭스</title>

    <!-- 부트스트랩 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <!-- 구글폰트 -->
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap");

      * {
        font-family: "Nanum Pen Script", cursive;
        font-weight: 400;
        font-style: normal;
      }
      
    </style>
  </head>

  <body>    
    
  </body>
</html>



2. 홈페이지 상단 부분

다음은 상단 부분을 만들어보자. 우선 부트스트랩 사이트에서 필요한 부분을 가져와보자.
부트스트랩 점보트론 예시 링크 (클릭)

이렇게 F12를 눌러서 개발자도구를 연 다음 내가 필요한 부분의 코드를 차용해보자.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 제목 -->
    <title>스파르타플릭스</title>

    <!-- 부트스트랩 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <!-- 구글폰트 -->
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap");

      * {
        font-family: "Nanum Pen Script", cursive;
        font-weight: 400;
        font-style: normal;
      }
      
    </style>
  </head>

  <body>
    <!-- 부트스트랩으로 가져온 부분 -->
    <div class="p-5 mb-4 bg-body-tertiary rounded-3">
      <div class="container-fluid py-5">
        <h1 class="display-5 fw-bold">Custom jumbotron</h1>
        <p class="col-md-8 fs-4">
          Using a series of utilities, you can create this jumbotron, just like
          the one in previous versions of Bootstrap. Check out the examples
          below for how you can remix and restyle it to your liking.
        </p>
        <button class="btn btn-primary btn-lg" type="button">
          Example button
        </button>
      </div>
    </div>
  </body>
</html>

이제 가져온 부트스트랩을 입맛에 맞게 조금씩 고쳐보자.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 제목 -->
    <title>스파르타플릭스</title>

    <!-- 부트스트랩 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <!-- 구글폰트 -->
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap");

      * {
        font-family: "Nanum Pen Script", cursive;
        font-weight: 400;
        font-style: normal;
      }

      .main {
        color: white;
        background-image: url("https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg");
        background-position: center;
        background-size: cover;
      }
    </style>
  </head>

  <body>
    <div class="main">
      <!-- 부트스트랩으로 가져온 부분 -->
      <div class="p-5 mb-4 bg-body-tertiary rounded-3">
        <div class="container-fluid py-5">
          <!-- 영화 정보 -->
          <h1 class="display-5 fw-bold">킹덤</h1>
          <p class="col-md-8 fs-4">
            병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한
            역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직
            세자뿐이다.
          </p>
          <!-- 버튼 만들기 -->
          <button class="btn btn-outline-light" type="button">
            영화 기록하기
          </button>
          <button class="btn btn-outline-light" type="button">상세보기</button>
        </div>
      </div>
      <!-- 여기까지가 부트스트랩으로 가져온 부분 -->
    </div>
  </body>
</html>

여기까지의 결과물을 미리보기하면 아래와 같다.
(배경 이미지 출처: 넷플릭스 킹덤)



3. 홈페이지 헤더 부분

이번에는 헤더 부분을 만들어보자. 점보트론을 가져온 것처럼 헤더 예시 코드도 가져와보자.
부트스트랩 헤더 예시 링크 (클릭)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 제목 -->
    <title>스파르타플릭스</title>

    <!-- 부트스트랩 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <!-- 구글폰트 -->
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap");

      * {
        font-family: "Nanum Pen Script", cursive;
        font-weight: 400;
        font-style: normal;
      }

      body {
        background-color: black;
      }

      .main {
        color: white;
        background-image: url("https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg");
        background-position: center;
        background-size: cover;
      }
    </style>
  </head>

  <body>
    <!-- 메인 헤더 부분 -->
    <header class="p-3 text-bg-dark">
      <div class="container">
        <div
          class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"
        >
          <a
            href="/"
            class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"
          >
            <svg
              class="bi me-2"
              width="40"
              height="32"
              role="img"
              aria-label="Bootstrap"
            >
              <use xlink:href="#bootstrap"></use>
            </svg>
          </a>

          <!-- 헤더 메뉴 리스트 -->
          <ul
            class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"
          >
            <li><a href="#" class="nav-link px-2 text-danger">MyFLIX</a></li>
            <li><a href="#" class="nav-link px-2 text-white">홈</a></li>
            <li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
            <li><a href="#" class="nav-link px-2 text-white">영화</a></li>
            <li>
              <a href="#" class="nav-link px-2 text-white">찜한 콘텐츠</a>
            </li>
          </ul>

          <!-- 헤더 검색 폼 -->
          <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
            <input
              type="search"
              class="form-control form-control-dark text-bg-dark"
              placeholder="Search..."
              aria-label="Search"
            />
          </form>

          <!-- 로그인/회원가입 버튼 -->
          <div class="text-end">
            <button type="button" class="btn btn-outline-light me-2">
              Login
            </button>
            <button type="button" class="btn btn-danger">Sign-up</button>
          </div>
        </div>
      </div>
    </header>

    <!-- 메인 상단 부분 -->
    <div class="main">
      <!-- 부트스트랩으로 가져온 부분 -->
      <div class="p-5 mb-4 bg-body-tertiary rounded-3">
        <div class="container-fluid py-5">
          <!-- 영화 정보 -->
          <h1 class="display-5 fw-bold">킹덤</h1>
          <p class="col-md-8 fs-4">
            병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한
            역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직
            세자뿐이다.
          </p>
          <!-- 버튼 만들기 -->
          <button class="btn btn-outline-light" type="button">
            영화 기록하기
          </button>
          <button class="btn btn-outline-light" type="button">상세보기</button>
        </div>
      </div>
      <!-- 여기까지가 부트스트랩으로 가져온 부분 -->
    </div>
  </body>
</html>

여기까지의 결과물을 미리보기하면 아래와 같다.

이제 좀 그럴듯한 페이지가 되기 시작했다.



4. 영화 카드 부분

이번에는 감상한 영화 카드 부분을 만들어보자. 이번에도 부트스트랩을 활용해보자!
부트스트랩 카드 예시 링크 (클릭)

마찬가지로 필요한 부분을 붙여넣은 후 입맛대로 바꿔보자!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 제목 -->
    <title>스파르타플릭스</title>

    <!-- 부트스트랩 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <!-- 구글폰트 -->
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap");

      * {
        font-family: "Nanum Pen Script", cursive;
        font-weight: 400;
        font-style: normal;
      }

      body {
        background-color: black;
      }

      .main {
        color: white;
        background-image: url("https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg");
        background-position: center;
        background-size: cover;
      }

      .movie-cards {
        width: 1200px;
        margin: 20px auto 20px auto;
      }
    </style>
  </head>

  <body>
    <!-- 메인 헤더 부분 -->
    <header class="p-3 text-bg-dark">
      <div class="container">
        <div
          class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"
        >
          <a
            href="/"
            class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"
          >
            <svg
              class="bi me-2"
              width="40"
              height="32"
              role="img"
              aria-label="Bootstrap"
            >
              <use xlink:href="#bootstrap"></use>
            </svg>
          </a>

          <!-- 헤더 메뉴 리스트 -->
          <ul
            class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"
          >
            <li><a href="#" class="nav-link px-2 text-danger">MyFLIX</a></li>
            <li><a href="#" class="nav-link px-2 text-white">홈</a></li>
            <li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
            <li><a href="#" class="nav-link px-2 text-white">영화</a></li>
            <li>
              <a href="#" class="nav-link px-2 text-white">찜한 콘텐츠</a>
            </li>
          </ul>

          <!-- 헤더 검색 폼 -->
          <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
            <input
              type="search"
              class="form-control form-control-dark text-bg-dark"
              placeholder="Search..."
              aria-label="Search"
            />
          </form>

          <!-- 로그인/회원가입 버튼 -->
          <div class="text-end">
            <button type="button" class="btn btn-outline-light me-2">
              Login
            </button>
            <button type="button" class="btn btn-danger">Sign-up</button>
          </div>
        </div>
      </div>
    </header>

    <!-- 메인 상단 부분 -->
    <div class="main">
      <!-- 부트스트랩으로 가져온 부분 -->
      <div class="p-5 mb-4 bg-body-tertiary rounded-3">
        <div class="container-fluid py-5">
          <!-- 영화 정보 -->
          <h1 class="display-5 fw-bold">킹덤</h1>
          <p class="col-md-8 fs-4">
            병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한
            역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직
            세자뿐이다.
          </p>
          <!-- 버튼 만들기 -->
          <button class="btn btn-outline-light" type="button">
            영화 기록하기
          </button>
          <button class="btn btn-outline-light" type="button">상세보기</button>
        </div>
      </div>
      <!-- 여기까지가 부트스트랩으로 가져온 부분 -->
    </div>

    <!-- 메인 영화카드 부분 -->
    <div class="movie-cards">
      <!-- 여기에 카드가 들어오게 될 것 -->
      <!-- 카드 전체 묶음 -->
      <div class="row row-cols-1 row-cols-md-4 g-4">
        <!-- 카드 1 -->
        <div class="col">
          <div class="card h-100">
            <img
              src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">영화 제목</h5>
              <p class="card-text">⭐⭐⭐</p>
              <p class="card-text">영화 코멘트</p>
            </div>
          </div>
        </div>
        <!-- 여기까지가 카드 1 -->
        <!-- 카드 2 -->
        <div class="col">
          <div class="card h-100">
            <img
              src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">영화 제목</h5>
              <p class="card-text">⭐⭐⭐</p>
              <p class="card-text">영화 코멘트</p>
            </div>
          </div>
        </div>
        <!-- 여기까지가 카드 2 -->
        <!-- 카드 3 -->
        <div class="col">
          <div class="card h-100">
            <img
              src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">영화 제목</h5>
              <p class="card-text">⭐⭐⭐</p>
              <p class="card-text">영화 코멘트</p>
            </div>
          </div>
        </div>
        <!-- 여기까지가 카드 3 -->
        <!-- 카드 4 -->
        <div class="col">
          <div class="card h-100">
            <img
              src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">영화 제목</h5>
              <p class="card-text">⭐⭐⭐</p>
              <p class="card-text">영화 코멘트</p>
            </div>
          </div>
        </div>
        <!-- 여기까지가 카드 4 -->
      </div>
      <!-- 여기까지가 카드 전체 묶음 -->
    </div>
  </body>
</html>

여기까지의 결과물을 미리보기하면 아래와 같다.



5. 포스팅 박스 부분

이번엔 카드를 생성시켜주는 포스팅 박스를 만들어보자. 이번에도 부트스트랩을 활용해보자!
부트스트랩 플로팅 라벨스 예시 링크 (클릭)

부트스트랩 인풋 그룹 예시 링크 (클릭)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 제목 -->
    <title>스파르타플릭스</title>

    <!-- 부트스트랩 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <!-- 구글폰트 -->
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap");

      * {
        font-family: "Nanum Pen Script", cursive;
        font-weight: 400;
        font-style: normal;
      }

      body {
        background-color: black;
      }

      .main {
        color: white;
        background-image: url("https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg");
        background-position: center;
        background-size: cover;
      }

      .posting-box {
        width: 500px;
        margin: 20px auto 20px auto;
        padding: 20px;
        border: 1px solid white;
        border-radius: 5px;
      }

      .form-floating > label {
        color: white;
      }

      .form-floating > input {
        background-color: transparent;
        color: white;
      }

      .input-group > label {
        background-color: transparent;
        color: white;
      }

      .posting-box > button {
        width: 100%;
      }

      .movie-cards {
        width: 1200px;
        margin: 20px auto 20px auto;
      }
    </style>
  </head>

  <body>
    <!-- 메인 헤더 부분 -->
    <header class="p-3 text-bg-dark">
      <div class="container">
        <div
          class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"
        >
          <a
            href="/"
            class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"
          >
            <svg
              class="bi me-2"
              width="40"
              height="32"
              role="img"
              aria-label="Bootstrap"
            >
              <use xlink:href="#bootstrap"></use>
            </svg>
          </a>

          <!-- 헤더 메뉴 리스트 -->
          <ul
            class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"
          >
            <li><a href="#" class="nav-link px-2 text-danger">MyFLIX</a></li>
            <li><a href="#" class="nav-link px-2 text-white">홈</a></li>
            <li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
            <li><a href="#" class="nav-link px-2 text-white">영화</a></li>
            <li>
              <a href="#" class="nav-link px-2 text-white">찜한 콘텐츠</a>
            </li>
          </ul>

          <!-- 헤더 검색 폼 -->
          <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
            <input
              type="search"
              class="form-control form-control-dark text-bg-dark"
              placeholder="Search..."
              aria-label="Search"
            />
          </form>

          <!-- 로그인/회원가입 버튼 -->
          <div class="text-end">
            <button type="button" class="btn btn-outline-light me-2">
              Login
            </button>
            <button type="button" class="btn btn-danger">Sign-up</button>
          </div>
        </div>
      </div>
    </header>

    <!-- 메인 상단 부분 -->
    <div class="main">
      <!-- 부트스트랩으로 가져온 부분 -->
      <div class="p-5 mb-4 bg-body-tertiary rounded-3">
        <div class="container-fluid py-5">
          <!-- 영화 정보 -->
          <h1 class="display-5 fw-bold">킹덤</h1>
          <p class="col-md-8 fs-4">
            병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한
            역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직
            세자뿐이다.
          </p>
          <!-- 버튼 만들기 -->
          <button class="btn btn-outline-light" type="button">
            영화 기록하기
          </button>
          <button class="btn btn-outline-light" type="button">상세보기</button>
        </div>
      </div>
      <!-- 여기까지가 부트스트랩으로 가져온 부분 -->
    </div>

    <!-- 메인 플로팅박스 부분 -->
    <div class="posting-box">
      <!-- 영화 이미지 주소 부분 -->
      <div class="form-floating mb-3">
        <input
          type="email"
          class="form-control"
          id="floatingInput"
          placeholder="name@example.com"
        />
        <label for="floatingInput">영화 이미지 주소</label>
      </div>
      <!-- 영화 제목 부분 -->
      <div class="form-floating mb-3">
        <input
          type="email"
          class="form-control"
          id="floatingInput"
          placeholder="name@example.com"
        />
        <label for="floatingInput">영화 제목</label>
      </div>
      <!-- 별점 선택 부분 -->
      <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="inputGroupSelect01">
          <option selected>별점 선택</option>
          <option value="1">⭐</option>
          <option value="2">⭐⭐</option>
          <option value="3">⭐⭐⭐</option>
          <option value="4">⭐⭐⭐⭐</option>
          <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
      </div>
      <!-- 영화 감상 소감 부분 -->
      <div class="form-floating mb-3">
        <input
          type="email"
          class="form-control"
          id="floatingInput"
          placeholder="name@example.com"
        />
        <label for="floatingInput">감상 소감</label>
      </div>
      <!-- 등록 버튼 -->
      <button type="button" class="btn btn-danger">등록</button>
    </div>

    <!-- 메인 영화카드 부분 -->
    <div class="movie-cards">
      <!-- 여기에 카드가 들어오게 될 것 -->
      <!-- 카드 전체 묶음 -->
      <div class="row row-cols-1 row-cols-md-4 g-4">
        <!-- 카드 1 -->
        <div class="col">
          <div class="card h-100">
            <img
              src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">영화 제목</h5>
              <p class="card-text">⭐⭐⭐</p>
              <p class="card-text">영화 코멘트</p>
            </div>
          </div>
        </div>
        <!-- 여기까지가 카드 1 -->
        <!-- 카드 2 -->
        <div class="col">
          <div class="card h-100">
            <img
              src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">영화 제목</h5>
              <p class="card-text">⭐⭐⭐</p>
              <p class="card-text">영화 코멘트</p>
            </div>
          </div>
        </div>
        <!-- 여기까지가 카드 2 -->
        <!-- 카드 3 -->
        <div class="col">
          <div class="card h-100">
            <img
              src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">영화 제목</h5>
              <p class="card-text">⭐⭐⭐</p>
              <p class="card-text">영화 코멘트</p>
            </div>
          </div>
        </div>
        <!-- 여기까지가 카드 3 -->
        <!-- 카드 4 -->
        <div class="col">
          <div class="card h-100">
            <img
              src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">영화 제목</h5>
              <p class="card-text">⭐⭐⭐</p>
              <p class="card-text">영화 코멘트</p>
            </div>
          </div>
        </div>
        <!-- 여기까지가 카드 4 -->
      </div>
      <!-- 여기까지가 카드 전체 묶음 -->
    </div>
  </body>
</html>

여기까지의 결과물을 미리보기하면 아래와 같다.

여기까지가 가장 기초적으로 HTML로 홈페이지의 뼈대를 구축하고, CSS로 홈페이지를 가볍게 꾸며보는 과정이었다. 사람의 몸과 비교를 했을 때 WEB에서 HTML이 '뼈'라면, CSS는 '피부'다.

이제 우리는 '근육'과 '신경'을 담당해 줄 JavaScript만 구현하면 실제로 여러가지 동작을 할 수 있는 홈페이지를 만들 수 있게 되는 것이다.

profile
Cozler
코딩하는 것이 즐거운 개발자!
이전 포스트

사진첩 홈페이지 만들기 1

다음 포스트

자바스크립트 JavaScript 기초

0개의 댓글