홈으로 | 무료회원가입 | 아이디/비번찾기
추천음악방송
스타일 시트를 경량화하는 11가지 팁
11년 전
Tip #1: 색상 값을 짧게 쓰기
색상을 지정하는 속성에 값을 기입할 때 가능하면 가장 짧은 값을 사용합니다.

article { background-color: rgb(255,255,255); } /* WTF? */
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;

Tip #4: 같은 값은 결합하기
padding 혹은 margin 속성의 값이 동일한 경우 통합하여 지정할 수 있습니다.

/* before */
margin: 10px 20px 10px 20px;
padding: 10px 10px 10px 10px;

/* after */
margin: 10px 20px;
padding: 10px;

Tip #5: 불필요한 "0"은 생략하기
소수점 이하의 수를 사용하거나 무의마한 "0"은 생략할 수 있습니다.

/* before */
padding: 0.1em;
margin: 10.0em;

/* after */
padding: .1em;
margin: 10em;

Tip #6: 값이 "0"이면 단위 생략하기
값의 크기가 0이라면 단위는 생략해도 무방합니다.

/* before */
padding: 0px;
margin: 0em;

/* before */
padding: 0;
margin: 0;

Tip #7: 마지막 세미콜론 생략하기
속성 기입이 끝나는 마지막의 세미콜론(;)은 생략해도 무방합니다.

/* before*/
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
    }

/* optimized */
p { font: normal 1.33em/1.33 Georgia, serif }

Tip #8: 배포하기 전 코멘트 제거하기
작업과정에서 주석을 사용하는 것은 분명 도움이 되고 협업에도 유리합니다. 그러나 사용자에게는 100% 불필요한 데이터이며 무의미한 서버자원과 대역폭을 소비하므로 배포하기 전에는 반드시 코멘트를 제거하도록 합니다.


Tip #9: 공백 제거하기
값을 구분하기 위한 공백을 제외한 나머지 빈 공간은 모두 제거합니다.

/* before */
body {
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    background-color: #333;
    text-align: center;
    margin: 0px auto;
    font-size: 62.5%;
    color: #FFF;
    }

/* after */
body{font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;text-align:center;background:#333;margin:0px auto;font-size:62.5%;color:#fff}

Tip #10: 줄바꿈 제거하기
효율적인 관리를 위해 탭(또는 공백) 그리고 줄바꿈을 삭제합니다. 싱글-라인 포멧으로 작성하는 것이 미친짓으로 보일지 모르겠지만 의외로 실용적인 작성법입니다. 성능 향상을 꾀하면서도 스크롤을 줄일 수 있고 프로퍼티 단위 디버깅이 가능하기 때문입니다.

/* before */
hr {
    margin: 25px 0 25px 0;
    background: #CF7400;
    text-align: left;
    padding: 15px 0;
    display: block;
    border: 0 none;
    color: #CF7400;
    height: 1px;
    clear: both;
    width: 96%;
    }
acronym, abbr {
    border-bottom: 1px dotted #514031;
    cursor: help;
    }
ins { text-decoration: underline; }
del { text-decoration: line-through; }
sup {
    font-size: 10px;
    line-height: 0;
    color: #cccc99;
    }
em       { font-style: italic; }
small    { font-size: 10px;    }
strong   { font-weight: bold;  }
strong:target, h3:target, h4:target {
    background: #CF7400;
    padding-left: 25px;
    }
code, kbd, samp, tt, var {
    font-family: "Courier New", Courier, monospace, sans-serif;
    color: #cccc99; /* #cc9933 #cccc66 #cccc99 */
    font-size: 11px;
    }
    h3 code { font-size: 13px; }
pre {
    border-left: 1px solid #CF7400;
    padding: 10px 0 12px 10px;
    background: #3B2E22;
    overflow: auto;
    margin: 25px 0;
    width: 525px; /* 95% of 555px = 525px */
    }
    pre:hover {
        border-left: 1px solid #FFFFCC;
        background: #3B2E22;
        }


/* after */
hr { background:#CF7400;margin:25px 0;text-align:left;padding:15px 0;display:block;border:0 none;color:#CF7400;height:1px;clear:both;width:96%; }
acronym,abbr { border-bottom:1px dotted #514031;cursor:help; }
ins { text-decoration:underline; }
del { text-decoration:line-through; }
sup { font-size:10px;line-height:0;color:#cc9; }
em { font-style:italic; }
small { font-size:10px; }
strong { font-weight:bold; }
strong:target,h3:target,h4:target { background:#CF7400;padding-left:25px; }
code,kbd,samp,tt,var { font-family:"Courier New",Courier,monospace,sans-serif;color:#cc9;font-size:11px; }
h3 code { font-size:13px; }
pre { border-left:1px solid #CF7400;padding:10px 0 12px 10px;background:#3B2E22;overflow:auto;margin:25px 0;width:525px; }
pre:hover { border-left:1px solid #FFC;background:#3B2E22; }

Tip #11: CSS 유효성 검사하기
끝으로, W3C에서 제공하는 CSS 유효성 검사기를 이용하여 오류가 있는지를 검토하세요. 당신이 놓쳤을 수도 있는 잡다한 오류들을 빠르게 찾아줍니다.


Bonus Tips: 보너스 팁들
이 게시물을 작성하는 동안 몇 가지 다른 아이디어가 떠올랐습니다.

a:link, a:visited {} /* before */
a:link,a:visited{} /* after */

/* before */
h1{color:#111}
h2{color:#333}
h3{color:#777}

/* after */
h1{color:#111}h2{color:#333}h3{color:#777}
위에서 언급한 팁들 중에는 자동으로 처리할 수 있는 것들이 있습니다. 온라인 도구를 사용하거나 서비스 빌드과정에 포함하여 자동화 할 수도 있다는 사실을 잊지 마세요. 그리고 규모가 큰 프로젝트는 배포/개발 버전을 구분해서 관리하는 것이 가장 효율적입니다
추천추천 : 283 추천 목록
번호 제목
3,030
 제이쿼리 기본 명령어
3,029
 웹페이지 가로 모드세로 모드 인식하기
3,028
 모바일 웹 화면 강제 회전(가로모드 고정)
3,027
 [HTML5]에서 frameset 대체 방법과 iframe 속성
3,026
 HTML <Audio> 사용법
3,025
 윈도우10 시스템파일 손상 (초간단 오류 복구방법!!)
3,024
 PHP 파일 존재 여부 파악하기(로컬 파일 존재 및 원격지 파일 존재)
3,023
 [CSS] 박스 세로 가운데 중앙 정렬 6가지
3,022
 CSS Layout 수평 & 수직 정렬
3,021
 여러 도메인들 간 쿠키 공유하기
3,020
 태그 사이에 있는 텍스트를 추출
3,019
 [JQuery] textbox focus on off일때 숫자 콤마 보여주기
3,018
 쿠키 생성,가져오기,삭제
3,017
 사용자 함수 모음
3,016
 마우스,키보드 제한 ( 오른쪽클릭,드래그,영역선택등..)
3,015
 [HTML5] <video> - DOM으로 제어하기
3,014
 HTML5 video 태그에서 영상 좌우반전
3,013
 PHP - 특정 태그 및 문자열 추출, 제거
3,012
 [PHP] define과 defined의 차이
3,011
 우클릭 완벽차단 스크립트
3,010
 iframe 높이 100% 맞추기
3,009
 curl 함수를 이용한 HTTP REFERER 변경
3,008
 윈도우10 시스템 파일 및 Dism 검사
3,007
 텍스트 줄바꿈, 글자자르기 CSS
3,006
 jQuery Mobile에서 유용한 코드 10가지.
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.