네이밍 규칙 가이드

camelCase vs kebab-case

camelCase는 구분자를 제거하고 대문자로 단어 경계를 표시하며, kebab-case는 소문자 단어를 하이픈으로 연결합니다. 같은 웹 프로젝트에서도 서로 다른 레이어에 함께 쓰입니다.

작성자 Camel Case Converter 편집팀게시 2026. 9. 12.마지막 검토 2026. 9. 13.

빠른 비교

차이	camelCase	kebab-case
예시	backgroundColor	background-color
주요 용도	JavaScript 식별자, object property, DOM style, application code	URL, slug, CSS 이름, file/config, CLI 텍스트
단어 구분자	없음	하이픈 (-)
대소문자	내부 단어 대문자 시작	보통 모두 소문자
JavaScript 식별자	가능	따옴표 없이 불가
대표 웹 경계	application code	URL / CSS / text name

camelCase는 JavaScript 식별자로 직접 사용할 수 있으며 CSS background-color는 style API에서 backgroundColor가 됩니다.

kebab-case는 하이픈으로 단어 경계를 명확히 하며 URL, slug, file 이름, CSS, 텍스트 설정에 적합합니다.

상황	권장 규칙	이유
JavaScript 식별자 및 object property	camelCase	하이픈은 따옴표 없는 JavaScript 식별자에 사용할 수 없지만 camelCase는 그대로 사용할 수 있습니다.
URL, slug, 많은 filename	kebab-case	대소문자에 의존하지 않고 하이픈으로 단어 경계를 읽기 쉽게 표시할 수 있습니다.
CSS property와 JavaScript style 접근	CSS에서는 kebab-case, JavaScript에서는 camelCase	CSS는 하이픈 속성명을 사용하고 DOM/React style API는 대응하는 camelCase 이름을 사용합니다.
Custom element 이름	하이픈이 포함된 이름	Custom element 이름에는 하이픈이 필요하므로 kebab-case와 비슷한 표기가 플랫폼 제약에 맞습니다.

JavaScript 식별자에는 camelCase, 외부 하이픈 이름이 필요한 곳에는 kebab-case를 사용하고 그 경계에서만 변환하세요.

--brand-color 같은 CSS custom property를 무조건 camelCase로 바꾸지 마세요. 앞의 --와 이름 자체가 의미를 가집니다.
kebab-case를 따옴표 없는 JavaScript 변수명으로 쓰면 하이픈이 빼기 연산자로 해석됩니다.
URL이나 파일 이름 규칙을 source code의 식별자에 그대로 적용하지 마세요.

식별자를 붙여넣어 대상 형식과 지원하는 네이밍 스타일을 확인하세요. 변환은 브라우저에서 실행됩니다.

약어 보존

입력감지: snake_case

kebab-case 출력

user-profile-image-url

camelCase

userProfileImageUrl

PascalCase

UserProfileImageUrl

snake_case

user_profile_image_url

kebab-case

user-profile-image-url

CONSTANT_CASE

USER_PROFILE_IMAGE_URL

dot.case

user.profile.image.url

path/case

user/profile/image/url

변환은 브라우저에서 로컬로 처리되며 입력은 변환 서버로 전송되지 않습니다.