<h2>예시</h2>
<div class="wrap">
<div class="box blue"></div>
<div class="box red"></div>
<div class="box green"></div>
<div class="box gold"></div>
</div>
<h2>visibility: hidden;</h2>
<div class="wrap">
<div class="box blue"></div>
<div class="box red visibility"></div>
<div class="box green"></div>
<div class="box gold"></div>
</div>
<h2>display: none;</h2>
<div class="wrap">
<div class="box blue"></div>
<div class="box red display"></div>
<div class="box green"></div>
<div class="box gold"></div>
</div>
<h2>overflow: hidden;</h2>
<div class="wrap">
<div class="box blue"></div>
<div class="box red overflow"></div>
<div class="box green"></div>
<div class="box gold"></div>
</div>
xxxxxxxxxx
.box.visibility{
visibility: hidden;
}
.box.display{
display: none;
}
.box.overflow{
width: 0;
height: 0;
margin: 0;
overflow: hidden;
}
/* 기본 스타일 설정 */
.wrap{
width: 240px;
height: 240px;
background-color: #eee;
}
.box{
width: 100px;
height: 100px;
margin: 10px;
display: inline-block;
float: left;
}
.red{background-color: red;}
.blue{background-color: blue;}
.green{background-color: green;}
.gold{background-color: gold;}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.