CSS 클래스명 언더바 (_) 사용하는 개인적인 이유
현재 HTML / CSS / JS 관련 소규모로 모임을 하고 있습니다. 정말 이따금씩 모여서 각코(각자 코딩)를 즐기고 있지요. 어느날 문득 이런 생각이 들었습니다.
'다른 분들은 클래스명을 어떤 식으로 만들까?'
궁금하면 뭐다?! 물어보는겁니다. 최근 모임 때 한 분께 여쭤봤습니다. 클래스명을 어떤 식으로 구성하는지 말입니다. 뭐 일반적인 범주 내였습니다. 그 순간 또 궁금했던것이 대시(-)와 언더바(_)의 차이점! 실제로 티스토리 스킨을 만들면서 여러 스킨들을 뜯어 분석했는데 어떤 분은 언더바를 많이 사용하고 또 어떤 분은 대시를 많이 사용하고 있었습니다. 프로그래밍적으로 이 둘은 차이가 있는건지, 아니면 지극히 개인 취향 영역인지 궁금했어요.
제가 프로그래밍을 전문으로 해본적이 없어서 잘 모르지만 건너 건너 들었던 기억으로는 이 둘은 분명한 차이가 있다고 들었습니다. 특히나 개인 개발자 분들께서 만든 소프트웨어를 배포하는 상세 페이지에서 몇 개의 주의사항을 본 기억이 나는데 그 중에서 파일명에는 대시 사용을 금지하고 언더바 사용을 추천한다는 내용이었습니다. 따라서 이 둘은 프로그래밍 적으로 달리 해석하는게 분명하다는 생각이 있어요. 어떤 원리인건지 구체적으로 알 수는 없지만요. 허나 지금 경우는 프로그래밍이 아닌, 단순히 닉네임 개념의 클래스명을 만들 때 대시냐? 언더바냐? 단순 차이입니다.
"혹시 ㅇㅇ님은 클래스명 만들 때, 대시를 많이 쓰세요? 아니면 언더바를 많이 쓰세요?"
"음~ 저는 언더바를 더 많이 쓰는 것 같아요."
"엇?! 혹시 무슨 이유라도 있을까요?"
드디어 원하던 질문에 대한 답변을 듣게 되었다.
"아, 큰 이유는 없고요. 그냥 클래스명 더블클릭하면 한 방에 다 잡혀서 그래요. ㅎㅎ 대시는 끊기거든요."
"!!!"
아니잇?! 그런 엄청난(?) 이유가 있었단 말이죠? 궁금하면 뭐다? 바로 테스트를 해봅니다.
<div class="hahaha-hahaha"></div>
<div class="hahaha_hahaha"></div>
자! 이렇게 두 개의 클래스명을 임의로 만들었습니다. 둘의 차이는 지금까지 언급했던 대시와 언더바 사용밖에 없어요. 그럼 더블클릭해서 클래스명이 어떻게 블럭 지정되는지 비교해 보겠습니다.
보이시죠? 클래스명을 더블클릭 했을 때 서로 차이가 분명합니다. 대시를 사용했을 때는 대시 이전까지만 선택되며 언더바를 사용했을때는 클래스명이 모두 선택됩니다. 따라서 좀 더 원활한 웹코딩을 위해서는 당연히 클래스명이 한 번에 선택되는것이 좋겠습니다.
벗뜨! 제대로 사용하려면 이 둘의 차이를 잘 이용하면 되겠죠? 예를 들어서 공통 클래스명일 경우에는 대시로 구별해서 서로 경계를 만들고, 아예 독립적인 클래스명인 경우라면 언더바를 이용하면 좋겠다는 생각이 들었습니다. 자신의 스타일이 아예 모든 클래스명을 따로 독립된 개체로 만들기를 좋아한다면 언더바를, 공통된 부분도 만들면서 동시에 추가로 구별짓는 일종의 꾸밈 클래스명을 추가로 붙여주는 스타일이라면 대시로 구별해주면 되지 않을까 싶어요. 저는 후자쪽이긴 한데 어쨌거나 이름 지어주는건 지극히 개인 취향이 반영되는 부분이니 그냥 본인 취향대로 써주시면 될 것 같습니다. 반려동물 이름 지어주는데 공식은 필요 없잖아요. 하지만 분명한 차이는 존재한다는것을 이번에 알았으니 이 기능을 잘 이용해서 좀 더 쾌적하고 즐거운 웹코딩을 하시면 되시겠습니다. 오늘 내용 끝!
