목차
user-select 예제 - 요소의 텍스트 선택 가능 여부 지정 user-select 정의 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
부모요소의 속성값 상속.
