미디어 쿼리는 특정 조건(단말기의 유형, 화면 해상도, 뷰포트 너비 등)에서 특정 스타일만 적용되도록 만들어주는 기능입니다.
일부 모자이크 처리 되어 있습니다.
보통 같은 UI라 하더라도 기기에 따라 3 ~ 4개의 UI 시안이 나옵니다. 폰트, 여백(padding, margin) 등이 UI에 따라 조금씩 달라집니다. 위 px은 현재 저희 프로젝트 기준이며 아래에서 수행해볼 예제는 아래 px로 수행하도록 하겠습니다. 기기별 px 확인은 맨 아래 참고해주세요. 프로젝트별 상이하기 때문에 외우는 것이 큰 의미를 가지진 않습니다. (포인트도 단가가 높은 프로젝트는 6개까지도 잡습니다.)
/* 타블릿 */
768
/* 모바일 */
390
IOS 기기별 해상도 : https://www.ios-resolution.com/
Android 디바이스 브레이크 포인트 : https://developer.android.com/guide/topics/large-screens/support-different-screen-sizes
sample file
백문이 불여일타다닥!
<!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-color: tomato;
}
/* max니 1000px 이상이라고 오해하기 쉽지만, 1000px 이하일때 작동, 그러니 1000px일때까지!라고 이해하는 것이 좋음 */
@media screen and (max-width:1000px) {
body {
background-color: green;
}
}
</style>
</head>
<body>
</body>
</html>
<!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-color: tomato;
}
@media screen and (max-width:1000px) {
body {
background-color: green;
}
}
@media screen and (max-width:500px) {
body {
background-color: violet;
}
}
</style>
</head>
<body>
</body>
</html>
<!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-color: tomato;
}
.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: 33.33%;
padding: 1rem;
border: solid 5px black;
box-sizing: border-box;
background-color: sienna;
}
@media screen and (max-width:1000px) {
body {
background-color: green;
}
.item {
width: 50%;
}
}
@media screen and (max-width:600px) {
body {
background-color: violet;
}
.item {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
</div>
<div class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
</div>
<div class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
</div>
<div class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
</div>
<div class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
</div>
<div class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
</div>
</div>
</body>
</html>
<!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-color: tomato;
}
.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: 33.33%;
padding: 1rem;
border: solid 5px black;
box-sizing: border-box;
background-color: sienna;
}
@media screen and (max-width:1000px) {
body {
background-color: green;
}
.item-lg {
width: 50%;
}
}
@media screen and (max-width:600px) {
body {
background-color: violet;
}
.item-sm {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="item item-lg item-sm">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
</div>
<div class="item item-lg item-sm">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
</div>
<div class="item item-lg item-sm">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
</div>
<div class="item item-lg item-sm">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
</div>
<div class="item item-lg item-sm">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
</div>
<div class="item item-lg item-sm">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae quasi sint. Quaerat!
</div>
</div>
</body>
</html>