[CSS]스타일 시트를 경량화 하는 방법 1탄

홈페이지 제작을 하다보면 많은 html언어와 스타일시트로 인해 홈페이지 속도가 느려지는

경우가 많이 있습니다 이럴때 스타일 시트를 경량화 하는 방법을 사용하게 되면

많은 도움이 될수 있죠 오늘은 이 스타일 시트를 경량화 하는 방법에 대해서 자세히 알아보도록 하겠습니다

스타일 시트 경량화 하는 방법 첫번째

색상 값을 짧게 쓰기

색상을 지정하는 속성에 값을 기입할 때 가능하면 가장 짧은 값을 사용합니다.

article { background-color: rgb(255,255,255); } 

article { background-color: #ffffff; } /* better */

article { background-color: #fff; } /* good */

스타일 시트 경량화 하는 방법 두번째

Tip #2: 중복되는 속성을 병합하기

반복적으로 중복되는 속성들은 통합합니다. 

이 작업을 자동으로 처리해 주는 온라인 CSS 최적화 서비스도 있으니 참고하세요.

/* before */

#wrap p { font-family: Georgia, serif; font-weight: normal; line-height: 1.33em; font-size: 1.22em; }

 . . .

p { font-family: Georgia, serif; font-weight: normal; line-height: 1.33em; font-size: 1.33em; }

/* after */

p { font-family: Georgia, serif; font-weight: normal; line-height: 1.33em; font-size: 1.33em; }

 스타일 시트 경량화 하는 방법 세번째

Tip #3: 가능한 한 몰아쓰기

CSS 속성들 중에는 여러 값을 인식하는 것들이 있습니다. 

font나 background, padding, border 등이 그렇습니다. 

이런 경우에는 한줄로 몰아 써 주시는게 좋습니다.

/* before */

p { font-family: Georgia, serif; font-weight: normal; line-height: 1.33em; font-size: 1.33em; }

/* after */

p { font: normal 1.33em/1.33 Georgia, serif; }/* these 4 properties */background-color: #fff;background-image: url(i/dope.png);background-repeat: repeat-x;background-position: 0 0; /* can be written as */background: #fff url(i/dope.png) repeat-x 0 0;/* these 4 properties */margin-top:    10px;margin-right:  20px;margin-bottom: 10px;margin-left:   20px;/* can be written as */margin: 10px 20px 10px 20px;/* these 3 properties */border-width: 1px;border-style: solid;border-color: red;/* can be written as */border: 1px solid red;