CSS를 활용하면 별도의 JavaScript 없이도 화면 크기에 맞춰 자동으로 레이아웃이 조정되는 반응형 타임라인을 손쉽게 만들 수 있습니다. 이 글에서는 중앙에 세로 선이 지나가고, 좌우로 번갈아 배치된 이벤트 카드와 화살표, 마커로 구성된 타임라인을 구현하는 방법을 소개합니다.
핵심 구현 원리
이 타임라인은 다음과 같은 CSS 기법으로 구성됩니다.
· ::after 가상 요소: 타임라인의 중앙 세로선과 각 이벤트의 원형 마커를 그립니다.
· ::before 가상 요소: 이벤트 카드에서 중앙 선 방향으로 향하는 삼각형 화살표를 만듭니다.
· 미디어 쿼리(@media): 화면 너비가 600px 이하일 때 타임라인을 왼쪽 정렬 구조로 전환해 모바일 환경에 대응합니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {
background-color: #9037f5;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}
h2 {
text-align: center;
}
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.timeline::after {
content: " ";
position: absolute;
width: 6px;
background-color: rgb(253, 203, 255);
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* 이벤트를 감싸는 컨테이너 */
.eventsContainer {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
.eventsContainer::after {
content: " ";
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: rgb(219, 255, 12);
border: 4px dashed rgb(255, 0, 0);
background-clip: content-box;
top: 15px;
z-index: 1;
}
.displayLeft {
left: 0;
}
.displayRight {
left: 50%;
}
.displayLeft::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid rgb(225, 246, 255);
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
.displayRight::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
.displayRight::after {
left: -16px;
}
.event {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
@media screen and (max-width: 600px) {
.timeline::after {
left: 31px;
}
.eventsContainer {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
.eventsContainer::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
.displayLeft::after, .displayRight::after {
left: 15px;
}
.displayRight {
left: 0%;
}
}
</style>
</head>
<body>
<div class="timeline">
<div class="eventsContainer displayLeft">
<div class="event">
<h2>2017</h2>
<h3>도널드 트럼프, 미국 제45대 대통령으로 취임</h3>
</div>
</div>
<div class="eventsContainer displayRight">
<div class="event">
<h2>2016</h2>
<h3>브라질 리우데자네이루에서 하계 올림픽 개최</h3>
</div>
</div>
<div class="eventsContainer displayLeft">
<div class="event">
<h2>2015</h2>
<h3>네팔에 규모 7.8 강진 발생</h3>
</div>
</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 데스크톱 화면에서는 중앙의 세로선을 기준으로 이벤트 카드가 좌우 번갈아 배치된 타임라인이 나타납니다.
화면 너비를 600px 이하로 줄이면 미디어 쿼리가 작동하여, 모든 이벤트 카드가 왼쪽에 정렬되고 세로선도 왼쪽으로 이동한 모바일 최적화 레이아웃으로 자동 전환됩니다.
마무리
이처럼 position 속성과 가상 요소, 미디어 쿼리만 조합하면 JavaScript 없이도 깔끔하고 반응형인 타임라인 UI를 완성할 수 있습니다. 색상, 마커 크기, 카드 스타일 등을 자유롭게 수정하여 자신만의 디자인으로 응용해 보세요.