CSS user-select 속성 – 올바른 이해와 사용 방법

`user-select` 속성의 이해

user-select 속성은 사용자가 요소의 텍스트를 '선택'할 수 있는 방법을 지정합니다.

사용자가 마우스로 드래그해서 텍스트를 복사하거나 강조 표시하는 등의 '선택' 동작의 상호 작용을 제어할 수 있습니다.

구체적으로 "선택"의 의미
사용자가 드래그하거나 더블 클릭하여 텍스트를 선택한 상태를 말합니다.
이 선택된 텍스트는 보통 브라우저에서 파란색 배경과 흰색 텍스트로 표시되며, 복사(CTRL + (C) 등의 작업을 수행할 수 있습니다.

형식 구문

구문

CSS

/* 키워드 값 */
user-select: auto; /* 초깃값 */
user-select: none;
user-select: text;
user-select: all;

/* 전역 값 */
user-select: inherit;
user-select: initial;
user-select: revert;
user-select: revert-layer;
user-select: unset;

값

user-select 속성의 값
`auto`	브라우저의 기본 동작을 따릅니다. 일반적으로 텍스트는 선택 가능하지만, 요소와 상황에 따라 다를 수 있습니다.
`none`	요소와 하위 요소의 텍스트는 선택할 수 없습니다. 사용자는 해당 텍스트를 복사하거나 드래그하여 하이라이트할 수 없습니다.
`text`	요소의 텍스트를 선택 가능하도록 설정합니다.
`all`	요소의 전체 텍스트를 한 번의 동작(예를 들어, 한 번의 클릭으로)으로 선택할 수 있도록 설정합니다.

참고하세요!
위 값들 이외에도 명세서에서는 contain 값을 정의하고 있지만, 어떤 브라우저에서도 지원되지 않습니다.

형식 정의

user-select 속성의 형식 정의
초깃값	`auto`
적용 요소	모든 요소
상속	아니오 WebKit/Chromium 기반 브라우저는 속성을 상속된 것으로 구현합니다. 지금까지 Chromium은 최종 동작이 명세서 사양을 충족하도록 문제를 해결하기로 했습니다 .
애니메이션	아니오

예제

HTML

<p class="auto">p 요소의 auto 값에서 이 텍스트를 선택할 수 있어야 합니다.</p>
<p class="none">이 텍스트를 선택할 수 없습니다!</p>
<p class="all">한 번 클릭하면 이 텍스트 전체가 선택됩니다.</p>

CSS

.auto {
  -webkit-user-select: auto; /* Safari */
  user-select: auto;
}
.none {
  -webkit-user-select: none; /* Safari */
  user-select: none;
}
.all {
  -webkit-user-select: all; /* Safari */
  user-select: all;
}