• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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

부모요소의 속성값 상속.

 

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
1/25
목록
찾아주셔서 감사합니다. Since 2012