Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Yunzz's 코딩정리

[CSS] 단계 별 (Step-by-Step) 페이지 구성 본문

Coding/CSS

[CSS] 단계 별 (Step-by-Step) 페이지 구성

Yunzz 2024. 1. 12. 17:03

단계 별 페이지 구성하는 방법

 

<HTML>

<ul class="steps">
  <li class="done"><a href="">Step 1</a></li>
  <li class="active"><p>Step 2</p></li>
  <li class="undone"><a href="">Step 3</a></li>
  <li class="undone"><a href="">Step 4</a></li>
  <li class="undone"><p>Disabled step</p></li>
</ul>

 

<CSS>

.steps {
  list-style-type: none;
  padding: 0;
  text-align: center;
}
.steps li {
  display: inline-block;
  margin-bottom: 3px;
  width: 18%;
}
.steps li a, .steps li p {
  background: #B71F2B30;
  padding: 8px 20px;
  color: #B71F2B;
  display: block;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  text-indent: 12px;
}
.steps li a:hover, .steps li p:hover {
  text-decoration: none;
}
.steps li a:before, .steps li p:before {
  border-bottom: 24px solid transparent;
  border-left: 12px solid #fff;
  border-top: 24px solid transparent;
  content: "";
  height: 0;
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  margin-top: -24px;
}
.steps li a:after, .steps li p:after {
  border-bottom: 24px solid transparent;
  border-left: 12px solid #B71F2B30;
  border-top: 24px solid transparent;
  content: "";
  height: 0;
  position: absolute;
  left:100%;
  top: 50%;
  width: 0;
  margin-top: -24px;
  z-index: 1;
}

.steps li.active a, .steps li.active p {
  background: #B71F2B;
  color: #fff;
}
.steps li.active a:after, .steps li.active p:after {
  border-left: 12px solid #B71F2B;
}
.steps li.undone a, .steps li.undone p {
  background: #eee;
  color: #333;
}
.steps li.undone a:after, .steps li.undone p:after {
  border-left: 12px solid #eee;
}
.steps li.undone p {
  color: #bbb;
}


 
 
See the Pen step-by-step ver.2 by 조윤주 (@gnlvrezv-the-solid) on CodePen.

'Coding > CSS' 카테고리의 다른 글

[CSS] 반응형 사이드바 (Responsive Sidebar Menu) 생성  (0) 2024.01.18
[CSS] Double Range 슬라이드 구성  (0) 2024.01.16
[CSS] CSS 적용 안될 때 해결방법  (0) 2024.01.12
[CSS] 툴팁 (Tooltip) 적용 방법 + 마우스오버 (hover)  (0) 2024.01.12
[CSS] CSS 선택자 종류  (0) 2024.01.12
'Coding/CSS' Related Articles more