미디어 쿼리의 MDN 정의:
미디어 쿼리는 장치의 일반 유형(예: 인쇄 대 화면) 또는 특정 특성 및 매개 변수(예: 화면 해상도 또는 브라우저 뷰포트 너비)에 따라 사이트 또는 앱을 수정하려는 경우에 유용합니다.
이제 MDN이 말한 의 예를 들어 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
h1{
color: green;
font-size: 60px;
}
@media screen and (max-width: 600px){
h1{
color: blueviolet;
}
}
</style>
</head>
<body>
<h1>This is Awesome</h1>
</body>
</html>GIF
위의 예에서 화면 폭이 600px 이하로 내려가면 글꼴 색상이 녹색에서 파란색으로 변하는 것을 알 수 있었습니다. 따라서 미디어 블록 내부의 스타일은 제공된 조건이 참일 때만 실행된다는 것을 알게 되었습니다.
웹 사이트를 만들 때 사용하는 다양한 접근 방식이 있습니다. 일부는 모바일 우선 접근 방식을 사용하고 일부는 미디어 쿼리를 적용하여 동일한 웹 사이트가 바탕 화면에 열릴 때 다른 속성을 설정하고 일부는 데스크톱 우선 접근 방식을 사용합니다.
저는 이러한 접근 방식을 따르지 않으며 사용 사례에 따라 건물을 짓는 것을 믿습니다.
주로 2가지 유형의 미디어 쿼리가 있습니다(더 많은 미디어 쿼리가 존재함).
- 화면: 뷰 포트 크기에 따라 변경하려는 경우(위 예제와 같이).
- 인쇄: 프린터가 다른 색상의 텍스트(또는 기타 속성)를 인쇄하도록 하려면 화면에 표시되는 내용을 인쇄합니다.
이 모든 유형은 미디어 키워드 다음에 옵니다. 그러나 매체 쿼리에서 인쇄를 사용하거나 화면을 사용하지 않을 경우 기본적으로 모두 사용하도록 설정됩니다. 따라서 위의 예에서는 (미디어만 해당)를 사용할 수 있었습니다.
@media (max-width: 600px){
h1{
color: blueviolet;
}
}2개 이상의 미디어 쿼리 간에 "or" 및 "and" 연산자를 사용할 수 있습니다.
and 논리를 사용하여 둘 이상의 다른 조건을 분리하기 위해서는 조건 사이에 and 키워드를 사용해야 합니다. 여기서 미디어 블록의 우리의 스타일은 h1이 블루바이올렛으로 변하기 위해 페이지 방향과 최대 너비 조건 모두를 만족해야 하는 모든 조건이 참일 때만 실행된다.
@media (orientation: landscape) and (max-width: 600px){
h1{
color: blueviolet;
}
}or 논리를 사용하여 둘 이상의 다른 조건을 분리하기 위해서는 조건 사이에 "," (comma) 키워드를 사용해야 합니다. 여기서 미디어 블록의 스타일은 조건 중 하나라도 참일 때 실행됩니다.
@media (orientation: landscape), (max-width: 600px){
h1{
color: blueviolet;
}
}이제 모바일에서 데스크톱으로 이동하면서 웹 레이아웃을 변경하여 미디어 쿼리가 응답형 설계에 얼마나 강력한지 알아보겠습니다.
GIF
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
body{
display: grid;
height: 44rem;
grid-template-areas:
'header header header'
'sidebar content content'
'sidebar content content'
'sidebar content content'
'footer footer footer';
}
@media (min-width: 700px){
body{
display: grid;
height: 44rem;
grid-template-areas:
'header sidebar content footer'
'header sidebar content footer'
'header sidebar content footer'
'header sidebar content footer'
'header sidebar content footer';
}
}
div{
color: white;
background-color: blueviolet;
display: grid;
justify-content: center;
align-items: center;
font-size: 40px;
font-weight: bolder;
}
div:nth-child(1){
background-color: red;
grid-area: header;
}
div:nth-child(2){
background-color: yellow;
grid-area: sidebar;
}
div:nth-child(3){
background-color: green;
grid-area: content;
}
div:nth-child(4){
background-color: blue;
grid-area: footer;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</body>
</html>위의 예에서 뷰포트 폭 700px는 우리 웹사이트의 레이아웃이 바뀌는 임계값입니다.
궁금한 점이 있으시면 댓글창에 문의해주시면 최대한 빨리 답변드리도록 하겠습니다.
저는 웹 개발과 관련된 기사를 매일 하나씩 씁니다(예, 매일 f*cking day마다). 같은 걸 배우고 있다면 여기로 따라오세요.
내 트위터 핸들: @therajatg
Linkedin 유형인 경우 https://www.linkedin.com/in/therajatg/에 연결합니다.
의 앞날을 멋지게 보내십시오!
'css' 카테고리의 다른 글
| Rythm.js, 당신의 페이지를 춤추게 하는 자바스크립트 라이브러리 | 스포트라이트 오브 데이 시리즈 (0) | 2022.02.03 |
|---|---|
| HTML (0) | 2022.02.03 |
| 바닐라 JS를 이용한 나의 새로운 우주선 브라우저 게임 (0) | 2022.02.03 |
| CSS를 사용한 양방향 센터링 (0) | 2022.02.03 |
| React, 스타일 구성 요소 및 Framer Motion을 사용한 React형 개인 포트폴리오 웹사이트 (0) | 2022.01.31 |
댓글