<!DOCTYPE html>
<html lang="ko">
<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>미디어 쿼리 사용하기 </title>
<style>
body {
background:url(images/bg0.jpg) no-repeat fixed; /*기본 배경 이미지 지정*/
background-size:cover; /*배경 이미지로 요소를 모두 덮도록 이미지 확대 및 축소*/
}
@media screen and (max-width:1024px) {
/*가로가 1024px 이하이면 bg1.jpg 지정 */
body {
background:url("images/bg1.jpg") no-repeat fixed;
background-size:cover;
}
}
@media screen and (max-width:768px)
{
/*가로가 768px 이하면 bg2.jpg 지정*/
body {
background:url("images/bg2.jpg") no-repeat fixed;
background-size:cover;
}
}
@media screen and (max-width:320px)
{
/*가로가 320px 이하면 bg3.jpg 지정*/
body {
background:url("images/bg3.jpg") no-repeat fixed;
background-size:cover;
}
}
</style>
</head>
<body>
</body>
</html>
'css' 카테고리의 다른 글
| 12장 예제 - 플렉스 항목의 줄 바꾸기 (0) | 2023.04.04 |
|---|---|
| 12장 예제 - 플렉스 항목 배치하기 (0) | 2023.04.04 |
| 11장 마무리 문제 2 (0) | 2023.04.03 |
| 11장 마무리 문제 1 (0) | 2023.04.03 |
| 11장 예제 - 애니메이션 2개를 한꺼번에 지정하기 (0) | 2023.04.03 |
