CSS 네이밍 규칙

 

공통 규칙

잘못된 예	올바른 예	설명
Tit_pop.html *-hidden-obj 03_btn_more.gif	tit-section	시작이름은 영문 대문자, 숫자, 특수문자로 시작할 수 없다.(파일 및 폴더 제외)
cancle_btn_off_01.gif, msgbox-off-toggle	btn_cancle_01_off.gif, msgbox-toggle-off	네이밍의 조합은 '형태_의미_순서_상태'을 기본 순서로 사용한다.
customerService	customer_service	네이밍 규칙의 언더스코어(_) 조합은 파일, 폴더, 이미지에 사용한다.
hidden_obj	hidden-obj	네이밍 규칙의 하이픈(-) 조합은CSS 네이밍에 사용하는 것을 권장한다. HTML 문서 안에서 언더스코어(_)의 조합은 form, input 엘리먼트등의 name 어트리뷰트의 값을 사용하는 것을 권장한다. 이유는 클래스 네임이 서버사이드 스크립트의 변수와 자바스크립트의 변수 정의시 혼돈을 방지하기 위함이다.
cyber_center_1, cyber_center_2	cyber_center_01, cyber_center_02	1, 2과 같은 한자리 정수는 사용하지 않으며 01, 02과 같이 사용하며 사용을 권장한다. 대부분의 파일관리 유틸리티 프로그램들을 사용하여 파일의 이름으로 정렬할 때에 정렬의 순서를 보장하기 위함이다.
box-type01,  box-type02,  box-type03	box-type,  box-type02,  box-type03	1, 2과 같은 한자리 정수는 사용하지 않으며 01, 02과 같이 사용하며 사용을 권장한다. 대부분의 파일관리 유틸리티 프로그램들을 사용하여 파일의 이름으로 정렬할 때에 정렬의 순서를 보장하기 위함이다.

 

---

 

파일 및 폴더 네이밍

기확과 개발에서 정의된 디렉토리 구조도 및 화면 아이디가 정의가 되어있다면 그에 준한 규칙에 따라 파일 및 폴더의 이름을 사용한다.

분류	예제	설명
Folder	html	업무별 폴더 생성가능. 00.service, 01.customer, 02.account
	html_guid	마크업 가이드, 접근성가이드, 화면 목록등의 파일 및 폴더 생성 가능
	js	라이브러리별 폴더 생성 가능
	css	디렉토리별 폴더 생성 가능
	img	네이밍별 폴더 생성 가능
HTML	0101.html	화면 코드 사용(별도의 정의된 네이밍 롤이 없을 경우 사용)
	00_customer_service_list.html	화면 코드, 메뉴명, 상태의 조합
	00_pop_*.html	팝업 파일 사용
	00_aj_*.html	ajax 이용하여 페이지를 동적으로 사용하는 파일
	00_if_*.html	iframe 파일
CSS	00.service.css	폴더명을 사용
	default.css	브라우저 호환성을 위하여 기본 css 속성을 정의하며, common.css를 @import 한다.
	layout.css	화면의 레이아웃 구조의 표현을 정의한 파일
	common.css	전역에 쓰이는 요소의 표현을 정의하며 html의 업무별, 디렉토리별 구분하여 작성한 css 파일을 @import 한다.
JS	common.js	전역에 사용하는 스크립트를 작성한다.

 

---

 

아이디 네이밍

시작의 이름은 영문 소문자를 사용하되 두 번째 단어부터 첫 번째 문자를 대문자로 처리하는 기법(카멜 케이스)을 사용한다.

• 동일한 이름의 id는 문서에서 한번만 사용이 가능하다.
• 지정된 레이아웃을 제외한 스타일 지정을 위하여 id를 사용하지 않는다.
• 앵커로서 사용되는 엘리먼트는 id 지정이 가능하다.
• User Interface 동작을 위하여 DOM 선택자로서의 id 지정은 가능하다.
• 예약어가 있는 경우 예약어를 사용한다.

잘못된 예	올바른 예
error_Mesage	errorMesage
control_center	controlCenter
checkbox_3

 

레이아웃 예약어

예약어	설명
#wrapper	페이지 전체 영역 그룹핑
#header	머리글 영역
#container	본문영역 그룹핑
#content	중요컨텐츠 영역
#footer	바닥글
#popWrapper	팝업 페이지 전체 영역 그룹핑
#popHeader	팝업 머리글 영역
#popContainer	팝업 본문영역 그룹핑
#popContent	팝업 중요컨텐츠 영역
#popFooter	팝업 바닥글

 

동작선택 예약어

예약어	설명
#gnbNav	글로벌 네비게이션 영역 메뉴
#lnbNav	로컬 네비게이션 영역의 메뉴
#snbNav	사이드 네비게이션 영역의 메뉴

 

---

 

클래스 네이밍

• 시작의 이름은 영문 소문자를 사용하며 두 번째 단어부터 하이픈(-)으로 연결하며 대문자는 사용하지 않는다.
• 영문 소문자, 숫자, 하이픈(-)만 사용할 수 있다.
• 하이픈(-)은 2개 이상의 단어를 조합할 때만 사용한다.
• 클래스 예약어에 숫자, 영문소문자, 하이픈(-)을 조합하여 사용할 수 있다.
• 하이픈(-)을 이용하여 3단계를 초과하여 사용하는 방법은 지양한다.
• 숫가자 없으면 '01'이라는 숫자가 생략된 것으로 간주한다.
• 다중의 클래시 지정을 허용하며 최대 3개 이상 사용하지 않도록 주의한다.

잘못된 예	올바른 예
error-Mesage	error-mesage
control_center	control-center

 

기본 예약어

예약어	설명
.aside-*	보통 보통 #container 또는 #content 에 종속 되며 켵가지 영역으로 불리기도 한다.
.gnb	최상위 공통 네비게이션(Global Navigation Bar)을 지정합니다. 보통 수평(bar)형태로 표현되며 #header 에 종속된다. 수직으로 표현되는 경우는 거의 드물지만 그러한 경우 #header 에 종속되지 않을 수도 있습니다.
.lnb	현재 서비스의 지역(Local Navigation Bar) 네비게이션을 지정 합니다. 보통 수평(bar)형태로 표현되며 #header 에 종속된다. 수직으로 표현되는 경우는 거의 드물지만 그러한 경우 #header 에 종속되지 않을 수도 있습니다.
.nav-*	gnb, lnb, snb 이외의 네비게이션을 지정합니다.
.path	현재 페이지의 경로를 지정합니다. 보통 #container 또는 #content 에 종속됩니다.
.section-*	콘텐츠를 분할하거나 그룹핑 하는 블럭 입니다. 보통 #content 내부에 배치한 다음 heading 태그(h1~h6)와 함께 사용하는 것을 권장합니다.
.snb	.gnb, .lnb 를 제외한 측면(Side Navigation Bar) 네비게이션 영역을 지정합니다. 보통 #container 에 종속되고 수직으로 표현되지만 수평으로 표현되는 경우도 있으므로 #header 에 종속되는 등 예외의 경우도 있을 수 있습니다.

ㅁㄴㅇㄹ

 

BODY 예약어

브라우저의 호환성을 및 css 핵의 사용을 최소화 하기 위하여 javascript를 이용하여 body 엘리먼트에 클래스 명을 지정한다.
개발 완료시 서버사이드 언어로 브라우저 타입을 구별하여 해당 클래스 예약어를 body 엘리먼트에 적용하여야 한다.

예약어	브라우저
msie6	Internet Explorer6
msie7	Internet Explorer7
msie8	Internet Explorer8
msie9	Internet Explorer9
msie10	Internet Explorer10
msie11	Internet Explorer11
firefox	firefox
safari	safari
opera	opera
chrome	chrome

 

---

 

이미지 네이밍

• 이미지 네이밍의 조합은 '형태_의미_순서_상태'의 순서로 조합한다.
• 같은 이름의 이미지가 두 개 이상 존재하면 파일 언더스코어(_)로 구분한다.
• 이미지 네이밍은 이미지의 확장자에 관계 없이 순차적으로 적용한.
  예) btn_confirm.gif, btn_confirm_02.jpg, btn_confirm_03.png
• 임시이미지에 한하여 @특수문자를 처음으로 사용할 수 있다.
• 이미지 예약어에 숫자, 영문소문자, 언더스코어(_)를 조합하여 사용할 수 있다.

잘못된 예	올바른 예	설명
on_tab_info.gif	tab_info_01_on.gif	형태_의미_순서_상태 순서로 조합한다.
tio.gif	tab_info_on.gif	임의로 축약하지 않는다.
tbl_type_list_02_off.gif	tbl_list_02_off.gif	가급적 4단계 이하의 조합을 사용한다.
btn_Active.gif	btn_active.gif	영문 소문자를 사용한다.
bul_square_type02.gif	bul_square_type_02.gif	같은 분류의 이미지 사용시 언더스코어(_)로 구분한다.

 

이미지 예약어

분류	예약어	사용 예	설명
텍스트	h[1-6]_*, h_*	h_logo.gif, h12_header.gif, h1_article.gif	heading 요소에 사용한다.
	tit_*	tit_leble_id.gif, tit_definition_list, tit_table_th.gif	heading 요소로 사용되지는 않고 문단의 강조를 나타내는 형식의 텍스트, 주로 테이블의 제목셀, dt 엘리먼트, label 엘리먼트, strong 엘리먼트에 사용
	txt_*	txt_msg.gif, txt_desc_1	문단의 이미지로된 텍스트에 사용
링크요소	nav_*	nav_gnb_ko.gif, nav_gnb_login.gif, nav_lnb_about.gif	lnb, gnb, snb 등의 네비게이션 요소에 사용
	tab_*	tab_style_01_on.gif, tab_style_01_off.gif	네비게이션 요소를 제외한 탭 메뉴 형태에 사용
	btn_*	btn_ok.gif, btn_ok_02.gif, btn_bg_type.gif	버튼 형식의 a 엘리먼트, button 엘리먼트, input[type=image] 엘리먼트 요소에 사용한다. 버튼의 이미지가 배경으로 사용하여도 btn_* 예약어를 사용
박스	box_*	box_type.gif, box_login.gif	grouping 목적으로 사용되는 div 엘리먼트에 주로 사용
불릿	bul_*	box_arrow.gif, bul_arrow_02.gif, bul_square,gif	의미가 없는 요소로 사용할 수 있는 이미지로 사용.
아이콘	icon_*	icon_download.gif, icon_upload.gif	의미가 있는 요소로 설명에 대한 텍스트가 명확한 경우
상태	*_on, *_off, *_over	tab_type_01_on.gif, tab_type_01_off.gif, tab_type_01_over.gif	활성, 비활성, 오버/포커스 상태에 대한 표현에 사용
임시	@*	@tm_layout_header.jpg, @thumb_photo_1.jpg, @ad_main_1.jpg	임시로 레이아웃의 구조에 사용되는 이미지 또는 개발과 연동되는 부분의 썸네일 이미지, 광고영역의 이미지에 사용

출처: http://hhh8947.tistory.com/323