커스텀 CSS 가이드

DM Note는 커스텀 CSS를 통해 키와 카운터의 스타일을 자유롭게 변경할 수 있습니다. 네온 사인, 미니멀 디자인, 게임 테마 등 다양한 스타일을 구현할 수 있습니다.

적용 범위

오버레이 창과 OBS 브라우저 소스에는 CSS 파일이 그대로 적용됩니다. 메인 편집 화면에서는 그리드 미리보기의 키·카운터·그래프·노브·플러그인 요소와 카운터 애니메이션 편집기의 미리보기에만 적용되고, 설정 패널이나 툴바 같은 앱 UI는 CSS 선택자의 영향을 받지 않습니다. 이를 위해 메인 화면에서는 모든 선택자가 미리보기 영역 안으로 한정되며, body나 :root에 쓴 규칙은 미리보기 영역 자체에 적용됩니다. 한정할 때 붙는 접두사는 우선순위(특이도)를 바꾸지 않으므로 일반적인 규칙은 캔버스와 오버레이에서 같은 결과를 냅니다. 메인 화면에만 적용되는 제한이 몇 가지 있습니다.

• @keyframes 이름에는 자동으로 접두사가 붙어 앱 내부 애니메이션과 겹치지 않고, animation/animation-name 속성에 직접 쓴 이름도 함께 바뀝니다. 이름은 영문, 숫자, 하이픈으로 된 일반 식별자만 지원하며, 따옴표가 필요한 이름이나 linear 같은 예약어와 같은 이름의 정의는 메인 화면에서 제외됩니다. CSS 변수(var())를 거쳐 전달한 애니메이션 이름도 바뀌지 않아 메인 화면에서는 동작하지 않습니다.
• @import로 가져온 스타일시트는 앱이 직접 받아 온 뒤 같은 방식으로 미리보기 영역에 한정해 적용합니다. 받아 오지 못한 시트(오프라인, 오류 응답, 1 MiB 초과, 4단계 이상 중첩)는 메인 화면에서만 건너뜁니다. localhost와 사설 네트워크는 별도 확인 없이 사용할 수 있고, 명시적인 클라우드 메타데이터 주소만 거부합니다. 가져온 시트와 부모 시트가 같은 @namespace 접두사를 서로 다른 주소로 선언하면 메인 미리보기에서는 부모 시트의 선언이 우선합니다.
• @font-face의 글꼴 이름에는 메인 화면에서 전용 이름을 붙이고 CSS 규칙, @font-feature-values, 정적 CSS 변수의 참조도 함께 바꿉니다. 따라서 그리드 미리보기의 웹폰트는 유지하면서 같은 이름을 쓰는 앱 UI에는 영향을 주지 않습니다. JavaScript나 요소의 인라인 스타일로 원래 이름을 나중에 넣은 경우에는 메인 화면 전용 이름으로 바꿀 수 없습니다. @counter-style, @font-palette-values, 관련 글꼴이 없는 @font-feature-values는 호환성을 위해 원문 그대로 통과합니다. @property는 앱이 등록한 이름과 충돌할 수 있어 메인 화면에서는 무시됩니다.
• body + .x처럼 body의 형제를 가리키는 선택자는 미리보기 영역 안으로 옮길 수 없어 메인 화면에서는 무시됩니다. body { & ~ .x { } }처럼 중첩으로 쓴 형제 선택자도 같습니다.

이 제한은 모두 오버레이와 OBS에는 해당하지 않으며 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-counter-state="inactive"]: 키를 누르지 않은 상태
• [data-counter-state="active"]: 키를 누르고 있는 상태

CSS 파일 적용하기

1. 원하는 스타일로 CSS 파일을 작성합니다.
2. Settings 탭으로 이동해 CSS 관리 버튼을 클릭합니다.
3. 활성화 토글을 켜고 CSS 파일 불러오기를 클릭합니다.
4. 작성한 CSS 파일을 선택합니다 (.css, 최대 1MiB). 이전에 불러온 파일은 패널 목록에 남아 한 번의 클릭으로 다시 적용할 수 있습니다.

탭별 CSS

키 탭마다 전역 CSS를 덮어쓰는 전용 파일을 둘 수 있습니다. 그리드를 우클릭하고 탭 CSS 메뉴를 선택하면 팝오버가 열립니다:

• 불러오기: 현재 탭에만 적용할 CSS 파일을 선택합니다.
• 히스토리 목록: 커스텀 CSS 패널에서 불러왔던 파일이 파일 액션 아래에 표시되며, 항목의 적용 버튼으로 이 탭에 바로 적용합니다.
• 내보내기: 현재 탭에 등록된 CSS를 .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;
}

다음 단계