반응형 레이아웃 media query

🔎 media query 사용하는 법

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

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

css파일 최하단에 사용한다.

권장 Breakpoint
breakpoint란 media query 문법 max-width 안에 넣는 브라우저 폭을 말한다.

1200px / 992px / 768px / 576px
예) 1200px 이하 - 태블릿 적용 디자인, 768px 이하 - 모바일 적용 디자인

🐣 코드