[웹퍼블리싱] 클래스, id 이름 짓기: 네이밍 컨벤션 (Naming Convention)

 Naming Convention 이란?

 다양하고 많은 사람이 개발에 참여할 때 작업 효율화를 위해 가장 중요한 것 중의 하나가 바로, 사전에 약속한 규칙에 따라 이름을 정하는 것입니다. 같은 규율 내에서 진행하여 작업 속도를 높이고자 하는 것이기에 필수라고 말할 수는 없으나 권장되는 방식입니다. 회사 및 커뮤니티마다 조금씩 다른 방식을 취하고 있습니다만 큰 맥락은 비슷한 경우가 많습니다.

 

 아래로는 절대적이기 보다 많이 사용하는 내용에 대해 기입해두었으니 참고하는 방향으로 봐주시기 바랍니다.

 

 HTML/CSS - ID & Class

• 영어, 숫자, 특수문자 중 일부만 인식이 가능하다. id는 전체에서 1개만 사용 가능하다. [필수]

• 첫 시작에는 가능한 문자로 시작하고, 숫자, 특수문자, 대문자의 사용은 지양한다.

2listContent ( x )

listContent2 ( o )

 

• prefix, subfix, suffix의 사용을 권장한다. (접두어, 접미어 등)

• 띄어쓰기가 필요한 부분에는 다음 문자의 앞글자를 대문자로 사용하거나 언더바를 사용한다.

id="boardView" class="linkView"

id="board_view" class="link_view"

 

• 위치, 역할, 형태를 조합하며 상태(ex.on/off)에 대한 부분도 필요 시 추가한다. 내용이 많아질 경우, 위치와 상태를 나누어 클래스를 2개로 작성한다.

applyBtnOn, replyWrap, replyOpen

apply_btn_on, reply_wrap, reply_open

 

 

 

 Java Script

• 가능한 1줄에 명령 하나만을 적는다.

• 코드 명령이 다 끝나면 세미콜론( ; )을 표시한다.

• Operators( = + - * / )의 앞, 뒤와 컴마( , )  뒤로는 가능한 띄어쓰기를 1칸을 붙인다.

var x = y + z;

var values = [ "Volvo", "Saab", "Fiat" ];

 

• 여는 중괄호는 앞에 한 칸 띄어쓰기를 붙인다.

• 코드 내용에 따라 들여쓰기 해야 하는 부분에는 Tab키를 사용한다.

• 변수명, 함수명은 영문으로만 입력한다. 띄어쓰기가 필요한 경우 대문자로 구분한다.

 

• Complex/compound statement를 사용한 경우, 중괄호 안의 내용은 다음 줄부터 작성한다.

• 닫는 중괄호는 새로운 줄로 내리고 끝에 세미콜론( ; )을 붙이지 않는다.

• 블록 내용이 1줄이라도 중괄호로 감싼다.

function toCelsius(fahrenheit) {     return (5 / 9) * (fahrenheit - 32); }

if (time < 20) {     greeting = "Good day"; } else {     greeting = "Good evening"; }

 

• Object(객체)에서는 속성과 값을 하나의 줄에 각자 써주며 끝에 컴마( , )로 구분한다.

• 콜론( : )의 뒤에는 띄어쓰기를 1칸 붙인다.

• 마지막 속성&값 끝에는 컴마( , )를 붙이지 않는다.

• Object의 경우, 닫는 중괄호는 새로운 줄로 내리고 끝에 세미콜론( ; )을 붙인다.

• 객체 속성&값이 1개인 경우에도 줄을 나누어 작성한다.

var person = {   firstName: "John",   lastName: "Doe",   age: 50,   eyeColor: "blue" };

 

 Prefix, Subfix, Suffix

 

공통적으로 많이 사용되는 영역 분류

분류	Naming	부가설명
첫 페이지	index	홈페이지 첫 페이지 명칭
전체 영역	wrap	페이지를 감싸는 전체영역
머리글	header	머리글 영역
본문	content	본문 영역
바닥글	footer	바닥글 영역

 

분류별 prefix

분류	prefix	부가설명
타이틀	title, tit	일반적인 타이틀
영역	section, sec	제목 태그(Heading Tag)를 지닌 영역 구분 (선택적 사용, 중첩사용 지양)
	wrap	일반 영역의 묶음 (선택적 사용, 중첩사용 지양)
	inner, inn	부모 wrapper 가 존재하며 자식 묶음이 단독으로 필요한 경우
내비게이션	gnb	서비스 전체 내비게이션 Global Navigation Bar
	lnb	지역 내비게이션(gnb 영역) Local Navigation Bar
	snb	사이드 내비게이션(좌측메뉴) Side Navigation Bar
탭	tab
테이블	table, tbl
목록	list	일반 목록(ul, ol, 리스트 형식의 dl)
	itm	목록의 하나하나 (li, dd 등)
폼	tf	textfield (input 타입 text / textarea)
	inp	input 타입 radio, checkbox, file 등
	opt	selectbox
	label, lab
	fld	fieldset
버튼	btn
박스	box
아이콘	ico
선	line방향	ex) lineUp, lineDashDown, lineDotLeft
배경	bg
썸네일	thumb
페이징	paging
배너	bnr, banner
텍스트	txt	일반 텍스트
	num
	copyright, copy
	time	날짜 및 시간
강조	emph
링크	link	일반 링크
	linkMore	더 보기 링크
순서	fst, mid, lst	first, middle, last
팝업	popup
레이어	layer
광고	ad
스페셜	spe	검색 스페셜 용도
위젯	widget소재명
상세내용	desc	description
댓글	cmt	comment

 

분류별 subfix

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

 

분류별 suffix

분류	suffix	부가설명
상태변화	on, off, over, hit, focus
위치	top, mid, bot, left, right
순서	fst, lst
이전/다음	prev, next
대체 텍스트	ir_pm	image 대체텍스트 용도(text-indent)
	ir_wa	image 대체텍스트 용도(z-index)
	screen_out	숨김 텍스트 용도(absolute)
	screen_hide	숨김 텍스트 용도(visibility)