kebab-case란
케밥 케이스(kebab-case)는 공백이 있던 자리에 하이픈을 넣고 모든 글자를 소문자로 쓰는 표기법입니다. 케밥 케이스 변환기에 넣으면 다음처럼 바뀝니다.
My Blog Post Title은my-blog-post-title이 됩니다backgroundColor는background-color가 됩니다user_profile_card는user-profile-card가 됩니다
변환기 작동 방식
이 도구는 각 줄에서 단어를 찾아 소문자로 바꾸고 하이픈으로 연결합니다. 단어는 공백, 밑줄, 점, 슬래시로 나뉘어 있어도 되고, camelCase나 PascalCase처럼 대문자로 구분되어 있어도 됩니다. 문장부호는 지워집니다. 줄마다 따로 변환하므로 제목이나 클래스 이름 목록을 붙여넣으면 같은 순서의 목록이 돌아옵니다.
| 입력 | 결과 |
|---|---|
| My First Blog Post! | my-first-blog-post |
| backgroundColor | background-color |
| user_profile_card | user-profile-card |
| ProductListItem | product-list-item |
| 10 Tips for Better Sleep | 10-tips-for-better-sleep |
kebab-case를 쓰는 곳
- URL:
example.com/blog/my-first-post - CSS:
.nav-item같은 클래스 이름과font-size같은 속성 - HTML:
data-user-id같은 속성과<user-card>같은 커스텀 요소 이름 - 파일과 폴더 이름: 특히 웹 프로젝트에서
- npm 패키지: 패키지 이름은 소문자여야 하고, 구분 기호로는 보통 하이픈을 씁니다
- 명령줄 플래그:
--dry-run,--no-cache
URL 슬러그용 kebab-case
슬러그는 웹 주소에서 페이지를 가리키는, 사람이 읽을 수 있는 부분입니다. 좋은 슬러그는 짧고, 소문자이며, 하이픈으로 연결되어 있습니다. 페이지 제목을 여기에 붙여넣어 출발점으로 삼고 다듬으면 됩니다.
- 제목을 변환합니다. “10 Tips for Better Sleep”은
10-tips-for-better-sleep이 됩니다. - 슬러그가 길면 군더더기 단어를 뺍니다.
tips-better-sleep처럼 줄입니다. - 페이지의 핵심 키워드는 슬러그에 남겨 둡니다.
소문자가 중요한 이유는 많은 웹 서버가 /My-Page와 /my-page를 서로 다른 주소로 처리하기 때문입니다.
한글 제목을 넣으면 한글은 그대로 두고 띄어쓰기만 하이픈으로 바뀝니다. “서울 맛집 추천 Best 10”은 서울-맛집-추천-best-10이 됩니다. 한글 슬러그는 주소창에서는 한글로 보이지만, 주소를 복사해 다른 곳에 붙여넣으면 %EC%84%9C%EC%9A%B8처럼 퍼센트 인코딩된 긴 문자열로 바뀌는 경우가 많습니다. 어떻게 바뀌는지는 URL 인코딩 디코딩 도구에서 확인할 수 있습니다. 영문 슬러그와 한글 슬러그 중 무엇을 쓸지는 사이트 방침에 맞춰 정하면 됩니다.
다른 표기와 비교
| 표기 | 예시 | 코드에서 쓸 수 있나요? |
|---|---|---|
| kebab-case | user-first-name | 아니요, 하이픈이 빼기 기호로 읽힘 |
| snake_case | user_first_name | 예 |
| camelCase | userFirstName | 예 |
다른 표기가 필요하다면 스네이크 케이스 변환기나 카멜 케이스 변환기를 이용하면 됩니다.