유튜브를 보다가 눈이 가는 강의가 있어서 보고 따라 해 봤다.
코딩애플 강의다.
이 아저씨 강의가 꽤나 도움이 많이 되어서, 강의도 결제해서 보고 있는데, 이것도 한 번 따라 해 봤다.
난 이래서첢 index.html styles.css를 만들었다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<div class="overlay"></div>
<div class="card">
<img src="tarotCard0.jpg" alt="Card image" class="card">
</div>
</div>
<script>
var container = document.querySelector('.container')
var overlay = document.querySelector('.overlay')
container.addEventListener('mousemove', function(e){
var x = e.offsetX
var y = e.offsetY
// console.log(x, y)
var rotateX = (4/30) * y - 20
var rotateY = (-1/5) * x + 20 // 마우스가 200px될 때 rotateY(-20deg)를 주기 위해 이차 방정식을 이용해서 풀이함
// -20 = 200a + b, 20 = 0a + b 이 2가지를 이용해 ax+b에다가 대입함.
// perspective를 통해 입체감을 줌
// background position을 손대 반짝임 효과의 위치를 조정 시킴
// 마우스 위치에 따라 바뀌게 되도록 위치 조정
overlay.style = `background-position : ${x/5+y/5}%; filter: brightness(1) opacity(0.8);`
container.style = `transform : perspective(350px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) `
container.addEventListener('mouseout', function() {
overlay.style = 'filter : opacity(0)'
container.style = 'transform : perspective(35) rotateY(0deg) rotateX(0deg)'
})
// background: radial-gradient()를 잘 주게 되면 조명을 받는 듯한 느낌도 줄 수 있다.
})
</script>
</body>
</html>
/*sytles.css*/
.container{
width: 240px; height: 310px; transition: all 0.1s;
}
.overlay{
position: absolute;
width: 240px;
height: 310px;
background: linear-gradient(105deg,
transparent 40%,
rgba(255, 219, 112, 0.8) 45%,
rgba(132, 50, 255, 0.6) 50%,
transparent 54%);
filter: brightness(1) opacity(0);
mix-blend-mode: color-dodge;
background-size: 150% 150%;
background-position: 100%;
transition: all 0.1s;
}
.card{
width: 240px; height: 310px;
}
이렇게 사실상 따라 치기로 만든 그리고 약간의 변칙을 준 코드지만 이 몇 분 안 되는 강의에서 꽤나 많이 배웠다. css로 할 수 있다는 것은 알았지만, 감히 내가 이런 것을 구현할 수 있을까 했는데, 따라서한 것을 보면, 나도 경험이 많이 쌓이고 지식이 쌓이면 가능하겠다는 것을 느꼈다.
그리고 프런트엔드 개발자를 지망한다고 하면서 css에 대해서 아직 잘 모른다는 것을 체감했다.
다시 HTML과 CSS 공부를 해야지.
'개발 영차영차 공부 영차영차' 카테고리의 다른 글
| 유클리드 호제법을 이용한 최대공약수, 최소공배수 구하기 (python) (0) | 2024.01.31 |
|---|---|
| python divmod() 사용하기 (1) | 2024.01.29 |
| 10진수 2진수, n진수의 변환(python) (0) | 2024.01.29 |
