개발 공부/CSS
애니메이션 효과가 들어간 상품 레이아웃 만들기
차정
2022. 7. 7. 17:12
[코딩애플 HTML/CSS All-in-one] 강의 수강 후 배운 것을 정리한 것입니다.
https://codingapple.com/course/html-basics/
1. 시작 스타일 만들기
이미지만 있는 css 작성
<div class="shop-bg">
<div class="shop-container">
<div class="shop-item">
<img src="image/product.jpeg" alt="제품 이미지" />
</div>
<div class="shop-item">
<img src="image/product.jpeg" alt="제품 이미지" />
</div>
<div class="shop-item">
<img src="image/product.jpeg" alt="제품 이미지" />
</div>
</div>
</div>
* {
box-sizing: border-box;
}
.shop-bg {
background-color: rgb(210, 210, 210);
padding: 20px;
}
.shop-container {
display: flex;
justify-content: space-around;
align-items: center;
width: 80%;
margin: auto;
}
.shop-item {
width: 33%;
max-width: 300px;
padding: 20px;
}
.shop-item img {
width: 100%;
display: block; /*이미지 밑에 보이지 않는 선 있어서 overlay박스와 크기 다를때 이미지에 display:block 해준다*/
}
이렇게 하면 처음 스타일이 만들어짐 얍
2. 최종 스타일 만들기
- 이미지위에 오버레이 될 투명도있는 박스를 이미지 바로 위에 붕 띄우도록 한다.
- 붕 띄우는 효과 위해 position absolute 주고, 그러기 위해 부모 relative를 이미지와 overlay 박스를 함께 감싸준다.
<div class="shop-bg">
<div class="shop-container">
<div class="shop-item">
<!--추가--> <div style="position: relative">
<!--추가--> <div class="overlay"></div>
<img src="image/product.jpeg" alt="제품 이미지" />
<!--추가--> </div>
</div>
</div>
</div>
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0; /* opacity를 0으로 한게 처음스타일, 1로 한게 최종스타일 */
}
3. 언제 최종 스타일로 변하는지 정하기
최종스타일 opacity:1 은 hover 일때 주기로 한다.
.overlay:hover {
opacity: 1;
}
4. transition으로 애니메이션
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
/* + */ transition: all 1s;
/* + */ transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}