CSS 코드 작성 규칙

1.모든 속성은 영문 소문자자로 작성한다.

잘못된 예	올바른 예
.class{Font-Family:AppleGothic}	.class{font-family:AppleGothic}

2. 따옴표 사용 범위

공백이 포함된 폰트명, 핚글 폰트명, 문자열 데이터 타입, filter 속성의 파라미터값은 작은따옴표(' ')로 감싸며,@charset 선언 시에는 속성 값을 큰따옴표(" ")로 감싼다. 그 외의 경우에는 따옴표를 사용하지 않는다. filter 속성의 파라미터값에 따옴표를 사용하는 것은 선택사항이다.

url 데이터 타입에는 작은 따옴표를 사용하지 않는다.

- 따옴표 사용 예

잘못된 예	올바른 예
font-family:돋움	font-family:'돋움'
filter:progid:DXImageTransform.Microsoft.Alpha ImageLoader(src="bg.png", sizingMethod="scale")	filter:progid:DXImageTransform.Microsoft.Alpha ImageLoader(src='bg.png', sizingMethod='scale')
background:url('bg.gif') no-repeat	background:url(bg.gif) no-repeat
content: "Chapter: "	content: 'Chapter: '
@charset 'utf-8';	@charset "utf-8";

3. 마지막 속성의 세미콜론(;)은 삭제한다.

잘못된 예	올바른 예
.class{font-size:12px;color:#000;}	.class{font-size:12px;color:#000}

4. 공백 제거

 A. 쉼표로구분되는 선택자 긴 공백은 제거한다.

 B.  속성 간 공백 및 속성 값 사이 공백은 제거한다.

 C. 중괄호 좌, 우 공백은 제거한다.

잘못된 예	올바른 예
a:hover,^a:active,^a:focus{textdecoration:underline}	a:hover,a:active,a:focus{text-decoration:underline}
class p{color:#000;^line-height:18px}	class p{color:#000;line-height:18px}
font-family:'돋움',^dotum;	font-family:'돋움',dotum;
.class p{^color:#000; line-height:18px^}	class p{color:#000; line-height:18px}

5. 의미 있는 객체를 구분하기 위하여 코드 그룹 갂 1줄씩 빈 줄을 넣을 수 있다. 

(단, 빈 줄의 간격은 1줄을 초과하지 않게 한다. 빈 줄의 사용은 선택 사항이다. )

6. 선택자, 속성, 속성 값 사이 줄 바꿈은 허용하지 않는다.

7. 속성 선언 순서

속성을 선언할 때는 그 쓰임새가 레이아웃과 관렦이 큰 것에서 시작하여 레이아웃과 무관핚 것 순서로 선언한다.

- 속성 선언 순서

순서

의미

대표되는 속성(그룹)

관련속성

1

표시

display

visibilty

2

넘침

overflow

-

3

흐름

float

clear

4

위치

position

top, right, bottom, right, z-index

5

크기

width & height

-

6

간격

margin & padding (그룹)

-

7

테두리

border (그룹)

-

8

배경

background (그룹)

-

9

폰트

font (그룹)

color, letter-spacing, text-align, text-decoration, textindent, vertical-align, white-space 등

10

동작

animation

animation, transform, transition, marquee  등

11

기타

-

위에 언급되지 않은 나머지 속성들로 폮트의 관렦 속성 이후에 선언하며, 기타 속성 내의 선언 숚서는 무관함.