CSS Media Queries
CSS로 스크린 화면을 인지하는 방법입니다. 가령 스마트폰으로 웹페이지를 본다면 landscape모드 와 portrait모드를 사용할 것입니다. 컴퓨터 스크린으로 볼때는 스마트폰 스크린보다는 크겠죠? 따라서 브라우저에게 말해주는겁니다. 핸드폰이면 이걸 보여주고 컴퓨터면 이걸 보여달라는 식으 로 말입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
div {
background-color: blue;
width: 200px;
height: 200px;
}
@media screen and (max-width: 800px) {
div {
background-color: red;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
@media screen을 사용해서 위 내용을 실행 시켜보면 스크린 사이즈를 800px보다 작게 한다면 div의 백그라운드 색이 파랑에서 빨강으로 바뀌게 됩니다.
만약 코드를 이렇게 쓴다면 갸령,
@media screen and (min-width: 800px) and (max-width: 1000px){
div {
background-color: red;
}
}
800px 에서 1000px까지는 백그라운드 색을 빨강으로 한다는 뜻입니다. 또는 이렇게 도 할 수 있습니다.
@media screen and (max-width: 800px) {
div {
background-color: red;
}
}
@media screen and (min-width: 800px) and (max-width: 1000px) {
div {
background-color: green;
}
}
@media screen and (min-width: 1000px) {
div {
background-color: yellow;
}
}
혹은, 스마트폰일때 orientation: landscape 즉 가로모드일때의 조건도 아래와 같이 넣어줄 수 있습니다.
@media screen and (min-width: 800px) and (max-width: 1000px) and (orientation: landscape) {
div {
background-color: green;
}
}
스마트폰을 보면 가로모드로 바꿔달라고 할때 가 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
@media screen and (orientation: landscape) {
span {
display: none;
}
}
</style>
</head>
<body>
<div></div>
<span>가로모드로 바꿔주세요.</span>
</body>
</html>
이렇게 orientation: landscape가 되면 span의 display:none을 실행시켜서 메세지가 안보이게 할 수 있습니다. 그리고 중요한 점중 하나가 @media screen 안에 element를 넣어줘야합니다. 그냥을 못씁니다. span이던 div던 element를 넣어줘야합니다.
min-width, orientation말고도 엄청 다양한것들이 있습니다.
'HTML-CSS > CSS' 카테고리의 다른 글
| CSS Border Box (0) | 2021.03.21 |
|---|---|
| CSS Animation (0) | 2021.03.21 |
| CSS transform (0) | 2021.03.21 |
| CSS transition (0) | 2021.03.21 |
