CSS : 반응형 웹 (media query)

• 반응형 웹 (Responsive Web)

※ 사용하는 이유
- 웹 페이지의 크기를 사용자의 디바이스 화면 크기에 자동으로 조정하여, 사용자가 어떤 디바이스를 사용하더라도 일관된 화면과 기능을 제공할 필요가 있을때 사용한다.

※ 공식 홈페이지 (mdn)
- https://developer.mozilla.org/ko/docs/Web/CSS/CSS_media_queries/Using_media_queries

※ 기본 사용법

@media screen and (조건) {
    선택자 {
        적용할 CSS
    }
}

 

@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}