[CSS] toy project 메인과 about 꾸미기

1. main

/* 데스크탑 */

@media (min-width: 769px) {

  main {

    display: grid;

    grid-template-columns: 1fr 1fr;

  }

}

.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);

}

 

2. about

 

a.모바일 화면

/* 미디어 */

@media (max-width: 768px) {

  .about {

    flex-direction: column;

    width: 100%;

  }

}

 

b. 데스크탑

 #about {

    grid-column: 1/-1;

  }

 

c. 데스크탑 - 카드 효과

 

.about__card {

    width: 320px;

    cursor: pointer;

    transition: all 350ms;

  }

  .about:hover .about__card:not(:hover) {

    transform: scale(0.9);

  }

  /* 흐림 필터링을 위한 덮개 */

  .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);

  }

  .about__card:hover {

    transform: scale(1.04);

  }

  .about__card:hover .about__icon {

    opacity: 1;

  }