바로 쿠팡 취업가능한 포트폴리오 만들기

정세진·2025년 5월 27일

오늘은 유튜브에서 바로 쿠팡 취업가능한 포트폴리오 만들기 라는 영상을 보고 바로 해보려고해요.

출처 : https://www.youtube.com/watch?v=YDCCauu4lIk

마우스 위치를 계산해서 이미지를 회전하고 오버레이를 덮어 반짝이는것 처럼 보이게 하는걸 해볼거에요

<div class="container">
  <div class="overlay"></div>
  <div class="card"></div>
</div>

먼저 카드를 넣은 div상자를 만들어주고
그 안에 overlay와 이미지가 들어갈 card상자도 만들어줘요

이제부터 CSS입니다.

.container {
  width: 220px;
  height: 310px;
  transition: all 0.1s;
  position: relative;
}

먼저 container입니다
220X310 크기의 영역을 만들어주고
애니메이션 효과가 적용되도록 transition을 주고 overlay가 위로 와야 되기 때문에 position : relative를 줘요

.overlay {
  position: absolute;
  width: 220px;
  height: 310px;
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(255, 219, 112, 0.8) 45%,
    rgba(132, 50, 255 ,0.6) 50%,
    transparent 54%);

그 다음은 반짝반짝 overlay에요

absolute로 카드 위에 배치되게 하고요

linear-gradient()로 노란색~보라색 빛처럼 점점 색이 변하게 보이게 해요
transparent로 빛이 퍼지는 느낌을 주기위해 양쪽을 투명하게 해줘요

  filter: brightness(1.1) opacity(0.8);
  mix-blend-mode: color-dodge;
  background-size: 150% 150%;
  background-position: 100%;
  transition: all 0.1s;
}

filter로 밝기(brightness),투명도(opacity) 설정을 해줘요
mix-blend-mode:color-dodge는 이미지 위에 색을 자연스럽게 섞어줘요
background-size로 배경을 더 크게 설정해서 마우스를 움직였을때 따라 움직이게 해줘요
transition으로 부드럽게 빛이 바뀌게 해요

.card {
  width: 220px;
  height: 310px;
  background-image: url(...);
  background-size: cover;
}

image에 원하는 이미지 넣어주시구요
size : cover로 카드 크기에 맞게 이미지를 자동 조정해줘요

이제 JavaScript입니다

var container = document.querySelector('.container');
var overlay = document.querySelector('.overlay');

container와 overlay라는 클래스명을 가진 요소를 찾아서 각 변수에 저장해요

container.addEventListener('mousemove', function(e){

container 위에서 마우스를 움직이면 아래 코드가 실행돼요

  var x = e.offsetX;
  var y = e.offsetY;

이건 저도 첨보는데 마우스가 card에서 얼마나 떨어져 있는지 x,y에 저장해요

  var rotateY = -1/5 * x + 20;
  var rotateX = 4/30 * y - 20;

이건 카드 회전 각도를 계산하는건데 자세한 설명은 생략하겠습니다.

  overlay.style = `background-position : ${x/5 + y/5}%; filter : opacity(${x/200}) brightness(1.2)`;

마우스 움직임에 따라 background-position을 조절하고 밝기와 투명도도 마우스 위치에 따라 달라져요

  container.style = `transform : perspective(350px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;

perspective로 입체감을 주고 이미지가 마우스를 따라 입체적으로 기울어져요

container.addEventListener('mouseout', function(){
  overlay.style = 'filter : opacity(0)';
  container.style = 'transform : perspective(350px) rotateY(0deg) rotateX(0deg)';
})

이제 다 갖고 놀았으면 원위치를 해야겠죠?
마우스가 이미지 밖으로 나가면 빛효과와 카드도 원래대로 돌아갑니다.

이렇게 다 코드를 작성하면..!!