-
밑줄과 색상을 없애서 링크처럼 보이지 않게 하기 위해
.btn>a에 text-decoration: none, color: inherit 를 추가했다. -
포스터에 마우스 오버 시 배경이 어두워졌지만 나타난 글자에 마우스 오버 시 배경이 어두워 지지 않았다. top 클래스에 pointer-events: none 을 추가해 보완했다.
-
팀원들과 상의 후 글꼴과 배너 통일
🐾 다른 팀원분이 만드신 Javascript 코드와 합침.
🐾 코드를 다른 팀원분이 간단한 방법으로 알려주셨지만 미래의 내가 이 코드를 보고 창피함을 느껴보라고 내 코드를 남겨둔다...보고있니..?🥹
<!doctype html>
<html lang="ko-kr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- jQuary -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 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">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>비전5 영화 (마우스 오버)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
font-family: 'Nanum Myeongjo', serif;
}
.mytitle {
position: fixed;
color: black;
background-color: #fff;
width: 100%;
height: 150px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
z-index: 3;
}
.main {
padding: 200px 0 100px 0;
height: 2500px;
}
.mytitle>h1 {
font-size: 50px;
position: relative;
left: 50px;
}
.mytitle>button {
width: 200px;
height: 50px;
border-radius: 50px;
margin: 30px 20px 20px auto;
}
.mycards {
width: 80%;
margin: 0 auto;
}
.card-body {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.card-title {
margin: 10px auto 10px 10px;
text-size-adjust: auto;
}
.screen {
position: relative;
overflow: hidden;
}
.card-img-top {
filter: brightness(1);
}
.card-img-top:hover {
filter: brightness(0.3);
}
.top {
pointer-events: none;
position: absolute;
bottom: 100%;
left: 10px;
z-index: 2;
color: white;
text-size-adjust: auto;
font-weight: 500;
}
.screen:hover .top {
top: 5%;
}
.btn>a {
text-decoration: none;
/* 링크의 밑줄 제거 */
color: inherit;
/* 링크의 색상 제거 */
}
</style>
<script>
//DB에서 영화 정보를 가져 온 후 출력
$(document).ready(function () {
show_order1();
});
function show_order1() {
fetch("/movies").then(res => res.json()).then(data => {
let rows = data['result']
$('#cards').empty()
rows.forEach((a) => {
let title = a['title']
let desc = a['desc']
let image = a['image']
let comment = a['comment']
let star = a['star']
let director = a['director']
let character1 = a['character1']
let character2 = a['character2']
let character3 = a['character3']
let stars = ('⭐').repeat(star)
let temp_html = `<div class="col">
<div class="card">
<a href="{{url_for('sub')}}">
<div class="screen">
<div class="top">${desc}</div>
<img src="${image}"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p>${stars}</p>
</div>
</div>
</div>`
$('#cards').append(temp_html)
})
})
}
</script>
</head>
<body>
<div class="mytitle">
<h1>비전5 영화</h1>
<!-- 영화 기록 버튼 -->
<button type="button" class="btn btn-outline-dark"><a href="{{url_for('input')}}">영화 기록</a></button>
</div>
<div class="main">
<h2 style="width: 80%; margin: 50px auto 30px auto; font-weight: 900;">비전5가 추천하는 영화 best4</h2>
<!-- 기본 추천 카드 출력 -->
<div class="mycards">
<div id="card" class="row row-cols-1 row-cols-md-4 g-3">
<div class="col">
<div class="card">
<a href="">
<div class="screen">
<div class="top">영화 설명</div>
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p>⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<a href="">
<div class="screen">
<div class="top">영화 설명</div>
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p>⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<a href="">
<div class="screen">
<div class="top">영화 설명</div>
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p>⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<a href="">
<div class="screen">
<div class="top">영화 설명</div>
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p>⭐⭐⭐</p>
</div>
</div>
</div>
</div>
</div>
<h2 style="width: 80%; margin: 80px auto 30px auto; font-weight: 900;">유저가 추천하는 영화</h2>
<!-- 현재 위치에 스크립트 내용 출력 -->
<div class="mycards">
<div id="cards" class="row row-cols-1 row-cols-md-4 g-3">
<div class="col">
<div class="card">
<a href="">
<div class="screen">
<div class="top">영화 설명</div>
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p>⭐⭐⭐</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
열쩡