키 카운터

키 카운터는 각 키의 입력 횟수(누적 카운트)를 표시하는 기능입니다.

키 카운터 활성화

1. Settings 탭으로 이동합니다.
2. 키 카운터 섹션을 찾습니다.
3. 키 카운터 활성화 토글을 켭니다.

설정 옵션

위치

카운터가 표시되는 위치를 선택합니다:

• 상단: 키 위쪽에 표시
• 하단: 키 아래쪽에 표시
• 좌측: 키 왼쪽에 표시
• 우측: 키 오른쪽에 표시

오프셋

카운터의 위치를 미세 조정합니다.

• X 오프셋: 가로 방향 이동
• Y 오프셋: 세로 방향 이동

색상

카운터 텍스트의 색상을 설정합니다.

• 비활성 색상: 키를 누르지 않았을 때의 색상
• 활성 색상: 키를 누르고 있을 때의 색상

커스텀 CSS로 스타일링

키 카운터는 커스텀 CSS로 더 세밀하게 스타일링할 수 있습니다.

카운터 CSS 변수

/* 카운터 스타일 변수 */
.counter {
  --counter-color: #ffffff; /* 텍스트 색상 */
  --counter-stroke-color: transparent; /* 텍스트 외곽선 색상 */
  --counter-stroke-width: 0px; /* 텍스트 외곽선 두께 */
}

상태별 스타일링

/* 비활성 상태 */
.counter[data-counter-state="inactive"] {
  --counter-color: #474244;
}
 
/* 활성 상태 */
.counter[data-counter-state="active"] {
  --counter-color: #ff2b80;
  text-shadow: 0px 0px 3px #ff2b80;
}

특정 키의 카운터 스타일링

클래스 선택자를 조합하여 특정 키의 카운터만 다르게 스타일링할 수 있습니다:

/* .blue 클래스를 가진 키의 카운터 */
.blue .counter[data-counter-state="active"] {
  --counter-color: #2ebef3;
  text-shadow: 0px 0px 3px #2ebef3;
}

카운터 값 저장/초기화

카운터 값은 앱 설정과 함께 저장되어, 프로그램을 재시작해도 유지됩니다. 카운터 값을 초기화하려면 프로그램 하단의 초기화 버튼을 클릭하거나 (해당 탭 카운터 전부 초기화) 각 키에 우클릭 후 “카운터 초기화” 버튼을 선택하세요.