스타일시트에서.. 각 객체 접근하실때..

css 에서 많이 보셨죠?

<style type="text/css">
    img { }
</style>

<img src="a.gif" />

이때.. img 태그 전체에 적용되는거구요..

/> 로 닫은건.. xhtml 표준이기때문에.. ^^

http://www.nzeo.com/bbs/zboard.php?id=p_html&no=1097

이글 참고하시구요..

<style type="text/css">
    img#abc { }
</style>

<img id="abc" src="a.gif" />

이땐 img 태그중에.. abc 라는 id 를 가진 객체에 적용됩니다.

원래 id 라는것이 중복될 수가 없으니.. img#abc 대신 #abc 만 쓰셔도 되지요..




<style type="text/css">
    img.menu { }
    embed.menu { }
    .menu
</style>

<img class="menu" src="a.gif" />
<img class="menu" src="b.gif" />


img.menu 는 img 태그중 menu 라는 클래스를 가진 객체에 적용됩니다.
embed.menu 는 embed 태그중 menu 클래스겠지요..

이렇게 속성을 정하시고나서.. 그 객체가 없어도 상관없습니다..

그냥 이런객체가 있으면 이런스타일로 만들어지라고.. 정해놓는것 뿐이니까요.

.menu 는 모든태그중 menu 클래스를 가진 객체에 적용됩니다...

같은 이름의 클래스는 중복될 수 있습니다...

이름만 봐도 알 수 있듯이.. 클래스.. 당연한거죠.. 중복가능합니다.

한 객체가 여러개의 클래스를 가질 수도 있습니다.

<img src="a.gif" class="a b c" />

이땐..

.a .b .c 의 속성 모두 적용됩니다.


이해하셨는지요..?


css(스타일시트) 를 제대로 사용한것이 맞는지 검사하고 싶으시면...

http://jigsaw.w3.org/css-validator/

이곳에서.. 확인하시면 됩니다..