CSS 텍스트 선택 드래그 설정, user-select 프로퍼티

css를 사용하여 웹브라우저의 텍스트를 드래그하거나 더블 클릭하여 선택할 수 있습니다. 만약 텍스트 선택을 막거나 더블 클릭 등을 바꾸려면 어떻게 할 수 있는지 알아봅니다.

# CSS user-select 프로퍼티 알아보기

브라우저에서 드래그나 더블 클릭을 사용한 텍스트 선택 등을 막으려면 몇 가지 방법이 있습니다. 자바스크립트를 사용 할 수 있고 CSS에서도 제공하는 user-select를 사용할 수 있습니다. user-select 사용방법은 아래와 같습니다.

user-select: auto | all | none | text;

user-select는 이처럼 몇 가지 값을 선택할 수 있으며 기본값은 auto입니다. 각각의 옵션 기능을 알아보겠습니다.

• auto : Default값으로 브라우저 허용시 텍스트 선택 가능
• all : 더블클릭이 아닌 클릭 만으로도 선택이 가능
• none : 텍스트 선택 안됨
• text : 텍스트 선택이 가능

실제 코드를 적용할 경우 브라우저 호환성을 위해서 아래와 같이 prefix를 많이 사용합니다.

그럼 어떻게 동작하는지 간단한 예제와 함께 아래에서 알아보세요.

# CSS user-select 예제보기

아래에는 몇 개의 엘리먼트를 만들어 각각 user-select의 다른 값을 적용, 테스트 해보겠습니다.

테스트 메시지 : "가나다라마바사아자차카타파하"


@ user-select: auto (Default)
먼저 기본값입니다. 더블 클릭시 또는 드래그할 경우 선택됩니다.


@ user-select: none
none으로 설정된 경우 선택되지 않게됩니다. 이 경우 클릭이나 드래그로 선택할 수 없습니다.


@ user-select: all
텍스트 선택시 더블클릭이 아닌 클릭만으로도 가능합니다.


@ user-select: text
기본적으로 Default와 같습니다. 단 브라우저에 따라 차이가 있을 수 있어 text 값이 필요할 수 있습니다.

위의 text는 브라우저에 따라 다를 수 있는 auto와 동일하게 텍스트를 선택할 것으로 예상할 수 있습니다.

! 만약 페이지 전체를 선택되지 않게 하려면?

이 경우에는 아래와 같이 전체 태그에 user-select:none;을 사용할 수 있을 것 입니다. 아래와 같이 css를 사용합니다.

여기까지 user-select를 사용하는 방법에 대하여 알아보았습니다.