프로그래밍/HTML CSS
[css-study12.html] 반복 규칙 합치기
lazymong
2011. 4. 28. 01:38
학습목표)
1. 반복되는 css를 하나라 합친다. 스타일시트의 경우 많은 용량을 줄일 수 있음.
background-color: #ccc;
=============================================================================================================
1. 반복되는 css를 하나라 합친다. 스타일시트의 경우 많은 용량을 줄일 수 있음.
background-color: #ccc;
background-repeat:no-repeat;
background-position: 10px 50%;
와 같은 선언 항목이 존재한다. 익혀두자.
와 같은 선언 항목이 존재한다. 익혀두자.
=============================================================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>테이블 css</title>
<style type="text/css">
table {
border-top: 1px solid #999;
border-left: 1px solid #999;
border-collapse:collapse;
}
caption {
font-family: Arial, sans-serif;
color: #993333;
padding-bottom: 6px;
}
th, td {
padding: 10px 5px;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}
th {
font-family: Verdana, sans-serif;
background: url(../th_stripe.png);
padding-left: 26px;
background-color: #ccc;
background-repeat:no-repeat;
background-position: 10px 50%;
}
#year {
background-image: url(../icon_year.jpg);
}
#opponent {
background-image: url(../icon_opp.jpg);
}
#record {
background-image: url(../icon_rec.jpg);
}
</style>
</head>
<body>
<table summary="이 표는 보스턴 레드삭스 월드시리즈 성적 차트입니다." >
<caption>Champion</caption>
<tr>
<th id="year">연도</th>
<th id="opponent">상대팀</th>
<th id="record" abbr="성적">시즌 성적 (승-패)</th>
</tr>
<tr>
<td headers="year">1981</td>
<td headers="opponent">시카고 컵스</td>
<td headers="record">75-51</td>
</tr>
<tr>
<td headers="year">1916</td>
<td headers="opponent">브룩클린 로빈스</td>
<td headers="record">91-63</td>
</tr>
<tr>
<td headers="year">1915</td>
<td headers="opponent">필라델피아 필리스</td>
<td headers="record">101-50</td>
</tr>
<tr>
<td headers="year">1912</td>
<td headers="opponent">뉴욕 자이언츠</td>
<td headers="record">105-47</td>
</tr>
</table>
</body>
</html>