[CSS] 모바일에서 pressed 적용하기

보통 pc를 고려해서 웹을 만드는 경우에는 hover정도만 고려해서 css를 만들라는 요구사항이 있어서 크게 고민해본 적이 없었는데.. 최근에 react-native와 webview를 이용하여 프로젝트를 진행하다보니 마우스를 pressed를 하는 경우 다른 상태로 버튼을 적용하는 것을 만들일 일 생겼다.

임시 해결 방법

버튼을 누르고 있는 상태를 pseudo class로 캐치하는 방법이 당장에 나지 않았고, 고민할 시간이 없어서 빠르게 touchmove event를 이용하여 pressed를 감지했다.

 

문제점

버튼이 눌리고 있는 것에 대한 유무에 따라서 무언가 다른 변화가 없는데, 굳이 이를 상태로 관리하는 것보다는 hover와 같이 pseudo class로 해결하는 방법에 대해서 찾아봤다. 

 

해결 방법

:focus, :active 두 개의 pseudo class를 사용하면 원하던 의도대로 구현이 되었다.