1. 미디어 쿼리란?
미디어 쿼리는 반응형 웹사이트 스타일을 수정하는 방법이다.
예를 들어 모바일이랑 웹의 화면 크기가 다르니 메뉴등을 보여주거나 숨기고 없앨수 있도록 도와주는 것이다.
미디어쿼리를 사용 하는 방법은 @media로 시작하며 괄호 안에 미디어 기능을 넣을 수 있다.
예시1) 최소 min, 최대 max 사용
<!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>loui3</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<nav>
<a href="#home">Home</a>
<ul>
<li>
<a href="#Home">Learn More</a>
</li>
<li>
<a href="#Home">About</a>
</li>
<li>
<a href="#Home">Contact</a>
</li>
</ul>
<a href="signup">Sing Up</a>
<h1>Media Queries</h1>
</nav>
</body>
</html>
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size:6em;
text-align: center;
}
nav {
font-size:1.5em;
}
ul,li {
display: inline;
margin:0;
padding:0;
}
/*최소*/
@media (min-width: 800px) {
h1{
color:purple;
}
}
예시2) 방향이 가로일 경우 @media (orientation: landscape) 사용
html 파일은 동일, app.css 파일만 변경
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size:6em;
text-align: center;
}
nav {
font-size:1.5em;
}
ul,li {
display: inline;
margin:0;
padding:0;
}
@media (max-width: 800px) {
h1{
color:purple;
}
}
@media (orientation: landscape) {
body {
background-color: brown;
}
}
'WEB > CSS3' 카테고리의 다른 글
| 06-03. CSS Reset (0) | 2023.01.05 |
|---|---|
| 06-01. Flexbox (0) | 2023.01.04 |
| 05-02. css 전환 (0) | 2022.12.30 |
| 05-01. css3 테두리와 투명도 (0) | 2022.12.26 |
| 04-01. 레이아웃 (0) | 2022.12.19 |
