1. media query 기본
: 미디어 쿼리는 CSS 문법 중 하나이며, 반응형 디자인을 사용할 수 있도록 해준다.
반응형 디자인이란 화면에 능동적으로 반응해서 최적화 된 모습을 보여주는 것이다.
미디어 쿼리의 문법
@media (조건) {
/*...*/
}
/* 사용 예시 - 브라우저의 넓이가 500px 보다 작으면 body의 배경색을 red로 변경한다. */
@media (max-width:500px){
body{
background-color: red;
}
}💡 미디어 쿼리를 여러개 사용할 때는 순서를 중요하게 생각해야한다. 케스케이딩 때문에 나중에 나온 것이 우선 순위가 높아진다.
"따라서 겹치는 구간이 있을 때는 더 낮은 구간이 우선순위가 높아질 수 있도록 나중에 작성해주어야한다."
미디어 쿼리의 속성
- max-width: 주어진 값 보다 좁은 경우부터 적용
- min-width: 주어진 값 보다 넓은 경우부터 적용
- max-devide-width: 디바이스 사이즈의 최대 넓이, 이 사이즈보다 좁은 경우부터 적용
- min-devide-width: 디바이스 사이즈의 최소 넓이, 이 사이즈보다 넓은 경우부터 적용
- orientation: 세로 길이 혹은 가로 길이의 둘 중 하나로 기준을 적용한다.
- portrait: 세로 길이 중심의 경우 (핸드폰 정방향)
- landscape: 가로 길이 중심의 경우 (핸드폰을 가로로 눕힌 방향)
- device-pixel-ratio: 디바이스 해상도 기준으로 적용한다.
미디어 쿼리를 시각적으로 보는 방법
아래의 코드를 예시로 시각적으로 미디어 쿼리를 살펴보자.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Responsive 모드에서 브라우저 크기를 조절했을 때 미디어 쿼리가 발생하게 만드는 코드 -->
<title>Document</title>
<style>
@media (max-width:600px){
body{
background-color: green;
}
}
@media (max-width:500px){
body{
background-color: red;
}
}
@media (min-width:601px){
body{
background-color: blue;
}
}
</style>
</head>
<body>
</body>
</html>
'Web > CSS' 카테고리의 다른 글
| [CSS] background (0) | 2023.05.15 |
|---|---|
| [CSS] float (0) | 2023.05.15 |
| [CSS] Multi column (0) | 2023.05.11 |
| [CSS] flex (0) | 2023.05.10 |
| [CSS] position (2) | 2023.05.09 |
