반응형 레이아웃 - media query

head에 아래와 같은 코드 있어야 모바일에서 작동할 수 있다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

 

미디어 쿼리는 CSS 파일 제일 아랫쪽에 작성한다!

똑같은 클래스명으로 똑같은 스타일을 재정의하는(덮어씌우는) 것이기 때문에 맨 마지막에 작성해야한다.

 

 

 

@media screen and (max-width : 1200px) { 
  .box { 
    font-size : 40px; 
  } 
}

 

@media screen and (max-width : 1200px)  

 :  "현재 브라우저의 폭이 1200px 이하일 경우에 아래 스타일을 적용한다" 라는 뜻