랜딩페이지를 만들던 도중 생긴 일!
카카오톡으로 href가 되어있는 버튼인데...
크롬이나 모바일에서 꾸욱 누를 경우, 요상하게 생긴 파란 박스가 나타났다!
당최 뭔가 싶어... :focus , :active 등의 가상 선택자를 건드려봤지만, 말짱 헛일.
원인을 알기 위해 열심히 구글링을 해보니...
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
-webkit-tap-highlight-color - CSS: Cascading Style Sheets | MDN
-webkit-tap-highlight-color is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which e
developer.mozilla.org
으엥. 이런 속성이 있었다!
webkit 브라우저에 기본적으로 내장된 속성이라는데...
따라서 해당 속성을 투명하게 만들어주면 될 일!
추가적으로 이와 유사한 속성들이 존재한다.
1) -webkit-touch-callout
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout
-webkit-touch-callout - CSS: Cascading Style Sheets | MDN
The -webkit-touch-callout CSS property controls the display of the default callout shown when you touch and hold a touch target.
developer.mozilla.org
이용자가 웹페이지 속 특정 타겟을 터치하거나 꾹 눌렀을 때 뜨는 기본 UI를 제어하는 속성.
요 녀석을 none으로 해 둘 경우 의도하지 않은 유저의 터치 이벤트를 막을 수 있겠다.
2) -webkit-user-select
https://developer.mozilla.org/ko/docs/Web/CSS/user-select
user-select - CSS: Cascading Style Sheets | MDN
CSS user-select 속성은 사용자가 텍스트를 선택할 수 있는지 지정합니다.
developer.mozilla.org
특히 모바일의 경우 페이지 내 글자나 이미지를 꾹 눌렀을 때 자동적으로 선택이 되는데, 이를 제어하는 속성.
요 3가지 속성을 통해 → 특히 모바일 이용자에게 웹페이지에서도 앱과 같은 UX를 제공할 수 있을 테다. 와우!
'source-code > FrontEnd' 카테고리의 다른 글
| next input auto focus를 통한 UX 개선 (0) | 2023.08.17 |
|---|---|
| FE 디자인 설계 관련 고찰 (0) | 2023.08.17 |
| CSS _ Animation (1) | 2021.06.28 |
| 한글 서브셋 폰트 (0) | 2021.06.15 |
| CSS 가상 선택자 이용하기 (0) | 2021.04.21 |
