숙제풀이 영상을 보기전에 제가 개인적으로 풀이한건데
강사님 해설영상과는 비슷하면서도 묘하게 달라서요... 이게 문제가 있을지 궁금합니다.
제가 float로 구현하려고해서 달라진걸까요
<body>
<div class="bg-gray">
<div class="shop-container">
<div class="shop-item"><div class="overLay"><h4>$60</h4><p>인기상품</p></div>< img src="product1-1.jpg"></div>
<div class="shop-item"><div class="overLay"><h4>$40</h4><p>인기상품</p></div>< img src="product2.jpg"></div>
<div class="shop-item"><div class="overLay"><h4>$30</h4><p>인기상품</p></div>< img src="product3.jpg"></div>
<div class="floatClear"></div>
</div>
</div>
</body>
css파일 클래스들
.floatClear {
float: none;
clear: both;
}
.bg-gray {
background-color: #4c4e53bd;
width: 50%;
max-width: 500px;
margin: auto;
padding: 10px;
}
.shop-container {
}
.shop-item {
width: 33%;
max-width: 140px;
float: left;
margin: 10px;
position: relative;
}
.shop-item img {
width: 100%;
display: block;
}
.overLay {
position: absolute;
overflow: hidden;
width: 100%;
height: 0%;
bottom:0;
opacity: 0;
background-color: gray;
transition-property: opacity, height;
transition-delay: 0.3s;
transition-duration: 1.5s;
}
.overLay>h4,p {
margin: 10px 0px;
}
.shop-item:hover {
.overLay {
opacity: 0.5;
height: 50%;
}
}
@media screen and (max-width : 1200px) {
.shop-item {
float: none;
width:100%;
}
.bg-gray {
width: 180px;
}
}
이중에서 특히
.shop-item:hover {
.overLay {
opacity: 0.5;
height: 50%;
}
}
이렇게 클래스내에 클래스를 집어넣는식으로 하는게 문제없는 방법인지 궁금합니다.
난잡해지는것 같기도해서요
