스파르타플릭스 제작을 위한 기초 작업
index.html
스파르타 폴더 -> 스파르타플릭스 폴더 새로 만들기
VS코드 -> 파일 열기 -> 스파르타플릭스 -> 새파일 -> index.html
title
html:5 -> title 지정
< head >
< meta charset =" UTF-8 " />
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
< title > 스파르타플릭스 </ title >
</ head >
부트스트랩 CDN, 폰트
#헤드-타이틀 아래에 부트스트랩 CDN 복붙
< title > 스파르타플릭스 </ title >
< link
rel =" stylesheet "
integrity =" sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC "
crossorigin =" anonymous "
/>
#헤드-타이틀-CDN 아래에 폰트 주소 복붙
< link
rel =" stylesheet "
/>
#헤드-스타일-* { } 폰트 적용
< style >
* {
font-family : " Hahmlet " , serif ;
font-optical-sizing : auto ;
font-weight : <weight> ;
font-style : normal ;
}
</ style >
##결과 <head>...
< title > 스파르타플릭스 </ title >
< link
rel =" stylesheet "
integrity =" sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC "
crossorigin =" anonymous "
/>
< link
rel =" stylesheet "
/>
< style >
* {
font-family : " Hahmlet " , serif ;
font-optical-sizing : auto ;
font-weight : <weight> ;
font-style : normal ;
}
</ style >
프로젝트1 - 상단 만들기 만들 것!
부트스트랩 이용 - jumbotron
https://getbootstrap.com/docs/5.3/getting-started/introduction/
Get started with Bootstrap
Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.
getbootstrap.com
# jumbotron 검색 -> See our~ 클릭
이렇게 생긴 점보트론을 사용할 예정
# 페이지에서 우측 마우스 -> 검사 -> 점보트론 부분 -> 우측 마우스 Edit as html -> 복사
# <body>에 붙여넣기
< 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 >
페이지 결과
# 킹덤 설명 넣고, 버튼도 복붙해서 총 두 개 만들기
< body >
< 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-primary btn-lg " type =" button ">
영화 기록하기
</ button >
< button class =" btn btn-primary btn-lg " type =" button ">
상세정보
</ button >
</ div >
</ div >
</ body >
페이지 결과
<div> 감싸는 <div> 만들고 class 설정
# <div> 만들고 부트스트랩에서 가져온 Jumbotron div 감싸기
< body >
< div >
< 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-primary btn-lg " type =" button ">
영화 기록하기
</ button >
< button class =" btn btn-primary btn-lg " type =" button ">
상세정보
</ button >
</ div >
</ div >
</ div >
</ body >
# 큰 div에 class = main 설정
<style> 에서 main 꾸미기
# <style> 에서 main 지정
제일 먼저 backgrond 주기 => 지정 후 가장 먼저 하는 습관 들이기 (메인 영역을 확인하기 위해!)
. main {
background-color : aqua ;
}
메인 영역 확인
<style> 에서 main 꾸미기 - 배경 이미지
background-image : url ( '' );
background-position : center ;
background-size : cover ;
=> 얘네는 세트!! (' ') 사이에 이미지 주소 넣기
. main {
color : white ;
background-position : center ;
background-size : cover ;
}
페이지 결과
<style> 에서 main 꾸미기 - 버튼 바꾸기
#부트 스트랩에서 버튼 가져오기
< button type =" button " class =" btn btn-outline-light "> 영화 기록하기t </ button >
< button type =" button " class =" btn btn-outline-light "> 상세정보 </ button >
< button class =" btn btn-primary btn-lg " type =" button ">
영화 기록하기
</ button >
< button class =" btn btn-primary btn-lg " type =" button ">
상세정보
</ button >
위는 변경한 버튼, 아래는 기존 버튼 _ 기존 버튼은 삭제
페이지 결과
헤더 만들기
# 부트스트랩 -> examples -> Snippets > headers
가져다 쓸 것
# 우측 마우스 -> 검사 -> 우측 마우스 -> edit as html -> 전체 복사(command + A, command + C)
# <body> 안에 붙여넣기 (command + V) _ 메인보다 위
< 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 hr ...
페이지 결과
body의 background를 black으로 변경
# <style>에 body { }, background: black;
body {
background-color : black ;
}
❓왜 .body { } 안 쓰지?
<body>태그는 하나 뿐이므로 이름표 없어도 됨! 대신 <div>는 여러개 쓸 수 있어서 이름표를 꼭 붙여야 함
즉, body { } => 태그 이름, .mybtn { } => 이름표 이름
페이지 결과
헤더 수정하기
텍스트 수정 : home -> spartaflix, features -> 홈, pricing -> 시리즈, faqs -> 영화, about -> 내가 찜한 콘텐츠
< 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 >
spartaflix 컬러 수정 : text-secondary -> danger (danger 컬러는 부트스트랩에서 정해놓은 레드 컬러)
변경 전 : < a href =" # " class =" nav-link px-2 text-secondary "
> Spartaflix </ a >
변경 후 : <a href =" # " class =" nav-link px-2 text-danger "> Spartaflix </ a >
sign-up 컬러 수정 : warning -> danger
변경 전 : <button type =" button " class =" btn btn-warning ">
Sign-up
</ button >
변경 후 : <button type =" button " class =" btn btn-danger ">
Sign-up
</ button >
페이지 결과
프로젝트2 - 카드 추가하기 부트스트랩-카드 이용하기
제작할 것!
# 일단, <body>에 만들어 둔 헤더와 메인 접기
# <body>에 <div> 만들고 class=mycards
< div class =" mycards ">...</div>
#my cards 아래에 부트스트랩-카드 복붙
< div class =" mycards ">
< div class =" row row-cols-1 row-cols-md-3 g-4 ">
< div class =" col ">
< div class =" card ">
< img src =" ... " class =" card-img-top " alt =" ... ">
< div ...
페이지 결과
# 카드가 3개씩 표시 -> 4개씩 표시되게 바꾸기
변경 전 : < div class =" row row-cols-1 row-cols-md-3 g-4 ">
변경 후 : < div class =" row row-cols-1 row-cols-md-4 g-4 ">
페이지 결과
# 일단 나머지 삭제 ! < div class =" col "> 하나만 수정해서 복붙 3개하기
카드 수정하기
# 이미지 주소 src에 붙여넣기
# 내용 수정하기
< div class =" card-body ">
< h5 class =" card-title "> 영화 제목 </ h5 >
< p class =" card-text "> ⭐⭐⭐ </ p >
< p class =" card-text "> 영화 코멘트 </ p >
</ div >
# 만든 카드 3개 더 복붙하기
페이지 결과
카드 영역 수정하기
# CSS <style>에 .mycards { }
. mycards {
width : 800px ;
margin : 20px auto 20px auto ;
}
페이지 결과
프로젝트3 - 박스 만들기 가운데 포스팅 박스 만들 것!
큰 영역 잡기
<div class = main, <div class = mycards 사이에 <div class = mypostingbox 넣기
< div class =" mypostingbox "> ... </ div >
부트스트랩 - 플로팅 라벨 가져오기
이메일 부분 복사
< div class =" mypostingbox ">
< div class =" form-floating mb-3 ">
< input
type =" email "
class =" form-control "
id =" floatingInput "
placeholder =" 영화 이미지 주소 "/>
< label for =" floatingInput "> 영화 이미지 주소 </ label >
</ div >
</ div >
# 2개 추가하고 수정하기
< 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 =" form-floating mb-3 ">
< input
type =" email "
class =" form-control "
id =" floatingInput "
placeholder =" 추천 이유 "/>
< label for =" floatingInput "> 추천 이유 </ label >
</ div >
</ div >
부트스트랩 - 셀렉트 가져오기
# 영화 제목 아래에 셀렉트 넣기
# 셀렉트 수정하기
< label class =" input-group-text " for =" inputGroupSelect01 "> Options </ label >
< label class =" input-group-text " for =" inputGroupSelect01 "> 별점 </ label >
< option selected > Choose... </ option >
< option selected > 별점 선택 </ option >
< option value =" 1 "> One </ option >
< option value =" 2 "> Two </ option >
< option value =" 3 "> Three </ option >
< option value =" 1 "> ⭐ </ option >
< option value =" 2 "> ⭐⭐ </ option >
< option value =" 3 "> ⭐⭐⭐ </ option >
< option value =" 4 "> ⭐⭐⭐⭐ </ option >
< option value =" 5 "> ⭐⭐⭐⭐⭐ </ option >
# 추천 이유 아래에 버튼 넣기
< button type =" button " class =" btn btn-danger "> 기록하기 </ button >
페이지 결과
포스팅 박스 크기 줄이고 가운데로
#CSS <style>
. mypostingbox {
width : 500px ;
margin : 20px auto 20px auto ;
border : 1px solid white ;
padding : 20px ;
border-radius : 5px ;
}
페이지 결과
플로팅 라벨 꾸미기
# mypostingbox 안에 있는 form-floating의 input과 label 수정해보기
# form-floating은 인풋 박스와, 안의 라벨로 구성
포스팅박스 안 폼 플로팅
< div class =" mypostingbox ">
< div class =" form-floating mb-3 ">
< input
type =" email "
class =" form-control "
id =" floatingInput "
placeholder =" 영화 이미지 주소 "/>
< label for =" floatingInput "> 영화 이미지 주소 </ label >
</ div >
# CSS <style>
. form-floating > input {
background-color : transparent ;
color : white ;
}
input만 바꿨을 때,
label 색상까지 바꿨을 때,
. form-floating > label {
color : white ;
}
# 별점 부분 라벨도 수정 CSS style
< div class =" input-group mb-3 ">
< label class =" input-group-text " for =" inputGroupSelect01 "> 별점 </ label >
인풋 그룹 안에 라벨이 있음
. input-group > label {
background-color : transparent ;
color : white ;
}
기록하기 버튼 크기 수정
mypostingbox 안의 유일한 btn 이기 때문에 라벨명 X
. mypostingbox > button {
width : 100% ;
}
최종 결과
