반응형 웹
디바이스 종류와 크기에 따라 웹페이지의 크기가 자동적으로 재조정 되는 것
사용법
- css
미디어 타입
all , aural , braille , handheld , print , screen 등이 존재
- 현재 가장 많이 쓰이는 것은 all과 screen이다.
간단한 예시
ex1)
<html>
<style>
div{
width:100%;
height:100%;
}
@media screen and (max-width:500px){
div{background-color:blue;}
}
@media screen and (min-width:500px) and (max-width:700px){
div{background-color : red;}
}
@media screen and (min-width:700px){
div{background-color : green;}
}
</style>
<body>
<div></div>
</body>
</html>500미만에서는 blue, 500~700미만에서는 red, 700이상에서는 green이다.
ex2)
<html>
<style>
div{
display:inline-block;
}
.a{
width:300px;
height:300px;
}
.b{
width:200px;
height:300px;
}
.c{
width:500px;
height:300px;
}
@media screen and (max-width:600px){
div{background-color:blue;}
}
@media screen and (min-width:600px) and (max-width:700px){
div{background-color : red;}
}
@media screen and (min-width:700px){
div{background-color : green;}
}
</style>
<body>
<article>
<div class='a'></div>
<div class='b'></div>
<div class='c'></div>
</article>
</body>
</html>브라우저 크기에 따라 서로다른
div태그들의 색깔이 달라진다.
나의 하루를 가능한 기억하고 즐기고 후회하지말자