글
id,class
id 는 스타일을 반복적으로 사용하지 않고 웹페이지에서 한번만 사용할 때 쓰이며
class 는 동일한 스타일을 웹페이지내에서 반복적으로 사용할 때 사용합니다.
id 를 사용할려면 CSS에서 id명 앞에 "#"(=샵)을 붙여야 하고(ex: #test) 호출할 때는 id="test" 이런식으로 하시면 됩니다.
class 를 사용할려면 CSS에서 class명 앞에 "."(=마침표)을 넣어야 하고(ex: .test) 호출할 때는 class="test" 이런식으로 하시면 됩니다.
아래 참고소스에서
id는 테이블을 가운데 정렬 하는 #layout_wrap 이 id와 배경색이 서로 다른 class 즉 .td_color1 과 .td_color2를 반복적으로 사용한 예입니다.
▼ 참고소스:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<style type="text/css">
<!--
body { text-align:center; }
#layout_wrap { margin:0 auto; text-align:left; width:500px; }
.td_color1 { background:#00f; }
.td_color2 { background:#f00; }
}
-->
</style>
</head>
<body>
<div id="layout_wrap">
<table cellspacing="0" cellpadding="0">
<tr>
<td width="500" height="20" class="td_color1"></td>
</tr>
<tr>
<td height="20" class="td_color2"></td>
</tr>
<tr>
<td height="20" class="td_color1"></td>
</tr>
<tr>
<td height="20" class="td_color2"></td>
</tr>
<tr>
<td height="20" class="td_color1"></td>
</tr>
<tr>
<td height="20" class="td_color2"></td>
</tr>
<tr>
<td height="20" class="td_color1"></td>
</tr>
</table>
</div>
</body>
</html>
출처 : http://design123.kr/bs/40597
실행화면
class="td_color1와 class="td_color2를 반복해서 셀에 적용하고 있는것을 볼수 있네요.
'HTML' 카테고리의 다른 글
인용문 <blockquote> <q> (0) | 2011.12.18 |
---|---|
글자 꺼꾸로 나타나게 하는 HTML 소스 (0) | 2011.12.13 |
초보자도 쉽게하는 분석하는 HTML 문서 (0) | 2011.11.30 |
입체감있는 텍스트상자들 (0) | 2011.10.14 |
텍스트상자를 투명하게 (0) | 2011.10.10 |