🌈 HOVER 배경 그라데이션 효과 만들기 🌈 오늘도 코드펜에서 hover 이벤트를 둘러보다가 발견한 배경 그라데이션 효과를 응용해서 만들었다. GIF 화질이 굉장히 안좋은데 어쩔수없지... 실제 화면에서는 훨씬 예쁘게 나온다. 어려운 기술도 없으니 한번 작업해보자! 이미지가 움직이지 않는다면 클릭하자! CodePen 코드 확인하기(0.5X로 확인하자) See the Pen Background Gradient Hover Envet (ver.SNS) by hyoj_lee (@ovovv) on CodePen. 코드를 분석해보자!🧐 😎 배경과 아이콘은 분리해서! 변화하는 배경색은 body를 수정한것이 아닌, 배경색을 담당하는 div로 만들어진다. 두개의 태그는 분리되어 존재한다. 세가지 아이콘을 전부 넣으면 ..
🐳 물결치는 애니메이션 만들기 🌊 물결치는 애니메이션 포스팅을 보고 응용해서 만든 달빛이 반짝이는 밤하늘과 바다를 표현한 애니메이션이다. 해당코드는 코드펜에 올라가있으며 하나씩 분석하며 애니메이션을 따라해보자! 이미지가 움직이지않는다면 클릭을 하자! CodePen 코드 확인하기(0.5X로 확인하자) See the Pen Wave Animation by hyoj_lee (@ovovv) on CodePen. 코드를 분석해보자!🧐 😎 HTML의 형태는 간단하다! wrap는 원의 가운데를 맞추기위해서 넣은 태그이니 신경쓰지말고, 그 아래부터 확인하자! 먼저 모든 태그의 틀이 될 div circle을 작성 한 뒤, 파도를 표현할 wave 4개, 폰트어썸을 활용한 달 아이콘과, 빛나는 달빛을 표현해줄 태그하나, 마..