CSS Guidelines

• 문서의 마크업 언어(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>NAVER</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 형식으로 기술하여 유지보수가 어려움
<style type="text/css">@import url("default.css")</style> (X) IE 브라우저에서 이미지보다 CSS를 늦게 로드하는 결함이 있음
<link href="default.css" rel="stylesheet" type="text/css"> (O) External 형식으로 기술하여 유지보수가 쉬움

제작된 모든 문서는 서비스의 종류에 관계없이 아래 명시된 브라우저에서의 호환을 지원하여야 합니다. 한편 프로젝트별 스펙 명세서에 의하여 정해진 기준 브라우저가 있는 경우 완성된 문서는 가능한 범위 내에서 시안과 정확하게 그리드를 일치시켜야 합니다. 그 밖의 브라우저에서는 주요한 배치등이 깨지지 않고 시각적으로 다르다는 것을 인지할 수 없는 정도의 수준까지 일치시킵니다. 기준 브라우저가 정해지지 않은 경우 해당 프로젝트 개발시점 기준으로 가장 접속률이 높은 브라우저가 기준 브라우저가 됩니다. 비공개 베타버전으로 릴리즈된 브라우저는 호환 대상에 포함시키지 않습니다.

• Internet Explorer 5.5
• Internet Explorer 6.x ^{2008년 하반기 현재 가장 접속률이 높은 브라우저}
• Internet Explorer 7.x
• Firefox ^{최신 릴리즈된 버전 - 2008년 하반기 현재 3.x}
• Opera ^{최신 릴리즈된 버전 - 2008년 하반기 현재 9.x}
• Safari ^{최신 릴리즈된 버전 - 2008년 하반기 현재 3.x}

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

CSS 파일의 수는 최소한으로 유지합니다. 사이트 루트 디렉토리에 /css/ 폴더를 생성하고 전역에 쓰이는 파일의 이름은 default.css으로 지정합니다. 메뉴 섹션(또는 카테고리)별로 파일을 분리하는 것이 효율적이라고 판단되는 경우 default.css와 함께 섹션별로 *.css파일을 추가하는 것이 가능합니다.

외부 CSS 파일을 HTML 문서로 불러오는 방법으로써 link와 import가 있습니다. link방식만을 사용합니다. import방식은 Internet Explorer 브라우저에서 image요소보다 CSS를 늦게 렌더링하는 결함이 있으므로 사용하지 않습니다. 미디어 타입을 지정하지 않는 경우 기본값이 'all' 이 되므로 별도의 미디어 타입은 지정하지 않습니다.

External 형식의 CSS 문서에는 HTML 문자셋과 동일하게 문자셋 정보를 명시합니다. 영문 이외의 서체이름을 사용하는 경우 웹 브라우저에서 정확한 서체표현이 가능하고 각종 저작도구에서 문자값이 깨지지 않습니다. 문자셋 선언은 문서의 첫 줄에 공백없이 삽입되어야 합니다. 문자셋 선언을 생략하는 것이 문법적으로 오류는 아니지만 원활한 유지보수를 위하여 반드시 포함시킵니다.

Dreamweaver와 같은 저작도구는 Page Properties 대화상자(Ctrl+J)를 이용하여 간단하게 charset 정보를 삽입하고 파일 인코딩 형식을 변경할 수 있습니다.

담당자의 소속과 작성자 및 작성일 정보를 아래와 같이 주석을 이용하여 표기합니다. 최초 저자는 이 표기는 생략할 수 없으며 유지보수만을 담당하게 되었더라도 되도록 기입하는 것이 좋습니다.

그 쓰임새가 전역적인 것으로 부터 시작하여 지역적인 것 순으로 아래와 같이 선언 합니다. 8번. 새 문서 작성을 위한 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 ... 순입니다.

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

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

1. display :

   표시

2. overflow :

   넘침

3. float :

   흐름

4. position :

   위치

5. z-index :

   정렬

6. width & height :

   크기

7. margin & padding :

   간격

8. border :

   보더

9. font :

   폰트

10. background :

    배경

11. etc :

    기타

'디오플포젯-위마보폰백'

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

각종 미디어(프린터, 모바일, 보조공학기기 등)에 대응하는 별도의 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 문서의 끝부분에 아래와 같은 형식으로 기술합니다.

파일의 갯수가 늘어나기 때문에 권장하지 않지만 아래와 같이 인쇄를 위하여 별도의 외부 CSS 파일을 생성한 뒤 링크 하거나 임포트 하는 방법도 가능 합니다. 단 @import 방식에 미디어 타입을 지정하는 것은 IE7 이하의 브라우저에서 인식하지 못하는 버그가 있으므로 사용하지 않습니다.

• 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 코드의 수정이 끝남

• 선택자 기준으로 개행하고, 속성 단위로는 개행하지 않습니다. 들여쓰기를 하지 않습니다.
  (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;} (O) 선택자와 속성만 띄어쓰기
#selector^{^property:value;^property:value;^property:value;^} (X) 중괄호 안쪽은 띄어쓰기 하지 않습니다
• CSS 코드의 정돈을 위하여 코드의 그룹간 행(line) 간격은 1행 이상 비우지 않습니다. 그룹 안에서 의미있는 객체를 구분하기 위하여 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;}


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

• Internet Explorer 5.5 ~ 7 :

  표준 계열 브라우저에 적용할 속성을 기술한 다음 IE 브라우저에 적용할 속성을 한번 더 적습니다. 이때 속성 앞에 띄어쓰기 없이 '*'를 추가합니다. DTD 무관.

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

• Internet Explorer 5.5 이상 :

  Visual Filters and Transitions Reference

• Internet Explorer 6 :

  사용자가 저장된 페이지의 새 버전 확인에 대한 옵션을 '페이지를 열 때마다' 으로 설정한 경우 IE6 이하 브라우저에서는 Background Image 캐시를 활용하지 않고 이미지를 화면에 출력할 때마다 서버에 요청하는 버그가 있습니다. 이런 경우 IE 브라우저에서 Background Image가 캐시를 활용하도록 보정하는 IE전용 Javascript코드 입니다. 잘 알려진 Flicker Bug에 대한 해결방법 이지만 안정성은 확인된 바 없으므로 필요할 때에만 사용합니다. 이 문법은 Windows XP SP1 이후의 운영체제 또는 IE 브라우저의 6.00.2800.1106 이후 버전에 적용됩니다. 참조 : Available memory decreases when you view a Web page in Internet Explorer 6 Service Pack 1.

  try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {}

• 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가 Transitional, Strict Mode 일때 적용됨. Firefox 전용 Hack을 사용하나 Hack이 IE7에도 영향을 미치므로 유념할 것.

  #selector{ property:default-value;} /* 희망하는 값 */
#selector, x:-moz-any-link{ property:firefox-value;} /* Firefox2 디버깅. 하지만 Firefox3 및 IE7이 이것에 대응한다. */
#selector, x:-moz-any-link, x:default{ property:default-value;} /* Firefox3 및 IE7 브라우저를 희망하는 값으로 복원한다. */

• Opera 9 전용 :

  DTD에 무관하게 적용 가능. Opera 9 브라우저만 html 요소에 :first-child 가상선택자가 유효. 9.5버전부터는 작용하지 않음.

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

• Safari 3 전용 :

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

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

• 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 : Min 20 ~ Max 30 #container와의 관계를 고려하여 지정

  .gnb : Fix 30

  .lnb : Fix 20

  .search : Fix 10

  #container : Min 20 ~ Max 30 #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 보다 낮아야 함

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

• 07.11.13 : Internet Explorer 5.01 브라우저 지원내용 삭제
• 08.02.13 : CSS 주석가이드 > 수정된 코드를 알리는 주석달기 추가
• 08.02.13 : 외부 CSS 불러오기 항목 추가
• 08.02.14 : 미디어 타입별 CSS 코드의 작성 항목 추가
• 08.02.22 : CSS 속성 선언 순서 항목 추가
• 08.03.05 : 새 문서 작성을 위한 CSS 코드 표본의 '*' 공통선택자에서 font-size:12px 속성 삭제
• 08.03.07 : z-index 적용 가이드에 예제 추가
• 08.03.17 : 새 문서 작성을 위한 CSS 코드 표본에 한글서체 이름의 한글표기 추가
• 08.04.11 : CSS파일의 생성과 외부 CSS파일 불러오기 규칙에 section_*.css 파일을 사용할 수 있다는 내용 추가
• 08.02.22 : 외부 CSS 불러오기에 import 사용금지 내용 추가