CSS, JS로 포트폴리오 예제 준비하기(학습 69일차 TIL)

210923 오늘 오전에는 랜딩페이지 코딩을 마무리하지 못한 학생들이 많아서, 남는 시간이 생기게 되었다. 이 시간을 활용해서 포트폴리오에 넣을 실전 퍼블리싱 예제를 몇가지 만들어 보았다.

Must Remember

• 효과를 주어야 할 요소가 여러개일 때 querySelectorAll로 각 요소를 가져온 뒤, forEach로 각각 실행할 함수를 적용시켜 주자.

const btn = document.querySelectorAll('.btn');

btn.forEach(btns => {
  btns.onmousemove = function (e) {
    const x = e.pageX - btns.offsetLeft;
    const y = e.pageY - btns.offsetTop;
  
    btns.style.setProperty('--x', x + 'px');
    btns.style.setProperty('--y', y + 'px');
  }
});

• glassmorphism 디자인을 css로 구현하기 위해 backdrop-filter를 이용하여 뒤에 비치는 요소를 흐리게 할 수 있다.