Naming Guide

다양하고 많은 사람이 개발에 참여할 때 작업 효율화를 위해 가장 중요한 것 중의 하나가 바로, 사전에 약속한 규칙에 따라 이름을 정하는 것입니다. 본 Naming Guide는 크게 "Naming 규칙"과 "Prefix/Subfix/Suffix 정의" 두 부분으로 나뉩니다. 먼저 Naming 규칙에서는 CSS와 HTML 및 각종 파일, 디렉토리들의 공통된 네이밍 규칙에 대해 정리합니다. 그리고 Prefix/Subfix/Suffix 규칙에서는 다양한 개발환경에 대비한 예약단축어들을 소개하며 이를 조합하는 방식에 대해 설명합니다.

 

prefix/subfix/suffix 정의

후보자

• 접두사를 의미하는 것으로, 앞부분에 사용하며, 주로 형태를 나타내는 데 사용된다.
  1. ex) tab_notice, tbl_product 등

prefix

분류별 Prefix 부가설명

분류	prefix	부가설명
타이틀	tit	일반적인 타이틀
영역	section	제목 태그(Heading Tag)를 지닌 영역 구분 (선택적 사용, 중첩사용 지양)
	wrap	일반 영역의 묶음 (선택적 사용, 중첩사용 지양)
	inner	부모 wrapper 가 존재하며 자식 묶음이 단독으로 필요한 경우
내비게이션	gnb	서비스 전체 내비게이션
	lnb	지역 내비게이션(gnb 영역)
	snb	사이드 내비게이션(좌측메뉴)
탭	tab
테이블	tbl
목록	list	일반 목록(ul, ol, 리스트 형식의 dl)
폼	tf	textfield (input 타입 text / textarea)
	inp	input 타입 radio, checkbox, file 등
	opt	selectbox
	lab label
	fld	fieldset
버튼	btn
박스	box
아이콘	ico
선	line_방향	일반 실선
	line_dot_방향	점선
배경	bg
섬네일 이미지	thumb
페이징	paging
배너	bnr/banner
텍스트	txt	일반 텍스트
	txt_bar	구분선 텍스트
	num	ex) num1, num2, ... - 숫자 사용 시 언더바(underscore) 사용 X
	copyright
	time	날짜 및 시간
강조	emph
링크	link	일반 링크
	link_more	더 보기 링크
순서	fst, mid, lst
팝업	popup
레이어	layer
광고	ad
스페셜	spe	검색 스페셜 용도
위젯	widget_소재명
상세내용	desc
댓글	cmt

 

---

subfix

하부 기호로서 subfix는 prefix와 함께 부가설명 용도로 사용한다.

1. ex) ico_arr_news.gif

분류별 subfix 부가설명

분류	subfix	부가설명
공용	comm	전역으로만 사용
위치변화	top/mid/bot/left/right
순서변화	fst/lst
그림자	shadow
화살표	arr
버튼상태변화	nor
방향	hori/vert
카테고리	cate
순위	rank

 

---

suffix

접미사를 의미하는 것으로, prefix와 함께 부가설명 용도로 사용하며 주로 상태를 나타내는 데 사용된다.

1. ex) btn_confirm_on, btn_prev 등

분류별 subfix 부가설명

분류	suffix
상태변화	_on / _off / _over / _hit / _focus
위치변화	_top / _mid / _bot / _left / _right
순서변화	_fst / _lst
이전/다음	_prev / _next