안녕하세요! 오늘은 잠시 쉬어가는 타임으로 자바스크립트가 아닌 CSS 이야기를 가지고 왔습니다!
지금 현재 개인 과제를 진행하고 있는데 신기하게도 마우스 오버 기능을 이번에 처음 쓰게 되어서 이야기를 가져오게됐습니다..!
자! 그러면 빠르게 CSS를 통한 마우스 호버 효과에 대해 알아보겠습니다!
마우스 호버 효과란?
마우스가 해당 오브젝트에 닿기 전 원래 크기에서
마우스가 해당 오브젝트에 닿은 후 크기가 커지던지 색상이 변화 되든지
특정 효과를 주는 것을 마우스 오버 효과라고 합니다!
방법
:hover 코드를 CSS에 넣어줍니다
#movie-container>div {
transition: all 0.5s ease;
}
#movie-container>div:hover {
transform: scale(1.1);
color: #fff;
background-color: #27E09D;
box-shadow: 0px 26px 56px 0px rgba(0, 0, 0, 0.10), 0px 102px 102px 0px rgba(0, 0, 0, 0.09), 0px 230px 138px 0px rgba(0, 0, 0, 0.05), 0px 410px 164px 0px rgba(0, 0, 0, 0.01), 0px 640px 179px 0px rgba(0, 0, 0, 0.00);
}저는 제가 만들고 있는 movie-container > div에 대해 마우스 호버 효과를 주고 싶어서 위와 같이 작성 했습니다
조금 더 쉽게 풀어보면
#movie-container>div {
transition: all 0.5s ease;
}위와 같은 코드는 오브젝트가 커지는 효과를 부드럽게 표현한 코드이며
(+부드러운 효과로는 'ease-in', 'inear', 'ease-in', 'ease-out', 'ease-in-out' 효과가 있습니다 효과는 다음에 자세세한 내용으로 찾아뵙겠습니다!)
#movie-container>div:hover {
transform: scale(1.1);
color: #fff;
background-color: #27E09D;
box-shadow: 0px 26px 56px 0px rgba(0, 0, 0, 0.10), 0px 102px 102px 0px rgba(0, 0, 0, 0.09), 0px 230px 138px 0px rgba(0, 0, 0, 0.05), 0px 410px 164px 0px rgba(0, 0, 0, 0.01), 0px 640px 179px 0px rgba(0, 0, 0, 0.00);
}위와 같은 코드는 마우스 오버시 적용 되는
크기 변화, 글씨 색상 변화, 그림자 생성 효과 입니다
결과물
위와 같은 코드 작성시
위 사진 처럼 결과물을 얻을 수 있었습니다
마무리 하며
정답은 없습니다 제가 작성 했던 코드에서 조금씩 고치시면서 변경해 나아가시면 더 멋진 결과물을 얻으실 수 있을 겁니다!
네, 오늘도 제 글을 봐주셔서 정말 감사드리면 항상 몸 건강하시구요 오래 공부하는 것도 좋지만 한 시간이라도 걷다 오는 여유를 즐겨보시는 것을 어떨까요?
그럼 언제나 화이팅입니다!
