React로 webapp 만드는 중, 모바일 화면에서는 div나 button을 클릭할 때 하늘색 배경의 사각형이 나타나는 것을 볼 수 있다. 이게 딱 맞아떨어지는 사이즈가 아닐 때 거슬려서 지우고 싶을 때가 있다.
이러한 highlight 효과는 브라우저의 기본 동작으로, 포커스된 요소를 나타내기 위한 것이고, CSS를 재정의해서 없앨 수 있다.
내 경우엔 사이트 전체에서 이 효과를 없애기 위해 index.css에 추가했다.
```css
* {
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 일부 안드로이드 브라우저를 위한 설정 */
-webkit-focus-ring-color: transparent; /* 일부 최신 버전의 크롬을 위한 설정 */
}
```
이렇게 해주면 tab highlight 색상을 투명하게 만들어 요소를 탭할 때 나타나는 파란색 강조 효과를 제거할 수 있다.
'Study note > WebApp' 카테고리의 다른 글
오늘 내일 뭐입지? 고민을 해결해줄 옷 차림 추천 앱 Dress Forecast (3) | 2024.07.24 |
---|---|
App store connect에 스크린샷 preview 올릴 때 에러 해결방법 (0) | 2024.05.30 |
iOS 앱 심사: 3수 만에 accepted (0) | 2024.05.15 |
풋살할 때 밸런스 있게 팀 짜주는 앱 출시: 팀짜요 (2) | 2024.05.07 |
[Ionic] localForage-cordovaSQLiteDriver으로 Native storage 사용하기 (0) | 2024.04.17 |