12일차 - 웹 페이지 만들어 보기(1)

이상민·2024년 8월 8일

TIL

목록 보기

11/50

시리즈물과 영화를 볼수있는 유명한 사이트인 넷플릭스의 한 페이지를 직접 한번 만들어보자

먼저 VS CODE를 통해 홈페이지의 뼈대를 만들자.

<!doctype html>
<html lang="kr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>스파르타 플릭스</title>
// 부트스트랩cdn
    <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>
    </style>

</head>

<body>
  
</body>

</html>

구글 폰트 적용하기

구글 폰트는 구글에 검색해서 글꼴을 적용 할 수 있다.

@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
<style>
* {
     font-family: 'Gowun Dodum', sans-serif;
 }
</style>

그 다음 메인 소개글을 적을 부분을 부트스트랩 사이트에서 example에 들어가 Jumbotron이라는 예시박스를 찾은 뒤 페이지 검사로 html 부분을 찾아 복사 해온다(https://getbootstrap.com/docs/5.3/examples/jumbotron/)

가져온 양식을 내맛에 알맞게 꾸며주고 그림을 넣어 설정해준 모습

  <div class="jumbo">
    <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 type="button" class="btn btn-outline-light">영화 기록하기</button>
        <button type="button" class="btn btn-outline-light">상세정보</button>
      </div>
    </div>
  </div>

Headers 추가하기

맨위에 추가할 메뉴나 검색창을 넣기 위해 다시 부트스트랩 사이트로 들어가 Examples → Headers 를 찾아보자
header html 을 가져온 후 적용한 모습

  <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">스파르타플릭스</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="영화 검색"
            aria-label="Search">
        </form>

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

헤더 부분 역시 마찬가지로 알맞게 꾸며준 뒤 화면 전체 색깔도 검은색으로 바꿔주자

카드 추가하기

위쪽부분이 어느정도 옷을 갖춰 입었으면 이제 바지를 입을 차례다. 아래에 영화들이 나열될 카드를 부트스트랩에서 가져와보자
아래 카드 형태로 가져와보자
카드를 가져와 붙여준 모습

그럼 이렇게 가져온 카드를 영화 포스터를 넣어보고 꾸며보자!

<div class="row row-cols-1 row-cols-md-5 g-4">
    <div class="col">
      <div class="card h-100">
        <img
         src="https://i.namu.wiki/i/GtfegsAN8IKjKcvMkFwciH_XYxqhjkKzMKe0KN7PZIRcEsvTqmChzo5u1G-XgMF-zbHfxqM9WOWgmha5xt-4gSu8a5hnEUOYIUvOT8cw6zKBd0tL_g-1ThibWcsDYhhEOAJwdkGooK3ghExo4_u9Yg.webp"
          class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">파묘</h5>
          <p class="card-text">⭐⭐⭐⭐</p>
          <button type="button" class="btn btn-primary">자세히 보기</button>
        </div>
      </div>
    </div>

    <div class="col">
      <div class="card h-100">
        <img
         src="https://i.namu.wiki/i/LrLVg-GEpRgCCgJ_7_qgFroEVz781GLe8v77NVplaQ9D7zhCVQUdksXVUd9eiilNsCjo58HNw6u0-cMboFxiszMUkJFUAOa7fDVtVLmgX3EqK6XAcqg_0-bqZXVmqG19z2J_V9Xfk0FOkU9lgmi1Zw.webp"
          class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">서울의 봄</h5>
          <p class="card-text">⭐⭐⭐</p>
          <button type="button" class="btn btn-primary">자세히 보기</button>
        </div>
      </div>
    </div>

    <div class="col">
      <div class="card h-100">
        <img
         src="https://i.namu.wiki/i/ueJ8SF5Nc-l-vPZHFiCgKHa5794bJaEhm9QYHRa6AjzPZ9pV6OKNFdRqmD2tjhdJEMCDOhu488v-aErfbN8Jgu8U6XbaeM-_s0ymZwsH4OV3qXCHk2yWtxYXCuKODZlsc8MSY0uA2y6y0juVMgGAOA.webp"
          class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">로건</h5>
          <p class="card-text">⭐⭐⭐⭐⭐</p>
          <button type="button" class="btn btn-primary">자세히 보기</button>
        </div>
      </div>
    </div>

    <div class="col">
      <div class="card h-100">
        <img
         src="https://i.namu.wiki/i/Ajohqc5sLBLtWrjGaRGfgBQK8egrM49cWiL0kaNllXYKsEqJm5nytswaFQQSF1UdJ5w3qxujL5jmyS9WFpca0g.webp"
          class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">데드풀</h5>
          <p class="card-text">⭐⭐⭐⭐⭐</p>
          <button type="button" class="btn btn-primary">자세히 보기</button>
        </div>
      </div>
    </div>

    <div class="col">
      <div class="card h-100">
        <img
         src="https://i.namu.wiki/i/RdPvwLtJeiOnKyXtjmqugaE6rxp_AlzJdxTi74oPxmr5Zi6w2gKuOHFiNWYayw3GQgukE_fX9CHM0s8FGKjrPQ.webp"
          class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">아이언맨 3</h5>
          <p class="card-text">⭐⭐⭐</p>
          <button type="button" class="btn btn-primary">자세히 보기</button>
        </div>
      </div>
    </div>

부트스트랩에서 가져온 카드 html을 꾸며준 모습

완성!
다음 시간에는 포스팅 박스를 만들어보도록하자

이상민

TIL

이전 포스트

11일차 - Javascript에 대해(0)

다음 포스트

12일차 - 웹 페이지 만들어 보기(1)

TIL

시리즈물과 영화를 볼수있는 유명한 사이트인 넷플릭스의 한 페이지를 직접 한번 만들어보자

구글 폰트 적용하기

Headers 추가하기

카드 추가하기

그럼 이렇게 가져온 카드를 영화 포스터를 넣어보고 꾸며보자!

11일차 - Javascript에 대해(0)

13일차 - 웹 페이지 만들어 보기 (2)

0개의 댓글