미디어쿼리는 디바이스의 특정 조건에 따라 CSS스타일을 다르게 지정하는 방법이다. 스타일을 지정하는 방식은 처음에 웹브라우저를 위한 디자인을 만들고 이후에 디자인의 배치를 변경하는 방식인 top-down 방식과, 처음에 작은 디바이스를 위한 디자인을 만들고 이후에 웹브라우저를 위해 디자인의 배치를 변경하는 방식인 bottom-up방식이 있다.
- @media 미디어유형 and (조건) { CSS스타일 블록 }
미디어유형
미디어유형의 경우 all, screen, print 이 있으나 생략해서 사용할 수 있다. 생략하게 되는 경우 기본값 all이 적용된다.
미디어쿼리 조건
자주 사용되는 조건들이다.
| 조건 | 설명 |
| orientation | 뷰포트의 세로 혹은 가로 방향 |
| max-height | min-height | height | 뷰포트의 최대 높이 | 최소 높이 | 높이 |
| max-width | min-width | width | 뷰포트의 최대 너비 | 최소 너비 | 너비 |
Top-down 방식
처음에 웹 브라우저 기준으로 스타일을 적용하고, 이후 각 디바이스들의 최대 너비에 맞춰서 배경색을 변경했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* top-down 방식 */
div{
width: 100vw;
height: 100vh;
background-color: lightcoral;
}
@media(max-width: 1600px){
div{
background-color: lightblue;
}
}
@media(max-width: 1024px){
div{
background-color: lightgreen;
}
}
@media(max-width: 760px){
div{
background-color: lightsalmon;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Bottom-up 방식
처음에 모바일 기준으로 스타일을 적용하고, 이후 각 디바이스의 최소 너비에 맞춰서 크기가 다른 배경이미지를 삽입했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* top-down 방식 */
div {
width: 100vw;
height: 100vh;
background-image: url(./selft-study-image/dessert-small.jpg);
background-repeat: no-repeat;
background-size: cover;
}
@media(min-width: 480px) {
div {
background-image: url(./selft-study-image/dessert-small.jpg);
background-repeat: no-repeat;
background-size: cover;
}
}
@media(min-width: 760px) {
div {
background-image: url(./selft-study-image/dessert-medium.jpg);
background-repeat: no-repeat;
background-size: cover;
}
}
@media(min-width: 1024px) {
div {
background-image: url(./selft-study-image/dessert.jpg);
background-repeat: no-repeat;
background-size: cover;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
'Frontend > CSS' 카테고리의 다른 글
| CSS의 grid를 함께 공부해보자 - 1. 그리드의 기본 (0) | 2024.07.13 |
|---|---|
| CSS에서 수직 위치를 정해보자(z-index) (0) | 2024.07.13 |
| CSS의 flex를 함께 공부해보자 - 2. flex-items (0) | 2024.07.10 |
| CSS의 flex를 함께 공부해보자 - 1. flex-container (0) | 2024.07.10 |
| CSS : 반응형 웹 디자인을 위한 상대 단위 (0) | 2024.07.10 |
| CSS: backface-visibility에 대해 알아보자 (0) | 2024.07.10 |
| CSS3로 동적 변화를 만들어보자 - 3. Animation (0) | 2024.07.08 |
| CSS3로 동적 변화를 만들어보자 - 2. Transition (0) | 2024.07.08 |