모바일에서 터치시 하이라이트 방지(a, img 등)

React로 개발중인 모바일 페이지에서, 특정 영역을 터치할 때마다 하이라이트가 생겼다.

없애고 시켜서 구글링해보니 모바일 환경에서 a태그를 누르면 하이라이트가 생긴다고 한다.

그러고보니 특정 영역이 아니라 a태그 한정이었다.

 

a 태그를 터치했을 때 하이라이트가 생긴다

 

 

 

아무페이지나 개발자도구를 열어 확인해보면 위와같이 a태그에 하이라이트가 생긴다.

a 태그의 css에 다음 속성값을 주면 더이상 하이라이트가 나타나지 않는다.

 

a { -webkit-tap-highlight-color:transparent;}

 

역으로 특정 색상을 주고 싶을 때도 이용할 수 있을 것 같다.

 

 

 

추가

a 태그 뿐 아니라 img 태그에도 하이라이트가 생기는 경우도 있었다. 이 경우도 동일하게 비활성화가 가능했다.
a태그 한정은 아닌 듯.