공통 파일 네이밍

• 영문 소문자와 숫자 및 하이픈을 사용하고 대문자 및 특수문자, 공백을 사용하지 않는다.
• 모든 파일은 소문자로 작성하고 최대한 직관적이고 3단계(xxx-xxx-xxx.jpg)를 초과하지 않도록 작성한다.
• 큰 범주의 분류에서 작은 범주의 분류 순으로 작성하며, '대분류-중분류-소분류' 또는 '형태-의미-상태' 순으로 명명한다.
• 모든 폴더는 index.html 파일을 포함하도록 한다.
• 사이트는 논리적, 상속적인 방법으로 조직되어야 한다. 한 디렉토리에 모든 파일을 넣지 않는다.
• 파일이름에 공백을 사용하지 않는다.
• 같은 그룹의 페이지들은 같은 단어나 문자열로 파일이름을 시작한다.
  (ex: rsupport-view, rsuupport-call, rsupport-help)

폴더 네이밍

폴더의 경우 해당 프로젝트의 기준을 우선시 하며 아래 네이밍은 프로젝트의 기준이 명확하지 않을 때 사용한다.

아래 폴더는 /public 폴더 아래에 위치한다.

• 이미지 파일은 /img
• javascript 파일은 /js
• css 파일은 /css

CSS 파일 네이밍

CSS 파일을 여러개로 나누는 경우 HTTP 요청이 늘어나서 웹페이지 전송속도에 좋지 않은 영향을 주게 되므로 파일의 수는 최소한으로 한다. /public/css/ 폴더를 생성하고 전역에 쓰이는 파일의 이름은 default.css으로 지정합니다. 메뉴 섹션(또는 카테고리)별로 파일을 분리하는 것이 효율적이라고 판단되는 경우 default.css와 함께 섹션별로 *.css 파일을 추가하는 것이 가능하다.

• /css/layout-style.css 전역 레이아웃 스타일을 포함하는 파일
• /css/main.css 지역 스타일을 포함하는 파일
• /css/board.css

Image 네이밍 가이드

명명 순서

큰 범주의 분류에서 작은 범주의 분류 순으로 명명합니다. 분류는 가급적 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) 단어 사이는 하이픈으로 조합하고 단어와 숫자 사이의 하이픈은 생략하였습니다.

대, 소문자 구분

대, 소문자를 필히 구분해 이미지 네이밍을 작성한다.
Unix 계열의 OS일 경우 대, 소문자를 구분해 오류의 원인이 될 수 있다.

숫자 규칙

숫자로는 시작할 수 없으며 숫자의 증가는 "1"부터 시작됩니다. 숫자가 없는 단어는 통상 "1"이라는 숫자가 생략된 것으로 간주합니다. 단, "01" 형식으로 시작되는 예외상황도 있을 수 있습니다.

• 1btn-search.gif (X) 숫자로 시작되어 이미지의 용도와는 관계없이 탐색기에 정렬됨
• num01.gif (△) 클래스 이름을 이용한 스크립트 작성시 1~9까지 예외적으로 "0"을 추가해야 하므로 구현 이슈 발생하나 예외상황 허용
• btn-search1.gif (O) 동일한 의미를 지닌 이미지가 여러개인 경우 숫자를 붙여서 구분 합니다.
• btn-search.gif (O) 동일한 의미를 지닌 이미지가 없다면 숫자는 생략 합니다.

이미지 예약어

분류	예약어	사용 예	설명
텍스트	h[1-6]-*, h-*	h-logo.gif h1-header.gif h1-article.gif	Heading 요소에 사용한다.
	tit-*	tit-label-id.gif tit-definition-list.gif tit-table-th.gif	Heading 요소로 사용되지는 않고 문단의 강조를 나타내는 형식의 텍스트, 주로 테이블의 제목셀, dt 엘리먼트, label 엘리먼트, strong 엘리먼트에 사용
	txt-*	txt-msg.gif, txt-desc-1.gif	문단의 이미지로된 텍스트에 사용
링크요소	nav-*	nav-gnb-ko.gif nav-gnb-login.gif nav-lnb-about.gif	lnb, gnb, snb 등의 네비게이션 요소에 사용
	tab-*	tab-style-1-on.gif tab-style-1-off.gif	네비게이션 요소를 제외한 탭 메뉴 형태에 사용
	btn-*	btn-ok.gif btn-ok-2.gif btn-bg-type-1.gif	버튼 형식의 a 엘리먼트, button 엘리먼트, input[type=image] 엘리먼트 요소에 사용한다. 버튼의 이미지가 배경으로 사용하여도 btn-* 예약어를 사용
박스	box-*	box-type-1.gif box-login.gif	grouping 목적으로 사용되는 div 엘리먼트에 주로 사용
불릿	bul-*	bul-arrow.gif bul-arrow-2.gif bul-square.gif	의미가 없는 요소로 사용할 수 있는 이미지로 사용
아이콘	icon-*	icon-download.gif icon-upload.gif	의미가 있는, 설명에 대한 텍스트가 명확하지 않거나 없는 경우
상태	*-on, *-off, *-over	tab-type-1-on.gif tab-type-1-off.gif tab-type-1-over.gif	활성, 비활성, 오버/포커스 상태에 대한 표현에 사용

JS 파일 네이밍

• 예약어(Reserved Words)는 특수한 기능을 하도록 되었으므로 변수 이름 등에 사용될 수 없다.
• 이름에 사용할 수 있는 글자는 알파벳(a~z, A~Z)과 수치(0~9) 이다.
• 이름에 하이픈(-), 등호(=) 등의 기호를 사용하면 연산을 하게 되고,
  공백문자(빈칸)는 js 요소들의 구분자로 각각 다른 부분으로 해석하므로 사용할 수 없다.