오늘은 회사에서 백엔드 개발자분의 요청으로 Skeleton UI를 가장 간단하게 만들어달라는 요청이 있어서 최대한 빨리 만들어 보았습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.wrapper {
width: 20rem;
border: 1px solid #e4eaef;
border-radius: 12px;
overflow: hidden;
}
@keyframes loading {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.imgBox {
height: 207px;
background: #f7f9fa;
background-size: 200% 100%;
animation: loading 2.5s infinite;
}
.infoBox {
padding: 12px;
> :nth-child(1) {
width: 100%;
height: 1.5rem;
border-radius: 0.5rem;
background-color: #e4eaef;
background-size: 200% 100%;
animation: loading 2.5s infinite;
}
> :nth-child(2) {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.itemBox {
display: flex;
gap: 0.5rem;
}
.lastItemBox {
display: flex;
justify-content: space-between;
align-items: center;
}
.itemIcon {
width: 1rem;
height: 1rem;
border-radius: 0.1rem;
background-color: #e4eaef;
background-size: 200% 100%;
animation: loading 2.5s infinite;
}
.itemMent {
width: 5rem;
height: 1rem;
border-radius: 0.5rem;
background-color: #e4eaef;
background-size: 200% 100%;
animation: loading 2.5s infinite;
}
.priceBox {
width: 6rem;
height: 1.8rem;
border-radius: 0.5rem;
background: #e4eaef;
border-radius: 1rem;
background-size: 200% 100%;
animation: loading 2.5s infinite;
}
}
</style>
<body>
<div class="wrapper">
<div class="imgBox"></div>
<div class="infoBox">
<div></div>
<div>
<div class="itemBox">
<div class="itemIcon"></div>
<div class="itemMent"></div>
</div>
<div class="itemBox">
<div class="itemIcon"></div>
<div class="itemMent"></div>
</div>
<div class="itemBox">
<div class="itemIcon"></div>
<div class="itemMent"></div>
</div>
<div class="lastItemBox">
<div class="itemBox">
<div class="itemIcon"></div>
<div class="itemMent"></div>
</div>
<div class="priceBox"></div>
</div>
</div>
</div>
</div>
</body>
</html>
여기서 핵심은 @keyframes에서 opacity를 이용하여 구현한 것입니다.
코드를 그대로 가져다가 실행하시면 opcity가 변함으로 인해 반짝거리는 효과를 보실 수 있습니다.
'지식 정리 📝' 카테고리의 다른 글
| PlanetScale DB 연결 법 (0) | 2024.01.10 |
|---|---|
| PlanetScale CLI (zsh: command not found: brew Error 해결법) (0) | 2024.01.09 |
| React DatePicker 날짜 & 시간 저장 오류 (2) | 2024.01.03 |
| 날짜 형식을 쉽게 변경할 수 있는 정규식 (0) | 2023.12.28 |
| tailWind CSS darkMode 적용 (0) | 2023.12.18 |