클래스를 만들어 쓸때 우리는 클래스명 앞에 점(.)붙여줌으로써(.클래스명) 클래스를 선언할수 있다. 클래스를 선언하는 방법은 2가지 방법이있다. 점(.)을 붙여(.클래스명)쓰는 방법과 점(.)을 띄어( .클래스명)쓰는 방법이 있다 밑에 예제를 보면서 알아보자.
<html>
<head>
<title>테스트</title>
<style type="text/css"> /* css 스타일 설정 */
#kyoe1{border: 1px solid red; width: 400px; height: 80px; text-decoration :underline; position: relative;}
#kyoe1 div .menu1{color:blue; position:absolute; left:200px; top:50px;}
#kyoe2{border: 1px solid red; width: 400px; height: 80px; text-decoration :underline; position: relative; top:20px; left:100px;}
#kyoe2 div.menu2{color:green; position:absolute; left:200px; top:50px;}
.menu3{color:blue; position:absolute; left:100px; top:20px;}
</style>
</head>
<!-- kyoe1 div .menu1 (점을 띄어쓴예)-->
<body>
<div id="kyoe1">
-#kyoe1-<br> <!-- kyoe1속성만 적용된다. -->
<div>
<div class="menu1">-kyoe1- DIV </div> <!-- #kyoe1속성과 클래스 menu1속성적용됨 DIV태그외에 다른태그를 사용해도된다.-->
</div>
</div>
<!-- kyoe2 div.menu2 (점을 붙여쓴예)-->
<div id="kyoe2">
-#kyoe2-<br> <!-- #kyoe2속성만 적용된다. -->
<div class="menu2">-kyoe2- DIV </div> <!-- #kyoe1속성과 클래스 menu1속성적용됨 -->
<span class="menu2">-kyoe2- SPAN </sapn> <!-- #kyoe2속성만 적용된다. -->
</div>
<!-- .menu3 -->
<div id="kyoe2">
-클래스 menu3 적용-
<span class="menu3">menu3</span> <!-- 어떤태그를 써도 상관없다. -->
</div>
</body>
</html>
#test1 div .menu1클래스는 아이디test1이 적용된태그 안에있는 <div></div>태그안에서 사용되며 모든 태그의 class속성의 설정값(class="memu1")이 menu1일때 적용된다. 예) <span class="menu1">kyoe1</span>
#test2 div.menu2클래스는 아이디test2가 적용된 태그안에있는 div태그안에서만 적용된다. 예) <div class="menu2">kyoe2</div>
.menu3{}는 모든테그안에서 사용할수있다.
<html>
<head>
<title>테스트</title>
<style type="text/css"> /* css 스타일 설정 */
#kyoe1{border: 1px solid red; width: 400px; height: 80px; text-decoration :underline; position: relative;}
#kyoe1 div .menu1{color:blue; position:absolute; left:200px; top:50px;}
#kyoe2{border: 1px solid red; width: 400px; height: 80px; text-decoration :underline; position: relative; top:20px; left:100px;}
#kyoe2 div.menu2{color:green; position:absolute; left:200px; top:50px;}
.menu3{color:blue; position:absolute; left:100px; top:20px;}
</style>
</head>
<!-- kyoe1 div .menu1 (점을 띄어쓴예)-->
<body>
<div id="kyoe1">
-#kyoe1-<br> <!-- kyoe1속성만 적용된다. -->
<div>
<div class="menu1">-kyoe1- DIV </div> <!-- #kyoe1속성과 클래스 menu1속성적용됨 DIV태그외에 다른태그를 사용해도된다.-->
</div>
</div>
<!-- kyoe2 div.menu2 (점을 붙여쓴예)-->
<div id="kyoe2">
-#kyoe2-<br> <!-- #kyoe2속성만 적용된다. -->
<div class="menu2">-kyoe2- DIV </div> <!-- #kyoe1속성과 클래스 menu1속성적용됨 -->
<span class="menu2">-kyoe2- SPAN </sapn> <!-- #kyoe2속성만 적용된다. -->
</div>
<!-- .menu3 -->
<div id="kyoe2">
-클래스 menu3 적용-
<span class="menu3">menu3</span> <!-- 어떤태그를 써도 상관없다. -->
</div>
</body>
</html>
#test1 div .menu1클래스는 아이디test1이 적용된태그 안에있는 <div></div>태그안에서 사용되며 모든 태그의 class속성의 설정값(class="memu1")이 menu1일때 적용된다. 예) <span class="menu1">kyoe1</span>
#test2 div.menu2클래스는 아이디test2가 적용된 태그안에있는 div태그안에서만 적용된다. 예) <div class="menu2">kyoe2</div>
.menu3{}는 모든테그안에서 사용할수있다.