display를 그리드로 설정 후 ,
movie 라는 div 안에 img를 넣었던 것에서
div 안의 background-image로 이미지를 넣어 img태그를 제거했다.
JS를 사용하지 않고 CSS와 HTML로만 :hover 로 효과를 줄 생각이었다.
하지만 그렇게 작업을 하다보니 이미지 div를 감싸는 div, 그 div를 감싸는 div 를 만들게 되고 html은 물론 css 파일이 너무 길어지는 것 같아 JS를 사용했다.
querySelector 속성으로 이벤트를 줄 클래스를 정하고,
mouseover, mouseout 이벤트로 마우스를 갖다대고 뗄때 블러 효과를 주었다.
QuerySelectorAll을 주고 싶었지만 그렇게 하니 class=movie 인 div들이 동시에 적용되어서
movie div들을 일일이 다른 클래스를 부여해주었고
코드가 4배 늘어났다(...)
HTML과 CSS 코드를 간결하게 하기위해 JS를 활용했는데 JS가 더러워짐
어떻게 해결해야할까 추후 보완이 시급하다.
바로 해결해야할 다음 문제: 블러되면서 영화이미지 위의 텍스트까지 같이 블러처리됨.
보이지않던 텍스트가 mouseover 이벤트가 발생했을 때 보여야함.
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fav.🎬</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="navbar">
<span>Movies 아이콘</span>
<span>velog아이콘</span>
</nav>
<div class="container">
<div
class="movie one"
style="background-image: url(budapest.jpg); background-size: cover"
>
<h3>Grand Budapest Hotel</h3>
<p>Director: Wes Anderson</p>
<p>2014</p>
</div>
<div
class="movie two"
style="background-image: url(farewell.jfif); background-size: cover"
></div>
<div
class="movie three"
style="background-image: url(her.jpg); background-size: cover"
></div>
<div
class="movie four"
style="background-image: url(parasite.jpg); background-size: cover"
></div>
</div>
<script src="move.js"></script>
</body>
</html>- CSS
/*
주요 사용 색상
배경: #cfd8dc
탭/타이틀색상: #9ea7aa
본문: #ffffff
*/
body {
margin: 0;
box-sizing: border-box;
background-color: #cfd8dc;
}
img {
width: 100%;
height: 100%;
}
.navbar {
font-size: 30px;
display: flex;
justify-content: space-between;
text-align: center;
padding: 10px;
}
.container {
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
max-width: 1200px;
background-color: #cfd8dc;
}
.movie {
margin: 5px auto;
width: 280px;
height: 400px;
text-align: center;
}- Javascript
const imageOne = document.querySelector('.one');
const imageTwo = document.querySelector('.two');
const imageThree = document.querySelector('.three');
const imageFour = document.querySelector('.four');
function blurEffectOne(){
document.querySelector('.one').style.filter="blur(5px)"
}
function noneBlurOne(){
document<.querySelector('.one').style.filter="none"
}
function blurEffectTwo(){
document.querySelector('.two').style.filter="blur(5px)"
}
function noneBlurTwo(){
document.querySelector('.two').style.filter="none"
}
function blurEffectThree(){
document.querySelector('.three').style.filter="blur(5px)"
}
function noneBlurThree(){
document.querySelector('.three').style.filter="none"
}
function blurEffectFour(){
document.querySelector('.four').style.filter="blur(5px)"
}
function noneBlurFour(){
document.querySelector('.four').style.filter="none"
}
imageOne.addEventListener('mouseover', blurEffectOne);
imageOne.addEventListener('mouseout', noneBlurOne);
imageTwo.addEventListener('mouseover', blurEffectTwo);
imageTwo.addEventListener('mouseout', noneBlurTwo);
imageThree.addEventListener('mouseover', blurEffectThree);
imageThree.addEventListener('mouseout', noneBlurThree);
imageFour.addEventListener('mouseover', blurEffectFour);
imageFour.addEventListener('mouseout', noneBlurFour);
안녕하세여