Step state(단계별 상태바) CSS :nth-child 활용

Step state progress bar

CSS 가상 선택자인 nth-child 와 가상요소인 ::before, ::after 를 이용한 스텝바를 구현해 보도록 합니다.

Source View

See the Pen 단계별 상태바 스타일 by jaeheekim (@jaehee) on CodePen.

CSS

css

* {box-sizing:border-box}
ul {
	list-style:none;
}

/* 단계별 상태 스타일 */
.step-box {
	padding:0 10px 10px 10px;
	border:1px solid #ddd;
	background:#fff
}
.step-state {
	padding:10px 0 15px;
	margin-top:15px;
	background:#f7f7f7
}
.step-state ul:after {
	content:'';
	display:block;
	clear:both
}
.step-state ul li {
	float:left;
	position:relative;
	width:20%; /* 5개 진행바를 5등분 */
	padding-top:50px; /* 진행바 영역 확보 */
	font-size:15px;
	font-weight:bold;
	text-align:center;
	line-height:12px;
	color:#666
}
.step-state ul li:first-child {
	font-size:13px
}
/* 도전중, 달성 텍스트 영역 */
.step-state ul li p:after {
	position:absolute; /* absolute 기준은 li 영역 */
	width:41px;
	height:24px;
	margin-right:-20px;
	background:url(https://t1.daumcdn.net/cfile/tistory/241D463E58AFAEAB16) no-repeat 0 0;
	background-size:auto 24px;
	background-position:-58px 0;
	top:0;
	right:0;
	color:#fff;
	font-size:11px;
	line-height:16px;
	letter-spacing:-.5px;
}
.step-state ul li:first-child p {
	padding-top:6px
}
.step-state ul li span {
	display:block;
	margin-top:2px;
	font-weight:normal;
	color:#898989;
	font-size:12px
}
/* 회색 진행바 생성 */
.step-state ul li:before {
	position:absolute;
	top:35px;
	left:0;
	right:0;
	height:3px;
	background:#ddd;
	content:''
}
/* 첫 번째 진행바 반만 생성*/
.step-state ul li:nth-child(1):before {
	left:50%
}
/* 마지막 진행바 반만 생성*/
.step-state ul li:nth-child(5):before {
	right:50%
}
/* 화살표 상태 아이콘 */
.step-state ul li:after {
	position:absolute;
	top:27px;
	left:50%;
	width:20px;
	height:20px;
	margin-left:-10px;
	background:url(https://t1.daumcdn.net/cfile/tistory/241D463E58AFAEAB16) no-repeat 0 0;
	background-size:auto 24px;
	background-position:0 0;
	content:''
}

/* 활성화 진행바 및 활성화 화살표 아이콘 표시 */
/* 활성화 상태바 */
.step-state.step1 ul li:nth-child(1):before,
.step-state.step2 ul li:nth-child(-n+2):before,
.step-state.step2-ing ul li:nth-child(-n+2):before,
.step-state.step3 ul li:nth-child(-n+3):before,
.step-state.step3-ing ul li:nth-child(-n+3):before,
.step-state.step4 ul li:nth-child(-n+4):before,
.step-state.step4-ing ul li:nth-child(-n+4):before,
.step-state.step5 ul li:nth-child(-n+5):before {
	background:#ff889b
}
/* 활성화 아이콘 표시 */
.step-state.step1 ul li:nth-child(1):after,
.step-state.step2 ul li:nth-child(-n+2):after,
.step-state.step2-ing ul li:nth-child(-n+2):after,
.step-state.step3 ul li:nth-child(-n+3):after,
.step-state.step3-ing ul li:nth-child(-n+3):after,
.step-state.step4 ul li:nth-child(-n+4):after,
.step-state.step4-ing ul li:nth-child(-n+4):after,
.step-state.step5 ul li:nth-child(-n+5):after {
	background-position:-20px 0
}
/* 도전 중일 경우의 1/2 영역 비활성화 상태바 영역 */
.step-state ul li p:before {
	position:absolute;
	top:35px;
	left:50%;
	right:0;
	height:3px;
	content:'';
}
.step-state.step2 ul li:nth-child(2) p:before,
.step-state.step3 ul li:nth-child(3) p:before,
.step-state.step4 ul li:nth-child(4) p:before {
	background:#ddd
}
/* "도전중" 텍스트 표시 */
.step-state.step1 ul li:nth-child(1) p:after,
.step-state.step2-ing ul li:nth-child(2) p:after,
.step-state.step3-ing ul li:nth-child(3) p:after,
.step-state.step4-ing ul li:nth-child(4) p:after {
	content:'도전중';
}

/* "달성" 텍스트 표시 */
.step-state.step2 ul li:nth-child(2) p:after,
.step-state.step3 ul li:nth-child(3) p:after,
.step-state.step4 ul li:nth-child(4) p:after,
.step-state.step5 ul li:nth-child(5) p:after {
	content:'달성';
	right:50%
}

Jaehee's WebClub