AAtomic CSS

cursor

요소 위에 마우스를 올렸을 때 커서의 모양을 설정합니다. 사용자에게 요소의 상호작용 가능 여부를 시각적으로 알려주는 중요한 UX 요소입니다.

클래스 목록

클래스CSS설명
cpcursor: pointer손가락 모양. 클릭 가능한 요소에 사용
cdcursor: default기본 화살표. 비-인터랙티브 요소 또는 리셋용
cmcursor: move십자 화살표. 드래그 가능한 요소에 사용
ctcursor: textI-beam. 텍스트 선택/입력 가능한 영역에 사용
cwcursor: wait로딩/대기. 처리 중인 상태를 표시

시각적 비교

각 박스 위에 마우스를 올려 커서 변화를 확인하세요.

cp

cursor: pointer

클릭 가능

cd

cursor: default

기본 화살표

cm

cursor: move

드래그 가능

ct

cursor: text

텍스트 선택

cw

cursor: wait

로딩 중

클래스별 상세

cpcursor: pointer

손가락 모양 커서를 표시합니다. 클릭 가능한 요소임을 나타내며, <a> 태그가 아닌 클릭 가능한 요소(div, span, 커스텀 버튼 등)에 반드시 추가해야 합니다.

<!-- 클릭 가능한 카드 -->
<div class="cp hover-bg27272A bg18181B br8px p2rem tall200msease" @click="openDetail">
  <h3>제품명</h3>
  <p>설명 텍스트</p>
</div>

<!-- 커스텀 버튼 (div 기반) -->
<div class="cp bg6366F1 hover-bg4F46E5 cFFFFFF py12px px2rem br8px tac bn fs16px fw600 tall200msease">
  구매하기
</div>

<!-- 테이블 행 클릭 -->
<tr class="cp hover-bg18181B" @click="goToDetail">
  <td>데이터 1</td>
  <td>데이터 2</td>
</tr>

자주 쓰는 조합

cp hover-bg27272A클릭 가능한 카드/행에 호버 효과 추가
cp hover-bg27272A tall200msease부드러운 호버 전환이 있는 클릭 요소
cp bg6366F1 hover-bg4F46E5 cFFFFFF커스텀 버튼 스타일
cp usn클릭 가능하지만 텍스트 선택 방지

cdcursor: default

기본 화살표 커서를 강제합니다. 일반적으로 명시할 필요는 없지만, 부모에서 상속된 cp를 리셋하거나, 비활성 상태의 요소에 적용합니다.

<!-- 부모 cp 리셋 -->
<div class="cp hover-bg27272A p2rem br8px">
  <h3>클릭 가능한 카드</h3>
  <p class="cd c71717A">이 텍스트는 기본 커서</p>
</div>

<!-- 비활성 상태 표시 -->
<button class="cd o50 pen bg27272A cA1A1AA py12px px2rem br8px bn">
  비활성 버튼
</button>

cmcursor: move

십자 화살표 커서를 표시합니다. 드래그 앤 드롭이 가능한 요소에 사용하여 이동 가능하다는 것을 시각적으로 알려줍니다.

<!-- 드래그 가능한 아이템 -->
<div class="cm bg18181B b1pxsolid27272A br8px p16px df aic gap12px" draggable="true">
  <span class="cA1A1AA">⠿</span>
  <span class="cFAFAFA">드래그하여 순서 변경</span>
</div>

<!-- 정렬 가능한 리스트 -->
<ul class="lsn df fdc gap8px">
  <li class="cm bg18181B p12px br4px b1pxsolid27272A cFAFAFA">항목 1</li>
  <li class="cm bg18181B p12px br4px b1pxsolid27272A cFAFAFA">항목 2</li>
  <li class="cm bg18181B p12px br4px b1pxsolid27272A cFAFAFA">항목 3</li>
</ul>

ctcursor: text

I-beam(텍스트 선택) 커서를 표시합니다. 텍스트 입력이나 선택이 가능한 영역에 사용합니다. <input>과 <textarea>는 기본적으로 이 커서가 적용됩니다.

<!-- 텍스트 선택 가능 영역 -->
<div class="ct bg18181B p2rem br8px b1pxsolid27272A">
  <code class="cFAFAFA fs14px">npm install atomic-css</code>
</div>

<!-- 편집 가능한 div -->
<div class="ct bg18181B p16px br8px b1pxsolid27272A cFAFAFA" contenteditable="true">
  이 영역은 직접 편집할 수 있습니다
</div>

cwcursor: wait

로딩/대기 커서를 표시합니다. 처리 중인 상태를 나타내며, 버튼 클릭 후 로딩 중이거나 데이터를 불러오는 동안 사용합니다.

<!-- 로딩 중 버튼 -->
<button class="cw pen bg27272A cA1A1AA py12px px2rem br8px bn o70">
  처리 중...
</button>

<!-- 로딩 상태 전환 (Vue) -->
<button :class="loading ? 'cw pen o70' : 'cp'" class="bg6366F1 cFFFFFF py12px px2rem br8px bn">
  {{ loading ? '저장 중...' : '저장' }}
</button>

주의

cw는 사용자에게 "기다려야 한다"는 신호를 줍니다. 로딩이 완료되면 반드시 제거하세요. 비활성 상태를 함께 표시하려면 pen(pointer-events: none)과 조합합니다.

자주 쓰는 패턴

클릭 가능한 카드, 드래그 요소, 로딩 상태 등의 실전 패턴입니다.

<!-- ✅ 클릭 가능한 카드 (호버 + 포인터) -->
<div class="cp hover-bg27272A bg18181B br8px p2rem tall200msease b1pxsolid27272A" @click="navigate">
  <h3 class="cFAFAFA fw600 mb8px">카드 제목</h3>
  <p class="c71717A fs14px">카드 설명</p>
</div>

<!-- ✅ 드래그 리스트 -->
<div class="df fdc gap8px">
  <div class="cm bg18181B b1pxsolid27272A br4px p12px df aic gap8px" draggable="true">
    <span class="cA1A1AA">⠿</span>
    <span class="cFAFAFA fs14px">드래그 아이템</span>
  </div>
</div>

<!-- ✅ 로딩 상태 (커서 + 클릭 차단) -->
<button class="cw pen o70 bg6366F1 cFFFFFF py12px px2rem br8px bn">
  로딩 중...
</button>

<!-- ❌ 클릭 안 되는데 cp 사용 — 금지 -->
<p class="cp">이 텍스트는 클릭해도 아무 일 없음</p>

팁 & 주의사항

클릭 가능한 비-링크 요소에는 cp 필수

<a> 태그는 기본적으로 pointer 커서가 적용되지만, div, span 등에 클릭 이벤트를 바인딩할 때는 반드시 cp를 추가하세요.

비-인터랙티브 요소에 cp 사용 금지

클릭해도 아무 일이 일어나지 않는 요소에 cp를 넣으면 사용자를 혼란시킵니다. 커서는 실제 동작과 일치해야 합니다.

로딩 상태에는 cw + pen 조합

로딩 중 클릭을 방지하려면 cw pen 조합을 사용하세요. pen(pointer-events: none)이 클릭 이벤트를 차단합니다.

pointer-eventsuser-selecttouch-action