AAtomic CSS

user-select

요소의 텍스트 선택 동작을 제어합니다. UI 요소나 버튼의 텍스트 선택을 방지하거나, 복사하기 쉽도록 한 번 클릭으로 전체 텍스트를 선택할 수 있게 합니다.

클래스 목록

클래스CSS설명
usnuser-select: none텍스트 선택 차단. UI 요소, 버튼에 사용
usauser-select: auto브라우저 기본 동작. 부모의 usn을 자식에서 해제
ustuser-select: text텍스트 선택 명시적 허용
usaluser-select: all클릭 한 번으로 전체 텍스트 선택. 복사용 코드/키에 사용

시각적 비교

각 요소의 텍스트를 드래그하여 선택해 보세요. 선택 동작이 다르게 적용됩니다.

None — usn

이 텍스트는 선택할 수 없습니다. 드래그해 보세요.

텍스트 선택이 차단됩니다. 버튼, 탭 등에 적합

Auto (기본값) — usa

이 텍스트는 기본 동작대로 선택 가능합니다.

브라우저 기본 선택 동작을 따릅니다

Text — ust

이 텍스트는 명시적으로 선택이 허용됩니다.

usn이 적용된 부모 안에서도 선택 가능하게 강제

All — usal

npm install atomic-css@latest

클릭 한 번으로 전체 텍스트가 선택됩니다. 복사하기 편리!

클래스별 상세

usnuser-select: none

텍스트 선택을 완전히 차단합니다. 버튼, 탭, 네비게이션 등 UI 요소에서 드래그 시 텍스트가 선택되는 것을 방지할 때 사용합니다. 더블클릭이나 드래그 시 텍스트가 하이라이트되지 않습니다.

<!-- 버튼 텍스트 선택 방지 -->
<button class="usn cp py8px px2rem bg6366F1 cFFFFFF br8px bn">
  클릭 가능하지만 텍스트 선택 불가
</button>

<!-- 탭 메뉴 -->
<nav class="usn df gap2px">
  <button class="cp py8px px16px bg27272A cFAFAFA br4px bn">Tab 1</button>
  <button class="cp py8px px16px bg27272A cFAFAFA br4px bn">Tab 2</button>
  <button class="cp py8px px16px bg27272A cFAFAFA br4px bn">Tab 3</button>
</nav>

자주 쓰는 조합

usn cp선택 차단 + 포인터 커서 (버튼)
usn pen선택 차단 + 클릭 비활성 (비활성 오버레이)
usn df aic gap8px선택 차단 + flex 정렬 (탭 메뉴)

usauser-select: auto

브라우저 기본 동작을 따릅니다. 부모에 usn이 설정된 경우, 특정 자식 요소에서 텍스트 선택을 다시 허용할 때 사용합니다.

<!-- 부모는 선택 차단, 자식은 선택 허용 -->
<div class="usn p2rem bg18181B br8px">
  <p class="cFAFAFA mb8px">이 텍스트는 선택 불가</p>
  <p class="usa c71717A">이 텍스트는 다시 선택 가능</p>
</div>

ustuser-select: text

텍스트 선택을 명시적으로 허용합니다. usn이 적용된 부모 안에서 특정 텍스트만 선택 가능하게 할 때 유용합니다.

<!-- usn 부모 안에서 특정 텍스트만 선택 가능 -->
<div class="usn p2rem bg18181B br8px">
  <p class="cFAFAFA mb8px">UI 라벨 (선택 불가)</p>
  <code class="ust c38BDF8 bg1E1E2E py2px px8px br4px">선택 가능한 코드</code>
</div>

usaluser-select: all

클릭 한 번으로 요소의 전체 텍스트를 선택합니다. 복사하기 쉬워야 하는 코드 스니펫, API 키, 시리얼 넘버 등에 적합합니다.

<!-- 복사용 설치 명령어 -->
<div class="bg0F0F17 b1pxsolid27272A br8px p16px">
  <code class="usal c34D399 fs14px cp">npm install atomic-css@latest</code>
</div>

<!-- API 키 복사 -->
<div class="df aic gap12px bg18181B p16px br8px">
  <span class="c71717A fs14px">API Key:</span>
  <code class="usal c38BDF8 bg1E1E2E py2px px8px br4px fs14px cp">sk-abc123def456ghi789</code>
</div>

활용 팁

usal은 사용자가 한 번 클릭만으로 전체 텍스트를 복사할 수 있어 UX를 개선합니다. 설치 명령어, 라이선스 키, 코드 블록 등에 적극 활용하세요.

팁 & 주의사항

usn은 UI 요소에만 사용

버튼, 탭, 네비게이션 등 인터랙티브 요소에 사용하세요. 본문 텍스트에 usn을 적용하면 사용자가 내용을 복사할 수 없어 UX가 나빠집니다.

usal로 복사 편의성 향상

설치 명령어, API 키 등 복사가 필요한 텍스트에 usal을 적용하면 한 번 클릭으로 전체 선택이 가능합니다.

접근성 주의

usn은 키보드 선택(Shift+화살표)까지 차단할 수 있습니다. 접근성이 중요한 콘텐츠에는 사용을 피하세요.

pointer-eventscursor