미디어 쿼리는 특정 조건(단말기의 유형, 화면 해상도, 뷰포트 너비 등)에서 특정 스타일만 적용되도록 만들어주는 기능입니다.
/* @media 논리연산자 미디어타입 논리연산자 ( 조건 ) 논리연산자 { 적용할 스타일 } */
@media screen and (max-width: 420px) {
body {
position: relative;
}
.activity-header {
min-width: 100%;
}
.activity-header-box {
width: 100%;
}
.preview-main {
width: 100%;
}
}
백문이 불여일타다닥!
<!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>
/* mobile first!! bootstrap이 대표적 */
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>
/* mobile first!! bootstrap이 대표적 */
body {
background-color: tomato;
}
/* max니 1000px 이상이라고 오해하기 쉽지만, 1000px 이하일때 작동, 그러니 1000px일때까지!라고 이해하는 것이 좋음 */
@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>
/* mobile first!! bootstrap이 대표적 */
body {
margin: 0;
background-color: tomato;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
box-sizing: border-box;
border: 10px solid red;
height: 500px;
width: 100%;
background-color: yellow;
}
.item {
margin: 50px;
width: 500px;
background-color: sienna;
}
/* max니 1000px 이상이라고 오해하기 쉽지만, 1000px 이하일때 작동, 그러니 1000px일때까지!라고 이해하는 것이 좋음 */
@media screen and (max-width:1000px) {
body {
background-color: green;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
box-sizing: border-box;
border: 10px solid red;
height: 800px;
width: 100%;
background-color: yellow;
}
.item {
margin: 50px;
width: 800px;
background-color: sienna;
}
}
@media screen and (max-width:500px) {
body {
background-color: violet;
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ea illo eius architecto sed qui, incidunt corporis labore! Nobis nemo consequuntur commodi pariatur iure saepe dolorum neque tempore temporibus at!</div>
<div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ea illo eius architecto sed qui, incidunt corporis labore! Nobis nemo consequuntur commodi pariatur iure saepe dolorum neque tempore temporibus at!</div>
</div>
</body>
</html>
all
: 모든 장치를 대상으로 합니다.
print
: 인쇄 결과물 및 출력 미리보기 화면에 표시하는 경우입니다.
<abbr title="world wide web consortium">w3c</abbr>
@media print {
abbr::after {
/* attr() : css 속성 함수입니다. */
content: ' ('attr(title)')'
}
}
screen
: 모니터나 스크린이 있는 디바이스를 의미합니다.