Multi-selector


Home > Document > Web design > CSS > Layout > Multi-class

Multi-class

Multi-class 란 단어의 뜻 그대로 여러 개의 class 라는 뜻입니다. 즉, CSS class를 여러 개 사용한다는 얘기져. 왜 class를 여러 개 사용할까요. 뭐 반드시 여러 개를 사용해야 되는 것은 아닙니다만 예를 들어 font-size, font-family, font-style 은 동일하게 사용하고 color 는 tomato, orange, royalblue의 3가지를 사용해야 될 경우 아래와 같이 여러개의 class를 만들어야 될까요.

예제 1
<style type="text/css">
<!--
.font_tomato{font:bold 12px Verdana;color:tomato;}
.font_orange{font:bold 12px Verdana;color:orange;}
.font_royalblue{font:bold 12px Verdana;color:royalblue;}
-->
</style>

물론 이렇게 사용해도 되지만 만약 위의 예제에서 class들의 property들을

font:bold 12px verdana 에서 font:12px verdana 로 수정해야 될 경우 각 class를 모두 수정해 주어야 되겠죠. 3 개 이상을 사용할 수도 있으므로 많은 수의 class를 수정해야 됩니다. 그렇기 때문에 이럴 경우 여러 개의 class를 동시에 지정해 줍니다.

사용법 예제
<span class="selector1 selector2 selector3 ...">Multi-class의 사용</span>

이렇게 위와 같이 사용할 selector 들을 space로 구분하여 나열해 줍니다. 그러므로 예제 1 의 경우 아래와 같이 multi-class를 사용하면 font_style selector 하나만을 수정하므로서 수정된 결과를 동시에 적용할 수 있습니다.

예제 2
<html>
    <head>
        <title>multi-class</title>
    <style type="text/css">
    <!-- 
    .font_style{font:12px Verdana;}
    .bold{font-weight:bold;} /* bold 체를 사용할 경우 class 지정 */
    .to_color{color:tomato;}
    .or_color{color:orange;}
    .ro_color{color:royalblue;}    
    -->
    </style>
    </head>
    <body>
        <p class="font_style to_color bold">tomato color</p>
        <p class="font_style or_color">orange color</p>
        <p class="font_style ro_color">royalblue color</p>
    </body>
</html>
코드 실행 하기

혹시 이런 의문을 가지는 회원님이 있을까봐 미리 말해 두는데 class는 여러 개를 사용 할 수 있지만 id 는 여러 개를 사용 할 수 없습니다. id가 몸이라면 class는 옷과 비유할 수 있습니다. 옷이야 여러 가지를 동시에 입을 수 있지만 몸을 여러 개 가지고 있을 수는 없죠. 이런 multi-class 를 잘 이용하면 같은 property를 여러 개 가진 selector 를 여러 개 만드는 낭비를 할 필요가 없습니다.





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색