👉 완성본 보기
<section id="curriculum" class="section">
<header class="section__header">
<strong class="section__tag">
curriculum
</strong>
<h1 class="section__title">
커리큘럼
</h1>
</header>
<div class="curriculum">
<ol class="curriculum__list">
<li><span>강의소개</span></li>
<li><span>HTML 기초</span></li>
<li><span>CSS 기초</span></li>
<li><span>HTML 심화</span></li>
<li><span>CSS 심화</span></li>
<li><span>파이널 프로젝트</span></li>
<div class="curriculum__progress"></div>
</ol>
</div>
</section>
6-curriculum.css
1. 섹션과 타이틀
#curriculum {
background-color: var(--color-dark);
}
#curriculum .section__title {
color: white;
}
데스크탑
#curriculum {
grid-column: 1 / -1;
padding-bottom: 88px;
}
2. 커리큘럼 레이아웃
.curriculum {
display: inline-block;
position: relative;
}
.curriculum__list {
display: inline-flex;
font-size: var(--font-size-larger);
font-weight: 100;
text-align: left;
color: white;
}
모바일
.curriculum__list {
flex-direction: column;
margin-top: 48px;
}
데스크탑
.curriculum__list {
margin: 56px 0 56px 40px;
}
3. 항목들
.curriculum__list li {
font-size: 1.1em;
}
.curriculum__list li::before {
content: '';
position: relative;
z-index: 1;
display: inline-block;
width: 30px;
height: 30px;
vertical-align: middle;
box-sizing: border-box;
border-radius: 100%;
border: 4px solid white;
background-color: var(--color-dark);
}
모바일
.curriculum__list li {
line-height: 100px;
cursor: pointer;
}
.curriculum__list li span {
margin-left: 1.6em;
}
데스크탑
.curriculum__list li {
position: relative;
width: 200px;
height: 120px;
}
.curriculum__list li span {
/* 글자 수에 관계없이 통일된 위치로 기울어지도록 */
display: inline-block;
width: 164px;
position: absolute;
z-index: 1;
top: 84px;
left: 14px;
opacity: 0.5;
transform: rotate(45deg);
}
.curriculum__list li:hover span {
opacity: 1;
}
4. 프로세스 바
.curriculum__progress {
position: absolute;
}
모바일
.curriculum__progress {
top: 108px;
left: 12px;
width: 0px;
height: 500px;
border-left: 6px dotted white;
transform: skewY(-30deg);
}
데스크탑
.curriculum__progress {
top: 70px;
left: 56px;
width: 1000px;
height: 8px;
background-color: rgba(255, 255, 255, 0.1);
}
5. 프로그래스 바 롤오버
데스크탑
.curriculum__progress::after {
content: '';
position: absolute;
top: 0; left: 0;
background-color: var(--color-sub);
width: 0;
height: 8px;
transition: all 1s;
}
.curriculum__list li:hover::before {
background-color: var(--color-sub);
}
.curriculum__list li:nth-child(2):hover
~ .curriculum__progress::after {
width: 200px;
}
.curriculum__list li:nth-child(3):hover
~ .curriculum__progress::after {
width: 400px;
}
.curriculum__list li:nth-child(4):hover
~ .curriculum__progress::after {
width: 600px;
}
.curriculum__list li:nth-child(5):hover
~ .curriculum__progress::after {
width: 800px;
}
.curriculum__list li:nth-child(6):hover
~ .curriculum__progress::after {
width: 1000px;
}