CSS로 텍스트 선택을 비활성화하는 방법

웹 페이지에서 일반적으로 텍스트 선택을 비활성화해서는 안 되지만, 활성화하면 사용자 경험에서 벗어날 수 있는 몇 가지 경우가 있습니다. 일반적으로 우리는 사용자가 텍스트를 선택할 수 있는 기능을 없애고 싶지 않습니다. 그럴 경우 사용자 경험이 나빠질 수 있기 때문입니다. 소수의 웹사이트에서 사용자가 표절을 중지하는 방법으로 사용자가 기사 텍스트를 복사하는 것을 중지하는 경우가 있었지만 고맙게도 오늘날에는 훨씬 덜 일반적입니다.

그렇긴 하지만 텍스트 선택을 비활성화하면 실제로 사용자 경험을 개선할 수 있는 주목할만한 많은 예가 있습니다. 예를 들어:

특히 모바일에서 이벤트를 트리거하는 HTML 요소에서 탭하거나 두 번 탭하면 텍스트가 선택될 수 있음

사용자가 요소를 드래그해야 하는 드래그 앤 드롭 인터페이스에서 드래그가 텍스트 선택을 트리거하지 않도록 합니다.

텍스트 선택이 특정 요소나 상황으로 제한되어야 하는 다른 많은 사용자 정의 웹 구축 사용자 응용 프로그램에서. 예를 들어 텍스트 편집기에서 일반적으로 텍스트를 굵게 표시하는 버튼은 버튼이기 때문에 선택 가능하지 않습니다.

다행스럽게도 CSS에는 필요한 경우 특정 요소에서 텍스트 선택을 비활성화하는 쉬운 방법이 있습니다.

CSS에서 텍스트 선택을 비활성화하는 방법

모든 최신 브라우저(Safari 일부 버전 제외)는 HTML 요소를 선택 불가능하게 만드는 user-select 속성을 지원합니다. 예를 들어 모든 버튼을 선택할 수 없도록 하려면 다음과 같이 작성할 수 있습니다.

button {
    -webkit-user-select: none;
    user-select: none;
}

Safari에서 여전히 필요하므로 -webkit-user-select를 사용해야 합니다. Internet Explorer(점점 덜 보편화되고 있음)를 지원하려는 경우 -ms-user-select를 사용할 수도 있습니다.

button {
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

이 단일 속성은 사용자 선택을 중지합니다. user-select도 이론적으로 다른 속성을 가지고 있지만 이에 대한 지원은 다양합니다.

user-select: none - 요소에 대한 사용자 선택이 없습니다.

user-select: text - 요소 내의 텍스트만 선택할 수 있습니다

.

user-select: all - 한 번 탭하면 전체 요소 콘텐츠가 선택됩니다.

user-select: auto - 기본값으로 모든 항목을 일반처럼 선택할 수 있습니다.

이들 각각에 대한 지원은 다양하지만 완전한 최신 버전list of support for user-select on caniuse을 찾을 수 있습니다.

이에 대한 몇 가지 데모를 보려면 check out the original article here .