[CSS3] 모바일에서 a태그 효과 제거

 개복디 조합표에서 디자인 개선해서 이것저것 해보고 있다가 모바일에서 보는 중에 버튼을 누르는 상태에서 약간 투명한 파란색으로 표시되는 것이다.

이게 예전 스타일 상에서는 곂쳐져서 나와서 그냥저냥 무시할만 했는데. 스타일을 여기저기 건들고 나니까. 이게 네모칸이 옆으로 튀어나와서 거슬리게 되는 것이였다.

혹시 어쩔 수 없는 요소인가 싶어서 다른 웹 페이지를 보니까. 그런 현상이 나타나지 않는 것 이였다. 그리하여서 이를 수정하는 방법을 검색하여서 알게된 내용을 정리해보고자 한다.

---

다음 사진은 기존의 상태이다.

다음과 같이 파란색이 나타나는 것이다. 상당히 거슬린다... 참고로 일반적으로 만든 버튼의 경우에는 보통 요소와 일치하게 나오는에 이렇게 나오는 이유는 왜인지 모르겠다.

해당사항을 해결하는 방법은 매우 간단하다.

-webkit-tap-highlight-color:transparent;

다음과 같은 스타일을 a태그의 스타일에 넣어주면 된다.

해당 스타일을 적용하고나서 꾹 눌러본 모습이다. 파란색이 사라졌다. 매우 좋다!....