hover2

• 

  [CSS] hover Media query CSS의 Media query에 대해 알아보다가 몰랐던 기능인 @media(hover: hover)가 유용하다고 느껴 이것에 대해 알아보고자 합니다. hover hover은 데스크톱에서 특정 요소에 마우스를 올렸을 때 행동을 취하는 기능을 제공합니다. a:hover { background-color: red; } 여기서 문제는 '데스크톱'이라는 것입니다. 만약 모바일 이라면? 기존 hover을 사용하면 모바일에서 아주 잠시 동안 데스트톱에서 보이던 hover 효과가 보이게 되고 이것은 모바일 사용자에 있어 부정적인 경험을 주게 됩니다. 당연하게도 모바일에서는 마우스를 올려놓는 행위를 하는 것이 아니라 터치를 하는 행위를 하기 때문입니다. 이때 이것을 해결할 수 있는 방법이 바로 Media query를 사.. TIP/CSS & Tistory 2022. 10. 7.

• 

  (티스토리) 마우스 오버시 썸네일이 움직이는 애니메이션효과 이번에는 마우스를 이미지에 올리면 애니메이션 효과를 가지고 좌우로 움직이는 코드를 만들어 보겠습니다. 마우스 오버 시 애니메이션 효과 우선 제가 적용한 부분은 메인화면의 썸네일 부분입니다. TIP 사용자 스킨에 따라 썸네일의 class가 다르기 때문에 크롬에서 오른쪽 마우스 클릭 후 검사를 통해 정확한 위치를 파악하는 것이 좋습니다. 제 스킨의 경우는 thumbnail이네요. 여러분들도 정확한 위치를 찾으셨다면, 우선 애니메이션을 만들어주셔야 합니다. 적용 하기 CSS /*썸네일 애니메이션*/ @keyframes post-ani { 25% { transform: rotate(2deg) scale(1.01); } 50% { transform: rotate(0deg) scale(1); } 75% { tran.. FRONT-END/CSS 2021. 4. 14.