CSS 스크롤바 생성기 - 커스텀 스크롤바 스타일 온라인
시각적 컨트롤과 실시간 미리보기로 CSS 스크롤바 스타일을 디자인하세요. WebKit 및 표준 스크롤바 CSS 코드를 즉시 생성 — 100% 클라이언트 사이드, 서버로 데이터를 전송하지 않습니다.
자주 묻는 질문
CSS 스크롤바 생성기란 무엇인가요?
CSS 스크롤바 생성기는 CSS를 사용하여 웹사이트의 커스텀 스크롤바 스타일을 만드는 데 도움을 주는 시각적 도구입니다. 복잡한 CSS 의사 요소 규칙을 직접 작성하는 대신, 시각적 컨트롤로 색상, 크기, 테두리 속성을 조정하고 즉시 프로덕션용 CSS 코드를 얻을 수 있습니다. 표준 scrollbar-color/scrollbar-width 속성과 WebKit 전용 의사 요소(::-webkit-scrollbar)를 모두 지원합니다.
이 CSS 스크롤바 생성기는 어떻게 사용하나요?
1. 출력 모드를 선택합니다: WebKit 전용, 표준 전용, 또는 둘 다(권장). 2. 슬라이더로 스크롤바 너비를 설정합니다. 3. 트랙(배경)과 썸(핸들)의 색상을 선택합니다. 4. 선택적으로 테두리 반경, 테두리, 호버/활성 상태 색상을 조정합니다. 5. 미리보기 패널에서 실시간으로 변경 사항을 확인합니다. 6. 생성된 CSS 코드를 복사하여 스타일시트에 붙여넣습니다.
WebKit과 표준 스크롤바 CSS의 차이점은 무엇인가요?
표준 속성(scrollbar-color, scrollbar-width)은 공식 CSS 사양의 일부이며 모든 최신 브라우저(Chrome 121+, Firefox 64+, Safari 26.2+, Edge 121+)에서 작동합니다. 간단한 색상과 너비 제어를 제공합니다. WebKit 의사 요소(::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb)는 비표준이지만 테두리 반경, 테두리, 호버 상태, 개별 부분 스타일링에 대한 더 세밀한 제어를 제공합니다. 중요: 두 가지를 모두 설정하면 표준 속성이 WebKit 스타일링을 재정의합니다.
표준 스크롤바 CSS 속성은 모든 브라우저에서 지원되나요?
네. 2025년 12월 기준으로 scrollbar-color와 scrollbar-width는 Baseline Newly Available 상태를 달성하여 Chrome, Firefox, Safari, Edge에서 모두 지원됩니다. 가장 세밀한 커스터마이징(테두리 반경, 테두리, 호버 상태)을 위해서는 WebKit 의사 요소를 향상 기능으로 포함하는 것이 좋습니다.
이 도구를 사용할 때 데이터가 안전한가요?
네. 이 도구는 전적으로 브라우저에서 실행됩니다. CSS 코드, 색상 값 또는 기타 데이터가 서버로 전송되지 않습니다. 모든 처리가 클라이언트 측에서 이루어져 완전한 개인정보 보호와 보안을 보장합니다.
요소마다 다른 스크롤바 스타일을 적용할 수 있나요?
네. 생성된 CSS는 특정 요소에 범위를 지정할 수 있는 의사 요소를 사용합니다. 전역적으로 스타일을 적용하는 대신, 클래스 이름을 접두사로 사용(예: .my-container::-webkit-scrollbar)하여 해당 특정 요소 내의 스크롤바만 스타일링할 수 있습니다.
스크롤바를 접근성 있게 만들려면 어떻게 해야 하나요?
스크롤바 스타일링 시 썸이 트랙 대비 최소 3:1 색상 대비율을 갖도록 해야 합니다(WCAG 2.0 가이드라인). 터치 입력의 사용성을 저하시키므로 스크롤바를 너무 얇게(8px 미만) 만들지 마세요. 시각적 스크롤바에 의존하는 사용자의 사용성을 해치므로 대체 스크롤 표시기를 제공하지 않는 한 스크롤바를 숨기지(scrollbar-width: none) 마세요.
코드 예제
// Generate CSS scrollbar styles from configuration
function generateScrollbarCSS(config) {
const {
width = 12,
trackColor = '#f1f1f1',
thumbColor = '#888888',
thumbHoverColor = '#555555',
thumbBorderRadius = 6,
trackBorderRadius = 0
} = config;
// Standard CSS (all modern browsers)
const standardCSS = [
'/* Standard scrollbar properties (Chrome 121+, Firefox 64+, Safari 26.2+) */',
'.custom-scrollbar {',
` scrollbar-width: ${width <= 6 ? 'thin' : 'auto'};`,
` scrollbar-color: ${thumbColor} ${trackColor};`,
'}'
].join('\n');
// WebKit CSS (Chrome, Safari, Edge - enhanced styling)
const webkitCSS = [
'/* WebKit scrollbar styling (Chrome, Safari, Edge) */',
'.custom-scrollbar::-webkit-scrollbar {',
` width: ${width}px;`,
` height: ${width}px;`,
'}',
'',
'.custom-scrollbar::-webkit-scrollbar-track {',
` background: ${trackColor};`,
` border-radius: ${trackBorderRadius}px;`,
'}',
'',
'.custom-scrollbar::-webkit-scrollbar-thumb {',
` background: ${thumbColor};`,
` border-radius: ${thumbBorderRadius}px;`,
'}',
'',
'.custom-scrollbar::-webkit-scrollbar-thumb:hover {',
` background: ${thumbHoverColor};`,
'}'
].join('\n');
return { standardCSS, webkitCSS, combined: `${standardCSS}\n\n${webkitCSS}` };
}
// Usage
const css = generateScrollbarCSS({
width: 10,
trackColor: '#f0f0f0',
thumbColor: '#6366f1',
thumbHoverColor: '#4f46e5',
thumbBorderRadius: 5,
trackBorderRadius: 5
});
console.log(css.combined);