CSS [9] – Media Query, 미디어 쿼리로 반응형 웹 만들기

CSS Tutorial – Full Course for Beginners

Lesson 18 – Media Queries

/* 미디어 쿼리 신텍스 */
@media media type and (condition: breakpoint) {
  // CSS rules
}

@media screen and (min-width: 481px) {
  //
}

@media screen and (min-aspect-ratio: 7/4) {
  //
}

@media screen and (orientation: landscape) {
  //
}

• 미디어 쿼리는 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공

/* || SMALL */
@media screen and (min-width: 576px) {
  body {
    background-color: green;
    background-image: radial-gradient(whitesmoke, green);
  }

  nav {
    display: none;
  }
}

/* || MEDIUM */
@media screen and (min-width: 768px) {
  body {
    background-color: gold;
    background-image: radial-gradient(whitesmoke, gold);
  }
}

/* || LARGE */
@media screen and (min-width: 992px) {
  body {
    background-color: firebrick;
    background-image: radial-gradient(whitesmoke, firebrick);
  }
}

/* || XL */
@media screen and (min-width: 992px) {
  body {
    background-color: rebeccapurple;
    background-image: radial-gradient(whitesmoke, rebeccapurple);
  }
}

/* || mobile device landscape */
@media screen and (max-height: 425px) and (min-aspect-ratio: 7/4) {
  body {
    background-color: dodgerblue;
    background-image: radial-gradient(whitesmoke, dodgerblue);
  }

  h1,
  h2 {
    font-size: 1.5rem;
  }

  nav {
    display: none;
  }
}

• min-width 조건을 사용하여 뷰포트 크기별로 디자인을 다르게 한 CSS 예시

• 개발자 도구에서 모바일 아이콘 클릭시 기기별 화면을 미리 볼 수 있음

*참고