css 기본규칙

기본규칙

1. 문서의 내용과 표현과 행동을 분리합니다. (HTML 만으로 문서를 이용할 수 있어야 합니다.)

2. CSS 코드를 작성할 때는 들여쓰기를 하지 않습니다. 단, 중괄호”{ }”가 중첩되는 경우 예외로 합니다.

3. CSS 데이터를 로딩할 경우 @import 방식은 되도록 사용하지 않습니다.

4. 모든 속성은 영문 소문자로만 작성합니다.

5. 공통선택자 ‘*’는 웹 페이지의 성능을 떨어뜨리고, Internet Explorer에서는 주석까지 영향을 받을 수 있으므로 사용 하지 않습니다.

6. 컬러 값 표기 RGB값 앞에 '#'을 넣어 표기합니다. ex) #eee, #000, #eaeaea

7. 공백이 포함된 폰트명, 한글 폰트명, 문자열 데이터 타입, @charset 선언 시에는 속성 값을 큰따옴표(" ")로 감싼다. 그 외의 경우에는 따옴표를 사용하지 않습니다. url 데이터 타입에는 따옴표를 사용하지 않습니다.

ex)
@charset "utf-8";
body{font-family:"돋움",dotum;}
.sample{background:url(ex.png) no-repeat}

1. CSS 스타일 속성간 개행하지 않으며 클래스명을 선언한 뒤 공백을 두지않고 "{" 괄호를 시작합니다. 세부 속성간에는 공백을 주지 않고, CSS 선언의 마지막 속성의 세미콜론은 생략합니다.

2. CSS코드 최적화를 위해 속성값을 축약하여 사용합니다.(font 속성은 제외)

3. 0을 제외한 모든 값들에 단위를 표기합니다. ex) 10px;, 1em;, 0;

4. 단위 사용은 다양한 환경의 크로스플랫폼을 위해 절대단위(px)를 권장하며, 유동적인 레이아웃 구현 시 상대단위(em, rem, %)를 사용합니다.

css filter는 성능을 떨어뜨리므로, 되도록 사용을 하지 않는다.

 

선택자(Selector)

1. id 선택자는 class 네이밍 규칙에서 정의한 레이아웃 - skipnav, wrap, header, gnb, snb, container, content, footer 에만 사용을 원칙으로합니다. 단, 동작과 관련한 id는 부분 허용하나, 개발과의 협의를 원칙으로 합니다.

2. 성능을 위해서는  되도록 인접선택자와 자식선택자를 사용하지 않도록 합니다.

3. 선택자 사용시, 유니버설선택자 ( * ) 사용을 금하며, tag 선택자 보다는 class 선택자를 사용하도록 합니다.

4. 되도록이면 성능을 떨어뜨리지 않도록 규칙(뎁스)를 줄여서 작성하도록 합니다.  - 권장 사항: 3뎁스 이하

5. class 네이밍 가이드를 참고하여 작성합니다. Mark-Up Naming

 

인코딩

CSS의 인코딩은 HTML의 인코딩과 동일하게 선언하여 HTML 문서가 브라우저에서 바르게 해석될 수 있도록 합니다.

ex)@charset "utf-8"; 혹은 @charset "euc-kr";

주석

CSS 주석 기호( /*, */ )와 내용 사이에는 반드시 공백 한 칸이 있어야 합니다. 종료 주석은 사용하지 않으며, 
주석표기는 영어표기를 원칙으로 합니다.

/* gnb */
#gnb{position:absolute;z-index:10;width:100%;height:60px}
#gnb .inner{width:980px;margin:0 auto;padding:0 20px}

/* snb */
#snb{float:left;width:150px}

속성선언 순서

다음과 같은 순서로 css속성을 작성해 주도록 합니다.

CSS 속성 선언 순서

순서	속성	의미
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(기타)	color,text-decoration,text-indent,clear...

 

font 속성 선언 순서

축약형을 사용하지 않으며, 스타일 선언시 font-style > font-variant > font-weight > font-size > line-height > font-family순서로 선언하길 권장합니다.

.txt {font-style:bold;font-variant:small-caps;font-weight:bold;font-size:14px;line-height:1.5;font-family:'굴림',Gulim,sans-serif}

 

Z-index 값 적용 가이드

z-index 속성의 속성 값의 범위는 최소 10, 최고 1000이며, 10 단위로 증감합니다. 단, 10 단위 사이의 예외 변수가 발생하면 1 단위 값을 지정할 수 있습니다.

 

CSS핵

핵(hack)은 가능한 한 사용하지 않습니다. 호환을 위해 일부 핵 사용을 예외로 합니다.

IE7, IE8, IE9, Firefox 에 관한 테이블입니다.

IE7	S,x:-moz-any-link, x:default {P:V} *+html S{P:V} S,x:-moz-any-link, x:default{ P :V }
IE8	S{P:V\0}
IE9	:root S{P:V\0 !important} :root S{P:V}
Firefox	S,x:-moz-any-link, x:default{ P :V }

 

CSS3의 사용

- CSS3속성을 사용시, 반드시 CSS3속성 미적용 브라우저에서의 대응 방식에 대한 기획/디자인팀과의 협의를 거친 후 사용을 원칙으로 합니다.

- SS3적용할 경우에 대한 밴더프리픽스(vendor prefix) 사용을 허용합니다.

- CSS3속성에 대한 지원률 확인은 http://caniuse.com 에서 가능하다.

사파리, 크롬	-webkit-
파이어폭스	-moz-
오페라	-o-
인터넷익스플로러	-ms-

header {width:100%;height:90px;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;-ms-border-rasius:10px;border-radius:10px}

 

파일 분리

파일은 독립된 한 서비스 내에 하나의 파일을 생성하며, 분기를 허용하는 경우는 다음과 같다.

- 사이트 공통 css인 경우

- 개편 시 개발상의 이슈로 이전에 분리되어 있던 CSS를 합칠 수 없는 경우

- 한 서비스 내에 단발성 페이지로 존재하는 경우

- 태블릿 PC 혹은 구브라우져(IE7,8)를 대응할 경우

 

Image Replacement 기법(IR기법)

의미있는 어떤 요소를 이미지로 처리하고 요소에 해당하는 텍스트 넣되 시각적으로는 안보이게 하는 방법입니다.이 기법의 장점은 접근성을 떨어뜨리지 않으면서도 검색엔진으로부터 높은 가중치를 받을 수 있다는 점 입니다. 
보통 2가지 방식을 줄 사용하는데, Phark Method와 WA IR 기법을 주로 사용하여 대체텍스트를 제공해주도록 합니다.

Phark Method

이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법

 

HTML

<button>버튼</button>
<a href="#">버튼</a>

 

CSS

button {display:block;width:49px;height:36px;margin:0;padding:0;border:none;background:url(btn_search.gif) no-repeat;text-indent:-999px}
a {display:block;overflow:hidden;float:left;width:49px;height:36px;background:url(btn_search.gif) no-repeat;text-indent:-999px}

WA IR

이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그로 감싼 후 z-index:-1을 이용하여 화면에 안보이게 처리합니다.

 

HTML

Copy

<button><span>버튼</span></button>
<a href="#"><span>버튼</span></a>

 

CSS

button {width:49px;height:36px;margin:0;padding:0;border:none;background:url(btn.gif) no-repeat}
a {display:block;width:49px;height:36px;font-weight:bold;font-size:13px;background:url(btn_search.gif) no-repeat;color:#4b5bcp;text-decoration:none}
span {display:block;position:relative;z-index:-1;padding:8px 0;border:1px solid #bcc1ec;background-color:#f1f3ff;text-align:center}

Image Sprite 기법 (IS기법)

여러개의 이미지를 하나의 이미지파일로 합치고, background image의 좌표값을 활용하는 방법으로 이미지 http request를 줄여서 성능향상을 높이는 기법입니다.

IS기법을 활용하기 위해 쓰이는 모든 스프라이트 이미지들은 'spr_' 로 시작하는 클래스 네이밍을 갖습니다.

한번의 background url 선언으로 background-position으로 이미지 각각의 좌표값 잡아 사용해줍니다.  마크업시 이중클래스를 사용해줄 수 있습니다.  예) class="spr_cpp btn_normal"

유지보수의 편의를 위해 이중클래스 선택자를 사용해줍니다.

예)

.spr_cpp{background:url(spr_comm.png) no-repeat} //한 이미지를 불러옴

#lnb .spr_cpp{ background-position:0 0}

.spr_cpp.bt_normal{background-position:0 -15px}

.spr_cpp.ic_star{background-position:0 -30px}