다음은 지금까지 배운 선택자에 스타일 시트를 적용한 간단한 예제입니다. 다음의 예제를 보고 이해가 안되시면 처음부터 다시 읽어주시기 바랍니다.
| HTML Source |
<html>
<HEAD>
<STYLE TYPE="text/css">
H1{font-family:Arial;font-size:9pt;Color:red}
</STYLE>
</HEAD>
<body>
<H1>This is a H1 stylesheet (1)</H1> <!-- ① -->
<H1>This is a H1 stylesheet (2)</H1> <!-- ② -->
</body>
</html> | |
설명하면 입이 아프겠습니다. H1 선택자의 스타일 시트를 Head 태그 사이에서 집합으로 적용시켰고 이 선택자를 사용하기 위해서 body 태그 안에서 적용이 되었습니다. 결駭?뻔하겠죠?
① , ② 의 색은 모두 빨간색을 나타냅니다. 그런데 똑같이 선택자 H1을 사용해서 ② 부분을 녹색으로 바꾸려면 어떻게 해야하는가? 하는 질문이 가능합니다. 소스를 다음과 같이 바꾸어 보세요.
| HTML Source |
<html>
<HEAD>
<STYLE TYPE="text/css">
.red{font-family:Arial;font-size:9pt;Color:red} <!-- ① -->
H1.green{font-family:Arial;font-size:9pt;Color:green} <!-- ② -->
</STYLE>
</HEAD>
<body>
<H1 class=red>This is a H1 stylesheet (1)</H1>
<H1 class=green>This is a H1 stylesheet (2)</H1>
</body>
</html> | |
① 부분은 class를 지정한것입니다. 즉 클래스가 red 인것은 모두 Color:red 속성처럼 빨간색으로 나타내어라 하는 것입니다.
② 부분은 선택자가 H1 인것중에서 class=green인 부분에 color=green을 적용하라는 뜻입니다.
소스부분을 보시면 각각 class=red, class=green 부분을 지정했죠.
따라서 한페이지의 전체적인 글자의 크기나 사이즈, 색등은 하나의 클래스로 지정해서 어떤 선택자가 사용이 되어도 클래스만 지정하면 그렇게 보이겠죠?
부분적으로 내가 스트일 시트를 적용하고 싶으면 새로운 클래스를 적용시키면 원하는곳에서 부분적으로 사용이 가능합니다. | |
