CSS 웹 페이지 터치 이벤트

-webkit-touch-callout:none;
-webkit-user-select:none;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);

위의 CSS 코드는 모바일 웹 개발에서 사용되는 코드 일부로, 
웹 페이지에서 터치 이벤트에 대한 특정 스타일 및 동작을 설정합니다. 
이 코드를 각각 설명해보겠습니다.

 

-webkit-touch-callout:none;
이 코드는 웹 페이지에서 글자나 이미지를 길게 터치했을 때 나타나는 기본 브라우저 메뉴를 비활성화합니다. 
예를 들어, 글자나 이미지를 길게 눌렀을 때 "이미지 저장", "링크 복사"와 같은 메뉴가 표시되지 않도록 합니다.

-webkit-user-select:none;
이 코드는 텍스트나 요소의 선택(드래그 및 복사)를 비활성화합니다. 
사용자가 웹 페이지에서 텍스트를 선택하거나 복사하는 것을 방지하며, 
일반적으로 텍스트나 요소를 보호하거나 특정 디자인 요구 사항을 충족시키기 위해 사용됩니다.

-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
이 코드는 요소를 터치했을 때 해당 요소 주위에 나타나는 강조 효과를 비활성화합니다. 
보통 터치한 요소 주위에 파란색 혹은 회색 하이라이트 효과가 나타나는데, 
이를 투명하게 만들어 눈에 띄지 않도록 합니다.
이 코드들은 주로 모바일 웹 앱 또는 웹 페이지에서 터치 이벤트와 사용자 상호 작용을 조절하고 
디자인을 더욱 사용자 친화적으로 만들기 위해 사용됩니다.