본문 바로가기
www/CSS_tip

CSS naming 규칙

by 랭님 2015. 1. 4.

naming 규칙

공통규칙
  • naming의 첫 시작에 숫자, 특수문자, 대문자의 사용은 지양한다.
    1. ex) 2list_notice ( x )
    2. list_notice2 ( o )
  • naming은 '형태_의미_상태' 순서로 조합하며, 3단계를 넘어가지 않도록 권장한다.
    1. ex) btn_apply_on, box_news, box_reply_open 등
  • naming 정의 시 prefix, subfix, suffix를 최대한 활용한다.
id/class 규칙
  • id는 camelcase 방식으로 하며, class는 underscore 방식으로 사용한다.
    1. ex) id="boardView" class="link_view"
  • id는 화면에서의 고유 기능을 명시하도록 naming 한다.
    1. ex) id="btnSearch" ( x )
    2. id="btnGnbSearch" ( o )
  • class는 요소 기능을 표현하도록 naming한다.
  • id는 문서 내 한 번만 사용되며, id, class naming은 가급적 같지 않게 naming 한다.
folder/file 규칙
HTML

대, 중 프로젝트 경우

  • 서비스의 대분류에 따라 폴더를 생성하고 대분류의 폴더 안에 HTML 파일을 생성한다.
  • 생성되는 HTML의 파일명은 '의미_상태'의 순서로 네이밍한다.(상태는 필요에 따라 사용)
    1. ex) /대분류명/notice.html
    2. /대분류명/notice_view.html

소 프로젝트 경우

  • 따로 폴더를 생성하지 않고 HTML 파일 한곳에 생성한다.
  • 생성되는 HTML의 파일명은 'serviceName_의미_상태'의 순서로 네이밍한다.
    1. ex) /serviceName_intro.html
    2. /serviceName_intro_write.html
CSS

대, 중 프로젝트 경우

  • 공통요소 모음인 common.css 가 서비스별로 생성되며, 서비스의 대분류에 따라 서비스명_대분류 명으로 CSS의 name을 만들어 사용한다.
    1. ex) common.css, serviceName_intro.css
  • 각 서비스페이지에 import 되는 css는 common.css, serviceName_대분류명.css가 되며 2개 이하로 import 되도록 한다.

소 프로젝트 경우

  • 공통요소모음인 common.css 하나만 생성하여 사용한다.

프로모션프로젝트의 경우

  • 페이지 내 head 사이에 internal 방식으로 style을 추가한다.
images

대, 중 프로젝트 경우

  • images 폴더를 생성하고 common폴더 및 대분류별 폴더가 생성되며 그 하위에 관련 image들이 저장된다.
    1. ex) images/common/btn_comm.gif
    2. images/대분류명/intro_music.gif

소 프로젝트 경우

  • images 폴더에 모두 생성하며, 임시 image 사용 시 temp 폴더만 생성한다.

사용되는 image 중 운영성 image 또는 임시 image는 temp 폴더를 생성하여 그 안에 위치시킨다.

image 서버에 올라간 image를 수정 시 덮어쓰기는 하지 않고, 다른 이름으로 image 파일을 만드는데, image 수정네이밍은 '기존네이밍_수정날짜'로 네이밍하며, 같은 날짜에 한 image 파일을 두 번 수정하게 되는 경우는 '기본네이밍_수정날짜_v2'로 네이밍하며 숫자로 카운팅한다.

  1. ex) btn_apply (기존)
  2. btn_apply_110922 (수정)
  3. btn_apply_110922_v2 (재수정)

prefix/subfix/suffix 정의

후보자
  • 접두사를 의미하는 것으로, 앞부분에 사용하며, 주로 형태를 나타내는 데 사용된다.
    1. ex) tab_notice, tbl_product 등
  • 기본 프리픽스는 형태별로 통일한다.
  • 서브 프리픽스가 필요한 부분은 underscore로 구분하여 표기한다 (line / line_dot)
  • 프리픽스 리스트에 한해 subfix, suffix에서 축약형 네이밍 사용한다 (이외 네이밍은 의미전달 가능하도록 기재)
  • prefix 2개 이상 중복 시 기능적인 prefix가 맨 앞부분에 위치할 수 있도록 한다.
  • 단독사용 클래스는 지양하며 prefix를 조합한 형태로 작성한다. 예외:fst, lst, hide, on
  • on 클래스인 경우, 단일 특정요소에 상태변화 클래스를 적용한다면 suffix로서 적용한다.
분류별 Prefix 부가설명
분류prefix부가설명
타이틀tit일반적인 타이틀
영역section제목 태그(Heading Tag)를 지닌 영역 구분 (선택적 사용, 중첩사용 지양)
wrap일반 영역의 묶음 (선택적 사용, 중첩사용 지양)
inner부모 wrapper 가 존재하며 자식 묶음이 단독으로 필요한 경우
내비게이션gnb서비스 전체 내비게이션
lnb지역 내비게이션(gnb 영역)
snb사이드 내비게이션(좌측메뉴)
tab
테이블tbl
목록list일반 목록(ul, ol, 리스트 형식의 dl)
tftextfield (input 타입 text / textarea)
inpinput 타입 radio, checkbox, file 등
optselectbox
lab label
fldfieldset
버튼btn
박스box
아이콘ico
line_방향일반 실선
line_dot_방향점선
배경bg
섬네일 이미지thumb
페이징paging
배너bnr/banner
텍스트txt일반 텍스트
txt_bar구분선 텍스트
numex) 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
대체 텍스트 / 예약어

대체텍스트 제공을 위한 여러 기법별 공용 클래스명 정의

예약어는 미리 정의된 네임을 사용하는 것으로 레이아웃 같은 경우에 주로 사용된다.

분류별 subfix 부가설명
분류클래스명부가설명
대체 텍스트ir_pmimage 대체텍스트 용도(text-indent)
ir_waimage 대체텍스트 용도(z-index)
screen_out숨김 텍스트 용도(absolute)
screen_hide숨김 텍스트 용도(visibility)
예약어daumIndex웹접근성용바로가기 영역
daumWrap페이지를 감싸는 전체영역
daumHead머리글 영역
daumContent본문 영역
daumFoot바닥글 영역