요즘엔 영화를 자주 보진 않지만
전에는 영화광이었다.
공포영화 빼고 다양한 장르를 좋아한다.
그 중에서도 음악을 소재로 한 영화는 싫어한 적이 거의 없다.
웹사이트 화면 구성은 좋아하는 페이지부터 만들 계획이기에
내가 좋아하는 영화 Begin Again 페이지를 만들어봤다.
https://coder-jason.github.io/movie-page/
Movie Home
coder-jason.github.io
저번에 미드 프렌즈 영어공부 사이트를 만들때
HTML과 CSS의 부족함을 느꼈으므로
오늘은 HTML과 CSS 그리고 웹사이트를 조금 더
쉽게 표현할 수 있는 부트스트랩이란 걸 써볼거다.
여기서 부트스트랩이란 웹개발을 위한 프레임워크이다.
웹개발을 더 편하고, 빠르게 진행할 수 있게 도와준다.
나도 써음써봤는데 좀 신기하다.
부트스트랩을 다운로드 해서 스스로 호스트 하지 않으려면
CDN을 사용하면 된다.
(Content Delivery Network)
CDN 검색해서 클릭하면 여러가지 뜨는데
위의 링크를 복사하고 링크tag의 href에 주소를 넣어준다.
그럼 이제 부트스트랩 사용 가능하다.
우선 가장 윗부분에 있는 제목부분과 ACCOUNT 부분을 만들거다.
a tag에 클래스 이름 넣어주고 그 다음 btn-danger, btn-sm 이 있는데
우선 btn-danger는 밑에 보이는 사진에서 확인할 수 있듯이 빨간 배경에 흰 글씨를 제공한다.
그리고 btn-sm은 사이즈를 나타낸다.(small)
btn-lg를 쓰면 커진다.(large)
그 다음에 MOVIE HERO 색깔을 정해줄건데
보통 아무 사이트에 가서 마우스 우클릭 후 검사를 누르면 (Ctrl + F12)
소스창을 볼 수 있다.
옆에 스타일 창을 쭈욱 내리다보면 색을 고를 수 있는데
color 부분 클릭 후 마우스로 원하는 색 고른다음
ex) #e60808 저 부분을 복사해서 쓰면 된다.
그 다음 저 ACCOUNT 앞에 있는 사람모양은
구글에 fontawesome cdn 검색해서
아까랑 똑같이 font awesome css 링크를 링크tag에 복사해준 후에
사용하면 된다.
폰트어썸 아이콘 검색후
사람 모양은 user 검색하면 된다.
start using this icon 클릭 후 나오는 링크를 복사해서
사용할 곳에 넣으면 된다.
<i class="fa fa-user"></i>
플레이 버튼과 다운로드 버튼은 user 부분에서 이름만 각각 play와 arrow-down으로 바꿔주면 된다.
부트스트랩은 그리드 시스템이 좋은 것 같다.
밑에 부분에 col-md-6라는 부분이 나오는데
쉽게 말해서 구간을 나누는 역할인 것 같다.
내가 설명하는 것 보다
밑에 설명을 추가하는게 더 이해하기 쉬울 것 같아서
사진을 첨부한다.
<div class="container movie-details">
<div class="row">
<div class="col-md-6 left-box">
<h2>Begin Again</h2>
<p>싱어송라이터인 ‘그레타’(키이라 나이틀리)는 남자친구 ‘데이브’(애덤 리바인)가 메이저 음반회사와 계약을 하게 되면서 뉴욕으로 오게 된다. 그러나 행복도 잠시, 오랜 연인이자 음악적 파트너로서 함께 노래를 만들고 부르는 것이 좋았던 그레타와 달리 스타가 된 데이브의 마음은 어느새 변해버린다. 스타 음반프로듀서였지만 이제는 해고된 ‘댄’(마크 러팔로)은 미치기 일보직전 들른 뮤직바에서 그레타의 자작곡을 듣게 되고 아직 녹슬지 않은 촉을 살려 음반제작을 제안한다. 거리 밴드를 결성한 그들은 뉴욕의 거리를 스튜디오 삼아 진짜로 부르고 싶었던 노래를 만들어가는데…</p>
<p>Cast</p>
<div class="casting">
<img src="assets/cast1.jpg" title="키이라 나이틀리" width="111" height="139">
<img src="assets/cast2.jpg" title="마크 러팔로">
<img src="assets/cast3.jpg" title="애덤 리바인">
<img src="assets/cast4.jpg" title="헤일리 스테인펠드">
<img src="assets/cast5.jpg" title="제임스 코든">
</div>
<a href="#" class="md-btn btn-danger btn-sm"><i class="fa fa-play"></i>Watch Now</a>
<a href="#" class="md-btn btn-dark btn-sm"><i class="fa fa-arrow-down"></i>Download</a>
</div>
<div class="col-md-6">
<img src="assets/main.jpg" class="main-img">
</div>
</div>
</div>
</div>
나는 여기 바로 위에있는
col-md-6를 써서 반반 나누게 했다.
사용하려면
row 클래스 안에 넣어서 사용해야 한다.
나머지 코드들은 위치 조정하는 코드들이라서
전체 코드로 첨부한다.
<!DOCTYPE html>
<html>
<head>
<title>Movie Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<h1>MOVIE HERO</h1>
<a href="#" class="header-btn btn-danger btn-sm">ACCOUNT</a>
</div>
<div class="container movie-details">
<div class="row">
<div class="col-md-6 left-box">
<h2>Begin Again</h2>
<p>싱어송라이터인 ‘그레타’(키이라 나이틀리)는 남자친구 ‘데이브’(애덤 리바인)가 메이저 음반회사와 계약을 하게 되면서 뉴욕으로 오게 된다. 그러나 행복도 잠시, 오랜 연인이자 음악적 파트너로서 함께 노래를 만들고 부르는 것이 좋았던 그레타와 달리 스타가 된 데이브의 마음은 어느새 변해버린다. 스타 음반프로듀서였지만 이제는 해고된 ‘댄’(마크 러팔로)은 미치기 일보직전 들른 뮤직바에서 그레타의 자작곡을 듣게 되고 아직 녹슬지 않은 촉을 살려 음반제작을 제안한다. 거리 밴드를 결성한 그들은 뉴욕의 거리를 스튜디오 삼아 진짜로 부르고 싶었던 노래를 만들어가는데…</p>
<p>Cast</p>
<div class="casting">
<img src="assets/cast1.jpg" title="키이라 나이틀리" width="111" height="139">
<img src="assets/cast2.jpg" title="마크 러팔로">
<img src="assets/cast3.jpg" title="애덤 리바인">
<img src="assets/cast4.jpg" title="헤일리 스테인펠드">
<img src="assets/cast5.jpg" title="제임스 코든">
</div>
<a href="#" class="md-btn btn-danger btn-sm"><i class="fa fa-play"></i>Watch Now</a>
<a href="#" class="md-btn btn-dark btn-sm"><i class="fa fa-arrow-down"></i>Download</a>
</div>
<div class="col-md-6">
<img src="assets/main.jpg" class="main-img">
</div>
</div>
</div>
</div>
<div class="container relates">
<h4>관련영화</h4>
<div class="recommend">
<img src="assets/movie1.jpg" title="원스">
<img src="assets/movie2.jpg" title="보헤미안 랩소디">
<img src="assets/movie3.jpg" title="러덜리스">
<img src="assets/movie4.jpg" title="라라랜드">
<img src="assets/movie5.jpg" title="싱스트리트">
</div>
</body>
</html>
{
margin: 0;
padding: 0;
}
body
{
background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url(assets/background.jpg);
background-size: cover;
background-position: center;
}
body h1
{
margin-top: 30px;
color: #e50914;
}
.header-btn
{
text-decoration: none !important;
float: right;
margin-top: -50px;
}
.movie-details
{
margin: 5% 0;
}
.left-box {
color: white;
margin-left: 5%
}
.casting
{
margin-bottom: 20px;
}
.casting img
{
width: 60px;
height: 60px;
margin-right: 10px;
cursor: pointer;
}
.md-btn
{
text-decoration: none !important;
margin-right: 10px;
border-radius: 10px;
font-weight: 400;
}
.fa
{
margin-right: 5px;
}
.main-img
{
height: 350px;
margin-left: 145%;
margin-top: -80%;
}
.md-btn
{
margin-bottom: 40px;
}
.relates
{
color: white;
display: center;
}
.recommend img
{
width: 170px;
height: 170px;
margin-left: 40px;
margin-bottom: 40px;
cursor: pointer;
transition: 0.7s;
}
.recommend img:hover
{
transform: translateY(-10px);
}
마지막 코드 hover의 transform은 translate Y축으로 -10px 이동시킨다는 의미이다.
transition: 0.7초 동안.
라라랜드에 마우스를 댔더니 -10px 만큼 위로 올라간것을 볼 수있다.
'페이지 만들기' 카테고리의 다른 글
| 회원가입 페이지 연습 (0) | 2020.09.01 |
|---|---|
| 카드 뒤집기 연습 (0) | 2020.08.31 |
| 비전공자 - 페이지 만들기 (ft 요리 레시피) (0) | 2020.08.30 |
| 비전공자 - 웹페이지 만들기(ft 토트넘 프로필) (0) | 2020.08.29 |
