1. 무엇이 궁금한가
HTML강의 | 중급모듈 | Transition 숙제 : 상품진열 레이아웃과 애니메이션
위 강의에서,
pseudo-element 적용하는 방법으로 알려주신 부분과 제가 구현한 방법이 달라서 확인차 글을 씁니다.
2. 무엇이 다른가
2-a.강의에서 나온 코드
(마크다운 문법은 안나오지만 일단 씁니다. 개인적으론 구현되었으면 좋겠습니다. 다른 분들 코드도 보고 그러면 더 좋을거 같아서요.)
```html
<body>
<div class="shop-bg">
<div class="shop-container">
<div class="shop-item">
<div class="relative">
<div class="overlay-wrap">
<div class="overlay-black relative">
<span class="font">$60</span>
<span class="font font-small">인기상품</span>
</div>
</div>
< img src="/1_basic_module/1_class/img/product1-1.jpg" alt="" />
</div>
</div>
</div>
</div>
</body>
```
shop-item > relative > overlay-wrap > 잔잔바리들
강의에선 overlay-wrap클래스 div를 만들어서
```css
.overlay-wrap:hover .overlay-black {
margin-top: 50%;
}
```
이렇게 하셨는데요,
2-b. 제가 짠 코드
```html
<body>
<div class="shop-bg">
<div class="shop-container">
<div class="shop-item">
<div class="hidden relative">
< img src="/1_basic_module/1_class/img/product1-1.jpg" alt="" />
<div class="overlay">
<span class="font">$60</span>
<span class="font font-small">인기상품</span>
</div>
</div>
</div>
</div>
</div>
</body>
```
shop-item > hidden relative > 잔잔바리들
그래서 그냥 shop-item에 :hover 먹이면 되겠다 싶어서
```css
.shop-item:hover {
.overlay {
top: 50%;
}
}
```
이랬는데 작동하더라구요?
mdn에서 뒤져볼려고 하는데 이게 원래 의도된 작동방식인지, 이렇게 써도 되는지 궁금합니다.
