[css] CSS - user-select 속성 - 사용자가 요소의 텍스트를 선택 가능한지 여부 지정 (= user-select속성 = 유저실렉트속성)

1. user-select 예제 - 요소의 텍스트 선택 가능 여부 지정
2. user-select 정의
3. user-select 구문

user-select 예제 - 요소의 텍스트 선택 가능 여부 지정

(예) div요소의 텍스트를 (드래그선택/더블클릭선택) 안 되게 지정.

 

<style> 

div {

  -webkit-user-select: none; /* 크롬, 사파리, 오페라 */

  -moz-user-select: none; /* 파이어폭스 */

  -ms-user-select: none; /* IE */

  user-select: none;

}

</style>

<div>홈짱닷컴 Homzzang.com</div>

 

결과보기

user-select 정의

 

사용자가 요소의 텍스트를 선택 가능한지 여부 지정.

 

---

 

1.

웹 브라우저에서 일부 텍스트를 두 번 클릭 시 해당 텍스트가 선택/강조 표시되는데, 이 속성 사용 시 이를 방지 가능.

 

2.

• 기본값: auto
• 상속여부: X
• 애니가능: X
• CSS버전: CSS3
• JS구문: object.style.userSelect="none";

 

3.

IE10 이상 주요 최신 브라우저 모두 지원.

• 일부 구형 브라우저 경우, 접두어 필요. (크롬,오페라: -webkit- / 파이어폭스 -moz- / IE -ms-)

 

4. MDN user-select 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

 

user-select 구문

 

selector {user-select: auto|none|text|contain|all|initial|inherit;}

 

---

[속성값]

 

auto

브라우저 허용 시 텍스트 선택 가능. (기본값)

 

none

텍스트 선택 불가

 

text

텍스트만 사용자가 선택 가능.

 

contain

요소 내에서 선택을 시작 가능. 그러나 선택 항목은 해당 요소의 경계에 포함됨.

 

all

더블클릭 대신 원클릭으로 텍스트 선택.

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.