CSS의 user-select 속성을 사용하면 요소의 텍스트를 사용자가 마우스로 드래그하여 선택할 수 있는지 여부를 손쉽게 제어할 수 있습니다. 예를 들어 버튼이나 복사를 원하지 않는 콘텐츠에 이 속성을 적용하면 텍스트 선택을 차단할 수 있습니다.
예제
아래 예제에서는 div 요소에 user-select: none;을 적용하여 해당 영역의 텍스트가 선택되지 않도록 설정했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
user-select: none;
}
</style>
</head>
<body>
<h2>This is demo heading</h2>
<div>This is demo text. You won't be able to select it.</div>
</body>
</html>주요 값 정리
- none: 요소와 하위 요소의 텍스트를 선택할 수 없습니다.
- auto: 브라우저의 기본 동작에 따라 선택 가능 여부가 결정됩니다.
- text: 텍스트를 자유롭게 선택할 수 있습니다.
- all: 요소 내용을 클릭하면 전체가 한 번에 선택됩니다.
브라우저 호환성 팁
Safari 등 일부 구형 브라우저에서는 벤더 접두사를 함께 사용하는 것이 좋습니다.
div {
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox (구버전) */
-ms-user-select: none; /* IE 10+ */
user-select: none;
}