오늘은 타임라인 UI를 구현하는 방법과 간단한 코딩 샘플을 공유하려고 합니다.
이 글은 제가 나중에 참고하기 위해 기록한 내용이며, 다른 분들에게도 작은 도움이 되었으면 하는 마음으로 작성했습니다. 샘플 페이지가 필요하신 분들을 위해 샘플 페이지 바로가기 준비 했습니다.
타임라인 UI 장점?
그렇다면, 왜 타임라인 UI를 사용할까요? 어떤 장점이 있기에 이를 선택하게 될까요? 저는 세 가지 정도로 정리해 보았습니다.
- 정보 전달이 쉽고 직관적입니다.
- 시간의 연속성이나 단계적 흐름을 효과적으로 표현할 수 있습니다.
- 가독성과 시각적 효과를 동시에 제공합니다.
타임라인 UI 코드 – CSS
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<style>
/* 타임라인 스타일 */
.timeline-wrapper {
position: relative;
padding: 2rem 0;
}
.timeline-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 1rem;
height: 100%;
width: 2px;
background: #e9ecef;
}
.timeline-item {
position: relative;
padding-left: 3rem;
margin-bottom: 2.5rem;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-badge {
position: absolute;
left: -0.5rem;
width: 3rem;
height: 3rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
.timeline-badge i {
font-size: 1.2rem;
}
.timeline-card {
background: white;
border-radius: 1rem;
box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
transition: transform 0.3s ease;
}
.timeline-card:hover {
transform: translateX(10px);
}
.timeline-body {
padding: 1.5rem;
}
.timeline-title {
font-size: 1.25rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
}
.timeline-text {
color: #6c757d;
margin-bottom: 0;
}
@media (min-width: 768px) {
.timeline-wrapper::before {
left: 50%;
margin-left: -1px;
}
.timeline-item {
padding-left: 0;
padding-right: 50%;
margin-bottom: 4rem;
}
.timeline-item:nth-child(even) {
padding-left: 50%;
padding-right: 0;
}
.timeline-badge {
left: 50%;
margin-left: -1.5rem;
}
.timeline-item:nth-child(even) .timeline-card {
margin-left: 3rem;
}
.timeline-item:nth-child(odd) .timeline-card {
margin-right: 3rem;
}
}
/* 호버 효과 */
.timeline-card:hover {
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
/* 링크 호버 효과 */
a.text-decoration-none:hover {
opacity: 0.8;
}
</style>
부트스트랩을 사용했습니다. 그래서 <head></head> 사이에 넣을 때 부트스트랩 관련 코드 2개도 함께 넣어 줘야 합니다.
타임라인 UI 코드 – html
<!-- 안내 섹션 -->
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-lg-10">
<!-- 안내사항 헤더 -->
<div class="text-center mb-5">
<i class="bi bi-lightbulb-fill text-warning display-4 mb-3"></i>
<h2 class="fw-bold">안내사항</h2>
<p class="text-muted">원활한 결제를 위해 아래 내용을 확인해 주세요</p>
</div>
<!-- 타임라인 스타일의 안내사항 -->
<div class="timeline-wrapper">
<!-- 결제 순서 -->
<div class="timeline-item">
<div class="timeline-badge bg-primary">
<i class="bi bi-1-circle-fill"></i>
</div>
<div class="timeline-card">
<div class="timeline-body">
<h4 class="timeline-title">
<i class="bi bi-arrow-right-circle-fill text-primary me-2"></i>
결제 순서
</h4>
<p class="timeline-text">
아이디, 핸드폰 번호 입력 후 원하는 상품을 선택하시면 됩니다.
</p>
</div>
</div>
</div>
<!-- 정보 입력 주의사항 -->
<div class="timeline-item">
<div class="timeline-badge bg-warning">
<i class="bi bi-2-circle-fill"></i>
</div>
<div class="timeline-card">
<div class="timeline-body">
<h4 class="timeline-title">
<i class="bi bi-shield-check text-warning me-2"></i>
정보 입력 주의사항
</h4>
<p class="timeline-text">
입력하신 아이디와 핸드폰 번호는 나중에 결제 내역 조회시 사용되기 때문에 정확하게 입력해 주세요.
</p>
</div>
</div>
</div>
<!-- 상품 안내 -->
<div class="timeline-item">
<div class="timeline-badge bg-danger">
<i class="bi bi-3-circle-fill"></i>
</div>
<div class="timeline-card">
<div class="timeline-body">
<h4 class="timeline-title">
<i class="bi bi-cart-check text-danger me-2"></i>
상품 안내
</h4>
<p class="timeline-text">
각 상품에 대한 자세한 내용은
<a href="/price.php" class="link-danger text-decoration-none fw-bold">
가격안내 <i class="bi bi-box-arrow-up-right"></i>
</a>
를 참고하세요.
</p>
</div>
</div>
</div>
<!-- 상품 안내 -->
<div class="timeline-item">
<div class="timeline-badge bg-success">
<i class="bi bi-4-circle-fill"></i>
</div>
<div class="timeline-card">
<div class="timeline-body">
<h4 class="timeline-title">
<i class="bi bi-cart-check text-success me-2"></i>
상품 안내
</h4>
<p class="timeline-text">
각 상품에 대한 자세한 내용은
<a href="/price.php" class="link-success text-decoration-none fw-bold">
가격안내 <i class="bi bi-box-arrow-up-right"></i>
</a>
를 참고하세요.
</p>
</div>
</div>
</div>
<!-- 문의사항 -->
<div class="timeline-item">
<div class="timeline-badge bg-info">
<i class="bi bi-5-circle-fill"></i>
</div>
<div class="timeline-card">
<div class="timeline-body">
<h4 class="timeline-title">
<i class="bi bi-headset text-info me-2"></i>
문의사항
</h4>
<p class="timeline-text">
결제관련 문의 사항은
<a href="mailto:replypark@naver.com" class="link-info text-decoration-none fw-bold">
email@naver.com <i class="bi bi-envelope"></i>
</a>
으로 문의 주세요.
</p>
</div>
</div>
</div>
<!-- 계속 추가 하면 됨 -->
<div class="timeline-item">
<div class="timeline-badge bg-info"><!-- bg-info 색깔 변경 아래 2곳과 통일-->
<i class="bi bi-6-circle-fill"></i><!-- bi-숫자를 변경 -->
</div>
<div class="timeline-card">
<div class="timeline-body">
<h4 class="timeline-title">
<i class="bi bi-headset text-info me-2"></i><!-- text-info 색깔 변경 -->
문의사항
</h4>
<p class="timeline-text">
결제관련 문의 사항은
<a href="mailto:replypark@naver.com" class="link-info text-decoration-none fw-bold"><!-- link-info 색깔 변경 -->
email@naver.com <i class="bi bi-envelope"></i>
</a>
으로 문의 주세요.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>제일 마지막 부분에는 주석으로 설명을 추가해 두었습니다. 더 내용을 추가하려면 번호를 순차적으로 증가시키면 되고, 각 타임라인의 색상을 통일하는 것이 좋습니다. 이를 참고하여 적용해 주세요. 또한, 부트스트랩 아이콘의 색상은 아래 이미지를 참고하시면 됩니다.
타임라인 UI 샘플 코드 전체
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>서비스 요금제</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<style>
/* 타임라인 스타일 */
.timeline-wrapper {
position: relative;
padding: 2rem 0;
}
.timeline-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 1rem;
height: 100%;
width: 2px;
background: #e9ecef;
}
.timeline-item {
position: relative;
padding-left: 3rem;
margin-bottom: 2.5rem;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-badge {
position: absolute;
left: -0.5rem;
width: 3rem;
height: 3rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
.timeline-badge i {
font-size: 1.2rem;
}
.timeline-card {
background: white;
border-radius: 1rem;
box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
transition: transform 0.3s ease;
}
.timeline-card:hover {
transform: translateX(10px);
}
.timeline-body {
padding: 1.5rem;
}
.timeline-title {
font-size: 1.25rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
}
.timeline-text {
color: #6c757d;
margin-bottom: 0;
}
@media (min-width: 768px) {
.timeline-wrapper::before {
left: 50%;
margin-left: -1px;
}
.timeline-item {
padding-left: 0;
padding-right: 50%;
margin-bottom: 4rem;
}
.timeline-item:nth-child(even) {
padding-left: 50%;
padding-right: 0;
}
.timeline-badge {
left: 50%;
margin-left: -1.5rem;
}
.timeline-item:nth-child(even) .timeline-card {
margin-left: 3rem;
}
.timeline-item:nth-child(odd) .timeline-card {
margin-right: 3rem;
}
}
/* 호버 효과 */
.timeline-card:hover {
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
/* 링크 호버 효과 */
a.text-decoration-none:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<!-- 안내 섹션 -->
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-lg-10">
<!-- 안내사항 헤더 -->
<div class="text-center mb-5">
<i class="bi bi-lightbulb-fill text-warning display-4 mb-3"></i>
<h2 class="fw-bold">안내사항</h2>
<p class="text-muted">원활한 결제를 위해 아래 내용을 확인해 주세요</p>
</div>
<!-- 타임라인 스타일의 안내사항 -->
<div class="timeline-wrapper">
<!-- 결제 순서 -->
<div class="timeline-item">
<div class="timeline-badge bg-primary">
<i class="bi bi-1-circle-fill"></i>
</div>
<div class="timeline-card">
<div class="timeline-body">
<h4 class="timeline-title">
<i class="bi bi-arrow-right-circle-fill text-primary me-2"></i>
결제 순서
</h4>
<p class="timeline-text">
아이디, 핸드폰 번호 입력 후 원하는 상품을 선택하시면 됩니다.
</p>
</div>
</div>
</div>
<!-- 정보 입력 주의사항 -->
<div class="timeline-item">
<div class="timeline-badge bg-warning">
<i class="bi bi-2-circle-fill"></i>
</div>
<div class="timeline-card">
<div class="timeline-body">
<h4 class="timeline-title">
<i class="bi bi-shield-check text-warning me-2"></i>
정보 입력 주의사항
</h4>
<p class="timeline-text">
입력하신 아이디와 핸드폰 번호는 나중에 결제 내역 조회시 사용되기 때문에 정확하게 입력해 주세요.
</p>
</div>
</div>
</div>
<!-- 상품 안내 -->
<div class="timeline-item">
<div class="timeline-badge bg-danger">
<i class="bi bi-3-circle-fill"></i>
</div>
<div class="timeline-card">
<div class="timeline-body">
<h4 class="timeline-title">
<i class="bi bi-cart-check text-danger me-2"></i>
상품 안내
</h4>
<p class="timeline-text">
각 상품에 대한 자세한 내용은
<a href="/price.php" class="link-danger text-decoration-none fw-bold">
가격안내 <i class="bi bi-box-arrow-up-right"></i>
</a>
를 참고하세요.
</p>
</div>
</div>
</div>
<!-- 상품 안내 -->
<div class="timeline-item">
<div class="timeline-badge bg-success">
<i class="bi bi-4-circle-fill"></i>
</div>
<div class="timeline-card">
<div class="timeline-body">
<h4 class="timeline-title">
<i class="bi bi-cart-check text-success me-2"></i>
상품 안내
</h4>
<p class="timeline-text">
각 상품에 대한 자세한 내용은
<a href="/price.php" class="link-success text-decoration-none fw-bold">
가격안내 <i class="bi bi-box-arrow-up-right"></i>
</a>
를 참고하세요.
</p>
</div>
</div>
</div>
<!-- 문의사항 -->
<div class="timeline-item">
<div class="timeline-badge bg-info">
<i class="bi bi-5-circle-fill"></i>
</div>
<div class="timeline-card">
<div class="timeline-body">
<h4 class="timeline-title">
<i class="bi bi-headset text-info me-2"></i>
문의사항
</h4>
<p class="timeline-text">
결제관련 문의 사항은
<a href="mailto:replypark@naver.com" class="link-info text-decoration-none fw-bold">
email@naver.com <i class="bi bi-envelope"></i>
</a>
으로 문의 주세요.
</p>
</div>
</div>
</div>
<!-- 계속 추가 하면 됨 -->
<div class="timeline-item">
<div class="timeline-badge bg-info"><!-- bg-info 색깔 변경 아래 2곳과 통일-->
<i class="bi bi-6-circle-fill"></i><!-- bi-숫자를 변경 -->
</div>
<div class="timeline-card">
<div class="timeline-body">
<h4 class="timeline-title">
<i class="bi bi-headset text-info me-2"></i><!-- text-info 색깔 변경 -->
문의사항
</h4>
<p class="timeline-text">
결제관련 문의 사항은
<a href="mailto:replypark@naver.com" class="link-info text-decoration-none fw-bold"><!-- link-info 색깔 변경 -->
email@naver.com <i class="bi bi-envelope"></i>
</a>
으로 문의 주세요.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>위 글은 블로그의 ‘Web‘ 카테고리로 분류되었으며, 관련된 글을 더 많이 참고할 수 있습니다.