[CSS] user-select

브라우저에서 텍스트를 드래그하거나 더블 클릭해서 선택할 수 있다. 

그런데 이것을 막으려면 자바스크립트로도 가능하겠지만 CSS를 사용해서도 막을 수 있다. 

 

바로 user-select를 사용해서! 

 

사용 방법은 다음과 같다. 

user-select: auto | all | none | text

user-select는 4가지 설정을 줄 수 있으며, 기본 값은 auto이다. 

각 옵션의 기능은 다음과 같다. 

 

▶ auto : Default 값, 브라우저 허용 시 텍스트 선택 가능

▶ all : 더블클릭이 아닌 클릭 만으로도 선택이 가능 

▶ none : 텍스트 선택 불가

▶ text : 텍스트 선택 가능 

 

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

브라우저 호환성을 위해서 위와 같은 방식으로 사용하기도 한다.