내배캠 2주 차 강의에서는 스파르타 플릭스 만들기 프로젝트를 진행했다.
Jumbotron 사용해 보기, Headers 사용하기
1. 배경 및 타이틀 꾸미기
부스트 트렙에서 Jumbotron 검색
파란 글씨 클릭
우클릭 검사 위 사진에 대한 부분 div 복사 body 아래에 붙여 넣기!
Headers 추가하기
부트스트랩 사이트에서 Examples → Headers 클릭!
검사를 통해서 해당 부분 복사하기!
body아래에 넣기!
이후 부스트 트렙에서 버튼 및 각종 꾸미고 싶은 기능을 추가한다.
<!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>
* {
font-family: 'Dongle', sans-serif;
}
.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;
}
body{
background-color: black;
}
</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">spartaflix</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>
<li><a href="#" class="nav-link px-2 text-white">현재기온: <span id="temperature"></span></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 id="savebtn" type="button" class="btn btn-outline-light">영화 기록하기</button>
<button type="button" class="btn btn-outline-light">상세정보</button>
</div>
</div>
</div>
</body>
</html>
<div class="container">, <div class="main"> 탱크를 꾸며주면 끝!
추가적으로 body는 태그가 하나밖에 존재하지 않기 때문에. 을 안 써도 된다.
2. 카드 만들기
부트 스트렙에서 card 검색, 여러 개 있는 grid cards사용
<div calss="mycards">
<div id="card" class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
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>
</div>
</div>
main div 아래에 붙여 넣은 후 이미지, 타이틀, 별점, 코멘트 추가
.mycards {
width: 1200px;
margin: 20px auto 20px auto;
}
<div calss="mycards"> 태그에 대한 카드 위치 조정
3. 포스팅 박스 만들기
부스트 트렙의 floating labels에서 맨 위에 있는 email address 코드를 가져온다.
main과 card 사이의 div에 넣는다.
2번 붙여 넣기
이후 부스트 트렙의 input group >> custum select의 맨 첫 번째 div 복사 후 3번째 라인에 붙여 넣기 후 추가할 내용 적기!
마지막으로 버튼 추가!
<div class="mypostingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="영화 이미지 주소">
<label for="floatingInput">영화 이미지 주소</label>
</div>
<div class="form-floating mb-3">
<input type="email" 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="email" class="form-control" id="floatingInput" placeholder="추천 이유">
<label for="floatingInput">추천 이유</label>
</div>
<button type="button" class="btn btn-danger">기록하기</button>
</div>
추가한 div 클래스 태그에 대해서 추가적인 css 부분 작성
추가적으로 input, 라벨에 대한 접근은 form-floating 클래스의 input , label이다.
.mypostingbox{
width: 500px;
margin: 20px auto 20px auto;
border: 1px solid white;
padding: 20px;
border-radius: 5px;
}
.form-floating>input {
background-color: transparent;
color: white;
}
.form-floating>label {
color: white;
}
.input-group>label {
background-color: transparent;
color: white;
}
.mypostingbox > button {
width: 100%;
}
확실히 나만의 추억앨범 만들기를 해보고 나서 접근해 보니 양식은 비슷해서 금방 만들 수 있었다. 대부분 부트스트렙을 이용했지만 그래도 만족스러운 결과다.
'배운내용 정리' 카테고리의 다른 글
| 스파르타 플릭스 JQuery 적용하기 (0) | 2023.10.05 |
|---|---|
| JQuery 및 추억앨범에 적용하기 (0) | 2023.10.05 |
| Javascrip (1) | 2023.10.05 |
| 나만의 추억앨범 만들기 (2) | 2023.10.04 |
| 내배캠 로그인 페이지 만들기 (0) | 2023.09.27 |
