7. 중첩클래스
.NET프로그래밍/CSS 2.0 2009. 7. 27. 23:45 |<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>중첩클래스</title>
<style type="text/css">
.redText { color:blue; }
h2.redText { color:red; }
</style>
</head>
<body>
<h1 class="redText">안녕</h1>
<h2 class="redText">안녕</h2>
<h3 class="redText">안녕</h3>
</body>
</html>
<!--
위의 예제에서 <body>태그 내의 class이름이 'redText'로 모두 같으므로 클래스가 중첩된다. 그 중 위쪽에 <style>태그사이에서 "h2.redText { color:red; }"를 보면 "h2"라는 특정한 태그와 그 class의 속성을 지정하고 있다. 실행해보면 <body>내의 문장중에서 <h2>태그가 있는 문장만 빨강색으로 된다.
-->
< 실행결과 >
'.NET프로그래밍 > CSS 2.0' 카테고리의 다른 글
| 9. 영역설정태그- <div>와 <span>태그 (0) | 2009.07.28 |
|---|---|
| 8. 중첩태그 (0) | 2009.07.28 |
| 6. 스타일시트에서의 우선순위 (0) | 2009.07.27 |
| 5. id를 이용하는 방법 (0) | 2009.07.27 |
| 4. class를 이용하는 방법 (0) | 2009.07.27 |