CSS로 텍스트 선택 비활성화하기
CSS의 user-select 속성을 사용하면 웹 페이지에서 텍스트가 선택되지 않도록 간단하게 설정할 수 있습니다. 이 글에서는 기본 문법부터 클래스 활용 예시, 그리고 브라우저 호환성을 위한 벤더 접두어까지 차근차근 살펴봅니다.
텍스트 선택은 기본적으로 허용됩니다
기본적으로 웹 브라우저는 모든 웹사이트에서 텍스트 선택을 허용합니다. 단, 이미지 위에 포함된 텍스트가 아니라 실제 텍스트 요소여야 한다는 조건이 있습니다.
텍스트는 마우스로 드래그하거나 키보드 단축키를 통해 선택할 수 있습니다. 예를 들어 Mac에서는 cmd + A, Windows에서는 ctrl + A를 누르면 화면의 텍스트가 한 번에 선택됩니다.
user-select 속성 사용법
그렇다면 어떤 이유로든 텍스트 선택을 막고 싶을 때는 어떻게 해야 할까요? 이때 CSS 속성인 user-select에 none 값을 지정하면 됩니다.
selector {
user-select: none;
}예를 들어, .select-none이라는 클래스를 가진 모든 요소에서 텍스트 선택을 비활성화하고 싶다면 다음과 같이 작성합니다.
.select-none {
user-select: none;
}그런 다음 텍스트 선택을 막고 싶은 요소에 해당 클래스를 추가해 주기만 하면 됩니다.
<p class="select-none">이 텍스트는 선택할 수 없습니다.</p>데모
이 텍스트는 선택할 수 없습니다. 직접 마우스로 드래그해 보세요!
브라우저 호환성을 위한 벤더 접두어
참고로 user-select 속성이 모든 브라우저에서 정상적으로 작동하도록 하려면 아래와 같이 브라우저별 접두어(prefix)를 함께 사용해야 합니다.
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;최신 버전의 주요 브라우저 대부분은 접두어 없이 user-select를 지원하지만, Safari를 포함한 다양한 환경과 구형 브라우저까지 안정적으로 대응하려면 위처럼 접두어를 함께 선언해 두는 것이 좋습니다.