[CSS] a태그, button 클릭 시 하이라이트 효과

반응형 작업을 위해서 모바일을 작업하는 중에 a 태그 또는 button 요소를 터치 시 영역의 색상이 변화하는 

문제를 발견했다. 

 

기능적인 문제는 아니지만 페이지를 보는 입장에서는 거슬리고 불완전하다고 느낄 수 있었다. 

( 이것을 디자인적인 요소로 배치한다면 몰라도 의도치 않은 경우라면! )

 

이것을 해결하기 위해서 -webkit-tap-hightlight-color 를 사용했다. 

.link {
  -webkit-tap-hightlight-color: transparent
}

transparent 속성을 줘서 간단하게 제거가 가능하다. 

 

그 외에도 색상을 준다면 해당 색으로 영역을 변화시킬 수 있다.