사용자 선택

사용자 선택 (User Select)

사용자가 페이지에서 텍스트를 선택(드래그)할 수 있는지, 어떻게 선택되는지를 정해주는 유틸리티예요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

select-none user-select: none;

select-text user-select: text;

select-all user-select: all;

select-auto user-select: auto;

예시 (Examples)

텍스트 선택 비활성화하기 (Disabling text selection)

select-none 유틸리티를 사용하면 요소와 그 자식 요소에서 텍스트 선택을 막을 수 있어요.

<div class="select-none ...">The quick brown fox jumps over the lazy dog.</div>

텍스트 선택 허용하기 (Allowing text selection)

select-text 유틸리티를 사용하면 요소와 그 자식 요소에서 텍스트 선택을 허용할 수 있어요.

<div class="select-text ...">The quick brown fox jumps over the lazy dog.</div>

한 번의 클릭으로 전체 선택하기 (Selecting all text in one click)

select-all 유틸리티를 사용하면 사용자가 클릭했을 때 요소 안의 모든 텍스트를 자동으로 선택하게 만들 수 있어요.

<div class="select-all ...">The quick brown fox jumps over the lazy dog.</div>

자동 선택 동작 사용하기 (Using auto select behavior)

select-auto 유틸리티를 사용하면 텍스트 선택 시 브라우저의 기본 동작을 그대로 따르게 할 수 있어요.

<div class="select-auto ...">The quick brown fox jumps over the lazy dog.</div>

반응형 디자인 (Responsive design)

user-select 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.

<div class="select-none md:select-all ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.

더 알아보기 (Learn more)