[CSS] user-select로 텍스트 선택 방식 결정하기

user-select

일반적으로 텍스트를 복사할 때, 원하는 텍스트를 드래그해서 선택하는 과정을 거친다.

하지만, 어떤 텍스트는 선택이 안되기를 원하는 경우가 있다. 그런 경우 user-select 속성을 이용하면 간단하게 해결 가능하다.

아래와 같은 4개의 값을 사용할 수 있다.

• auto
• all
• none
• text

auto

default 값이다.

• 대부분 text 방식으로 동작한다.
• ::before와 ::after에는 none이 적용된다.
• 부모 element의 user-select값이 all/none이면 자식도 그대로 따라간다.

all

더블클릭이 아닌 클릭만으로도 선택된다.

none

선택할 수 없다. 드래그, 더블클릭 모두 동작하지 않는다.

text

기본적으로 default와 같다. 더블클릭을 하거나 드래그하는 경우 선택된다.

사용 방법

브라우저 호환성을 고려해 아래와 같이 사용한다.

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

페이지 전체를 선택되지 않게 하려면 * 내부에 user-select: none을 넣어주면 된다.