반응형 웹을 위한 CSS @media

디바이스에 따라 반응형 웹을 보여주기 위한 CSS의 미디어 쿼리(Media Query)

 

 

간단한 예제를 보면서 알아보자.

#greeting {
  text-align: center;
  font-size: 32px;
}

@media (max-width: 800px) {
   /* width 값이 800px 이하일때 적용될 스타일을 여기에 작성 */
  #greeting {
    font-size: 24px;
  }
}

먼저 데스크탑 퍼스트로 작성한 코드이다. (데스크탑 우선으로 작성했다는 뜻)

미디어 쿼리 속성을 max-width 로 800px 을 주면 width 값이 800px 이하일 때

#greeting 의 font-size 가 32px 에서 24px 로 변경됩니다. 그리고 기존 text-align 속성은 유지된다.

 

#greeting {
  text-align: center;
  font-size: 24px;
}

@media (min-width: 800px) {
   /* width 값이 800px 이상일때 적용될 스타일을 여기에 작성 */
  #greeting {
    font-size: 32px;
  }
}

이번에는 모바일 퍼스트로 작성한 코드로 미디어 쿼리 속성을 min-width 로 주면 width 값이 800px 이상일 때 스타일이 변경된다.

 

이렇게 CSS 미디어 쿼리를 사용하면 디바이스 종류에 따라 반응하는 웹을 만들 수 있다.

 

추가로 미디어 쿼리에는 여러 가지 타입과 속성이 있는데..

only 는 뒤의 조건을 따르고 not 은 뒤의 조건만 제외한다. 생략하면 only 가 기본값이 된다.

 

미디어 타입은 여러 가지가 있지만 반응형 웹에는 보통 screen 이나 all 을 사용하고 print, speech 등이 있다. 기본 값은 all 이며 모든 미디어 타입에 적용된다.

 

속성으로는 보통 max-width 와 min-width 를 사용하고 height, device-width 등이 있다.

---

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries

미디어 쿼리 초보자 안내서 - Web 개발 학습하기 | MDN