- styled component 내 keyframes 추가
- styled component 내 키프레임을 추가하고 싶어 방법을 찾아봄
- 참고
-
@keyframes :키프레임 규칙은 개발자가 애니메이션 중간중간의 특점 지점들을 거칠수있도록 설정함으로써 애니메이션의 중간 절차를 제어할 수 있음
-
세밀하게 중간 동작을 제어할 수 있다는 장점에 사용
//.css @keyframes identifier { 0% { top: 0; } 50% { top: 30px; left: 20px; } 50% { top: 10px; } 100% { top: 0; } }
-
- styled component 내 키프레임 추가 방법
import styled, {css, keyframes} from 'styled-components';
.
.
.
//keyframes 변수를 선언한다.
const 키프레임변수명 = keyframes`
from {~~}
to {~~}
`
//keyframes 변수를 해당 style 변수 내에서 선언한다.
const 변수명 = styled.ooo`
animation: ${키프레임변수명} ;
`
- 모바일 시, hover 기능 삭제
- 오류 발견: 모바일 기기에서 버튼을 클릭(터치)했을 때, hover css가 작동되면서 눌린상태로 클릭이벤트가 적용 안되고 두번째 클릭(터치) 때 클릭 이벤트가 적용되는 현상을 발견함
- 오류 이유 = hover 스타일 적용 때문
-
모바일 기기일 때 hover 스타일이 적용되는 방식에 대한 문제
-
포인터가 DOM의 element 요소의 위에 위치하면 적용되는 스타일이 바로 의사(pseudo) 클래스인데, 모바일 기기는 터치가 포인터의 역할을 한다.
-
즉, 모바일 기기가 터치를 이용해 요소를 선택하면 마우스처럼 누른다는 개념이 적용되어 요소 위라는 의사는 전달되어도, 다른 곳을 터치해 상호작용을 발생시키지 않는 이상 요소 위를 떠났다는 개념이 적용되지 않기 때문에, :hover 스타일을 적용한 경우 모바일 기기에서는 예상치 못한 화면을 볼 수 있음
//css의사 클래스(pseude class) css 의사 클래스란? 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있음 ex. :active, :hover, :nth-of-type, :read-only 등
-
- 해결 방법 = css media queries level 4에 포함된 interaction media 기능 중 hover 사용
@media (hover: hover) {
.right button:hover {
background-color: $gray_hover;
}
}- 고려 사항
- : hover는 마우스와 같은 포인터 장치를 통해 상호작용 하는 경우에만 사용!! 이 외에 영향을 주는 부분이 있다면 위의 인터렉션 미디어 호버를 사용하면 됌
technology blog