- 요점 : 기본값(공용값)을 여러 클래스에 값으로 지정하는 것입니다.
- 공용값을 여러 클래스 또는 아이디, 태그로 정하는건 안좋은 습관입니다.
.a , .b , .c {color:red}
이렇게할 경우 클래스 a,b,c는 각각 빨간색의 색(기본으로 폰트컬러)를 가지게 됩니다.
.a { font-size:10px;}
.b { font-size:20px;}
.c { font-size:30px;}
이것을 추가할 경우 클래스a,b,c는 색은 같지만 크기가 각각 10px,20px,30px로 다르게됩니다.
나중에 색을 수정할 경우 .a , .b , .c {color:red}만 수정하면 바로 수정이되죠.
--------------------------------------------------------------------------------
div.skin{ font-size:12px;}
/*기본색:보더*/
div.skin .border , div.skin td.title , div.skin .box
, div.skin div.info , div.skin div.infoL ,div.skin div.infoR{ border-color:#aabbcc;}
/*기본색:배경*/
div.skin td.title , div.skin .box
, div.skin div.info , div.skin div.infoL , div.skin div.infoR { background-color:#f2f2f2;}
div.skin table.skin{ table-layout:fixed;}
div.skin td.title{ font-size:12px;font-weight:bold; padding:4px 0; border-top:1px solid;border-bottom:3px double;}
div.skin td.normal{ font-size:12px;padding:4px 0;}
div.skin td.line{ padding:0; margin:0px; background-color:#aabbcc; height:1px; font-size:0; line-height:0;}
/*기본형:박스*/
div.skin .box , div.skin div.info , div.skin div.infoL ,div.skin div.infoR{ white-space:nowrap; line-height:180%; float:left; padding:1px 5px; margin:1px 5px; border:1px solid;}
div.skin div.info , div.skin div.infoL{ float:left;}
div.skin div.infoR{ float:right; }
div.skin .border{ border:1px solid;}
--------------------------------------------------------------------------------
CSS를 사용하는 이유 중 하나는 스타일 관리때문이죠.
이렇게 구성함으로 좀 더 체계적인 CSS 사용,관리가 가능해집니다.
.a , .b , .c {color:red}
이렇게할 경우 클래스 a,b,c는 각각 빨간색의 색(기본으로 폰트컬러)를 가지게 됩니다.
.a { font-size:10px;}
.b { font-size:20px;}
.c { font-size:30px;}
이것을 추가할 경우 클래스a,b,c는 색은 같지만 크기가 각각 10px,20px,30px로 다르게됩니다.
나중에 색을 수정할 경우 .a , .b , .c {color:red}만 수정하면 바로 수정이되죠.
--------------------------------------------------------------------------------
div.skin{ font-size:12px;}
/*기본색:보더*/
div.skin .border , div.skin td.title , div.skin .box
, div.skin div.info , div.skin div.infoL ,div.skin div.infoR{ border-color:#aabbcc;}
/*기본색:배경*/
div.skin td.title , div.skin .box
, div.skin div.info , div.skin div.infoL , div.skin div.infoR { background-color:#f2f2f2;}
div.skin table.skin{ table-layout:fixed;}
div.skin td.title{ font-size:12px;font-weight:bold; padding:4px 0; border-top:1px solid;border-bottom:3px double;}
div.skin td.normal{ font-size:12px;padding:4px 0;}
div.skin td.line{ padding:0; margin:0px; background-color:#aabbcc; height:1px; font-size:0; line-height:0;}
/*기본형:박스*/
div.skin .box , div.skin div.info , div.skin div.infoL ,div.skin div.infoR{ white-space:nowrap; line-height:180%; float:left; padding:1px 5px; margin:1px 5px; border:1px solid;}
div.skin div.info , div.skin div.infoL{ float:left;}
div.skin div.infoR{ float:right; }
div.skin .border{ border:1px solid;}
--------------------------------------------------------------------------------
CSS를 사용하는 이유 중 하나는 스타일 관리때문이죠.
이렇게 구성함으로 좀 더 체계적인 CSS 사용,관리가 가능해집니다.
