css 에서 class 네이밍 규칙

방식 1.

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

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

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

#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)

 

 

 

방식 2.

CSS 레이아웃 예약어

#header	헤더영역
#footer	풋터영역
#container	콘텐츠 전체 영역 (#snb + #content)
#content	서브 콘텐츠 영역
#gnb	사이트 전체 서비스 링크 (home | notice | contact us | admin )
#lnb	사이트 로컬메뉴 링크 (회사소개 제품소개 온라인문의 커뮤니티)
#snb	사이트 로컬메뉴 페이지 링크 (인사말, 회사연혁, 오시는길 등 서브메뉴)
.nav	각영역별 네비 활용시 ( #footer .nav / #content .introduce .nav 등 )
.visual	메인 및 서브페이지 상단 비주얼 영역

네이밍 단어집

분류	prefix	부가설명
타이틀	title	일반적인 타이틀
영역	section	제목 태그(Heading Tag)를 지닌 영역 구분 (선택적 사용, 중첩사용 지양)
	wrap	일반 영역의 묶음 (선택적 사용, 중첩사용 지양)
	inner	부모 wrapper 가 존재하며 자식 묶음이 단독으로 필요한 경우
내비게이션	nav	서비스 전체 내비게이션
	lnb	지역 내비게이션(gnb 영역)
	snb	사이드 내비게이션(좌측메뉴)
탭	tab
테이블	table
목록	list	일반 목록(ul, ol, 리스트 형식의 dl)
버튼	btn
박스	box
아이콘	ico
선	line_방향	일반 실선
	line_dot_방향	점선
배경	bg
섬네일 이미지	thumb
페이징	paging
배너	banner
텍스트	text	일반 텍스트
	text_bar	구분선 텍스트
	num	ex) num1, num2, ... - 숫자 사용 시 언더바(underscore) 사용 X
	copyright
	time	날짜 및 시간
팝업	popup
레이어	layer
광고	ad
상세내용	desc
이미지	img	image
사진	pic	picture
댓글	cmt
들여쓰기	indent

상태별 접미사

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