CSS to JS 스타일 객체 변환기
CSS 선언 블록을 React/JS 인라인 스타일 객체로 브라우저에서 변환합니다.
사용법
- 입력 상자에 CSS 선언을 붙여넣습니다.
- 각 속성은 camelCase로, 각 값은 문자열로 따옴표 처리됩니다.
- 출력 상자에서 생성된 스타일 객체를 복사합니다.
자세한 설명
펼치기접기
CSS 선언을 붙여넣으면 키가 카멜케이스로 바뀐 자바스크립트 스타일 객체가 나옵니다. React의 style 프롭이나 다른 JS 스타일링에 바로 쓸 수 있습니다. 사람들이 자주 틀리는 두 가지 경우를 알아서 처리합니다. 벤더 프리픽스는 React 자체 규칙을 따르는데 이 규칙은 대칭이 아닙니다. -webkit-transform은 대문자 W를 쓴 WebkitTransform이 되지만, -ms-transform은 소문자 m을 쓴 msTransform이 됩니다. 그리고 커스텀 프로퍼티는 이름을 그대로 유지합니다. --brand-color는 --brand-color로 남고, 유효한 자바스크립트 식별자가 아니므로 따옴표가 붙습니다. 값은 맨 숫자가 아니라 문자열로 출력되므로, 단위 없는 숫자에 React가 암묵적으로 px를 붙이는 동작에 기대지 않아도 됩니다. 모든 처리는 브라우저에서 이루어지며 아무것도 업로드되지 않습니다.
자주 묻는 질문
속성 이름은 어떻게 변환되나요?
하이픈 속성은 camelCase가 됩니다(font-size → fontSize). 벤더 접두사는 React 규칙을 따릅니다: -webkit-는 Webkit, -ms-는 소문자 ms로 유지됩니다.
CSS 사용자 정의 속성은 어떻게 되나요?
--main-color 같은 변수는 이름을 유지하고 따옴표 키가 됩니다. React가 이를 그대로 적용하기 때문입니다.
값이 숫자로 변환되나요?
아니요. 모든 값은 따옴표 문자열로 출력되며 항상 유효합니다. 단위 없는 숫자 값을 원하면 따옴표를 직접 제거하세요.
제 CSS가 어딘가로 전송되나요?
아니요. 변환은 전적으로 브라우저에서 이루어지며 아무것도 업로드되지 않습니다.
왜 WebkitTransform은 대문자인데 msTransform은 아닌가요?
그 비대칭은 이 도구가 아니라 React의 것입니다. React는 마이크로소프트를 제외한 모든 벤더 프리픽스를 대문자로 시작하게 하고, ms만 소문자로 둡니다. 버그처럼 보이지만 문서화된 동작이라, 대문자 M으로 직접 쓴 MsTransform은 아무 일도 하지 않고 조용히 무시됩니다.
스타일 객체로 CSS 변수를 설정할 수 있나요?
React는 16 버전부터 style 프롭에서 커스텀 프로퍼티를 지원하므로, 이 도구가 내놓는 따옴표 붙은 키가 그대로 동작합니다. React 밖에서는 이런 객체를 element.style에 Object.assign으로 넘겨도 동작하지 않습니다. 대시 두 개로 시작하는 이름에는 setProperty가 필요합니다.
관련 도구
HTML → JSX 변환
HTML 스니펫 붙여넣기 → React용 JSX. class→className·onclick→onClick·void 태그 self-close·inline style 객체화 옵션.
개발
JS 객체 ↔ JSON
JS 객체 리터럴({name: 'Alice'}) → 엄격한 JSON 또는 그 역. 키 인용 없는 깔끔한 JS 리터럴로.
변환
HTML / CSS / JS 미니파이어
HTML·CSS·JavaScript의 공백·주석을 제거 — 크기 절감 확인하고 결과 복사.
개발
Python .pyc 바이트코드 분석기
__pycache__의 .pyc를 브라우저에서 엽니다. 어떤 CPython이 만들었는지, 무효화 방식, 코드 객체 트리와 디스어셈블리를 보여 줍니다.
개발
Git 객체 ID 계산기 (hash-object)
blob·tree·commit·tag의 git 객체 ID를 SHA-1과 SHA-256으로 계산하고, git이 해시하는 헤더와 루스 객체 경로까지 보여줍니다.
개발
EditorConfig 생성기
들여쓰기 스타일, 줄 끝, 문자셋, 일반적인 재정의를 갖춘 .editorconfig 파일을 브라우저에서 만듭니다.
개발