728x90
responmsive design(반응형 디자인)
사용하는 기기의 화면 크기에 따라 반응하는 웹사이트를 만드는 것이다.
media queries(미디어 쿼리)
media queries를 통해서 이 작업을 할 수 있다. media queries는 CSS와 style sheet에서 작성할 수 있다. 스타일을 변경하고 매개변수에 따라 새로운 스타일을 넣을 수 있다. 보통 화면 너비나 기기 종류에 맞춰 움직이는 방향을 통해 스타일을 조정한다. 매우 작은 화면이면 내비게이션 바를 접어서 공간을 넓힌다. 브라우저 속성에 맞추는데 뷰포트 너비나 높이 화면 방향같은 속성이 있다. 다양한 특징 및 매개변수가 다양하다.
미디어 쿼리는 @media로 시작한다. 괄호안에 미디어 기능을 다양하게 넣을 수 있다.
width를 클릭하여 조건문을 가장 쉽고 간단하게 작성하는 방법
<!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">
<link rel="stylesheet" href="mediaqueries.css">
<title>Media Queries</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<nav> <a href="#home">Home</a>
<ul>
<li><a href="#Home">Learri More</a></li>
<li><a href="#Home">About</a></li>
<li><a href="#Home">Contact</a></li>
</ul>
<a href="#signup">Sign Up</a>
</nav>
<h1>Media Queries</h1>
</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(width: 800px) {
h1 {
color: plum;
}
}창을 줄였더니 정확하게 800px의 크기에서 연보라색으로 변했다. 너비는 뷰포트 너비이다. 뷰포트는 컴퓨터 그래픽에 있는 폴리곤 영역이다. 브라우저에서 우리가 보고 있는 문서(윈도우나 화면을 통해서 보고있는 문서)들 말이다. 즉, 페이지 전체가 아니라 너비를 나타낸것이다.
@media(min-width: 800px) {
h1 {
color: plum;
}
}최소 너비가 800px이고 800px를 넘어가면 색이 변경된다. max-width:800px로 입력하면 그 반대가 된다.
@media (min-width: 600px) and (max-width: 800px) {
h1 {
color: plum;
}
}최소 600px, 최대 800px이다.
반응형 웹을 통해서 글자의 색을 변하게할 수 있다.
h1 {
color: red;
}
@media (min-width: 500px){
h1 {
color: orange;
}
}
@media (min-width: 1000px){
h1 {
color: yellow;
}
}
@media (min-width: 1500px){
h1 {
color: green;
}
}
@media (orientation: landscape) {
body {
background-color: magenta;
}
}가로 방향일때 마젠타 컬러로 배경 색이 변한다.
728x90
'📦 CSS > CSS' 카테고리의 다른 글
| [CSS] Float (0) | 2023.01.25 |
|---|---|
| [CSS] 레이아웃 (0) | 2023.01.24 |
| [CSS] Flex Sizing Properties | flex-basis | flex-grow | flex-shrink | flex (0) | 2022.12.01 |
| [CSS] align-content | align-self (0) | 2022.11.30 |
| [CSS] Flexbox 속성 | align-items (0) | 2022.11.28 |