kebab-case란? URL·CSS에서의 활용

kebab-case는 모든 글자를 소문자로 쓰고 단어를 하이픈(-)으로 잇는 표기법으로, 꼬치(kebab)에 꿰인 재료처럼 보인다 하여 붙은 이름입니다.

kebab-case의 규칙

user profile image는 kebab-case로 user-profile-image가 됩니다. spinal-case 또는 dash-case라고 부르기도 합니다.

밑줄 대신 하이픈을 쓴다는 점만 snake_case와 다릅니다.

어디에 쓰나요

• URL 경로와 슬러그 (예: /my-blog-post)
• CSS 클래스와 사용자 정의 속성 (--main-color)
• HTML의 data 속성 (data-user-id)
• 파일 이름과 npm 패키지 이름

왜 URL·CSS에서 하이픈일까

많은 프로그래밍 언어에서 밑줄은 식별자에 쓸 수 있지만 하이픈은 뺄셈으로 해석되어 이름에 쓸 수 없습니다. 그래서 코드 밖의 영역(URL·CSS·파일명)에서 하이픈이 자연스럽게 자리 잡았습니다.

검색 엔진은 하이픈을 단어 구분자로 인식하지만 밑줄은 그렇지 않은 경우가 있어, URL에는 하이픈이 권장됩니다.

주의할 점

하이픈은 코드 식별자에는 쓸 수 없으므로, 자바스크립트 변수 이름 등에는 kebab-case를 쓰지 않습니다. 이럴 때는 camelCase로 변환해 사용하세요.