Study note/WebApp

React 모바일 모드에서 클릭 시 파란색 배경 효과 제거하기

공대 아로마 2024. 5. 15. 23:08

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 색상을 투명하게 만들어 요소를 탭할 때 나타나는 파란색 강조 효과를 제거할 수 있다.