styled component에서 media query

기존 css 파일의 media query

@media screen and (min-width: 618px) and (max-width: 1079px) {
  .lecture__card {
    width: calc(100% / 3);
  }
}
  
@media screen and (max-width: 617px) {
  .lecture__card {
    width: 50%;
  }

  .lecture__card__title {
    font-size: 0.9rem;
  }
}

styled component에서 media query

const LectureCardStyle = styled.li`
  padding: 12px;
  width: 25%;
  height: 300px;

  @media screen and (min-width: 618px) and (max-width: 1079px) {
    width: calc(100% / 3);
  }
  @media screen and (max-width: 617px) {
    width: 50%;
  }
`;

const LectureCardTitle = styled.h3`
  color: var(--color-dark-grey);
  @media screen and (max-width: 617px) {
    font-size: 0.9rem;
  }
`;

css파일은 각각 media query를 따로 작성을 하고
media query의 조건 안에 변화할 클래스들을 넣는 방식이라면

styled component는 미디어 쿼리를 작성하고 css 속성값들을 입력하면 알아서 해당 컴포넌트에 적용되는 방식이다.