화면의 사이즈가 바뀔 때 css가 다르게 적용되도록 하는 속성
브라우저 너비가 500px일 때 배경색 바꾸기.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media (width:500px){ // 화면이 500px이 되었을 때 body 배경을 빨간색으로 변경.
body {
background-color: red;
}
}
</style>
</head>
<body>
</body>
</html>크롬으로 페이지 검사 창을 열고, 브라우저 너비를 500으로 맞추면 결과가 빨간색이 된다.
브라우저 너비 경우에 따라서 바꾸기
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media (max-width:600px){ // 화면의 width 크기가 600px이하면
body {
background-color: green;
}
}
@media (max-width:500px){ // 화면의 width 크기가 500px이하면 ( 위에 값과 겹치지만 더 아래 있는 코드라서 500px 이하로 줄어들면 red가 적용된다.)
body {
background-color: red;
}
}
@media (min-width:601px){ // 화면의 width 크기가 601px이상이면
body {
background-color: blue;
}
}
</style>
</head>
<body>
body width ~500px : red, 501~600 : green, 601~ : blue
</body>
</html>'개발 관련 지식 > CSS' 카테고리의 다른 글
| CSS - transition (0) | 2020.03.13 |
|---|---|
| CSS - float (0) | 2020.03.13 |
| CSS - flex (0) | 2020.03.12 |
| CSS - position : static, relative, absolute, fixed (0) | 2020.03.12 |
| 마진 겹침 현상(margin-collapsing) (0) | 2020.03.12 |
