CSS to JS 스타일 객체 변환기
CSS 선언(property: value;)을 붙여넣으면 camelCase 키가 적용된 JavaScript 스타일 객체를 얻을 수 있어 React의 `style` 속성이나 모든 JS 스타일링에 바로 사용할 수 있습니다. 벤더 접두사와 CSS 사용자 정의 속성도 처리됩니다. 모든 처리는 브라우저에서 로컬로 실행되며 아무것도 업로드되지 않습니다.
—
JS 스타일 객체
사용법
- 입력 상자에 CSS 선언을 붙여넣습니다.
- 각 속성은 camelCase로, 각 값은 문자열로 따옴표 처리됩니다.
- 출력 상자에서 생성된 스타일 객체를 복사합니다.
자주 묻는 질문
- 속성 이름은 어떻게 변환되나요?
- 하이픈 속성은 camelCase가 됩니다(font-size → fontSize). 벤더 접두사는 React 규칙을 따릅니다: -webkit-는 Webkit, -ms-는 소문자 ms로 유지됩니다.
- CSS 사용자 정의 속성은 어떻게 되나요?
- --main-color 같은 변수는 이름을 유지하고 따옴표 키가 됩니다. React가 이를 그대로 적용하기 때문입니다.
- 값이 숫자로 변환되나요?
- 아니요. 모든 값은 따옴표 문자열로 출력되며 항상 유효합니다. 단위 없는 숫자 값을 원하면 따옴표를 직접 제거하세요.
- 제 CSS가 어딘가로 전송되나요?
- 아니요. 변환은 전적으로 브라우저에서 이루어지며 아무것도 업로드되지 않습니다.
관련 도구
HTML → JSX 변환
HTML 스니펫 붙여넣기 → React용 JSX. `class`→`className`·`onclick`→`onClick`·void 태그 self-close·inline style 객체화 옵션.
개발 0 0
JS 객체 ↔ JSON
JS 객체 리터럴(`{name: 'Alice'}`) → 엄격한 JSON 또는 그 역. 키 인용 없는 깔끔한 JS 리터럴로.
변환 0 0
HTML / CSS / JS 미니파이어
HTML·CSS·JavaScript의 공백·주석을 제거 — 크기 절감 확인하고 결과 복사.
개발 0 0
EditorConfig 생성기
들여쓰기 스타일, 줄 끝, 문자셋, 일반적인 재정의를 갖춘 .editorconfig 파일을 브라우저에서 만듭니다.
개발 0 0
CSS 선택자 테스터
HTML에 대해 CSS 선택자를 테스트하고 어떤 요소가 매칭되는지 정확히 확인합니다. 브라우저에서 동작합니다.
개발 0 0
CSS Flexbox 플레이그라운드
flex-direction·justify-content·align-items·gap을 클릭으로 조정 — CSS 또는 Tailwind 클래스 복사.
개발 0 0