[css 속성] user-select (텍스트 선택, 드래그 설정)

많이 사용하진 않지만 많이 사용하지 않기 때문에 놓치기 쉬운 css가 있다.

그 중 하나가 user-select 라는 속성인데

 

이 속성은 텍스트를 선택했을 때의 동작을 설정할 수 있는 속성이다.

* IE 작업시 IE9+ 부터 -ms- 프리픽스 적용 후 사용

1. user-select : auto (default)

기본 값은 auto로 텍스트를 더블클릭 혹은 드래그할 경우 선택된다.

 

테스트용 텍스트입니다. 이 부분을 클릭 혹은 드래그 하세요.

 

2. user-select : none

none의 경우 텍스트 영역이 클릭 및 드래그로 선택되지 않는다.

 

테스트용 텍스트입니다. 이 부분을 클릭 혹은 드래그 하세요.

 

3. user-select : all

all은 단순 클릭 한 번만으로 텍스트 영역이 선택된다.

 

테스트용 텍스트입니다. 이 부분을 클릭 혹은 드래그 하세요.

 

4. user-select : text

기본 값인 auto와 동일하게 텍스트를 더블클릭, 드래그로 선택할 수 있다.

(기본적으로 auto 값과 동일하게 생각하면 된다.)

 

테스트용 텍스트입니다. 이 부분을 클릭 혹은 드래그 하세요.