텍스트 선택 강조 기능 비활성화 방법

버튼처럼 작동하는 앵커(예:이 스택 오버 플로우 페이지 사이드바의 버튼) 또는 탭인 경우, 사용자가 텍스트를 실수로 선택 할 경우 하이라이트 효과를 비활성화하는 CSS 표준 방법이 있습니까?

나는 자바스크립트로 이것을 할 수 있을 것 같다는 것을 알아챘고, 약간의 구글링으로는 모질라 전용 -moz-user-select 옵션이 나왔다.

CSS로 이를 달성하기 위한 표준 준수 방법이 있는지, 그렇지 않다면 최선의 방법 접근법은 무엇인가요?

답변 1

2017년 1월 업데이트:

Can I use에 따르면, Safari의 user-select + -webkit-user-select은 모든 주요 브라우저에서 원하는 동작을 달성하는 데 충분합니다.

이것들은 사용 가능한 모든 올바른 CSS 변형입니다.

.noselect {

-webkit-touch-callout: none; /* iOS Safari */

-webkit-user-select: none; /* Safari */

-khtml-user-select: none; /* Konqueror HTML */

-moz-user-select: none; /* Old versions of Firefox */

-ms-user-select: none; /* Internet Explorer/Edge */

user-select: none; /* Non-prefixed version, currently

supported by Chrome, Edge, Opera and Firefox */

}

Selectable text.

Unselectable text.

user-select는 표준화 과정 중에 있습니다 (현재 W3C working draft 상태입니다). 모든 곳에서 작동 보장되지 않으며 브라우저 간 구현에 차이가 있을 수 있습니다. 또한 브라우저는 미래에 지원을 중단할 수 있습니다.

추가 정보는 Mozilla Developer Network documentation에서 찾을 수 있습니다.

이 속성의 값은 none , text, toggle, element, elements, all 및 inherit입니다.

답변 2

텍스트 선택 강조 기능을 비활성화하는 방법

인터넷 사용자들은 종종 웹페이지에서 복사하거나 드래그하여 텍스트를 선택합니다. 그러나 이러한 작업을 수행하는 동안 선택된 텍스트가 강조 표시됩니다. 이 기능은 텍스트를 더 쉽게 선택할 수 있도록 도와주지만, 때로는 불편한 요소가 될 수 있습니다. 만약 당신이 웹사이트 제작자라면, 사용자들이 텍스트를 선택할 때 나타나는 강조 기능을 비활성화하는 것이 좋습니다. 이 글에서는 간단하게 그 방법을 설명해보겠습니다.

HTML

텍스트 선택 강조 기능은 HTML에서 지원됩니다. 이를 비활성화하기 위해서는 HTML 코드를 수정해야 합니다. 여러분이 사용하고 있는 HTML 에디터에 따라 다를 수 있지만, 보통은 다음과 같은 코드를 추가하면 됩니다.

```

```

CSS

CSS를 사용하여 텍스트 선택 강조 기능을 비활성화할 수도 있습니다. 해당 CSS 파일의 맨 끝에 다음 코드를 추가하면 됩니다.

```

*::selection

{background: transparent;}

*::-moz-selection {background: transparent;}

```

JavaScript

마지막으로, JavaScript를 사용하여 텍스트 선택 강조 기능을 비활성화할 수 있습니다. 다음 코드를 HTML 파일에 추가하면 됩니다.

```

document.onselectstart = function() {return false;}

```

결론적으로, 이 글에서는 텍스트 선택 강조 기능을 비활성화하는 방법을 세 가지로 소개했습니다. 만약 당신이 웹사이트를 구축하고 있다면, 이러한 방법 중 하나를 사용하여 사용자들이 선택할 때 강조되는 텍스트를 제거해주는 것이 좋습니다. 이렇게 하면 사용자들이 웹사이트에서 자유롭게 활동할 수 있으며, 사용성이 향상됩니다.