[210707 TIL - (1)] CSS

941 단어 CSSTILCSS

반응형 웹 (Responsive Web)

미디어 쿼리 (Media Query)

  • 미디어 쿼리란 반응형 웹을 구현하는 CSS 기술이다.
  • 특정 조건에 따라 CSS를 바뀌게 설정할 수 있다.
  • CSS에 @media 라는 문법으로 작성된다.
@media only screen and (max-width: 480px) {
    body {
        color: red;
    }
}
  • 480px보다 작은 화면에서 설정한 CSS가 적용됨
  • @media
    이 키워드는 media 쿼리를 시작하겠다는 의미이다.
  • only screen
    어떤 디바이스에서 적용하는지 알려준다. 예를 들면 프린트를 하고싶을 때 적용하려면 only print라고 작성하면 된다. screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용된다.
  • and (max-width : 480px)
    이건 media feature라고 불리는 부분이다. 어느 조건에 아래의 css를 적용할지 작성해주면 된다.
@media only screen and (min-width: 320px) and (max-width: 480px) {
    /* ruleset for 320px - 480px */
}
  • 스크린에서 적용된다.
  • 320px 이상 480px 이하의 화면에서 css가 적용된다.

좋은 웹페이지 즐겨찾기