이번 포스팅에서는 간단한 스켈레톤 UI를 구현하는 방법을 소개하고자 합니다.
스켈레톤 UI는 웹 페이지나 앱에서 콘텐츠가 로딩되는 동안 사용자에게 표시되는 임시 로딩 플레이스홀더입니다. 이는 사용자 경험을 향상시키기 위한 방법 중 하나로, 사용자에게 콘텐츠가 준비 중임을 알리면서 동시에 페이지의 레이아웃을 미리 보여줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 스타일 시작 -->
<style>
/* 스켈레톤 UI의 외부 컨테이너 스타일 */
.skeleton-wrapper {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 10px;
}
/* 스켈레톤 UI의 기본 스타일 및 애니메이션 */
.skeleton-header,
.skeleton-line {
background: linear-gradient(
90deg,
#f0f0f0 25%,
#e0e0e0 50%,
#f0f0f0 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
/* 스켈레톤 UI의 헤더 스타일 */
.skeleton-header {
width: 100%;
height: 200px;
border-radius: 10px;
margin-bottom: 20px;
}
/* 스켈레톤 UI의 내용 스타일 */
.skeleton-content .skeleton-line {
height: 20px;
margin-bottom: 10px;
border-radius: 4px;
}
/* 마지막 스켈레톤 라인 스타일 */
.skeleton-content .skeleton-line:last-child {
width: 70%;
}
/* 스켈레톤 UI의 반짝임 애니메이션 */
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
</style>
<!-- 스타일 종료 -->
<title>스켈레톤 UI 예제</title>
</head>
<body>
<!-- 스켈레톤 UI 시작 -->
<div class="skeleton-wrapper">
<div class="skeleton-header"></div>
<div class="skeleton-content">
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
</div>
</div>
<!-- 스켈레톤 UI 종료 -->
<!-- 실제 콘텐츠 시작 -->
<div class="actual-content" style="display: none">
<img src="sample.jpg" alt="Sample Image" width="100%" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
</p>
<p>
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies
sed, dolor.
</p>
<p>
Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper
congue, euismod non, mi.
</p>
</div>
<!-- 실제 콘텐츠 종료 -->
<!-- 자바스크립트 시작 -->
<script>
window.onload = function () {
setTimeout(function () {
// 스켈레톤 UI 숨기기
document.querySelector(".skeleton-wrapper").style.display = "none";
// 실제 콘텐츠 표시
document.querySelector(".actual-content").style.display = "block";
}, 1000); // 1초 후 실행
};
</script>
<!-- 자바스크립트 종료 -->
</body>
</html>위의 예제에서는 간단한 스켈레톤 UI 로딩 애니메이션을 구현하였습니다. 페이지가 로드되면 1초 동안 스켈레톤 UI를 표시하고, 이후 실제 콘텐츠로 전환됩니다. 스켈레톤 UI의 로딩 애니메이션은 사용자에게 콘텐츠가 곧 표시될 것임을 시각적으로 알려줍니다.
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] Tailwind로 Mac Terminal 만들기 (0) | 2023.11.05 |
|---|---|
| [HTML/CSS] 다양한 hover effect를 가진 버튼 만들기 (2) | 2023.10.30 |
| [HTML/CSS] Tailwind 사용해서 indications 있는 input 폼 만들기 (0) | 2023.08.29 |
| [HTML/CSS] bootstrap selectbox (0) | 2023.07.12 |
| [HTML/CSS] table contenteditable 속성 사용하기 (0) | 2023.06.24 |
