CSS 변수 생성기
시각적 편집기로 CSS 커스텀 속성(변수)을 만드세요. 컬러 피커와 프리셋으로 :root 블록을 생성합니다.
이 도구 소개
CSS 커스텀 속성(CSS 변수)은 스타일시트 전체에서 재사용할 수 있는 값입니다. 색상이나 크기 같은 값을 CSS에 직접 입력하는 대신 :root 블록에 변수로 정의하고 var(--name) 구문으로 참조할 수 있습니다. 이를 통해 전체 프로젝트에서 일관된 디자인 토큰을 유지할 수 있으며, 전역 테마 변경도 훨씬 쉬워집니다. 변수 값 하나를 수정하면 이를 사용하는 모든 곳에 즉시 반영됩니다.
CSS 변수 생성기를 사용하면 코드를 수동으로 작성하지 않고도 시각적으로 커스텀 속성을 만들고 정리할 수 있습니다. 변수를 하나씩 추가하고, 다크 모드, 라이트 모드, 브랜드 색상 등의 프리셋 템플릿 중에서 선택한 후 각 변수의 이름, 타입(색상, 크기, 숫자, 문자열), 값을 입력합니다. 도구가 자동으로 유효한 :root CSS 블록 형태로 출력을 생성하며, 각 변수를 스타일에서 사용하는 방법을 보여주는 인라인 주석도 포함됩니다. 생성된 CSS는 클립보드에 복사하거나 파일로 다운로드할 수 있습니다.
이 도구는 디자인 시스템 구축, 다중 브랜드 테마 관리, 또는 일관된 간격과 타이포그래피 스케일 유지에 특히 유용합니다. 소규모 웹사이트든 대규모 컴포넌트 라이브러리든 CSS 변수를 한 곳에서 중앙화하면 코드 중복을 줄이고 디자인 업데이트를 더 빠르고 안정적으로 할 수 있습니다.
자주 묻는 질문
코드 구현
# Generate CSS :root block from a dictionary of variables
def generate_css_variables(variables: dict) -> str:
lines = [":root {"]
for name, value in variables.items():
var_name = name if name.startswith("--") else f"--{name}"
lines.append(f" {var_name}: {value};")
lines.append("}")
return "\n".join(lines)
# Example: dark mode theme
dark_theme = {
"--bg-primary": "#0f0f0f",
"--bg-secondary": "#1a1a1a",
"--text-primary": "#ffffff",
"--text-secondary": "#a0a0a0",
"--accent": "#6366f1",
"--border-radius": "8px",
"--font-size-base": "16px",
}
print(generate_css_variables(dark_theme))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.