본문 바로가기
UX/UI

CSS 네이밍 규칙

David.Cheon 2017. 8. 14. 21:38

네이밍 규칙

공통 규칙

공통 네이밍 규칙 예

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

파일 및 폴더

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

파일 및 폴더 네이밍 규칙 예

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

아이디(id)

아이디 네이밍 규칙 예

잘못된 예올바른 예
error_MesageerrorMesage
control_centercontrolCenter
checkbox_3checkbox-3
  • 시작의 이름은 영문 소문자를 사용하되 두 번째 단어부터 첫 번째 문자를 대문자로 처리하는 기법(카멜 케이스)을 사용한다.
  • 동일한 이름의 id는 문서에서 한번만 사용이 가능하다.
  • 지정된 레이아웃을 제외한 스타일 지정을 위하여 id를 사용하지 않는다.
  • 앵커로서 사용되는 엘리먼트는 id 지정이 가능하다.
  • User Interface 동작을 위하여 DOM 선택자로서의 id 지정은 가능하다.
  • 예약어가 있는 경우 예약어를 사용한다.

레이아웃 예약어

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

동작을 위한 DOM 선택 예약어

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

클래스(class)

클래스 네이밍 규칙 예

잘못된 예올바른 예
error-Mesageerror-mesage
control_centercontrol-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 클래스 예약어

예약어브라우저
msie6Internet Explorer6
msie7Internet Explorer7
msie8Internet Explorer8
msie9Internet Explorer9
msie10Internet Explorer10
msie11Internet Explorer11
firefoxFireFox
safariSafari
operaOpera
chromeChrome
  • 브라우저의 호환성을 및 css 핵의 사용을 최소화 하기 위하여 javascript를 이용하여 body 엘리먼트에 클래스 명을 지정한다.
  • 개발 완료시 서버사이드 언어로 브라우저 타입을 구별하여 해당 클래스 예약어를 body 엘리먼트에 적용하여야 한다.

이미지 네이밍 규칙

이미지 네이밍 규칙 예

잘못된 예올바른 예설명
on_tab_info.giftab_info_01_on.gif형태_의미_순서_상태 순서로 조합한다.
tio.giftab_info_on.gif임의로 축약하지 않는다.
tbl_type_list_02_off.giftbl_list_02_off.gif가급적 4단계 이하의 조합을 사용한다.
btn_Active.gifbtn_active.gif영문 소문자를 사용한다.
bul_square_type02.gifbul_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.gifheading 요소에 사용한다.
tit_*tit_leble_id.gif, tit_definition_list, tit_table_th.gifheading 요소로 사용되지는 않고 문단의 강조를 나타내는 형식의 텍스트, 주로 테이블의 제목셀, dt 엘리먼트, label 엘리먼트, strong 엘리먼트에 사용
txt_*txt_msg.gif, txt_desc_1문단의 이미지로된 텍스트에 사용
링크요소nav_*nav_gnb_ko.gif, nav_gnb_login.gif, nav_lnb_about.giflnb, 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.gifgrouping 목적으로 사용되는 div 엘리먼트에 주로 사용
불릿bul_*box_arrow.gif, bul_arrow_02.gif, bul_square,gif의미가 없는 요소로 사용할 수 있는 이미지로 사용.
아이콘icon_*icon_download.gif, icon_upload.gif의미가 있는 요소로 설명에 대한 텍스트가 명확한 경우
상태*_on, *_off, *_overtab_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

저작자표시비영리변경금지

'UX > UI' 카테고리의 다른 글

과업과 고객분석  (0) 2018.04.13
Life Logging에 이용되는 센서 기술  (0) 2017.11.11
CSS 네이밍 규칙  (1) 2017.08.14
레이블 시스템  (0) 2017.08.05
A brief history of web design for designers  (0) 2015.02.28
A list of Style Guides and UI Guidelines  (0) 2015.02.02

'UX/UI' Related Articles