AAtomic CSS

cursor

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

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스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, 커스텀 버튼 등)에 반드시 추가해야 합니다.

<!-- Clickable card -->
<div class="cp hover-bg27272A bg18181B br8px p2rem tall200msease" @click="openDetail">
  <h3>Product name</h3>
  <p>Description Text</p>
</div>

<!-- Custom button (div based) -->
<div class="cp bg6366F1 hover-bg4F46E5 cFFFFFF py12px px2rem br8px tac bn fs16px fw600 tall200msease">
  Buy now
</div>

<!-- Click table row -->
<tr class="cp hover-bg18181B" @click="goToDetail">
  <td>Data 1</td>
  <td>Data 2</td>
</tr>

자주 쓰는 조합

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

cdcursor: default

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

<!-- Reset parent cp -->
<div class="cp hover-bg27272A p2rem br8px">
  <h3>Clickable card</h3>
  <p class="cd c71717A">This text has default cursor</p>
</div>

<!-- Disabled state indicator -->
<button class="cd o50 pen bg27272A cA1A1AA py12px px2rem br8px bn">
  Disabled button
</button>

cmcursor: move

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

<!-- Draggable item -->
<div class="cm bg18181B b1pxsolid27272A br8px p16px df aic gap12px" draggable="true">
  <span class="cA1A1AA">⠿</span>
  <span class="cFAFAFA">Drag to reorder</span>
</div>

<!-- Sortable list -->
<ul class="lsn df fdc gap8px">
  <li class="cm bg18181B p12px br4px b1pxsolid27272A cFAFAFA">Item 1</li>
  <li class="cm bg18181B p12px br4px b1pxsolid27272A cFAFAFA">Item 2</li>
  <li class="cm bg18181B p12px br4px b1pxsolid27272A cFAFAFA">Item 3</li>
</ul>

ctcursor: text

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

<!-- Text selectable area -->
<div class="ct bg18181B p2rem br8px b1pxsolid27272A">
  <code class="cFAFAFA fs14px">npm install atomic-css</code>
</div>

<!-- Editable div -->
<div class="ct bg18181B p16px br8px b1pxsolid27272A cFAFAFA" contenteditable="true">
  This area can be directly edited
</div>

cwcursor: wait

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

<!-- Loading button -->
<button class="cw pen bg27272A cA1A1AA py12px px2rem br8px bn o70">
  Processing...
</button>

<!-- Loading state toggle (Vue) -->
<button :class="loading ? 'cw pen o70' : 'cp'" class="bg6366F1 cFFFFFF py12px px2rem br8px bn">
  {{ loading ? 'Saving...' : 'Save' }}
</button>

주의

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

자주 쓰는 패턴

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

<!-- ✅ Clickable card (hover + pointer) -->
<div class="cp hover-bg27272A bg18181B br8px p2rem tall200msease b1pxsolid27272A" @click="navigate">
  <h3 class="cFAFAFA fw600 mb8px">Card Title</h3>
  <p class="c71717A fs14px">Card description</p>
</div>

<!-- ✅ Drag list -->
<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">Drag item</span>
  </div>
</div>

<!-- ✅ Loading state (cursor + click blocked) -->
<button class="cw pen o70 bg6366F1 cFFFFFF py12px px2rem br8px bn">
  Loading...
</button>

<!-- ❌ Using cp when not clickable — prohibited -->
<p class="cp">Nothing happens when you click this text</p>

팁 & 주의사항

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

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

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

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

로딩 상태에는 cw + pen 조합

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

pointer-eventsuser-selecttouch-action