본문 바로가기
Publishing

Naming Guide

by 오다다의 이상한 코드 odada 2020. 11. 11.
다양하고 많은 사람이 개발에 참여할 때 작업 효율화를 위해 가장 중요한 것 중의 하나가 바로, 사전에 약속한 규칙에 따라 이름을 정하는 것입니다. 본 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

 

'Publishing' 카테고리의 다른 글

체크리스트  (0) 2020.11.11
Image Guide  (0) 2020.11.11
Naming Guide  (0) 2020.11.11
IR 기법  (0) 2020.11.11
CSS Convention  (0) 2020.11.11
HTML Elements  (0) 2020.11.11

댓글0