Skip to Content
커스텀 CSS카운터 스타일링

카운터 스타일링

이 가이드에서는 CSS를 사용하여 키 카운터의 모양을 커스터마이징하는 방법을 설명합니다.

기본 구조

카운터는 .counter 클래스와 data-counter-state 속성을 통해 상태를 나타냅니다:

  • data-counter-state="inactive": 키를 누르지 않은 상태
  • data-counter-state="active": 키를 누르고 있는 상태

전역 카운터 스타일

모든 카운터에 공통으로 적용되는 스타일을 설정합니다:

.counter {
  /* 폰트 스타일 */
  font-size: 24px;
  font-weight: 700;
 
  /* 폰트 패밀리 */
  font-family: 'Roboto Mono', monospace;
}

CSS 변수

카운터는 다음 CSS 변수를 지원합니다:

변수설명기본값
--counter-color텍스트 색상과 저장된 fill 해제#FFFFFF
--counter-fill-image텍스트 fill 이미지none
--counter-fill-clipfill 클립 영역border-box
--counter-fill-positionfill 배경 위치0% 0%
--counter-fill-sizefill 배경 크기auto
--counter-fill-repeatfill 반복 방식repeat
--counter-text-fill-colorWebKit 텍스트 채움색currentcolor

키/통계의 인라인 스타일 우선을 끄면 카운터 글꼴도 일반 CSS가 우선합니다. --counter-color를 지정하면 속성 패널에 저장된 fill 그라데이션도 자동으로 사라집니다. 앱에서 만든 fill 그라데이션은 글자 잉크 범위에 맞춰 깔리며, --counter-fill-position과 --counter-fill-size로 직접 제어할 수 있습니다.

카운터 외곽선 지원이 종료되었습니다. --counter-stroke-* 변수와 속성 패널의 외곽선 설정은 제거되었습니다. 저장된 외곽선 설정은 로드 시 정리되며, --counter-stroke-*를 설정하는 커스텀 CSS는 더 이상 효과가 없습니다. 대신 .counter에 text-shadow나 -webkit-text-stroke를 사용하세요.

비활성 상태 스타일

키를 누르지 않았을 때의 카운터 스타일입니다:

.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='inactive'] {
  --counter-color: #1a4a5c;
}
 
/* .blue 클래스를 가진 키의 카운터 - 활성 상태 */
.blue .counter[data-counter-state='active'] {
  --counter-color: #2ebef3;
  text-shadow: 0px 0px 3px #2ebef3;
}

클래스 조합을 사용하면 키와 카운터의 색상을 일치시켜 통일감 있는 디자인을 만들 수 있습니다.

스타일 예제

네온 글로우 스타일

.counter {
  font-size: 20px;
  font-weight: 700;
}
 
.counter[data-counter-state='inactive'] {
  --counter-color: #333;
}
 
.counter[data-counter-state='active'] {
  --counter-color: #00ff88;
  text-shadow: 0px 0px 2px #00ff88, 0px 0px 4px #00ff88, 0px 0px 8px #00ff88;
}

미니멀 스타일

.counter {
  font-size: 14px;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
 
.counter[data-counter-state='inactive'] {
  --counter-color: #999;
}
 
.counter[data-counter-state='active'] {
  --counter-color: #333;
}

레인보우 그라데이션 스타일

.counter[data-counter-state='active'] {
  background: linear-gradient(
    45deg,
    #ff2b80,
    #ff8c00,
    #ffee00,
    #00ff88,
    #00bfff,
    #8b5cf6
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 2s ease infinite;
}
 
@keyframes rainbow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

키와 카운터 색상 맞추기

키와 카운터 색상을 일관되게 유지하는 예제입니다:

/* 기본 키 - 핑크 테마 */
[data-state='active'] {
  --key-border: 3px solid #ff2b80;
  --key-text-color: #ff2b80;
  text-shadow: 0px 0px 3px #ff2b80;
}
 
.counter[data-counter-state='active'] {
  --counter-color: #ff2b80;
  text-shadow: 0px 0px 3px #ff2b80;
}
 
/* 파란색 키 - 블루 테마 */
.blue[data-state='active'] {
  --key-border: 3px solid #2ebef3;
  --key-text-color: #2ebef3;
  text-shadow: 0px 0px 3px #2ebef3;
}
 
.blue .counter[data-counter-state='active'] {
  --counter-color: #2ebef3;
  text-shadow: 0px 0px 3px #2ebef3;
}

고급 팁

숫자 폰트 최적화

카운터 숫자가 변경될 때 레이아웃이 흔들리지 않도록 고정폭 숫자를 사용합니다:

.counter {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

카운터 크기 제한

큰 숫자에서도 레이아웃이 깨지지 않도록 최소/최대 너비를 설정합니다:

.counter {
  min-width: 30px;
  text-align: center;
}
키 스타일링그래프 스타일링