커스텀 CSS 가이드
DM Note는 커스텀 CSS를 통해 키와 카운터의 스타일을 자유롭게 변경할 수 있습니다. 네온 사인, 미니멀 디자인, 게임 테마 등 다양한 스타일을 구현할 수 있습니다.
커스텀 CSS가 활성화되어 있고 파일 경로를 사용 중이라면, CSS 파일을 수정/저장할 때 변경 사항이 자동으로 다시 적용됩니다.
기본 개념
CSS 변수 시스템
DM Note는 CSS 변수(Custom Properties)를 사용하여 스타일을 제어합니다. 이를 통해 복잡한 선택자 없이도 키와 카운터의 핵심 스타일을 쉽게 변경할 수 있습니다.
/* 키 스타일 변수 */
[data-state="active"] {
--key-radius: 8px; /* 모서리 둥글기 */
--key-bg: #ff2b80; /* 배경색 */
--key-border: 2px solid #fff; /* 테두리 */
--key-text-color: #fff; /* 텍스트 색상 */
}상태 기반 스타일링
키와 카운터는 두 가지 상태를 가집니다:
| 상태 | 선택자 | 설명 |
|---|---|---|
| 비활성 | [data-state="inactive"] | 키를 누르지 않은 상태 |
| 활성 | [data-state="active"] | 키를 누르고 있는 상태 |
카운터의 경우:
[data-counter-state="inactive"]: 키를 누르지 않은 상태[data-counter-state="active"]: 키를 누르고 있는 상태
CSS 파일 적용하기
- 원하는 스타일로 CSS 파일을 작성합니다.
- Settings 탭으로 이동합니다.
- 커스텀 CSS 섹션에서 CSS 파일 선택을 클릭합니다.
- 작성한 CSS 파일을 선택합니다.
빠른 시작 예제
다음은 네온 사인 스타일의 간단한 예제입니다:
/* 전역 키 스타일 */
[data-state="inactive"],
[data-state="active"] {
--key-radius: 6px;
font-size: 24px;
font-weight: 700;
}
/* 비활성 상태 */
[data-state="inactive"] {
--key-bg: transparent;
--key-border: 3px solid #474244;
--key-text-color: #474244;
}
/* 활성 상태 - 네온 효과 */
[data-state="active"] {
--key-bg: transparent;
--key-border: 3px solid #ff2b80;
--key-text-color: #ff2b80;
text-shadow: 0px 0px 3px #ff2b80;
box-shadow: 0px 0px 4px #b3245d, 0px 0px 4px #b3245d;
}