ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • CSS 네이밍 규칙
    UX/UI 2017. 8. 14. 21:38

    네이밍 규칙

    공통 규칙

    공통 네이밍 규칙 예

    잘못된 예올바른 예설명
    Tit_pop.html
    *-hidden-obj
    03_btn_more.gif
    tit-section시작이름은 영문 대문자, 숫자, 특수문자로 시작할 수 없다.(파일 및 폴더 제외)
    cancle_btn_off_01.gif, msgbox-off-togglebtn_cancle_01_off.gif, msgbox-toggle-off네이밍의 조합은 '형태_의미_순서_상태'을 기본 순서로 사용한다.
    customerServicecustomer_service네이밍 규칙의 언더스코어(_) 조합은 파일, 폴더, 이미지에 사용한다.
    hidden_objhidden-obj네이밍 규칙의 하이픈(-) 조합은CSS 네이밍에 사용하는 것을 권장한다. HTML 문서 안에서 언더스코어(_)의 조합은 form, input 엘리먼트등의 name 어트리뷰트의 값을 사용하는 것을 권장한다. 이유는 클래스 네임이 서버사이드 스크립트의 변수와 자바스크립트의 변수 정의시 혼돈을 방지하기 위함이다.
    cyber_center_1, cyber_center_2cyber_center_01, cyber_center_021, 2과 같은 한자리 정수는 사용하지 않으며 01, 02과 같이 사용하며 사용을 권장한다. 대부분의 파일관리 유틸리티 프로그램들을 사용하여 파일의 이름으로 정렬할 때에 정렬의 순서를 보장하기 위함이다.
    box-type01, 
    box-type02, 
    box-type03
    box-type, 
    box-type02, 
    box-type03
    동일한 이름의 네이밍의 경우 가장 뒤에 숫자를 사용하여 분류지어 사용할 수 있으며 첫번째 파일은 숫자를 생략하여 사용할 수 있다.

    파일 및 폴더

    개발과 기획에서 정의된 디렉토리 구조도 및 화면 아이디가 정의가 되어있다면 그에 준한 규칙에 따라 파일 및 폴더의 이름을 사용한다.

    파일 및 폴더 네이밍 규칙 예

    분류예제설명
    Folderhtml업무별 폴더 생성가능. 00.service, 01.customer, 02.account
    html_guid마크업 가이드, 접근성가이드, 화면 목록등의 파일 및 폴더 생성 가능
    js라이브러리별 폴더 생성 가능
    css디렉토리별 폴더 생성 가능
    img네이밍별 폴더 생성 가능
    HTML0101.html화면 코드 사용(별도의 정의된 네이밍 롤이 없을 경우 사용)
    00_customer_service_list.html화면 코드, 메뉴명, 상태의 조합
    00_pop_*.html팝업 파일 사용
    00_aj_*.htmlajax 이용하여 페이지를 동적으로 사용하는 파일
    00_if_*.htmliframe 파일
    CSS00.service.css폴더명을 사용
    default.css브라우저 호환성을 위하여 기본 css 속성을 정의하며, common.css를 @import 한다.
    layout.css화면의 레이아웃 구조의 표현을 정의한 파일
    common.css전역에 쓰이는 요소의 표현을 정의하며 html의 업무별, 디렉토리별 구분하여 작성한 css 파일을 @import 한다.
    JScommon.js전역에 사용하는 스크립트를 작성한다.

    아이디(id)

    아이디 네이밍 규칙 예

    잘못된 예올바른 예
    error_MesageerrorMesage
    control_centercontrolCenter
    checkbox_3checkbox-3
    • 시작의 이름은 영문 소문자를 사용하되 두 번째 단어부터 첫 번째 문자를 대문자로 처리하는 기법(카멜 케이스)을 사용한다.
    • 동일한 이름의 id는 문서에서 한번만 사용이 가능하다.
    • 지정된 레이아웃을 제외한 스타일 지정을 위하여 id를 사용하지 않는다.
    • 앵커로서 사용되는 엘리먼트는 id 지정이 가능하다.
    • User Interface 동작을 위하여 DOM 선택자로서의 id 지정은 가능하다.
    • 예약어가 있는 경우 예약어를 사용한다.

    레이아웃 예약어

    예약어설명
    #wrapper페이지 전체 영역 그룹핑
    #header머리글 영역
    #container본문영역 그룹핑
    #content주용컨텐츠 영역
    #footer바닥글
    #popWrapper팝업 페이지 전체 영역 그룹핑
    #popHeader팝업 머리글 영역
    #popContainer팝업 본문영역 그룹핑
    #popContent팝업 주용컨텐츠 영역
    #popFooter팝업 바닥글

    동작을 위한 DOM 선택 예약어

    예약어설명
    #gnbNav글로벌 네비게이션 영역 메뉴
    #lnbNav로컬 네비게이션 영역의 메뉴
    #snbNav사이드 네비게이션 영역의 메뉴

    클래스(class)

    클래스 네이밍 규칙 예

    잘못된 예올바른 예
    error-Mesageerror-mesage
    control_centercontrol-center
    • 시작의 이름은 영문 소문자를 사용하며 두 번째 단어부터 하이픈(-)으로 연결하며 대문자는 사용하지 않는다.
    • 영문 소문자, 숫자, 하이픈(-)만 사용할 수 있다.
    • 하이픈(-)은 2개 이상의 단어를 조합할 때만 사용한다.
    • 클래스 예약어에 숫자, 영문소문자, 하이픈(-)을 조합하여 사용할 수 있다.
    • 하이픈(-)을 이용하여 3단계를 초과하여 사용하는 방법은 지양한다.
    • 숫가자 없으면 '01'이라는 숫자가 생략된 것으로 간주한다.
    • 다중의 클래시 지정을 허용하며 최대 3개 이상 사용하지 않도록 주의한다.

    기본적 클래스 예약어

    예약어설명
    .aside-*보통 보통 #container 또는 #content 에 종속 되며 켵가지 영역으로 불리기도 한다.
    .gnb최상위 공통 네비게이션(Global Navigation Bar)을 지정합니다. 보통 수평(bar)형태로 표현되며 #header 에 종속된다. 수직으로 표현되는 경우는 거의 드물지만 그러한 경우 #header 에 종속되지 않을 수도 있습니다.
    .lnb현재 서비스의 지역(Local Navigation Bar) 네비게이션을 지정 합니다. 보통 수평(bar)형태로 표현되며 #header 에 종속된다. 수직으로 표현되는 경우는 거의 드물지만 그러한 경우 #header 에 종속되지 않을 수도 있습니다.
    .nav-*gnb, lnb, snb 이외의 네비게이션을 지정합니다.
    .path현재 페이지의 경로를 지정합니다. 보통 #container 또는 #content 에 종속됩니다.
    .section-*콘텐츠를 분할하거나 그룹핑 하는 블럭 입니다. 보통 #content 내부에 배치한 다음 heading 태그(h1~h6)와 함께 사용하는 것을 권장합니다.
    .snb.gnb, .lnb 를 제외한 측면(Side Navigation Bar) 네비게이션 영역을 지정합니다. 보통 #container 에 종속되고 수직으로 표현되지만 수평으로 표현되는 경우도 있으므로 #header 에 종속되는 등 예외의 경우도 있을 수 있습니다.

    body 클래스 예약어

    예약어브라우저
    msie6Internet Explorer6
    msie7Internet Explorer7
    msie8Internet Explorer8
    msie9Internet Explorer9
    msie10Internet Explorer10
    msie11Internet Explorer11
    firefoxFireFox
    safariSafari
    operaOpera
    chromeChrome
    • 브라우저의 호환성을 및 css 핵의 사용을 최소화 하기 위하여 javascript를 이용하여 body 엘리먼트에 클래스 명을 지정한다.
    • 개발 완료시 서버사이드 언어로 브라우저 타입을 구별하여 해당 클래스 예약어를 body 엘리먼트에 적용하여야 한다.

    이미지 네이밍 규칙

    이미지 네이밍 규칙 예

    잘못된 예올바른 예설명
    on_tab_info.giftab_info_01_on.gif형태_의미_순서_상태 순서로 조합한다.
    tio.giftab_info_on.gif임의로 축약하지 않는다.
    tbl_type_list_02_off.giftbl_list_02_off.gif가급적 4단계 이하의 조합을 사용한다.
    btn_Active.gifbtn_active.gif영문 소문자를 사용한다.
    bul_square_type02.gifbul_square_type_02.gif같은 분류의 이미지 사용시 언더스코어(_)로 구분한다.
    • 이미지 네이밍의 조합은 '형태_의미_순서_상태'의 순서로 조합한다.
    • 같은 이름의 이미지가 두 개 이상 존재하면 파일 언더스코어(_)로 구분한다.
    • 이미지 네이밍은 이미지의 확장자에 관계 없이 순차적으로 적용한다. 예) btn_confirm.gif, btn_confirm_02.jpg, btn_confirm_03.png
    • 임시이미지에 한하여 @특수문자를 처음으로 사용할 수 있다.
    • 이미지 예약어에 숫자, 영문소문자, 언더스코어(_)를 조합하여 사용할 수 있다.

    이미지 예약어

    분류예약어사용 예설명
    텍스트h[1-6]_*, h_*h_logo.gif, h12_header.gif, h1_article.gifheading 요소에 사용한다.
    tit_*tit_leble_id.gif, tit_definition_list, tit_table_th.gifheading 요소로 사용되지는 않고 문단의 강조를 나타내는 형식의 텍스트, 주로 테이블의 제목셀, dt 엘리먼트, label 엘리먼트, strong 엘리먼트에 사용
    txt_*txt_msg.gif, txt_desc_1문단의 이미지로된 텍스트에 사용
    링크요소nav_*nav_gnb_ko.gif, nav_gnb_login.gif, nav_lnb_about.giflnb, gnb, snb 등의 네비게이션 요소에 사용
    tab_*tab_style_01_on.gif, tab_style_01_off.gif네비게이션 요소를 제외한 탭 메뉴 형태에 사용
    btn_*btn_ok.gif, btn_ok_02.gif, btn_bg_type.gif버튼 형식의 a 엘리먼트, button 엘리먼트, input[type=image] 엘리먼트 요소에 사용한다. 버튼의 이미지가 배경으로 사용하여도 btn_* 예약어를 사용
    박스box_*box_type.gif, box_login.gifgrouping 목적으로 사용되는 div 엘리먼트에 주로 사용
    불릿bul_*box_arrow.gif, bul_arrow_02.gif, bul_square,gif의미가 없는 요소로 사용할 수 있는 이미지로 사용.
    아이콘icon_*icon_download.gif, icon_upload.gif의미가 있는 요소로 설명에 대한 텍스트가 명확한 경우
    상태*_on, *_off, *_overtab_type_01_on.gif, tab_type_01_off.gif, tab_type_01_over.gif활성, 비활성, 오버/포커스 상태에 대한 표현에 사용
    임시@*@tm_layout_header.jpg, @thumb_photo_1.jpg, @ad_main_1.jpg임시로 레이아웃의 구조에 사용되는 이미지 또는 개발과 연동되는 부분의 썸네일 이미지, 광고영역의 이미지에 사용




    출처: http://hhh8947.tistory.com/323

    'UX > UI' 카테고리의 다른 글

    과업과 고객분석  (0) 2018.04.13
    Life Logging에 이용되는 센서 기술  (0) 2017.11.11
    CSS 네이밍 규칙  (1) 2017.08.14
    레이블 시스템  (0) 2017.08.05
    A brief history of web design for designers  (0) 2015.02.28
    A list of Style Guides and UI Guidelines  (0) 2015.02.02

    댓글 1

Designed by Tistory.