user-select 속성이란?
CSS의 user-select 속성을 사용하면 요소의 텍스트를 사용자가 마우스로 드래그하거나 선택할 수 있는지 여부를 지정할 수 있습니다. 이 속성은 버튼, 메뉴, UI 컨트롤처럼 의도치 않은 텍스트 선택을 막고 싶은 경우나, 콘텐츠 복사를 제한하고 싶은 경우에 유용하게 활용됩니다.
예제
아래 예제에서는 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>위 코드를 실행하면 h2 제목은 정상적으로 선택할 수 있지만, div 안의 텍스트는 드래그해도 선택되지 않습니다.
주요 속성값
- none – 요소와 그 하위 요소의 텍스트를 선택할 수 없습니다.
- auto – 기본값으로, 브라우저가 요소의 성격에 따라 자동으로 결정합니다.
- text – 텍스트를 자유롭게 선택할 수 있습니다.
- all – 요소를 클릭하면 전체 텍스트가 한 번에 선택됩니다.
- contain – 선택 범위가 해당 요소의 경계 안으로 제한됩니다.
브라우저 호환성 팁
구형 브라우저와의 호환성을 높이려면 벤더 접두사를 함께 사용하는 것이 좋습니다.
div {
-webkit-user-select: none; /* Safari, Chrome */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* 표준 */
}이렇게 작성하면 대부분의 주요 브라우저에서 일관되게 텍스트 선택 동작을 제어할 수 있습니다.