프론트/리액트
텍스트 커서-깜빡이는 막대기 " | " 없애기
뽀짝코딩
2025. 6. 26. 22:12
728x90
깜빡거리는 막대기를 텍스트 커서 또는 캐럿 (Caret)이라 한다.
숨기는 방법
테일윈드
<input className="caret-transparent" />
CSS
.wrap: {
caret-color: transparent;
}
여기서 추가로 🧩
user-select: none;과 caret-color: transparent; 차이
🎯 user-select: none;
- 역할: 사용자가 텍스트를 드래그해서 선택하지 못하게 막음.
- 적용 대상: 텍스트 블록, 버튼, 링크 등
테일윈드
<p className="select-none">이 텍스트는 복사 안 돼요</p>
CSS
.wrap: {
user-select: none;
}
✏️ caret-color: transparent; 또는 Tailwind에서 caret-transparent
- 역할: 입력 필드에서 텍스트 커서(깜빡이는 막대기)를 숨김
- 적용 대상: <input>, <textarea> 등
테일윈드
<input className="caret-transparent" />
CSS
.div-wrap: {
caret-color: transparent;
}
🔍 비교 요약
속성 역할 대상 요소
user-select: none; | 텍스트 선택 방지 | 모든 텍스트 요소 |
caret-color: transparent; | 입력 커서 숨기기 | <input>, <textarea> |
반응형