Naming 가이드

공통규칙

naming의 첫 시작에 숫자, 특수문자, 대문자의 사용은 지양한다.

(역활_이름)-(영역, 리스트)-(상태, 순번) 순으로 정의

"역활"과 "이름"은 "_"로 구분

(역활_이름), (영역, 리스트), (상태, 순번)는 예외 상황을 제외 하고 (*_*)둘중 한가지씩 만 사용 하는것을 먼저 고려한다.

조합시 "-" 은 최소로 사용 하는 것 을 지향한다.

이름 짓기

"역활"과 "이름" : btn, tab, tit, desc, nav, bg, gnb, lnb, snb, pop, popup / 이름

"영역"과 "리스트" : wrap, area, inner, box, section, article, aside / list

"상태"과 "순번" : 카운드 숫자, on, off, over, active

이미지 네이밍 설명 및 축약

축약 & 예약	설명
layout
#wrap	페이지(#heaer, #container, #footer)전체
#header	로고를 포함한 상단 영역
#container	#heaer, #footer를 제외한 영역
#contents	처음 컨텐츠가 시작하는 영역, "#container" 안에 바로 컨텐츠가 시작되는 구조면 "#contents"가 대신 할 수 있다.
#footer	copyright를 포함한 하단 영역
*-wrap_*	컨텐츠를 감싸고있는 영역(wrapper)
*-area_*	wrap 보다 작은 역역
*-box_*	area 보다 작은 역역
*-head_*	컨텐츠 상단
*-body_*	컨텐츠 몸통
*-footer_*	컨텐츠 하단
*-inner_*	*-wrap, *-box 등 안을 감싸는 영역
*-aside_*	주요 컨텐츠 외 남은 영역
*-section_*	컨턴츠 분할 영역
*-article_*	기사 나
gnb_*	최상위 공통 네비게이션(Global Navigation Bar)
lnb_*	현재 서비스 지역(Local Navigation Bar)
snb_*	gnb, lnb,를 제외한 사이드 메뉴 (Side Navigation Bar)
컨텐츠 구성요소
util	유용한 메뉴(utility), user_menu, other_menu
search	검색 영역
account	계정, 로그인 영역
location	현재 페이지 위치
kv	페이지내에 상단쪽에 위치하는 상징적인 비주얼 요소(Key Visual)
thumb	페이지내에 상단쪽에 위치하는 상징적인 비주얼 요소(thumbnail)
tit	타이틀 (title)
desc	내용 서술 (description)
dfn	용어 설명,정의 (defining)
list	ul, ol, dl 테그 리스트 임을 명시한다. (.tab_list, item_list)
quickmenu	바로가기 처럼 자주가는 페이지 접근하는 메뉴
forms	form 테그 임을 명시한다. (.tab_list, item_list)
tooltip	팝업형태의 짧은 설명
qna	질문과 답변 (Question and Answer)
notice, news	공지사항 , 뉴스
alert	경고
banner	사이트 내 광고
ad	사이트 외 광고(advertisement)

예약어 규칙

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	우하단
bul_*	bul_square	사각	의미를포함하지않는장식적bullet/icon 표현.	배경
	bul_circle	원형
	bul_circle	화살
	bul_star	별
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	활성
	tab_*-(0~99)	순번
@*	@thumb	썸네일	통상 DB에서 불러오게되는 임시 이미지 요소	전경
	@photo	사진
	@ad	광고