<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
@media (max-width: 600px) {
body {
background-color: green;
}
}
/* 같은 태그에 여러 스타일이 적용되었을 경우 더 밑에 있는 스타일이 우선시되어 적용된다 */
/* 따라서 max-width: 600px을 max-width: 500px보다 아래에 두면 500px 이하에서는 body가 2개의 스타일에 모두 해당이 되기 때문에 우선순위가 높은 600px의 스타일이 적용된다 */
/* 따라서 500px 이하에서 background-color를 red로 적용하고 싶다면 다음과 같이 500px 스타일을 더 아래로 두면 된다 */
@media (max-width: 500px) {
body {
background-color: red;
}
}
@media (min-width: 601px) {
body {
background-color: violet;
}
}
</style>
</head>
<body>
~
</body>
</html>
Backend Engineer