Naming Guidelines
- (X) 허용 안함
- (△) 예외 허용
- (O) 적극 권장
1. CSS 파일 네이밍
CSS 파일을 여러개로 나누는 경우 HTTP 요청이 늘어나서 웹페이지 전송속도에 좋지 않은 영향을 주게 되므로 파일의 수는 최소한으로 유지합니다. 사이트 루트 디렉토리에 /css/ 폴더를 생성하고 전역에 쓰이는 파일의 이름은 default.css 으로 지정합니다.
/css/default.css
모든 스타일을 포함하는 파일
/css/popup.css
팝업등 새로운 페이지 유형이 존재하는 경우 별도로 분리
모든 스타일을 포함하는 파일
/css/popup.css
팝업등 새로운 페이지 유형이 존재하는 경우 별도로 분리
2. id/class 선택자 선언 규약
▲Top
아래와 같이 정형화 된 요소들에 대한 네이밍은 'id/class 선언규약'에 따릅니다. 단, 아래 예는 되도록 복잡한 상황을 재현한 것으로서 특히 #wrap, .colgroup과 같은 그룹핑은 필수적이지 않다면 제외하는 것이 바람직 합니다. 동일한 의미를 지닌 id/class 가 복수로 존재해야 하는 경우 선택자 뒤에 숫자를 붙여서 확장합니다. 예제보기.
-
- #wrap :
- 페이지(#header, #container, #footer) 전체를 지정 합니다.
-
- #header :
- 로고를 포함한 상단 영역(보통 .lnb 포함)을 지정 합니다.
-
- #container :
- #header 와 #footer 를 제외한 본문 전체를 지정 합니다.
-
- <address> 를 포함한 하단의 보조 네비게이션 영역을 지정 합니다.
-
- .gnb :
- 최상위 공통 네비게이션(Global Navigation Bar)을 지정합니다. 보통 수평(bar)형태로 표현되며 #header 에 종속된다. 수직으로 표현되는 경우는 거의 드물지만 그러한 경우 #header 에 종속되지 않을 수도 있습니다.
-
- .lnb :
- 현재 서비스의 지역(Local Navigation Bar) 네비게이션을 지정 합니다. 보통 수평(bar)형태로 표현되며 #header 에 종속된다. 수직으로 표현되는 경우는 거의 드물지만 그러한 경우 #header 에 종속되지 않을 수도 있습니다.
-
- .search :
- 현재 페이지의 주요 검색영역을 지정합니다.
-
- .snb :
- .gnb, .lnb 를 제외한 측면(Side Navigation Bar) 네비게이션 영역을 지정합니다. 보통 #container 에 종속되고 수직으로 표현되지만 수평으로 표현되는 경우도 있으므로 #header 에 종속되는 등 예외의 경우도 있을 수 있습니다.
-
- .account :
- 로그인 폼 및 로그인 후 개인 계정을 표시하는 영역을 지정합니다.
-
- .colgroup :
- 컬럼 형태의 내용블럭을 그룹핑 합니다.
-
- #content :
- 반드시 #container 내부에 종속되며 보통의 경우 .snb 영역과 .aside 영역을 제외한 핵심 콘텐츠 영역을 지정합니다.
-
- .aside :
- 문서의 주요 부분을 표시하고 남은 콘텐츠 영역(곁가지 메뉴 따위)을 지정합니다.
-
- .spot :
- 강조하는 상위 콘텐츠이며 항상 #container 에 종속될 필요는 없습니다.
-
- .path :
- 현재 페이지의 경로를 지정합니다. 보통 #container 또는 #content 에 종속됩니다.
-
- 네비게이션 요소를 지정합니다. .gnb, .lnb, .snb 등 어떤 영역 내부에 하나 또는 복수의 네비게이션 요소가 존재할 때 .*nav* 클래스를 지정합니다. '*' 표시는 다른 단어 또는 숫자와 조합할 수 있다는 의미 입니다.
-
- .*section* :
- 콘텐츠를 분할하거나 그룹핑 하는 블럭 입니다. 보통 #content 내부에 배치한 다음 heading 태그(h1~h6)와 함께 사용하는 것을 권장합니다. '*' 표시는 다른 단어 또는 숫자와 조합할 수 있다는 의미 입니다.
-
- .article :
- 기사 또는 포스트와 같이 기술된 내용의 콘텐츠를 지정합니다.
-
- .ad :
- 광고 또는 배너를 지정합니다.
-
- etc :
- 여기서 기술하지 않은 id/class 네이밍은 이하 'id/class 생성 및 네이밍 가이드'에 따릅니다.
3. id/class 선택자 네이밍 가이드
▲Top
- id는 화면을 분할 하거나 동적 UI를 구현해야 하는 경우에만 생성합니다. id사용이 필수적으로 요구되지 않는 요소는 class를 생성합니다.
- 영문 소문자만 사용 가능하며 숫자 및 언더바(_) 사용이 가능합니다. 영문 대문자 및 기타 언어와 특수문자는 사용하지 않습니다.
- 가능하다면 의미에 적합하고 직관적인 하나의 단어를 사용하고, 화면 배치 또는 시각적 효과를 의미하는 단어의 선택은 지양합니다.
- 2개 이상의 단어를 조합하는 경우 언더바(_)로 연결합니다. 단어와 숫자를 조합하는 경우 언더바(_)를 생략합니다.
- 숫자로 시작할 수 없으며 숫자의 증가는 "1" 부터 시작됩니다. 숫자가 없는 단어는 통상 "1" 이라는 숫자가 생략된 것으로 간주합니다.
.nav01 (X) 클래스 이름을 이용한 스크립트 작성시 1~9까지 예외적으로 "0"을 추가해야 하므로 구현 이슈 발생
.nav1 (O) - 두문자어 또는 약어를 사용하더라도 직관적으로 이해할 수 있는 경우 단어를 축약할 수 있습니다.
- 보편적인 이름을 지닌 class는 항상 충돌 가능성이 존재하므로 가급적 부모 선택자에 종속 시킵니다.
(△) .more 라는 클래스 이름을 더 이상 사용할 수 없음
.more {...}
(O) .more 라는 클래스 이름을 여러번 재 사용할 수 있음
.section .more {...}
.aside .more {...} - 모든 영역에 동일한 표현으로 재 사용되는 전역 스타일인 경우 다른 선택자에 종속시키지 않습니다.
.gnb fieldset{border:none;} (△) 전역 스타일을 특정 영역에 종속시켜 재 사용성이 떨어짐
fieldset{border:none;} (O) 보통의 경우 fieldset을 이용하여 border를 표현하지 않으므로 어떤 선택자에도 종속시키지 않음
4. Image 네이밍 규약
▲Top
아래 제시된 종류의 이미지 이름들은 각각의 목적에 맞는 형태로 사용될 수 있도록 예약되어 있습니다. 아래 표현들은 다른 목적으로 사용하거나 독창적인 형태로 변형하여 사용하지 않습니다. "*" 표시는 해당 이미지의 의미나 상태를 가장 잘 표현할 수 있는 단어로 치환하거나 또는 생략할 수 있습니다. 네이밍의 순서는 '대분류-중분류-소분류' 또는 '형태-의미-상태' 순입니다. 동일한 용도의 이미지가 여러개인 경우 마지막 단어에 숫자를 붙여서 다르게 네이밍 합니다.
| 분류 | 예약어 | 설명 | 권장표현 | ||
|---|---|---|---|---|---|
| 형태 | 형태+의미+상태 | ||||
| 제목 | h*_* | h_* | 불특정 레벨의 제목 | 제목 태그로 마크업되는 이미지 요소. | 전경 |
| h1_* | 제목 1 | ||||
| h2_* | 제목 2 | ||||
| h3_* | 제목 3 | ||||
| h4_* | 제목 4 | ||||
| h5_* | 제목 5 | ||||
| h6_* | 제목 6 | ||||
| 문장 | p_* | p_* | 문장 | 통상 p 요소로 마크업되는 이미지 형태의 텍스트. | 전경 |
| 네비게이션 | gnb_* | gnb_* | 글로벌 | 네비게이션 목적의 버튼 또는 탭. | 전경 |
| lnb_* | lnb_* | 로컬 | |||
| snb_* | snb_* | 사이드 | |||
| 탭 | tab_* | tab_* | 탭 | gnb, lnb, snb에 포함되지 않으며 탭으로 분류되는 버튼 또는 버튼의 배경. | 전경/배경 |
| 버튼 | btn_* | btn_list_* | 목록 | 모든 종류의 버튼. | 전경 |
| btn_read_* | 읽기 | ||||
| btn_write_* | 쓰기 | ||||
| btn_modify_* | 수정 | ||||
| btn_delete_* | 삭제 | ||||
| btn_reply_* | 답변 | ||||
| btn_cancel_* | 취소 | ||||
| btn_search_* | 검색 | ||||
| btn_find_* | 찾기 | ||||
| btn_registeration_* | 등록 | ||||
| btn_confirm_* | 확인 | ||||
| btn_submit_* | 전송 | ||||
| btn_upload_* | 업로드 | ||||
| btn_download_* | 다운로드 | ||||
| btn_install_* | 설치 | ||||
| btn_file_* | 파일 | ||||
| btn_stop_* | 정지 | ||||
| btn_play_* | 실행 | ||||
| btn_prev_* | 이전 | ||||
| btn_next_* | 다음 | ||||
| btn_up_* | 위로 | ||||
| btn_down_* | 아래로 | ||||
| btn_zip_* | 우편코드찾기 | ||||
| btn_go_* | 페이지 이동 | ||||
| btn_refresh_* | 새로고침 | ||||
| btn_open_* | 열기 | ||||
| btn_close_* | 닫기 | ||||
| btn_zoom_* | 확대 | ||||
| btn_reduction_* | 축소 | ||||
| btn_spread_* | 펼치기 | ||||
| btn_unfold_* | 접기 | ||||
| btn_lock_* | 잠금 | ||||
| btn_unlock_* | 해제 | ||||
| 박스 | bx_* | bx_*_top | 상단 | 상자의 선과 모서리 표현. | 배경 |
| bx_*_mid | 중앙 | ||||
| bx_*_btm | 하단 | ||||
| bx_*_lt | 좌상단 | ||||
| bx_*_rt | 우상단 | ||||
| bx_*_lb | 좌하단 | ||||
| bx_*_rb | 우하단 | ||||
| 블릿 | bu_* | bu_square | 사각 | 의미를 포함하지 않는 장식적 bullet/icon 표현. | 배경 |
| bu_circle | 원형 | ||||
| bu_arrow | 화살 | ||||
| bu_star | 별 | ||||
| 아이콘 | ico_* | ico_num* | 숫자 | 의미를 포함하는 장식적 icon 표현. | 전경 |
| ico_english_* | 영문 | ||||
| ico_korean_* | 한글 | ||||
| ico_japanese_* | 일어 | ||||
| ico_chinese_* | 중어 | ||||
| ico_attention | 주의 | ||||
| ico_up | 상향 | ||||
| ico_down | 하향 | ||||
| ico_point_star | 별점 | ||||
| ico_star | 별 | ||||
| ico_new | 신규 | ||||
| ico_update | 업데이트 | ||||
| ico_reply | 댓글 | ||||
| ico_target_blank | 새창 | ||||
| 선 | line_* | line_h | 수평 | 보통 콘텐트를 구분하기 위한 목적의 실선 또는 점선. | 배경 |
| line_v | 수직 | ||||
| line_s | 슬래시 | ||||
| line_bs | 역슬래시 | ||||
| line_h_dot | 수평 점선 | ||||
| line_v_dot | 수직 점선 | ||||
| 배경 | bg_* | bg_body | 전체 | 블릿, 버튼, 선 종류 이외의 배경처리 이미지. 보통 일러스트. | 배경 |
| bg_head | 상단 | ||||
| bg_container | 콘테이너 | ||||
| bg_spot | 스팟 | ||||
| bg_footer | 풋터 | ||||
| bg_lnb | 로컬 네비게이션 | ||||
| 상태변화 | *_off *_over *_on |
tab_*_off | 비활성 | 비활성/오버/활성 상태에 대한 표현. | 전경/배경 |
| tab_*_over | 오버, 포커스 | ||||
| tab_*_on | 활성 | ||||
| 광고 | ad_* | ad_* | 광고 | 모든 종류의 배너 광고. | 전경 |
| 임시 | @* | @thumb | 썸네일 | 통상 DB에서 불러오게되는 임시 이미지 요소. | 전경 |
| @photo | 사진 | ||||
| @ad | 광고 | ||||
5. Image 네이밍 가이드
▲Top
-
- 명명 순서 :
- 큰 범주의 분류에서 작은 범주의 분류 순으로 명명합니다. 분류는 가급적 3단계를 초과하지 않도록 합니다. '대분류_중분류_소분류' 또는 '형태-의미-상태' 순으로 명명합니다.
on_recommend_tab1.gif (X)
tab1_recommend_on.gif (O) 탐색기에서 탭메뉴끼리 정렬되므로 빠르게 찾을 수 있습니다
-
- 단어 선택 :
- 최대한 직관적이어야 하고 짧을수록 좋습니다. 가능하다면 이미지의 대체텍스트 역할을 수행할 수 있는 네이밍을 우선적으로 고려합니다.
btn.gif (X) 어떤 의미의 버튼인지 직관성이 떨어집니다
btn_search_naver_mail.gif (X) 직관적이지만 지나치게 깁니다
bnms.gif (X) 너무 짧아서 의미를 유추하기 어렵습니다
btn_search_mail.gif (O) 적당히 짧으면서도 직관적입니다
-
- 허용 문자 :
- 영문 소문자(abc)와 숫자(123) 및 언더바(_) 사용이 가능합니다. 영문 대문자 및 기타 언어와 특수문자는 사용하지 않습니다.
Btn_Search.gif (X) 대문자가 사용되었습니다
btn-search.gif (X) 언더바 이외의 특수문자가 사용되었습니다
btn_search.gif (O)
-
- 조합 규칙 :
- '단어+단어', 또는 '숫자+숫자'는 언더바(_)로 조합합니다. 단어와 숫자를 조합하는 경우 언더바(_)는 생략합니다.
tab1recommendon.gif (X) 단어 사이를 언더바로 조합하지 않아서 판독성이 떨어집니다
tab_1_recommend_on.gif (X) 단어와 숫자 사이의 언더바가 생략되지 않았습니다
tab1_recommend_on.gif (O) 단어 사이는 언더바로 조합하고 단어와 숫자 사이의 언더바는 생략 하였습니다
-
- 숫자 규칙 :
- 숫자로는 시작할 수 없으며 숫자의 증가는 "1" 부터 시작됩니다. 숫자가 없는 단어는 통상 "1" 이라는 숫자가 생략된 것으로 간주합니다. 단, "01" 형식으로 시작되는 예외상황도 있을 수 있습니다.
1btn_search.gif (X) 숫자로 시작되어 이미지의 용도와는 관계없이 탐색기에 정렬됨
num01.gif (△) 클래스 이름을 이용한 스크립트 작성시 1~9까지 예외적으로 "0"을 추가해야 하므로 구현 이슈 발생하나 예외상황 허용
btn_search1.gif (O) 동일한 의미를 지닌 이미지가 여러개인 경우 숫자를 붙여서 구분 합니다
btn_search.gif (O) 동일한 의미를 지닌 이미지가 없다면 숫자는 생략 합니다
6. Update History
▲Top
- 08.02.14 : id/class 선택자 선언 규약 일부 수정
- 08.03.05 : id/class 선택자 선언 규약에 예제보기 추가