[Web / CSS] WebView 버튼 클릭 시 생기는 파란색 박스 해결 (웹을 앱처럼 보이게 하는 법)

링크를 클릭할 때 생기는 파란색 박스

 

스마트폰으로 웹페이지를 둘러볼 때 웹페이지가 App 스럽지 못하다는 생각을 해본적이 있을 것이다.

이는 테두리와 박스 때문이다.

 

또한 링크나 이미지를 길게 누르면 주소를 복사하거나 이미지를 저장할 수 있는 옵션이 나타난다.

 

이런 요소들은 웹페이지일 때는 상관없지만 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에서만 동작한다.)

 

 

 

How to remove blue-box-fill when clicking the buttons?