인터랙티비티
user-select
엘리먼트 내 텍스트 선택 여부를 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
select-none | user-select: none; |
select-text | user-select: text; |
select-all | user-select: all; |
select-auto | user-select: auto; |
예제
텍스트 선택 비활성화
select-none 유틸리티를 사용해 엘리먼트와 그 자식 요소에서 텍스트 선택을 방지할 수 있습니다:
텍스트를 선택해 보면 예상되는 동작을 확인할 수 있습니다
The quick brown fox jumps over the lazy dog.
<div class="select-none ...">The quick brown fox jumps over the lazy dog.</div>텍스트 선택 허용
select-text 유틸리티를 사용하면 엘리먼트와 그 자식 요소에서 텍스트 선택을 허용할 수 있습니다:
텍스트를 선택해 보세요. 예상되는 동작을 확인할 수 있습니다.
The quick brown fox jumps over the lazy dog.
<div class="select-text ...">The quick brown fox jumps over the lazy dog.</div>한 번의 클릭으로 전체 텍스트 선택하기
사용자가 클릭할 때 요소 내의 모든 텍스트를 자동으로 선택하려면 select-all 유틸리티를 사용하세요:
텍스트를 클릭해보면 예상되는 동작을 확인할 수 있습니다
The quick brown fox jumps over the lazy dog.
<div class="select-all ...">The quick brown fox jumps over the lazy dog.</div>자동 선택 동작 사용하기
텍스트 선택 시 기본 브라우저 동작을 사용하려면 select-auto 유틸리티를 사용하세요:
텍스트를 선택해 보면 예상 동작을 확인할 수 있습니다
The quick brown fox jumps over the lazy dog.
<div class="select-auto ...">The quick brown fox jumps over the lazy dog.</div>반응형 디자인
접두사 an user-select 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="select-none md:select-all ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
