국비지원 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>