CSS에는 폼 입력 필드를 스타일링할 때 활용할 수 있는 속성이 매우 다양하지만, 그중에서도 caret-color, pointer-events, tab-size는 상대적으로 덜 알려진 속성입니다. caret-color는 텍스트를 입력할 때 깜빡이는 캐럿(커서)의 색상을 지정하고, pointer-events는 특정 요소가 마우스 이벤트의 대상이 되지 않도록 하여 사용자가 해당 요소에 접근하지 못하게 만들 수 있습니다. 마지막으로 tab-size는 탭 문자가 차지하는 공백의 너비를 설정합니다.
속성별로 자세히 살펴보기
1. caret-color
입력 필드나 편집 가능한 영역에서 텍스트 삽입 지점을 나타내는 캐럿의 색상을 변경합니다. 기본적으로 캐럿은 글자색을 따라가지만, 이 속성을 사용하면 브랜드 컬러에 맞춰 입력 UI를 통일감 있게 디자인할 수 있습니다.
2. pointer-events
pointer-events: none;으로 설정하면 해당 요소는 클릭, 호버 등 모든 포인터 이벤트의 대상에서 제외됩니다. 오버레이 아래의 콘텐츠를 클릭 가능하게 만들거나, 링크를 일시적으로 비활성화해야 할 때 자주 활용됩니다.
3. tab-size
<pre> 태그처럼 공백이 그대로 유지되는 요소에서 탭 문자 하나가 차지할 공백 개수를 지정합니다. 코드 블록의 들여쓰기 간격을 조절할 때 유용하며, Firefox 호환을 위해 -moz-tab-size 접두사를 함께 사용하는 것이 좋습니다.
예제 1: pointer-events와 tab-size
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex-direction: column;
background-color: mistyrose;
}
p {
white-space: pre;
}
p:last-of-type {
tab-size: 32;
-moz-tab-size: 32;
pointer-events: none;
}
</style>
</head>
<body>
<p> Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.</p>
<p> Ut sed felis lobortis, <a href=#>fermentum magna vitae</a>, imperdiet lectus.</p>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
마지막 문단에는 pointer-events: none;이 적용되어 문장 안의 링크를 클릭할 수 없으며, 탭 간격이 32로 확대되어 들여쓰기가 넓게 표시됩니다.
예제 2: caret-color와 focus-within
<!DOCTYPE html>
<html>
<head>
<style>
form {
padding: 2%;
margin: 3%;
background-color: cadetblue;
text-align: center;
}
form:focus-within {
box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
input {
caret-color: navy;
font-size: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<form>
<select>
<option>.</option>
<option>..</option>
<option>...</option>
</select>
<input type="text" value="glee" />
</form>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
입력 필드에 포커스가 가면 :focus-within 선택자 덕분에 폼 전체에 그림자가 나타나고, 캐럿은 caret-color로 지정한 남색(navy)으로 표시됩니다.
이처럼 잘 알려지지 않은 CSS 속성들을 적절히 활용하면 별도의 JavaScript 없이도 폼과 텍스트 요소의 사용자 경험을 한층 세련되게 개선할 수 있습니다.