jQuery | javascript | CSS

07.CSS - 중첩클래스

Godffs 2009. 7. 28. 01:28
반응형
                    하나의 문서(페이지)에서 여러개를 중복 사용이 가능하며,
                    직접 지정이 가능한 것이 중첩클래스입니다.

                    <html xmlns="http://www.w3.org/1999/xhtml">
                    <head>
                        <title></title>
                        <style type="text/css">
                        .BlueText { color:Blue; }
                        h2.redText { color:Red; }
                        </style>
                    </head>
                    <body>
                        <h1 class="redText">안녕하세요.</h1>
                        <h2 class="redText">안녕하세요.</h2>
                        <h3 class="redText">안녕하세요.</h3>
                    </body>
                    </html>

<head>안에 style type 정의 한 다음, 사용할 클래스 이름과 속성을 지정합니다.

.redText { color:Blue; }    /* 폰트색상을 파랑색 으로 바뀌도록 했습니다. */

클래스에서 지정한 속성을 적용시키기 위해 해당 태그 속성에 Class 작성하셔야 합니다.
예) <h1 class="BlueText">안녕하세요.</h1>
직접 지정에 대한 코드 입니다.
클래스를 정의한 곳에 다음과 같이 작성합니다.
h2.redText { color:Red; } 폰드(글씨)색깔을 빨간색으로 직접 지정하여 바꿔줍니다.
07.중첩클래스.htm
반응형