NHN NURI CSS Guideline : 필요한 부분만 정리

1. 외부 CSS 불러 오기

(X) Internet Explorer 브라우저에서 image보다 CSS를 늦게 파싱하는 결함이 있으므로 사용하지 않음 
 

(O)HTML 문서에서 CSS 파일을 불러올 때 HTML 헤더에 표시할 내용 


(O) CSS 문서에서 CSS 파일을 불러올 때 CSS 코드 첫 줄에 표시할 내용
@import url("default.css"); 

 

---

2. 소속 및 작성자 표기

/* NHN Web Standardization Team (http://html.nhndesign.com/) JCM 080101, YMJ 081224 */ 

 

---

3. CSS 선택자 선언 순서 및 코드 표본

 

1. Type Selector : HTML 요소의 초기화 선언 : html, body, img, fieldset, hr, legend, li, a와 같은 요소들이 정의됩니다.

2. Layout Selector :전역 레이아웃을 선언합니다. #wrap, #header, #container, #content, #footer, .spot, .colgroup, .snb, .aside ... 와 같은 전역 레이아웃이 정의 됩니다.

3. Class Selector :전역 class를 선언합니다. .input_text, .input_textarea, .input_check, .input_radio ... 와 같은 전역 class 요소들이 정의 됩니다.

4. etc :기타 요소들을 전역 스타일로부터 지역 스타일에 이르는 순으로 선언합니다. 권장되는 순서는 #header, #footer, .snb, .aside, #content ... 순입니다.

@charset "utf-8";
/* NHN Web Standardization Team (http://html.nhndesign.com/) JCM 080122 */ 

/* Type Selector */
*{margin:0; padding:0; font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
img, fieldset, button{border:none;}
hr, button img{display:none;}
li{list-style:none;}
a{text-decoration:none;}
a:hover, a:active, a:focus{text-decoration:underline;}
textarea{overflow:auto;} 
html:first-child select{padding-right:6px; height:20px;} /* Opera 9 & Below Fix */ 
option {padding-right:6px;} /* Firefox Fix */
legend {position:absolute; top:0; left:0; width:0; height:0; overflow:hidden; visibility:hidden; font-size:0; line-height:0;} /* For Screen Reader */ 

/* Layout Selector */
#wrap{}
#header{}
#container{}
#content{}
#footer{} 
.spot{}
.colgroup{}
.snb{}
.aside{}

/* Class Selector */
.input_text{}
.input_check{}
.input_radio{} 

/* Header */
.gnb{}
.lnb{}
.search{} 

/* Footer */
#footer{} 

/* Navigation */
.snb{}
.account{} 

/* Aside */
.aside{} 

/* Content */
#content{}
.path{}
.article{}
.section{} 

 

 

---

4. CSS 속성 선언 순서

 

1. display :표시
2. overflow :넘침
3. float :흐름
4. position :위치
5. z-index :정렬
6. width & height :크기
7. margin & padding :간격
8. border : 보더
9. font :폰트
10. background :배경
순서 : 디오플포젯-위마보폰백

 

 

---

5. CSS 코드의 정렬

* 선택자 기준으로 개행하고, 속성 단위로는 개행하지 않습니다. 들여쓰기를 하지 않습니다.

(O)
#selector1{property:value;}
#selector2{property:value;}
#selector3,
#selector4,
#selector5{property:value;}

(X) 속성 단위로 개행하지 않습니다 
#selector1{
  property:value;
}
#selector2{
  property:value;
}

(X) 선택자 단위로 개행되어야 합니다 
#selector1, #selector2, #selector3{
  property:value;
}

(X) 들여쓰기를 하지 않습니다 
#selector1{property:value;} 
    #selector2{property:value;} 
        #selector3{property:value;} 

 

---

6. id class 다중 선택자 사용 제한

다중 선택자란 동일한 요소에 여러개의 선택자를 교차 적용하기 위한 목적으로 선택자끼리 붙여서 선언된 것을 말합니다. 그러나 Internet Explorer 6의 경우 id와 class를 하나의 요소에 교차 적용했을 때 나중에 선언된 다중 선택자를 전혀 인식하지 못하는 버그가 존재합니다. 아래 예는 id와 class 조합의 다중 선택자를 선언한 경우 Internet Explorer 6가 나중에 선언된 다중 선택자를 완전히 무시하고 있다는 것을 보여주고 있습니다. 따라서 다중 선택자를 교차 적용하려는 경우 id와 class 조합 대신 class끼리만 조합시키는 방법이 강력하게 권장됩니다.

 

(X) Internet Explorer 6의 다중 선택자 버그가 존재하므로 사용할 수 없음 
#id.class1{background:#f00;}
#id.class2{background:#0f0; width:200px;} /* Does not exist in the IE6 */ 
#id.class3{background:#00f; width:300px; font-weight:bold;} /* Does not exist in the IE6 */ 

(O) 다중 선택자 사용법으로 권장되는 안전한 방법
.class.class1{background:#f00;} 
.class.class2{background:#0f0; width:200px;} 
.class.class3{background:#00f; width:300px; font-weight:bold;} 

 

 

 

NHN NURI CSS Guideline : http://html.nhndesign.com/guidelines/css/