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

user-select를 사용하여 텍스트 선택을 비활성화하는 방법 알아보기 CSS 속성.

기본적으로 웹 브라우저를 사용하면 주어진 웹사이트에서 텍스트를 선택할 수 있습니다. 단, 실제 텍스트가 있는 이미지가 아닌 텍스트 요소입니다.

마우스나 키보드를 사용하여 텍스트를 선택할 수 있습니다. cmd + a (Mac) 또는 ctrl + a (윈도우).

그러나 어떤 이유로든 텍스트 선택을 허용하지 않으려면 어떻게 해야 합니까?

CSS 속성 user-select를 사용합니다. 값을 none으로 지정합니다. :

selector {
  user-select: "none";
}

따라서 .select-none이라는 클래스가 있는 모든 요소에서 텍스트 선택을 비활성화하려고 한다고 가정해 보겠습니다. :

.select-none {
  user-select: "none";
}

그런 다음 텍스트 선택을 비활성화하려는 요소에 해당 클래스를 추가합니다.

<p class="select-none">This text cannot be selected.</p>

데모:

이 텍스트 요소는 선택할 수 없습니다. 직접 시도해 보세요!

참고:user-select에 대해 다음 브라우저 접두사를 사용해야 합니다. 모든 브라우저에서 작동하도록 하는 속성:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;