Chapter07. 쇼핑몰 웹사이트 만들기

부트스트랩을 이용한 나이키 웹사이트 만들기

완성된 웹사이트
https://chapter07.jaeyounging.repl.co/#

미디어 쿼리🏋️‍♂️

미디어 쿼리는 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)과 적어도 하나 이상의 표현식(expression)으로 구성됩니다. 표현식은 width, height, color와 같은 미디어 특성(media feature)들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있습니다.
출처: https://offbyone.tistory.com/121 [쉬고 싶은 개발자]

같은 조건이라면 미디어 쿼리 조건 하나에 스타일을 여러개 쓰셔도 됩니다.

예를들면

@media screen and (max-width: 48rem) {

  .second-line {

    padding: 0 2rem;

  }

  .flag {

    display: none;

  }

  .first-line {

    text-align: center;

  }

  .mobile-footer {

    display: block;

  }

}