NHN Naming Guidelines (추천)
이온디
첨부파일 https://eond.com/css_naming/164013

Naming Guidelines

  1. CSS 파일 네이밍
  2. id/class 선택자 선언 규약
  3. id/class 선택자 네이밍 가이드
  4. Image 네이밍 규약
  5. Image 네이밍 가이드
  6. Update History
  • (X) 허용 안함
  • (△) 예외 허용
  • (O) 적극 권장

1. CSS 파일 네이밍

CSS 파일을 여러개로 나누는 경우 HTTP 요청이 늘어나서 웹페이지 전송속도에 좋지 않은 영향을 주게 되므로 파일의 수는 최소한으로 유지합니다. 사이트 루트 디렉토리에 /css/ 폴더를 생성하고 전역에 쓰이는 파일의 이름은 default.css 으로 지정합니다.

/css/default.css
모든 스타일을 포함하는 파일

/css/popup.css
팝업등 새로운 페이지 유형이 존재하는 경우 별도로 분리

2. id/class 선택자 선언 규약

▲Top

아 래와 같이 정형화 된 요소들에 대한 네이밍은 'id/class 선언규약'에 따릅니다. 단, 아래 예는 되도록 복잡한 상황을 재현한 것으로서 특히 #wrap, .colgroup과 같은 그룹핑은 필수적이지 않다면 제외하는 것이 바람직 합니다. 동일한 의미를 지닌 id/class 가 복수로 존재해야 하는 경우 선택자 뒤에 숫자를 붙여서 확장합니다. 예제보기.

#wrap : 감싸기
#header : 헤더
.gnb : Global Navigation Bar
.lnb : Local Navigation Bar
.search : Search Form
#container : 콘테이너
.spot : 강조하는 상위 콘텐츠
.snb : Side Navigation Bar
.account : 계정
.ad : 광고
.colgroup : 컬럼 그룹핑
#content : 본문 표시
.path : 문서 경로 표시
.article or .section
: 기사 또는 섹션 그룹핑
.article or .section
: 기사 또는 섹션 그룹핑
.aside : 곁가지
.ad : 광고

#footer : 풋터
  • #wrap :
    페이지(#header, #container, #footer) 전체를 지정 합니다.
  • #header :
    로고를 포함한 상단 영역(보통 .lnb 포함)을 지정 합니다.
  • #container :
    #header 와 #footer 를 제외한 본문 전체를 지정 합니다.
  • <address> 를 포함한 하단의 보조 네비게이션 영역을 지정 합니다.
  • .gnb :
    최 상위 공통 네비게이션(Global Navigation Bar)을 지정합니다. 보통 수평(bar)형태로 표현되며 #header 에 종속된다. 수직으로 표현되는 경우는 거의 드물지만 그러한 경우 #header 에 종속되지 않을 수도 있습니다.
  • .lnb :
    현 재 서비스의 지역(Local Navigation Bar) 네비게이션을 지정 합니다. 보통 수평(bar)형태로 표현되며 #header 에 종속된다. 수직으로 표현되는 경우는 거의 드물지만 그러한 경우 #header 에 종속되지 않을 수도 있습니다.
  • .search :
    현재 페이지의 주요 검색영역을 지정합니다.
  • .snb :
    .gnb, .lnb 를 제외한 측면(Side Navigation Bar) 네비게이션 영역을 지정합니다. 보통 #container 에 종속되고 수직으로 표현되지만 수평으로 표현되는 경우도 있으므로 #header 에 종속되는 등 예외의 경우도 있을 수 있습니다.
  • .account :
    로그인 폼 및 로그인 후 개인 계정을 표시하는 영역을 지정합니다.
  • .colgroup :
    컬럼 형태의 내용블럭을 그룹핑 합니다.
  • #content :
    반드시 #container 내부에 종속되며 보통의 경우 .snb 영역과 .aside 영역을 제외한 핵심 콘텐츠 영역을 지정합니다.
  • .aside :
    문서의 주요 부분을 표시하고 남은 콘텐츠 영역(곁가지 메뉴 따위)을 지정합니다.
  • .spot :
    강조하는 상위 콘텐츠이며 항상 #container 에 종속될 필요는 없습니다.
  • .path :
    현재 페이지의 경로를 지정합니다. 보통 #container 또는 #content 에 종속됩니다.
  • 네 비게이션 요소를 지정합니다. .gnb, .lnb, .snb 등 어떤 영역 내부에 하나 또는 복수의 네비게이션 요소가 존재할 때 .*nav* 클래스를 지정합니다. '*' 표시는 다른 단어 또는 숫자와 조합할 수 있다는 의미 입니다.
  • .*section* :
    콘텐츠를 분할하거나 그룹핑 하는 블럭 입니다. 보통 #content 내부에 배치한 다음 heading 태그(h1~h6)와 함께 사용하는 것을 권장합니다. '*' 표시는 다른 단어 또는 숫자와 조합할 수 있다는 의미 입니다.
  • .article :
    기사 또는 포스트와 같이 기술된 내용의 콘텐츠를 지정합니다.
  • .ad :
    광고 또는 배너를 지정합니다.
  • etc :
    여기서 기술하지 않은 id/class 네이밍은 이하 'id/class 생성 및 네이밍 가이드'에 따릅니다.

3. id/class 선택자 네이밍 가이드

▲Top
  • id는 화면을 분할 하거나 동적 UI를 구현해야 하는 경우에만 생성합니다. id사용이 필수적으로 요구되지 않는 요소는 class를 생성합니다.
  • 영문 소문자만 사용 가능하며 숫자언더바(_) 사용이 가능합니다. 영문 대문자 및 기타 언어와 특수문자는 사용하지 않습니다.
  • 가능하다면 의미에 적합하고 직관적인 하나의 단어를 사용하고, 화면 배치 또는 시각적 효과를 의미하는 단어의 선택은 지양합니다.
  • 2개 이상의 단어를 조합하는 경우 언더바(_)로 연결합니다. 단어와 숫자를 조합하는 경우 언더바(_)를 생략합니다.
  • 숫자로 시작할 수 없으며 숫자의 증가는 "1" 부터 시작됩니다. 숫자가 없는 단어는 통상 "1" 이라는 숫자가 생략된 것으로 간주합니다.
    .nav01 (X) 클래스 이름을 이용한 스크립트 작성시 1~9까지 예외적으로 "0"을 추가해야 하므로 구현 이슈 발생
    .nav1 (O)
  • 두문자어 또는 약어를 사용하더라도 직관적으로 이해할 수 있는 경우 단어를 축약할 수 있습니다.
  • 보편적인 이름을 지닌 class는 항상 충돌 가능성이 존재하므로 가급적 부모 선택자에 종속 시킵니다.
    (△) .more 라는 클래스 이름을 더 이상 사용할 수 없음
    .more {...}

    (O) .more 라는 클래스 이름을 여러번 재 사용할 수 있음
    .section .more {...}
    .aside .more {...}
  • 모든 영역에 동일한 표현으로 재 사용되는 전역 스타일인 경우 다른 선택자에 종속시키지 않습니다.
    .gnb fieldset{border:none;} (△) 전역 스타일을 특정 영역에 종속시켜 재 사용성이 떨어짐
    fieldset{border:none;} (O) 보통의 경우 fieldset을 이용하여 border를 표현하지 않으므로 어떤 선택자에도 종속시키지 않음

4. Image 네이밍 규약

▲Top

아 래 제시된 종류의 이미지 이름들은 각각의 목적에 맞는 형태로 사용될 수 있도록 예약되어 있습니다. 아래 표현들은 다른 목적으로 사용하거나 독창적인 형태로 변형하여 사용하지 않습니다. "*" 표시는 해당 이미지의 의미나 상태를 가장 잘 표현할 수 있는 단어로 치환하거나 또는 생략할 수 있습니다. 네이밍의 순서는 '대분류-중분류-소분류' 또는 '형태-의미-상태' 순입니다. 동일한 용도의 이미지가 여러개인 경우 마지막 단어에 숫자를 붙여서 다르게 네이밍 합니다.

분류 예약어 설명 권장표현
형태 형태+의미+상태
제목 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 우하단
블릿 bu_* bu_square 사각 의미를 포함하지 않는 장식적 bullet/icon 표현. 배경
bu_circle 원형
bu_arrow 화살
bu_star
아이콘 ico_* ico_num* 숫자 의미를 포함하는 장식적 icon 표현. 전경
ico_english_* 영문
ico_korean_* 한글
ico_japanese_* 일어
ico_chinese_* 중어
ico_attention 주의
ico_up 상향
ico_down 하향
ico_point_star 별점
ico_star
ico_new 신규
ico_update 업데이트
ico_reply 댓글
ico_target_blank 새창
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 활성
광고 ad_* ad_* 광고 모든 종류의 배너 광고. 전경
임시 @* @thumb 썸네일 통상 DB에서 불러오게되는 임시 이미지 요소. 전경
@photo 사진
@ad 광고

5. Image 네이밍 가이드

▲Top
  • 명명 순서 :
    큰 범주의 분류에서 작은 범주의 분류 순으로 명명합니다. 분류는 가급적 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) 단어 사이는 언더바로 조합하고 단어와 숫자 사이의 언더바는 생략 하였습니다
  • 숫자 규칙 :
    숫자로는 시작할 수 없으며 숫자의 증가는 "1" 부터 시작됩니다. 숫자가 없는 단어는 통상 "1" 이라는 숫자가 생략된 것으로 간주합니다. 단, "01" 형식으로 시작되는 예외상황도 있을 수 있습니다.
    1btn_search.gif (X) 숫자로 시작되어 이미지의 용도와는 관계없이 탐색기에 정렬됨
    num01.gif (△) 클래스 이름을 이용한 스크립트 작성시 1~9까지 예외적으로 "0"을 추가해야 하므로 구현 이슈 발생하나 예외상황 허용
    btn_search1.gif (O) 동일한 의미를 지닌 이미지가 여러개인 경우 숫자를 붙여서 구분 합니다
    btn_search.gif (O) 동일한 의미를 지닌 이미지가 없다면 숫자는 생략 합니다
코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 14 articles in 1 / 1 pages
번호 제목 제목 글쓴이 글쓴이 날짜날짜 조회 수
공지 CSS 및 이미지 네이밍에 관심있으신 분은 같이 참여해주세요. :) 이온디 2009/01/22 8350
13 [CSS] Get BEM 이온디 2018/12/01 39
12 [CSS] What’s in a name? A CSS naming convention overview 이온디 2018/12/01 61
11 [CSS] #tnb (Top Navigation Bar) [1] 이온디 2015/04/27 697
10 [CSS] What Makes For a Semantic Class Name? 이온디 2013/03/01 3811
9 [CSS] 레이아웃 네이밍 가이드 [6] 이온디 2012/01/19 5923
8 [사이트 전반] HTML 마크업 설계 템플릿(한혜진) 파일 이온디 2010/11/03 7610
7 SideNavigationBar (x) 이온디 2009/02/21 5494
현재글 [CSS] NHN Naming Guidelines (추천) 이온디 2009/01/20 6295
5 NHN UI(html, css) 하드코딩 기본룰 파일 이온디 2009/01/20 6968
4 css 네이밍 규칙 [7] 이온디 2009/01/20 11830
3 [CSS] 모든 디자이너가 해야할 9가지 CSS 원칙 (추천) 이온디 2009/01/19 6892
2 CSS 네이밍 이온디 2009/01/14 5621
1 웹 개발자를 위한 네이밍 룰(Naming Rule) 가이드 (최현진, 2002년) 파일 이온디 2003/11/14 9416

해시태그 디렉터리