국비지원 JAVA 풀스택 과정/HTML+CSS3

[HTML+CSS3] 미디어쿼리(2)

ODaram 2022. 10. 6. 16:10
미디어쿼리

  HTML > @media 사용

 <!DOCTYPE html>
 <html lang="ko">
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>미디어쿼리</title>
   <!-- 미디어쿼리 중단점 : break point -->
   <!-- break point 지정해서 영역에 따라 스타일시트 지정 -->
   <style>
   @media screen and (min-width:1600px){
    body {background:red;}
   }
   @media screen and (min-width:1000px) and (max-width:1599px){
    body {background:orange;}
   }
   @media screen and (min-width:600px) and (max-width:999px){
    body {background:yellow;}
   }
   @media screen and (max-width:600px){
    body {background:green;}
   }
   </style>
 </head>
 <body>
 </body>
 </html>
댓글수0