heyday2024 님의 블로그
[사전캠프 2주차 - Day6] Bootstrap이용해서 웹페이지 꾸미기 본문
오늘은 Bootstrap으로 netflix가 아닌 jiflix를 만들어봤다 ㅋㅋㅋㅋ
우선 bootstrap을 사용하기 위해 아래와 같은 코드를 헤드안에 삽입했고,
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
구글 폰츠에서 Gowun Dodum 폰트를 이용했다.
@import url("https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap");
* {
font-family: "Gowun Dodum", sans-serif;
}
부트스트랩에서 cards, jumbotron, buttons, floating labels 등을 검색하고 적절한 스타일을 선택했다. 그 후 각각 해당되는 코드를 가져와서 조금씩 수정함으로서 웹페이지를 만들어보았다. 굉장히 사용하기 간편했고, 웹페이지 또한 보기 좋은(?) 스타일로 구현되었다.
<body>
<header class="p-3 bg-dark text-white">
<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">Jiflix</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">
<input
type="search"
class="form-control form-control-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 type="button" class="btn btn-outline-light">
영화 기록하기
</button>
<button type="button" class="btn btn-outline-light">상세정보</button>
</div>
</div>
</div>
<div class="mypostingbox">
<div class="form-floating mb-3">
<input
type="text"
class="form-control"
id="floatingInput"
placeholder="영화 이미지 주소"
/>
<label for="floatingInput">영화 이미지 주소</label>
</div>
<div class="form-floating mb-3">
<input
type="text"
class="form-control"
id="floatingInput"
placeholder="영화 제목"
/>
<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="text"
class="form-control"
id="floatingInput"
placeholder="추천 이유"
/>
<label for="floatingInput">추천 이유</label>
</div>
<button type="button" class="btn btn-danger">기록하기</button>
</div>
<div class="pb-3 mb-4 border-bottom custom">
<h3 style="color: white">Best movies for Jiwon</h3>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img
src="https://i.namu.wiki/i/JO4JKPqyUthqcxhJpeNWET8NN6SQYr55S26UrVTV7fBC2sFwqcdYTVofUeVwwznoNl4KXAu_Deoh2BzmYpBWEg.webp"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">마녀</h5>
<p class="card-text">⭐⭐⭐⭐⭐</p>
<p class="card-text">꿀잼 영화 1</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img
src="https://m.media-amazon.com/images/M/MV5BZjdkOTU3MDktN2IxOS00OGEyLWFmMjktY2FiMmZkNWIyODZiXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">인터스텔라</h5>
<p class="card-text">⭐⭐⭐⭐⭐</p>
<p class="card-text">꿀잼 영화 2</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBLQ1wI_P9m2gR5qr5ftGNnBfUt3NNqGdj6Q&s"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">독전</h5>
<p class="card-text">⭐⭐⭐⭐⭐</p>
<p class="card-text">꿀잼 영화 3</p>
</div>
</div>
</div>
</div>
</div>
</body>body 부분 코드
이제 누군가에게 멋들어지게 영화 추천할 수 있게 되었다.
'프론트엔드 부트캠프' 카테고리의 다른 글
| [사전캠프 3주차] jQuery로 웹페이지 제어하기 (0) | 2024.09.09 |
|---|---|
| [사전캠프 Day 7] 자바스크립트 (JS) (0) | 2024.09.03 |
| [사전캠프 Day 4] 웹 개발 종합 기초 (0) | 2024.08.29 |
| [사전캠프 Day3] HTML, CSS, JS (0) | 2024.08.28 |
| [내일배움 사전캠프 Day2] 프론트엔드 기초 (0) | 2024.08.27 |
'프론트엔드 부트캠프' Related Articles
more
