- media 속성으로 screen, print, all이 있음
- 그러나 screen으로 모두 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_react</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 600px;
height: 750px;
border: 1px solid #ccc;
padding: 30px;
margin: auto;
background: #ff0;
}
.wrapper > div{
box-sizing: border-box;
width: 250px;
height: 200px;
border: 1px solid#ccc;
margin: 25px;
float: left;
background-color: #0ff;
}
@media screen and (min-width:1200px){
.wrapper{
width: 900px;
height: 500px
}
.wrapper > div{
font-size: 1.5rem;
color: #0a0;
}
}
@media screen and (max-width:540px){
.wrapper{
width: 300px;
height: 1500px;
}
.wrapper > div{
font-style: italic;
color: #f00;
}
}
</style>
</head>
<body>
<h1>01_react</h1>
<div class="wrapper">
<div>box1</div>
<div>box2</div>
<div>box3</div>
<div>box4</div>
<div>box5</div>
<div>box6</div>
</div>
</body>
</html>
min(PC)
⌨️ 문법
@media screen and (min-width:1200px){
.wrapper{
width: 900px;
height: 500px
}
.wrapper > div{
font-size: 1.5rem;
color: #0a0;
}
}
- width가 1200px보다 큰 경우 작성된 스타일 적용
max(모바일)
⌨️ 문법
@media screen and (max-width:540px){
.wrapper{
width: 300px;
height: 1500px
}
.wrapper > div{
font-style: italic;
color: #f00;
}
}
- width가 540px 보다 작은 경우 작성된 스타일 적용
참고사항
- min 혹은 max가 2개 이상인 경우 나중에 쓴 것이 우선됨!
