케밥 케이스 변환기 CSS 클래스, URL, 파일 이름을 위한 텍스트를 케밥 케이스로 변환합니다.

What Is 케밥 케이스 변환기?

케밥 케이스 변환기는 텍스트를 케밥 케이스 형식으로 변환하며, 모든 문자가 소문자이고 단어가 하이픈으로 구분됩니다. 케밥 케이스는 CSS 클래스 이름, HTML 속성, URL 슬러그, npm 패키지 이름 및 많은 프레임워크의 파일 이름에 대한 표준 명명 규칙입니다. 예를 들어, "Hello World"는 "hello-world"가 되며, "backgroundColor"는 "background-color"가 됩니다. 케밥 케이스의 이름은 하이픈으로 단어가串に 꽂여 있는 것과 같은 시각적 유사성에서 유래했습니다.

Why Use 케밥 케이스 변환기?

• CSS 클래스 이름과 커스텀 속성의 표준
• 대부분의 웹 프레임워크에서 URL 슬러그로 필요한 형식
• npm 패키지 이름 및 Git 브랜치 이름에 사용됨
• 웹 컨텍스트에서 여러 단어 식별자를 가장 읽기 쉽게 표시하는 형식
• 任意 입력 형식을 변환하여 처리

Common Use Cases

CSS 클래스

BEM 또는 표준 CSS 명명 규칙에 따라 클래스 이름을 형식화합니다.

URL 슬러그

페이지 제목이나 콘텐츠 헤딩에서 SEO 친화적인 URL 경로를 생성합니다.

npm 패키지

npm의 케밥 케이스 규칙에 따라 패키지 이름을 형식화합니다.

파일命名

Angular, Vue 및 기타 컴포넌트 기반 프레임워크에서 파일을 케밥 케이스로 명명합니다.

Technical Guide

케밥 케이스 변환은 스네이크 케이스와 동일한 단어 분할 알고리즘을 따르지만 단어를 밑줄 대신 하이픈으로 결합합니다. 입력은 공백, 밑줄, 점, 기존 하이픈 및 대소문자 전환에서 분할됩니다. 모든 단어가 소문자로 변환되어 단일 하이픈으로 결합됩니다. 연속된 하이픈은折り畳まれ, 시작/종료 하이픈은 제거됩니다. 알고리즘은 camelCase 입력 ("backgroundColor" → "background-color") 및 PascalCase ("PageTitle" → "page-title")를 올바르게 처리합니다. 또한 혼합 형식을 지원합니다. 참고로 케밥 케이스 식별자는 대부분의 프로그래밍 언어에서 변수 이름으로 직접 사용할 수 없습니다. 하이픈은 뺄셈 연산자로 사용되기 때문입니다.

Tips & Best Practices

• 1
  CSS 속성은 기본적으로 케밥 케이스: background-color, font-size, border-radius
• 2
  BEM 방법론은 이중 하이픈과 함께 케밥 케이스를 사용함: block__element--modifier
• 3
  케밥 케이스 URL은 SEO에서 밑줄 또는 캐멀 ケ이스보다 선호됨
• 4
  JavaScript에서 케밥 케이스 속성에 접근하려면 대괄호 표기법을 사용하세요: obj["my-prop"]
• 5
  Angular는 컴포넌트 선택자(app-user-profile)에 케밥 케이스를 사용함

Related Tools

카멜케이스 변환기

텍스트를 자바스크립트 변수와 함수 이름용 카멈케이스로 변환합니다.

📝 Text Tools

파스칼 케이스 변환기

클래스 이름 및 컴포넌트命名을 위한 텍스트를 파스칼 케이스로 변환합니다.

📝 Text Tools

스네이크 케이스 변환기

텍스트를 파이썬 변수와 데이터베이스 열에 맞는 스네이크 케이스로 변환합니다.

📝 Text Tools

점문자 변환기

구성 키 및 속성을 위한 점문자 형식으로 텍스트를 변환합니다.

📝 Text Tools

슬러그 생성기

사용자 지정 구분자를 사용하여 텍스트에서 URL 친화적인 슬러그를 생성합니다.

📝 Text Tools

Frequently Asked Questions

Q 케밥 케이스가 무엇인가?

케밥 케이스는 모든 소문자와 단어 사이에 하이픈을 사용합니다: my-variable, page-title, nav-bar-item.

Q JavaScript 변수에 케밥 케이스를 왜 사용할 수 없나요?

하이픈은 JavaScript에서 빼기 연산자로 해석됩니다. 대괄호 표기법(obj["my-key"]) 또는 캐멀 ケ이스를 대신 사용하세요.

Q URL에 케밥 케이스가 스네이크 케이스보다 낫나요?

구글은 하이픈을 단어 구분자로 취급하지만 밑줄은 그렇지 않으므로 URL의 SEO를 위해 케밥 ケ이스가 선호됩니다.

Q CSS 커스텀 속성은 무엇인가?

CSS 커스텀 속성(변수)은 -- 접두사와 함께 케밥 케이스를 사용합니다: --primary-color, --font-size-large.

Q BEM과 케밥 ケ이스의 관계는 무엇인가?

BEM(블록 요소 수정자)은 기본으로 케밥 케이스를 사용하며, __를 요소에 사용하고 --를 수정자에 사용합니다.

About This Tool

케밥 케이스 변환기 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.