네이밍 규칙
공통 규칙
공통 네이밍 규칙 예
| 잘못된 예 | 올바른 예 | 설명 |
|---|---|---|
| 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 | 동일한 이름의 네이밍의 경우 가장 뒤에 숫자를 사용하여 분류지어 사용할 수 있으며 첫번째 파일은 숫자를 생략하여 사용할 수 있다. |
파일 및 폴더
개발과 기획에서 정의된 디렉토리 구조도 및 화면 아이디가 정의가 되어있다면 그에 준한 규칙에 따라 파일 및 폴더의 이름을 사용한다.
파일 및 폴더 네이밍 규칙 예
| 분류 | 예제 | 설명 |
|---|---|---|
| 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)
아이디 네이밍 규칙 예
| 잘못된 예 | 올바른 예 |
|---|---|
| error_Mesage | errorMesage |
| control_center | controlCenter |
| checkbox_3 | checkbox-3 |
- 시작의 이름은 영문 소문자를 사용하되 두 번째 단어부터 첫 번째 문자를 대문자로 처리하는 기법(카멜 케이스)을 사용한다.
- 동일한 이름의 id는 문서에서 한번만 사용이 가능하다.
- 지정된 레이아웃을 제외한 스타일 지정을 위하여 id를 사용하지 않는다.
- 앵커로서 사용되는 엘리먼트는 id 지정이 가능하다.
- User Interface 동작을 위하여 DOM 선택자로서의 id 지정은 가능하다.
- 예약어가 있는 경우 예약어를 사용한다.
레이아웃 예약어
| 예약어 | 설명 |
|---|---|
| #wrapper | 페이지 전체 영역 그룹핑 |
| #header | 머리글 영역 |
| #container | 본문영역 그룹핑 |
| #content | 주용컨텐츠 영역 |
| #footer | 바닥글 |
| #popWrapper | 팝업 페이지 전체 영역 그룹핑 |
| #popHeader | 팝업 머리글 영역 |
| #popContainer | 팝업 본문영역 그룹핑 |
| #popContent | 팝업 주용컨텐츠 영역 |
| #popFooter | 팝업 바닥글 |
동작을 위한 DOM 선택 예약어
| 예약어 | 설명 |
|---|---|
| #gnbNav | 글로벌 네비게이션 영역 메뉴 |
| #lnbNav | 로컬 네비게이션 영역의 메뉴 |
| #snbNav | 사이드 네비게이션 영역의 메뉴 |
클래스(class)
클래스 네이밍 규칙 예
| 잘못된 예 | 올바른 예 |
|---|---|
| error-Mesage | error-mesage |
| control_center | control-center |
- 시작의 이름은 영문 소문자를 사용하며 두 번째 단어부터 하이픈(-)으로 연결하며 대문자는 사용하지 않는다.
- 영문 소문자, 숫자, 하이픈(-)만 사용할 수 있다.
- 하이픈(-)은 2개 이상의 단어를 조합할 때만 사용한다.
- 클래스 예약어에 숫자, 영문소문자, 하이픈(-)을 조합하여 사용할 수 있다.
- 하이픈(-)을 이용하여 3단계를 초과하여 사용하는 방법은 지양한다.
- 숫가자 없으면 '01'이라는 숫자가 생략된 것으로 간주한다.
- 다중의 클래시 지정을 허용하며 최대 3개 이상 사용하지 않도록 주의한다.
기본적 클래스 예약어
| 예약어 | 설명 |
|---|---|
| .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 클래스 예약어
| 예약어 | 브라우저 |
|---|---|
| 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 |
- 브라우저의 호환성을 및 css 핵의 사용을 최소화 하기 위하여 javascript를 이용하여 body 엘리먼트에 클래스 명을 지정한다.
- 개발 완료시 서버사이드 언어로 브라우저 타입을 구별하여 해당 클래스 예약어를 body 엘리먼트에 적용하여야 한다.
이미지 네이밍 규칙
이미지 네이밍 규칙 예
| 잘못된 예 | 올바른 예 | 설명 |
|---|---|---|
| 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 | 같은 분류의 이미지 사용시 언더스코어(_)로 구분한다. |
- 이미지 네이밍의 조합은 '형태_의미_순서_상태'의 순서로 조합한다.
- 같은 이름의 이미지가 두 개 이상 존재하면 파일 언더스코어(_)로 구분한다.
- 이미지 네이밍은 이미지의 확장자에 관계 없이 순차적으로 적용한다. 예) btn_confirm.gif, btn_confirm_02.jpg, btn_confirm_03.png
- 임시이미지에 한하여 @특수문자를 처음으로 사용할 수 있다.
- 이미지 예약어에 숫자, 영문소문자, 언더스코어(_)를 조합하여 사용할 수 있다.
이미지 예약어
| 분류 | 예약어 | 사용 예 | 설명 |
|---|---|---|---|
| 텍스트 | 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 | 임시로 레이아웃의 구조에 사용되는 이미지 또는 개발과 연동되는 부분의 썸네일 이미지, 광고영역의 이미지에 사용 |