[HTML] 클래스명, id 네이밍 컨벤션

네이밍 컨벤션

미리 약속한 규칙에 따라 이름을 짓는것

회사마다 커뮤니티마다 네이밍 컨벤션이 조금씩 다를 수 있다. 

 

 

id, class 명명

• 의미 있는 이름을 사용: 해당 요소의 역할이나 의미를 잘 나타내는 이름으로 짓는다.
• 의미가 명확하고 간결한 이름으로 지을것: 유지보수와 이해가 쉽도록
• 의미에 맞는 접두사를 사용
• 소문자 혹은 하이픈(-)을 사용하여 가독성을 높인다.

 

주로 많이 사용하는 접두사

큰 구역으로 분류

• header - 헤더 영역
• content - 본문 영역
• footer - 푸터 영역
• wrapper - 특정 구역을 감싸는 영역

 

작은 구역으로 분류

• title
• section, sec  
• wrap
• inner - 부모 구역 내부의 자식 묶음을 표현
• gnb - 서비스 전체 네비게이션 바
• lnb - 지역적인 네비게이션 바
• snb - 사이드바 네비게이션 바
• tab - 탭
• table, tbl - 테이블
• list - 목록(ul, ol, dl)
• item - 목록 내부의 하나(li, dd)
• btn - 버튼
• bg - 백그라운드
• thumb - 썸네일
• banner - 배너
• layer - 레이어
• desc - 설명, 상세 내용
• top, bottom, left, right
• prev, next