웹 서비스를 만들고, 스마트폰으로 볼 때,
버튼 등을 클릭할 때, 파란색 박스가 생겼다 사라지는 현상이 발생하곤 한다..
또한 링크나 이미지를 길게 누르면 주소를 복사하거나 이미지를 저장할 수 있는 옵션이 나타기도 한다.
이런 문제는 웹페이지일 때는 상관없지만 App 이 부자연스럽다는 느낌을 들게 하고,
사용자 경험을 안좋게 만든다
WebView의 기본 스타일과 동작을 제어해서, App과 비슷한 느낌으로 웹페이지를 만들 수 있는데,.
이는 Webkit CSS의 속성을 통해 제어할 수 있다.
html { -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); }
- webkit-touch-callout 속성 : 화면을 길게 누를 때 뜨는 팝업과 액션시트를 제어 (none으로 하면 길게 눌러도 아무것도 뜨지 않음)
- webkit-user-select 속성 : 텍스트나 이미지를 선택할 수 있게 하는 여부를 제어 (none으로 하면 텍스트나 이미지를 선택할 수 없음)
- webkit-tap-highlight-color 속성 : 링크를 터치했을 때 나오는 기본 영역의 색상을 제어 (rgba(0,0,0,0)은 투명을 의미 터치했을 때 아무것도 표시되지 않음)
(transparent를 안쓰고 rgba(0,0,0,0)을 쓰는 이유는 Android 때문이다.
transparent는 iOS에서만 동작한다.)
html { -webkit-touch-callout: none; /* iOS에서 텍스트 선택 팝업 비활성화 */ -webkit-user-select: none; /* Chrome, Safari, Edge (WebKit 기반) */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer 10+ */ user-select: none; /* 표준 속성 */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 터치 하이라이트 제거 */ }
