HTML DOM의 style userSelect 속성은 HTML 문서에서 특정 요소의 텍스트를 사용자가 선택(드래그)할 수 있는지 여부를 확인하고, 필요에 따라 변경할 수 있게 해주는 속성입니다. 이 속성을 활용하면 웹 페이지에서 텍스트 복사를 방지하거나, 반대로 사용자 편의를 위해 텍스트 선택을 명시적으로 허용할 수 있습니다.
문법(Syntax)
userSelect 속성의 기본 문법은 다음과 같습니다.
1. userSelect 값 반환하기
object.style.userSelect
2. userSelect 값 설정하기
object.style.userSelect = "value"
속성 값(Value)
userSelect 속성에 지정할 수 있는 값은 다음과 같습니다.
| 값 | 설명 |
|---|---|
| auto | 브라우저의 기본 설정에 따라 텍스트 선택 여부가 결정됩니다. |
| none | 사용자가 해당 요소의 텍스트를 선택할 수 없도록 차단합니다. |
| text | 사용자가 텍스트를 자유롭게 선택할 수 있습니다. |
| all | 더블 클릭 대신 한 번의 클릭만으로 전체 텍스트가 선택됩니다. |
예제(Example)
다음 예제는 HTML DOM style userSelect 속성을 실제로 사용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
.show {
margin: 1rem 0;
}
</style>
</head>
<body>
<h1>DOM Style userSelect Property Example</h1>
<p style="direction:ltr">This is a paragraph element with some dummy text.</p>
<button onclick="add()" class="btn">Set userSelect</button>
<div class="show"></div>
<script>
function add() {
document.querySelector('p').style.userSelect = "none";
document.querySelector('.show').innerHTML = "Now you can't select the above paragraph text";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
화면에서 “Set userSelect” 버튼을 클릭하면, 자바스크립트의 add() 함수가 실행되어 문단(<p>) 요소의 userSelect 값이 “none”으로 설정됩니다.
그 결과, 버튼 클릭 후에는 위쪽 문단의 텍스트를 마우스로 드래그하여 선택할 수 없게 됩니다. 이처럼 userSelect 속성은 콘텐츠 보호나 UI/UX 개선 등 다양한 상황에서 유용하게 활용할 수 있습니다.