16. 그림자 쇼 💡

목표

마우스가 움직이는 것에 맞추어 그림자가 움직이도록 해 보자.

HTML + CSS

Simple enough, innit?

스크립트 작성

JS 단 17줄!

마우스가 움직이면 글씨로부터 떨어진 거리를 계산해서 그림자를 움직인다. 그림자는 서로 다른 색으로 4개가 있으며 90도씩 떨어지게 해 정사각형 모양으로 움직인다.

새로 알게 된 점

이번 과제는 너무 쉬웠다. 요소의 위치를 나타내는 속성과 마우스 위치를 나타내는 속성 이름이 좀 달라서 헷갈리긴 했지만 구현 과정에는 전혀 어려운 게 없었다. 지금까지 쉬운 과제가 나왔을 때는 확장시킬 방향이나 관련 정보를 추가로 찾아보는 방식으로 보충했는데 이번에는 딱히 그럴만한 요소도 안 보여서 더 난감하다...

소스 코드

Visit Github Repository