css 스타일가이드

문서의 구조와 표현을 분리합니다

▲Top

• 문서의 마크업 언어(HTML)와 화면 표시(CSS)언어를 본래의 목적에 맞게 최대한 분리합니다.
• 의미 구조를 마크업 하는 경우 HTML 요소와 속성을 이용 합니다. 표현을 위한 HTML 요소와 속성의 사용은 지양합니다. 단, 테이블 셀의 경우 다양한 너비의 고정폭을 지닐 수 있는데 이것을 모두 CSS로 지정하는 것은 기대했던 효과에 대한 이점이 없으므로 예외의 경우를 허용합니다.
  <b align="center">...</b> (X) 화면표시를 위한 HTML 요소와 속성이 사용되어 유지보수 이점 감소
<applet!> <basefont> <center> <dir> <font> <isindex> <menu> <s> <strike> <u> <xmp> (X) HTML 4.01 부터 폐기된 요소들 
<h1>네이버</h1> (O) 의미가 부여된 바른 마크업
<col width="100"><col width="50"> (O) 테이블 셀의 너비를 지정하는 방법으로 HTML속성을 사용하였지만 허용됨
• 문서의 표현에 관한 속성은 외부(External) CSS문서에서 정의 합니다. HTML문서 Head에 CSS를 삽입하는 Internal 방식과 HTML요소에 직접 기술하는 Inline 방식의 사용은 되도록 지양합니다.
  <div style="width:100px">...</div> (△) Inline 형식으로 기술하여 유지보수가 어려움 
<style type="text/css">...</style> (△) Internal 형식으로 기술하여 유지보수가 어려움 
<link href="default.css" rel="stylesheet" type="text/css"> (O) External 형식으로 기술하여 유지보수가 쉬움

2. 다양한 브라우저의 호환을 지원합니다

▲Top

제작된 모든 문서는 서비스의 종류에 관계없이 아래 명시된 브라우저에서의 호환을 지원하여야 합니다. 한편 접속자 통계에 의하여 가장 사용율이 높은 브라우저에 대하여는 디자인 가이드에서 제시하는 간격등을 엄격하게 준수하여야 합니다. 현재^2008년1월 가장 사용율이 높은 브라우저는 Internet Explorer 6.x 이므로 기준 브라우저가 되며 완성된 문서는 가능한 범위 내에서 시안과 정확하게 그리드를 일치시켜야 합니다. 그 밖의 브라우저에서는 주요한 배치등이 깨지지 않고 시각적으로 다르다는 것을 인지할 수 없는 정도의 수준까지 일치시킵니다.

• Internet Explorer 5.5
• Internet Explorer 6.x ^{2008년 1월 현재 가장 사용자가 많은 기준 브라우저}
• Internet Explorer 7.x
• Firefox 2.x
• Opera 9.x
• Safari 3.x

브라우저 호환은 첫째, 동일한 콘텐츠를 제공하는 것을 의미하며 둘째, 가급적 동일한 화면 뷰를 얻는 것입니다. 두 종류 이상의 브라우저를 이용하여 하나의 동일 화면을 탐색할 때 시각적으로 다르다고 느낀다면 그것은 동일한 화면 뷰가 아니므로 브라우저간 차이를 인지하지 못하는 수준까지 개선하여야 합니다.

3. CSS 파일의 생성

▲Top

CSS 파일을 여러개로 나누는 경우 HTTP 요청이 늘어나서 웹페이지 전송속도에 좋지 않은 영향을 주게 되므로 파일의 수는 최소한으로 유지합니다. 사이트 루트 디렉토리에 /css/ 폴더를 생성하고 전역에 쓰이는 파일의 이름은 default.css 으로 지정합니다.

/css/default.css
모든 스타일을 포함하는 파일

/css/popup.css 
팝업등 새로운 페이지 유형이 존재하는 경우 별도로 분리

4. 외부 CSS 불러오기

▲Top

외부 CSS 파일을 HTML 문서로 불러오는 방법으로써 link와 import!가 있습니다. link 방식은 하나의 CSS 파일을 불러올 때, import! 방식은 2개 이상의 CSS 파일을 동시에 불러올 때 사용합니다. 미디어 타입을 지정하지 않는 경우 기본값이 "all" 이 되므로 별도의 미디어 타입은 지정하지 않습니다.

(O) 하나의 CSS 파일만 불러올 때
<link href="default.css" rel="stylesheet" type="text/css">

(O) 2개 이상의 CSS 파일을 불러올 때
<style type="text/css">
@import! url("default.css");
@import! url("admin.css");
</style>

5. 문자셋(charset)을 선언합니다

▲Top

External 형식의 CSS 문서에는 HTML 문자셋과 동일하게 문자셋 정보를 명시합니다. 영문 이외의 서체이름을 사용하는 경우 웹 브라우저에서 정확한 서체표현이 가능하고 각종 저작도구에서 문자값이 깨지지 않습니다. 문자셋 선언은 문서의 첫 줄에 공백없이 삽입되어야 합니다. 필수적으로 요구되는 사항은 아니지만 강력하게 권장됩니다.

@charset "utf-8";
@charset "euc-kr";

Dreamweaver와 같은 저작도구는 Page Properties 대화상자(Ctrl+J)를 이용하여 간단하게 charset 정보를 삽입하거나 변경할 수 있습니다.

6. 소속 및 작성자를 표기합니다

▲Top

담당자의 소속과 작성자 및 작성일 정보를 아래와 같이 주석을 이용하여 표기합니다. 이 표기는 생략할 수 없습니다.

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

7. CSS 선택자 선언 순서

▲Top

그 쓰임새가 전역적인 것으로 부터 시작하여 지역적인 것 순으로 아래와 같이 선언 합니다.

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 ... 순입니다.

8. CSS 속성 선언 순서

▲Top

그 쓰임새가 레이아웃과 관련이 높은 것으로 부터 시작하여 레이아웃과 무관한 것 순으로 아래와 같이 선언 합니다. 이 순서는 화면의 렌더링 효율보다는 유지보수의 이점 때문에 제안되었으며 권장하는 수준 입니다. 아래 제시된 속성들과 짝을 이루는 관련 속성들은 etc로 분류하여 따로 기술하지 않고 되도록 함께 기술합니다. 예를 들면 position 속성과 left, right , top, bottom 속성은 서로 연관된 속성이므로 etc로 분류하지 않고 position 다음에 기술합니다.

1. display :

   표시

2. float : 흐름

3. position : 위치

4. width & height :

   크기

5. margin & padding :

   간격

6. border :

   보더

7. font :

   폰트

8. background :

   배경

9. etc :

   기타

'디플포위-마보폰백'

9. 새 문서 작성을 위한 CSS 코드 표본

▲Top

아래 CSS 코드 표본을 이용하여 새 문서를 작성하되 서체의 크기와 종류등을 변경할 수 있으며 불필요한 코드는 삭제 합니다. ' id/class 선언 규약 '에 따라 작성되었으며 크로스브라우징을 위한 핵이 포함되어 있습니다. 내려받기 : default_utf8.css | default_euckr.css 콘텍스트 메뉴(마우스 오른버튼)를 이용하여 '다른 이름으로 저장' 하세요.

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

/* Type Selector */
*{margin:0; padding:0; font-style:normal; font-family:굴림, Gulim, 돋움, Dotum, AppleGothic, Sans-serif;}
img, fieldset{border:none;}
hr, legend{display:none;}
li{list-style:none;}
a{}
a:visited{}
a:hover, a:active, a:focus{}
html:first-child select{padding-right:6px; height:20px;} /* Opera Fix */ 
option, x:-moz-any-link {padding-right:4px;} /* Firefox Fix */ 
option, x:-moz-any-link, x:default {padding-right:0;} /* Firefox Fix */

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

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

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

/* Footer */
#footer{} 

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

/* Aside */
.aside{} 

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

10. 추가 스타일 작성을 위한 CSS 코드 참조

▲Top

공통 선택자 "*" 를 이용하여 margin, padding 등이 초기화 선언되지 않은 문서에 새 스타일을 안전하게 추가하는 방법을 설명하고 있습니다. 공통선택자를 이용하여 margin, padding등이 초기화되지 않은 상태로 작성된 오랜 문서에 뒤늦게 공통선택자를 이용하여 초기화를 시도하게 되면 기존의 화면 그리드에 변화가 생기므로 새 스타일이 추가되는 영역에 한하여 부분적으로만 초기화를 시도하여야 합니다. 아래 참조 코드는 공통 선택자를 부분적으로만 초기화시켜서 기존의 스타일에 영향을 미치지 않도록 안전하게 코드를 작성하는 방법입니다.

/* Attach */
.attach *{margin:0; padding:0; font-size:12px; font-style:normal; font-family:Gulim, Dotum, AppleGothic, Sans-serif;}
.attach img, .attach fieldset{border:none;} 
.attach hr, .attach legend{display:none;} 
.attach li{list-style:none;} 
.attach a{} 
.attach a:visited{} 
.attach a:hover, .attach a:active .attach a:focus{} 
html:first-child .attach select{padding-right:6px; height:20px;} /* Opera Fix */ 
.attach option, x:-moz-any-link {padding-right:4px;} /* Firefox Fix */ 
.attach option, x:-moz-any-link, x:default {padding-right:0;} /* Firefox Fix */

11. 미디어 타입별 CSS 코드의 작성

▲Top

각종 미디어(프린터, 모바일, 보조공학기기 등)에 대응하는 별도의 CSS 코드를 작성할 수 있습니다. 별도의 미디어에 대응하는 CSS 문서를 따로 생성한뒤 link 또는 import! 요소에 미디어 타입을 지정할 수 있으나 이렇게 미디어 타입별로 CSS 파일을 분리하는 것보다는 하나의 파일에 여러가지 미디어 대응 코드를 한꺼번에 모두 작성하는 것이 좋습니다. 한편 W3C 표준에 의하면 CSS가 다양한 미디어에 대응이 가능하도록 스펙이 정의되어 있지만 현실적으로 이것을 가장 안전하게 사용할 수 있는 경우는 인쇄장치 뿐입니다.

아래는 W3C의 CSS 2.0 에 명시되어 있는 대응가능한 미디어 타입의 종류 입니다.

• all (모든 출력 장치)
• aural (음성 출력)
• braille (점자 출력)
• handheld (포켓, 모바일)
• print (인쇄)
• projection (투사 장치)
• screen (스크린, 모니터)
• tty (전신 타자기, Tele Type Writer)
• tv (텔레비전, Television)

인쇄장치에 대응하기 위한 별도의 CSS 코드를 작성하려면 default.css 문서의 끝부분에 아래와 같은 형식으로 기술합니다.

/* For Print */
@media print{
#header,
.snb,
.aside{property:value;}
}

12. CSS 주석 가이드

▲Top

• CSS코드는 의미있는 형태로 그룹핑 하고 그룹핑 된 코드 더미 첫 줄에만 주석으로 설명합니다. 주석에 사용되는 언어는 한글이든 영문이든 무방하며 가능한 직관적인 단어를 선택합니다.
• 주석과 관련된 버그를 피하기 위하여 주석 기호와 코멘트 사이에는 빈 공간을 두어야 합니다.
  /*GNB*/ (X) 
/* GNB */ (O)
• 주석 안쪽에는 코드를 설명하는 문장 외에 다른 기호등을 넣지 않습니다.
  /** GNB **/ (X) 
/*- GNB -*/ (X) 
/*--- GNB ---*/ (X)
/* GNB */ (O)
• CSS 코드가 추가로 수정되었음을 알리는 경우 수정된 코드의 시작과 끝부분에 오늘의 날짜 'YYMMDD' 를 추가 합니다.
  (O)
/* 080101 */ CSS 코드의 수정이 시작됨
...
/* //080101 */ CSS 코드의 수정이 끝남

(O)
/* 080101 GNB */ CSS 코드의 수정이 시작됨
...
/* //080101 GNB */ CSS 코드의 수정이 끝남

13. CSS 코드의 정렬

▲Top

• 선택자 기준으로 개행하고, 속성 단위로는 개행하지 않습니다. 들여쓰기를 하지 않습니다.
  (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;}
• 선택자와 속성은 tab 아닌 space 기준으로 띄어쓰기를 통일하되 중괄호 { }는 좌우로 띄어쓰기 하지 않습니다.
  #selector^{^property:value;^property:value;^property:value;^} (X) 중괄호 좌우로 띄어쓰기를 하지 않아야 합니다
#selector{property:value;^property:value;^property:value;} (O) 속성 사이를 space를 이용하여 띄어쓰기 하였습니다
• CSS 코드의 정돈을 위하여 코드의 그룹간 행(line) 간격은 1행 이상 비우지 않습니다.
  (O)
/* 그룹1 */
#selector1{property:value;}
#selector2{property:value;}

/* 그룹2 */
#selector3{property:value;}
#selector4{property:value;}

(X)
/* 그룹1 */
#selector1{property:value;}
#selector2{property:value;}


/* 그룹2 */
#selector3{property:value;}
#selector4{property:value;}


14. 브라우저 Hack의 사용

▲Top

• 아직 Recommendation 되지 않은 CSS 2.1~3 문법중 현존하는 브라우저에서 지원하는 속성들은 크로스브라우징에 문제가 없다면 사용할 수 있습니다.
• W3C CSS Validation Pass 는 체크하지 않으며 현존하는 브라우저가 CSS속성 또는 Hack을 렌더링 오류없이 지원하는지의 여부만을 체크합니다.

• Internet Explorer 5.5 이상 :

  Visual Filters and Transitions Reference

• Internet Exploler 5~6 / 5~7 :

  DTD가 Transitional, Strict Mode인 경우 5~6까지 적용됨. DTD가 Quirks Mode 인 경우 5~7까지 적용됨.

  #selector{property:value; _property:value;}

• Internet Exploler 7 전용 :

  DTD가 Transitional, Strict Mode 일때 적용됨. DTD가 Quirks Mode인 경우 적용 안됨.

  *:first-child+html #selector{property:value;}

• Internet Exploler 5.5 이하 :

  DTD가 Transitional, Strict Mode 일때 적용됨. 띄어쓰기와 Hack 삽입 위치에 유의. IE6 이하를 위한 Underscore Hack과 함께 IE6 Pass Filter를 적용하였으므로 IE 5.5 이하에만 적용됨.

  #selector{property:value; _property /**/:value;}

• Firefox 2 이하 :

  DTD에 무관하게 적용 가능.

  #selector, x:-moz-any-link{property:fixed-value;} /* FF2 이하 브라우저를 위한 Hack 적용 */
#selector, x:-moz-any-link, x:default{property:original-value;} /* 나머지 브라우저에서 표시되어야 할 원형을 복원 */

• Opera 9 전용 :

  DTD에 무관하게 적용 가능. Opera 9 브라우저만 html 요소에 :first-child 가상선택자가 유효.

  html:first-child #selector{property:value;}

• Safari 3 전용 :

  DTD에 무관하게 적용 가능. 단, CSS3 속성인 :first-of-type을 다른 브라우저에서 지원하게 되면 더이상 Hack으로 사용할 수 없으므로 되도록 사용하지 않는것이 바람직.

  body:first-of-type #selector{property:value;}

15. z-index 적용 가이드

▲Top

• CSS 2.0 표준 스펙에 의하면 z-index의 값으로는 양수와 음수 모두 유효하며 숫자의 증가 한계에 대하여 특별히 명시되어 있지 않지만 브라우저간 차이가 있으므로 주의를 요합니다. 음수값을 사용하는 경우 Firefox는 해당요소를 화면에 출력하지 않으며, 숫자의 증가값으로 33,554,739를 초과(대략 2의 24승)하는 표현은 Opera와 Safari 브라우저에서 제대로 표현하지 못합니다. z-index의 값을 무분별하게 증가시키는 경우 콘텐츠가 업데이트 될때마다 수치가 늘어나서 브라우저의 한계 허용치를 초과할 수 있으므로 반드시 기존 콘텐츠의 z-index값을 파악한 후 최소한의 값을 증가시켜야 합니다. z-index의 증감이 필요한 경우 가능하다면 10 단위로 증감하고 10을 초과하지 않는 범위에서 지정하는 것을 권장합니다. 10 단위로 z-index를 증감하는 것은 또 다른 z-index값의 출현에 유연하게 대처하기 위함입니다.
  (X) 두 번째 선택자에 필요 이상의 값이 들어감 
#selector1{z-index:10;}
#selector2{z-index:100;}

(O) 필요한 값만큼만 증가됨 
#selector1{z-index:10;}
#selector2{z-index:20;}
• z-index를 반드시 삽입할 이유는 없으며 z-index 가 추가되어야 하는 경우 아래 예제에 따라 작성합니다. 예외상황이 발생하는 경우 반드시 가이드에 따를 필요는 없습니다. Fix=고정값, Min=최소한계값, Max=최고한계값.
  #wrap

  #header : Fix 30 #container, #content 보다 높아야 함

  .gnb : Fix 30

  .lnb : Fix 20

  .search : Fix 10

  #container : Fix 20 #footer 보다 높아야 함

  .spot : Min 10 ~ Max 90 상황에 따라 .snb, .colgroup, #content, .aside ... 의 z-index를 고려한 후 지정

  .snb : Min 10 ~ Max 90

  .account : Min 10 ~

  .*nav* : Min 10 ~

  .*section* : Min 10 ~

  .ad : Min 10 ~

  .colgroup : Min 10 ~ Max 90

  #content : Fix 20 
  #container, .colgroup이 없는 경우도 있으므로
  #header 보다 낮고 #footer 보다 높아야 함

  .path : Min 10 ~

  .article or .section : Min 10 ~

  .article or .section : Min 10 ~

  .aside
  : Min 10 ~ Max 90

  .ad : Min 10 ~

  .*nav*
  : Min 10 ~

  .*section*
  : Min 10 ~

  
  

  #footer : Fix 10 #container, #content 보다 낮아야 함

16. id_&class 다중 선택자 사용 제한

▲Top

다중 선택자란 동일한 요소에 여러개의 선택자를 교차 적용하기 위한 목적으로 선택자끼리 붙여서 선언된 것을 말합니다. 그러나 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;}