CSS 클래스를 혼용하여 박스 만드는 방법 > html

<style>
.bordered {
        border: dotted 2px black;
        width: 180px;
        margin: 6px 3px 6px 3px;
        padding: 7px;
}
 
.type1 { background-color: #ffccff; }
.type2 { background-color: #ccffcc; }
.type3 { background-color: #ffffcc; }
.type4 { background-color: #ccccff; }
 
</style>

<div class="bordered type1">
        bordered와 type1 속성을 지정한 박스입니다.
</div>
<div class="bordered type2">
        bordered와 type2 속성을 지정한 박스입니다.
</div>
<div class="bordered type3">
        bordered와 type3 속성을 지정한 박스입니다.
</div>
<div class="bordered type4">
        bordered와 type4 속성을 지정한 박스입니다.
</div>