그래프 스타일링

이 가이드는 그래프 요소에 커스텀 CSS를 적용하는 방법을 설명합니다.

기본 원칙

그래프 요소도 키/통계 요소처럼 속성 패널에서 클래스를 지정할 수 있습니다.

그래프를 선택합니다.
속성 패널에서 클래스 이름을 입력합니다.
커스텀 CSS에서 해당 클래스 선택자를 사용합니다.


.kps-graph {
  backdrop-filter: blur(6px);
}

인라인 스타일 우선과 CSS 우선

그래프의 인라인 스타일 우선이 켜져 있으면 속성 패널 값이 우선 적용됩니다. 그래프는 기본적으로 인라인 스타일 우선이 꺼져 있으므로, CSS 변수 기반 제어를 바로 사용할 수 있습니다.

권장: 특정 그래프에만 스타일을 적용하려면 전역 선택자 대신 클래스 선택자를 사용하세요.

그래프 CSS 변수

그래프에서 사용할 수 있는 변수는 아래와 같습니다.

변수	설명	타입	예시
`--graph-bg`	그래프 배경	`<color>`	`rgba(17, 17, 20, 0.85)`
`--graph-border`	그래프 테두리와 저장된 보더 링 해제	`<border>`	`1px solid #7dd3fc`, `none`
`--graph-border-image`	저장된 보더 링의 이미지 교체	`<image>`	`linear-gradient(90deg, #f0f, #0ff)`
`--graph-padding`	그래프 내부 여백	`<length>`	`0px`, `3px`
`--graph-radius`	그래프 라운딩	`<length>`	`10px`
`--graph-color`	라인/바 색상	`<color>`	`#86efac`

사용 예시


.kps-graph {
  --graph-bg: rgba(7, 10, 18, 0.72);
  --graph-border: 1px solid rgba(125, 211, 252, 0.55);
  --graph-radius: 12px;
  --graph-color: #7dd3fc;
}

스타일 예제

테두리 제거 + 유리 패널 느낌


.kps-graph {
  --graph-bg: rgba(10, 14, 24, 0.42);
  --graph-border: none;
  --graph-radius: 14px;
  --graph-color: #93c5fd;
  backdrop-filter: blur(8px);
}

레트로 터미널 느낌


.retro-graph {
  --graph-bg: rgba(6, 18, 6, 0.78);
  --graph-border: 1px solid #22c55e;
  --graph-radius: 6px;
  --graph-color: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.35) inset;
}

참고

그래프의 위치 이동 효과는 키와 동일하게 --key-offset-x, --key-offset-y를 사용합니다.
--graph-border: none;은 단색 테두리뿐 아니라 속성 패널에 저장된 그라데이션 보더 링과 이미지 인셋도 함께 제거합니다.