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

http://html.nhndesign.com/naming_guideline#section6







페이지 | 2


페이지 | 3


#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


.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


분류

예약어


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


분류

예약어


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


분류

예약어


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


분류

예약어


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


분류

예약어


@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


페이지 | 11

it세미나 naming guidlines for css

Documents