x
구솔미디어
내 사이트가 한없이 가벼워지는 그 날까지

css의 공통된 속성들을 일괄적용하자

구솔
3834 views, 0 comments, 0 trackbacks
css문서를 사용하다보면 공통적인 속성들이 반복되는 경우가 있습니다.
.title {background:#ffffff; border:1px solid #dddddd}
.option {backbackground:#ffffff; border:1px solid #dddddd}
.memo {background:#ffffff; border:1px solid #ddd}

아래와 같이 콤마(,)로 구분하여 단축할 수 있습니다.
.t,.o,.m{background:#fff;border:1px solid #ddd}

링크속성도 마찬가지입니다.
a:link    {color:#555555; text-decoration:none;}
a:visited {color:#555555; text-decoration:none;}
a:hover   {color:#000000; text-decoration:underline;}
a:active  {color:#555555; text-decoration:none;}

아래 두 줄로 압축이 가능합니다.
a:link,a:active,a:visited{color:#555;text-decoration:none;}
a:hover{color:#000;text-decoration:underline;}

콤마 사이의 여백과 속성 사이의 여백도 생략하는 것이 좋습니다.
리스트 속성의 ul도 항상 반복되는 부분이죠.
#menu ul {
padding:0;
margin:0; }
#menu ul li {
text-align:left; }

아래와 같이 상단에 적용해 놓는 것이 좋습니다.
ul {padding:0;margin:0}
  • 유저가 작성한 글은 그것이 인용되지 않았다면 Creative Commons Public Domain License의 적용을 받습니다.
    퍼가는 경우 저작자 표시, 비영리 목적으로 퍼가기 허용, 저작물의 변경 금지

d41d8cd98f