@media - 미디어 쿼리

@media

스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용한다. 미디어 쿼리를 지정하면 해당 쿼리를 만족할 때 CSS 스타일이 적용된다. 반응형 웹 디자인의 기본이 된다.

표현식은 width, height, color와 같은 미디어 특성(media feature)들을 이해서 그 특성들의 조건에 따라 다른 스타일을 적용할 수 있다.

 

 

@media (조건) {
  스타일
}

 

조건에 만족할 때 스타일이 적용된다.

 

 

max-width

좁은 화면에서만 특정 스타일을 적용하고 싶을 때는 조건을 화면의 최대 너비로 설정해서 너비가 될 때까지 스타일을 적용시키도록 한다. 

 

        @media screen and (max-width:360px){ 
            .container{
                background-color:pink;
            }
        }

너비가 360px 될 때까지 background-color:pink가 적용된다. 

 

 

 

 

 

min-width

넓은 화면에서만 특정 스타일을 적용하고 싶을 때는 최소너비를 설정해서 최소너비가 되기전까지 스타일을 적용할 수 있다.

 

        @media screen and (min-width:1200px){ 
            .container{
                background-color:yellow;
            }
        }

너비가 1200px보다 클 동안은 위 스타일이 적용된다.