[CSS] 반응형 디자인 media query

• 참고 문서 :
  https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Using media queries - CSS: Cascading Style Sheets | MDN

 

• 사용 예시

/* Media Query */
@media screen and (max-width:760px) {
  .navbar__toggle-btn {
    display: block;
  }

  #navbar {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .navbar__menu {
    flex-direction: column;
    text-align: center;
    display: none;
  }

  .about__majors {
    flex-direction: column;
  }

  .major {
    margin-bottom: 2rem;
  }

  .skillset {
    flex-direction: column;
  }

  .project {
    flex-grow: 1;
  }

  .testimonial__avatar {
    width: 80px;
    height: 80px;
  }

}