키 스타일링

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

기본 구조

키는 data-state 속성을 통해 현재 상태를 나타냅니다:

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

전역 키 스타일

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


[data-state="inactive"],
[data-state="active"] {
  /* 모서리 둥글기 */
  --key-radius: 8px;
 
  /* 폰트 스타일 */
  font-size: 24px;
  font-weight: 700;
 
  /* 트랜지션 효과 */
  transition: 0.1s ease-in-out;
}

비활성 상태 스타일

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


[data-state="inactive"] {
  /* 배경색 */
  --key-bg: #2a2a2a;
 
  /* 테두리 */
  --key-border: 2px solid #444;
 
  /* 텍스트 색상 */
  --key-text-color: #888;
 
  /* 그림자 효과 */
  box-shadow: 0px 4px 0px #1a1a1a;
}

활성 상태 스타일

키를 누르고 있을 때의 스타일입니다:


[data-state="active"] {
  /* 배경색 */
  --key-bg: #ff2b80;
 
  /* 테두리 */
  --key-border: 2px solid #ff2b80;
 
  /* 텍스트 색상 */
  --key-text-color: #fff;
 
  /* 그림자 효과 */
  box-shadow: 0px 0px 8px #ff2b80;
 
  /* 텍스트 그림자 */
  text-shadow: 0px 0px 4px #ff2b80;
}

키 오프셋 (눌림 효과)

키를 눌렀을 때 위치가 이동하는 눌림 효과를 구현할 수 있습니다:


[data-state="active"] {
  /* X축 오프셋 */
  --key-offset-x: 0px;
 
  /* Y축 오프셋 (아래로 밀림) */
  --key-offset-y: 4px;
 
  /* 그림자 제거로 눌림 효과 강조 */
  box-shadow: 0px 0px 0px #1a1a1a;
}

--key-offset-x와 --key-offset-y는 활성 상태에서 키의 위치를 이동시킵니다. 비활성 상태에서 box-shadow로 입체감을 주고, 활성 상태에서 오프셋과 함께 그림자를 제거하면 자연스러운 눌림 효과를 구현할 수 있습니다.

특정 키 스타일

클래스명을 사용하여 특정 키에만 다른 스타일을 적용할 수 있습니다.

클래스 할당 방법

메인 창에서 스타일을 변경할 키를 우클릭합니다.
클래스 설정을 선택합니다.
클래스명을 입력합니다 (예: blue, special).

클래스별 스타일 적용


/* .blue 클래스를 가진 키의 활성 상태 */
.blue[data-state="active"] {
  --key-bg: transparent;
  --key-border: 3px solid #2ebef3;
  --key-text-color: #2ebef3;
  text-shadow: 0px 0px 3px #2ebef3;
  box-shadow: 0px 0px 4px #2b8eff;
}
 
/* .special 클래스를 가진 키의 활성 상태 */
.special[data-state="active"] {
  --key-bg: transparent;
  background: linear-gradient(45deg, #ff2b80, #2ebef3);
  --key-border: none;
  --key-text-color: #fff;
}

클래스명 입력 시 선택자 기호(.)를 제외하고 이름만 입력하세요.

✅ 올바름: blue
❌ 잘못됨: .blue

스타일 예제

네온 사인 스타일


[data-state="inactive"] {
  --key-bg: transparent;
  --key-border: 3px solid #333;
  --key-text-color: #333;
}
 
[data-state="active"] {
  --key-bg: transparent;
  --key-border: 3px solid #ff2b80;
  --key-text-color: #ff2b80;
  text-shadow: 0px 0px 2px #ff2b80, 0px 0px 4px #ff2b80, 0px 0px 8px #ff2b80;
  box-shadow: 0px 0px 4px #ff2b80, inset 0px 0px 4px rgba(255, 43, 128, 0.3);
}

미니멀 플랫 스타일


[data-state="inactive"],
[data-state="active"] {
  --key-radius: 4px;
  transition: 0.05s ease-out;
}
 
[data-state="inactive"] {
  --key-bg: #f0f0f0;
  --key-border: none;
  --key-text-color: #333;
}
 
[data-state="active"] {
  --key-bg: #333;
  --key-border: none;
  --key-text-color: #fff;
}

파스텔 3D 스타일


[data-state="inactive"] {
  --key-radius: 20px;
  --key-bg: #ffd4e5;
  --key-border: 2px solid #e8b4c8;
  --key-text-color: #8b5a6b;
  box-shadow: 0px 4px 0px #d9a0b8;
}
 
[data-state="active"] {
  --key-bg: #ffc4dd;
  --key-border: 2px solid #e8b4c8;
  --key-text-color: #8b5a6b;
  --key-offset-y: 4px;
  box-shadow: 0px 0px 0px #d9a0b8;
}

고급 팁

그라데이션 배경


[data-state="active"] {
  --key-bg: transparent;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

애니메이션 효과


@keyframes pulse {
  0%,
  100% {
    box-shadow: 0px 0px 4px #ff2b80;
  }
  50% {
    box-shadow: 0px 0px 12px #ff2b80;
  }
}
 
[data-state="active"] {
  animation: pulse 0.5s ease-in-out infinite;
}

!important 사용

일부 속성이 적용되지 않는 경우 !important를 사용해 보세요:


[data-state="active"] {
  --key-bg: #ff2b80 !important;
}