다양한 화면 크기가 등장함에 따라 반응형 디자인 개념이 등장
다양한 사이즈의 디바이를 하나의 웹페이지로 대응할 수 있음
미디어쿼리
body {
background-color: blanchedalmond;
}
@media screen and (max-width:300px) {
body {
background-color: tomato;
}
가로 길이 최대가 300px 일때, (=300px 이하일때) 토마토색깔
screen을 all 로 해도 되고 생략을 해도 됨
body {
background-color: blanchedalmond;
}
@media (min-width:300px) and (max-width:500px) {
body {
background-color: tomato;
}
}
최소 300px, 최대 500px 일때 (300~500px)일 떄 토마토 색깔로변해라!
and라 둘 다 적용 해야함
or 은 , 로 사용
body {
background-color: blanchedalmond;
}
@media screen and (orientation: landscape) {
body {
background-color: tomato;
}
}
media screen and (orientation: landscape --> 가로모드
media query- breakpoint
body {
background-color: blanchedalmond;
}
.title {
font-size: 48px;
}
@media screen and (min-width: 480px) {
body {
background-color: tomato;
}
.title {
font-size:36px;
}
}
@media screen and (min-width:768px) {
body {
background-color: purple;
}
.title {
font-size: 24px;
}
}
@media screen and (min-width:1024px) {
body{
background-color:green;
}
.title {
font-size: 12px;
}
}