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

    1 ··· 42 43 44 45 46 47 48 49 50 ··· 423
    Designed by Tistory.