* 다중클래스 (멀티클래스)
Multi-class 분류 문제는 하나의 그림에 하나의 객체만 있어야 하고, 그리고 그 객체는 2개 이상의 카테고리에 속하는 경우
공통되는 클래스가 많을 경우 사용
<body>
<div class="클래스명"> </div>
<div class="클래스명 클래스명"> </div>
<div class="클래스명 클래스명 클래스명"> </div>
</body>
class="공통클래스명 그 다음 많이 쓰는 클래스명(기능/성격에 따라 다름) 클래스명"
-> 권장 3개 정도
예 )
1. 공통 : box
2. 색상 : red, green, blue
3. 크기 : w200, w300, w400
<style>
.box {
border: 1px solid #000;
margin: 20px;
padding: 10px;
text-align: center;
box-sizing: border-box;
}
.red{background-color: red;}
.green{background-color: green;}
.blue{background-color: blue;}
.w200 {width: 200px;}
.w300 {width: 300px;}
.w400 {width: 400px;}
</style>
</head>
<body>
<!-- div{안녕하세요}*6 -->
<!-- div.box{안녕하세요}*6 -->
<div class="box red w300">안녕하세요</div>
<div class="box green w200">안녕하세요</div>
<div class="box blue w400">안녕하세요</div>
<div class="box red">안녕하세요</div>
<div class="box w300">안녕하세요</div>
<div class="box">안녕하세요</div>
</body>
'CSS' 카테고리의 다른 글
| [css] 밑줄, 세로 가운데 정렬 (2) | 2024.02.16 |
|---|---|
| [css] 단위 (0) | 2024.02.16 |
| [css] text, border, font (1) | 2024.02.16 |
| [css] margin, padding (1) | 2024.02.15 |
| [css] 선택자 우선순위 (0) | 2024.02.15 |
