👉 완성본 보기
<main>
<section id="about" class="section">
<header class="section__header">
<strong class="section__tag">
about
</strong>
<h1 class="section__title">
얄코강좌는
</h1>
</header>
<div class="about">
<div class="about__card">
<img class="about__icon" src="./images/about_1.svg" alt="">
<h2 class="about__title _1">
빠른 강의
</h2>
<p class="about__text">
군더더기 없는 진행으로 <br>
여러분의 시간을 절약합니다.
</p>
</div>
<div class="about__card">
<img class="about__icon" src="./images/about_2.svg" alt="">
<h2 class="about__title _2">
손쉬운 학습
</h2>
<p class="about__text">
강의 페이지를 활용해서 <br>
편리하게 실습할 수 있습니다.
</p>
</div>
<div class="about__card">
<img class="about__icon" src="./images/about_3.svg" alt="">
<h2 class="about__title _3">
플레이그라운드
</h2>
<p class="about__text">
강의를 위해 제작한 도구가 <br>
반복학습을 도와줍니다.
</p>
</div>
</div>
</section>
</main>
3-main.css
.section {
padding: 64px 16px;
text-align: center;
}
.section__tag {
font-size: var(--font-size-tag);
color: var(--color-sub);
}
.section__title {
font-size: var(--font-size-title);
font-weight: bold;
color: var(--color-text);
}
데스크탑
main {
display: grid;
grid-template-columns: 1fr 1fr;
}
4-about.css
1. 섹션 설정
#about {
background-color: var(--color-light-bg);
}
데스크탑
#about {
grid-column: 1 / -1;
}
2. 카드들 레이아웃
.about {
display: inline-flex;
gap: 1em;
margin-top: 48px;
}
모바일
.about {
flex-direction: column;
width: 100%;
}
3. 카드와 아이콘
.about__card {
padding: 48px;
text-align: center;
color: white;
background-color: var(--color-dark);
border-radius: 12px;
}
.about__icon {
width: 120px;
opacity: 0.25;
}
데스크탑
.about__card {
width: 320px;
cursor: pointer;
transition: all 350ms;
}
4. 카드 안의 텍스트
.about__title {
margin-top: 0.6em;
font-size: var(--font-size-larger);
font-weight: bold;
}
.about__title._1 {
color: #FFB974;
}
.about__title._2 {
color: #6BB0F3;
}
.about__title._3 {
color: #FFBDCE;
}
.about__text {
margin-top: 0.8em;
font-size: var(--font-size-text);
}
5. 영역에 마우스 오버시 해당 카드 외 축소
데스크탑
.about:hover .about__card:not(:hover) {
transform: scale(0.9);
}
6. 흐림 필터
데스크탑
/* 흐림 필터링을 위한 덮개 */
.about:hover .about__card:not(:hover)::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
7. 롤오버된 카드
데스크탑
.about__card:hover {
transform: scale(1.04);
}
.about__card:hover .about__icon {
opacity: 1;
}