It세미나 Naming Guidlines For Css
description
Transcript of It세미나 Naming Guidlines For Css
2023 년 4 월 10 일 月요일 IT 사업팀 엄 대 진
IT 사업팀 개발 표준Naming Guidelines for CSS
참고 : NHN Naming GuidelinesNaming Guideline
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 선택자 선언 규약 아래와 같이 정형화 된 요소들에 대한 네이밍은 'id/class 선언규약'에 따릅니다. 단, 아래 예는 되도록 복잡한 상황을 재현한 것으로서 특히 #wrap, .colgroup 과 같은 그룹핑은 필수적이지 않다면 제외하는 것이 바람직 합니다. 동일한 의미를 지닌 id/class 가 복수로 존재해야 하는 경우 선택자 뒤에 숫자를 붙여서 확장합니다.
페이지 | 1
2023 년 4 월 10 일 月요일 IT 사업팀 엄 대 진
페이지 | 2
2023 년 4 월 10 일 月요일 IT 사업팀 엄 대 진
페이지 | 3
2023 년 4 월 10 일 月요일 IT 사업팀 엄 대 진
#wrap : 페이지(#header, #container, #footer) 전체를 지정 합니다. #header : 로고를 포함한 상단 영역(보통 .lnb 포함)을 지정 합니다. #container : #header 와 #footer 를 제외한 본문 전체를 지정 합니다. #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 에 종속됩니다. .*nav* : 네비게이션 요소를 지정합니다. .gnb, .lnb, .snb 등 어떤 영역 내부에 하나 또는 복수의
네비게이션 요소가 존재할 때 .*nav* 클래스를 지정합니다. '*' 표시는 다른 단어 또는 숫자와 조합할 수 있다는 의미 입니다.
.*section* : 콘텐츠를 분할하거나 그룹핑 하는 블럭 입니다. 보통 #content 내부에 배치한 다음 heading 태그(h1~h6)와 함께 사용하는 것을 권장합니다. '*' 표시는 다른 단어 또는 숫자와 조합할 수 있다는 의미 입니다.
.article : 기사 또는 포스트와 같이 기술된 내용의 콘텐츠를 지정합니다. .ad : 광고 또는 배너를 지정합니다. etc : 여기서 기술하지 않은 id/class 네이밍은 이하 'id/class 생성 및 네이밍 가이드'에 따릅니다.
3. id/class 선택자 네이밍 가이드
id 는 화면을 분할 하거나 동적 UI 를 구현해야 하는 경우에만 생성합니다. id 사용이 필수적으로 요구되지 않는 요소는 class 를 생성합니다.
영문 소문자만 사용 가능하며 숫자 및 언더바(_) 사용이 가능합니다. 영문 대문자 및 기타 언어와 특수문자는 사용하지 않습니다.
가능하다면 의미에 적합하고 직관적인 하나의 단어를 사용하고, 화면 배치 또는 시각적 효과를 의미하는 단어의 선택은 지양합니다.
2 개 이상의 단어를 조합하는 경우 언더바(_)로 연결합니다. 단어와 숫자를 조합하는 경우 언더바(_)를 생략합니다.
숫자로 시작할 수 없으며 숫자의 증가는 "1" 부터 시작됩니다. 숫자가 없는 단어는 통상 "1" 이라는 숫자가 생략된 것으로 간주합니다.
.nav01 (X) 클래스 이름을 이용한 스크립트 작성시 1~9 까지 예외적으로 "0"을 추가해야 하므로 구현 이슈 발생 .nav1 (O)
두문자어 또는 약어를 사용하더라도 직관적으로 이해할 수 있는 경우 단어를 축약할 수 있습니다. 보편적인 이름을 지닌 class 는 항상 충돌 가능성이 존재하므로 가급적 부모 선택자에 종속 시킵니다.
(△) .more 라는 클래스 이름을 더 이상 사용할 수 없음 .more {...}
(O) .more 라는 클래스 이름을 여러번 재 사용할 수 있음 .section .more {...}.aside .more {...}
모든 영역에 동일한 표현으로 재 사용되는 전역 스타일인 경우 다른 선택자에 종속시키지 않습니다.
페이지 | 4
2023 년 4 월 10 일 月요일 IT 사업팀 엄 대 진
.gnb fieldset{border:none;} (△) 전역 스타일을 특정 영역에 종속시켜 재 사용성이 떨어짐 fieldset{border:none;} (O) 보통의 경우 fieldset 을 이용하여 border 를 표현하지 않으므로 어떤 선택자에도 종속시키지 않음
4. Image 네이밍 규약 아래 제시된 종류의 이미지 이름들은 각각의 목적에 맞는 형태로 사용될 수 있도록 예약되어 있습니다. 아래 표현들은 다른 목적으로 사용하거나 독창적인 형태로 변형하여 사용하지 않습니다. "*" 표시는 해당 이미지의 의미나 상태를 가장 잘 표현할 수 있는 단어로 치환하거나 또는 생략할 수 있습니다. 네이밍의 순서는 '대분류-중분류-소분류' 또는 '형태-의미-상태' 순입니다. 동일한 용도의 이미지가 여러개인 경우 마지막 단어에 숫자를 붙여서 다르게 네이밍 합니다.
분류
예약어
설명 권장표현 형태 형태+의미+상태
제목 h*_*
h_*불특정 레벨의 제목
제목 태그로 마크업되는 이미지 요소. 전경
h1_* 제목 1
h2_* 제목 2
h3_* 제목 3
h4_* 제목 4
h5_* 제목 5
h6_* 제목 6
문장 p_* p_* 문장 통상 p 요소로 마크업되는 이미지 형태의 텍스트. 전경
네비게이션
gnb_*
gnb_* 글로벌 네비게이션 목적의 버튼 또는 탭. 전경
lnb_* lnb_* 로컬
페이지 | 5
2023 년 4 월 10 일 月요일 IT 사업팀 엄 대 진
분류
예약어
설명 권장표현 형태 형태+의미+상태
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_* 파일
페이지 | 6
2023 년 4 월 10 일 月요일 IT 사업팀 엄 대 진
분류
예약어
설명 권장표현 형태 형태+의미+상태
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 중앙
페이지 | 7
2023 년 4 월 10 일 月요일 IT 사업팀 엄 대 진
분류
예약어
설명 권장표현 형태 형태+의미+상태
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 별
페이지 | 8
2023 년 4 월 10 일 月요일 IT 사업팀 엄 대 진
분류
예약어
설명 권장표현 형태 형태+의미+상태
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 에서 불러오게되는 임시 이미지 요소. 전경
페이지 | 9
2023 년 4 월 10 일 月요일 IT 사업팀 엄 대 진
분류
예약어
설명 권장표현 형태 형태+의미+상태
@photo 사진
@ad 광고
5. Image 네이밍 가이드
명명 순서 : 큰 범주의 분류에서 작은 범주의 분류 순으로 명명합니다. 분류는 가급적 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) 동일한 의미를 지닌 이미지가 없다면 숫자는 생략 합니다
페이지 | 10
2023 년 4 월 10 일 月요일 IT 사업팀 엄 대 진
페이지 | 11