[Mobile] 모바일웹, 아이폰 터치 시 발생하는 탭 하이라이트 제거

오랜만에 포스팅을 많이 하게 되네요. 이런건 좋지 않은데, 주기적으로 꾸준히 하는게 더 나을텐데 그게 잘은 안되네요. 약간은 어려운 감이 있습니다. 이번에 이야기 할 이야기는 iOS 사파리에서 일어나는 이야기 인데요. 원래는 이것을 '발생하는 문제'라는 표현을 썼었는데, 잘 생각해보니 이 것은 평소에 우리에게 도움을 주는 좋은 기능입니다.

아... 서론이 너무 길었죠? 그것은 바로 터치 시에 발생하는 검은 하이라이트 입니다.

이것이 무어냐 하면, iOS 사파리로 웹브라우징 시에 링크를 제대로 클릭했는가 확인할 수 있는 좋은 기능인데요. 아래 그림에서 보실 수 있습니다. 그림에서는 '미니홈피' 버튼을 터치 했을 때 오른쪽의 그림과 같이 검은 하이라이트가 생기게 됩니다. (다들 아시는 것 처럼 사파리 브라우저에서 클릭을 오래 누르고 있으면 하단에 메뉴가 나오게 되는데 이 사이에 신속하게 캡쳐를 하기위해 몇 장을 캡쳐했는지 모르겠습니다.)

하지만 이런 기능도 어떨 때는 좀 안나왔으면 하는 경우가 있을 수 있습니다. 저의 경우에는 앱 내에 들어가는 페이지를 제작하는데, 어플리케이션의 경우 터치를 눌렀을 때 발생하는 이벤트가 따로 있어서 그 디자인을 출력해야 하는데 하이라이트가 발생하면서 그 부분을 검게 가리게 되는 사태가 발생하게 되었습니다. 저와 비슷한 경우가 많이 있으실 것이라 예상됩니다. 그렇게 되면 이렇게 좋은 기능도 문제가 되는데요. 이 문제를 해결하는 방법은 아주 간단합니다. 하이라이트를 제거하고자 하는 링크에 스타일을 적용해주기만 하면 되는데요.

---

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

---

위의 속성을 원하는 링크에 주시면 해당 링크를 터치 시에 하이라이트가 나타나지 않습니다. 참 쉽네요. 이 하이라이트 속성은 또 다르게 사용할 수 있는데요. transparent 부분을 다른 컬러를 넣어서 사용하시면 하이라이트를 원하시는 컬러로 대체해서 사용하실 수 있습니다.