1. 미디어 쿼리
- 미디워 쿼리란 pc뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해
- 모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS구문
- EX)
<style>
.media{
width : 500px;
height : 500px;
background-color : red;
}
@media (min-width : 320px) and (max-width : 500px)
.media{
width : 300px;
height : 300px;
background-color : yellow;
</style>
}- 사용자가 뭘로 접속했는지는 px의 크기로 알 수 있다.
- 위의 코드처럼 media query 는 width, height, background 순으로 작성 해주어야 한다.
- media query가 정상적으로 출력되는지 확인하는 법은 chrome 개발자 도구의 f12를 눌러서 확인할 수 있다.
2. 미디어 쿼리 사용시 주의사항
- viewport : 반드시 head 태그안에 있는 meta 태그에 name="viewport"를 기입해줘야 한다.
- 미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로 viewport로 너비와 배율을 설정해야 모바일 디바이스에서 의도한 화면을 볼 수 있음.
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 그럼 구체적인 너비와 배율을 어디서 설정하느냐? 바로 .width=divice-width 와 .initial-scale=1.0에서 설정한다.
- .width=divice-width : viewport의 가로폭 => 디바이스의 가로폭
- .initial-scale=1.0 : 비율은 항상 1.0
- 계속 pc버전의 css 미디어 쿼리를 확인하면서 작성해야한다.
<style>
.media{
width : 500px;
height : 500px;
background-color : red;
}
@media (min-width : 320px) and (max-width : 500px)
.media{
width : 300px;
height : 300px;
background-color : yellow; //이게 작성안되어 있다면 위의 값을 상속받는다
background-color : none; //만약 pc의 값을 상속 받기 싫다면 none 값!
</style><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>미디어쿼리</title>
<style>
// 이 밑은 pc에서 적용되는 값.
.media {
width: 500px;
height: 500px;
background-color: red;
}
// 이 밑은 해당 min과 max 너비 사이에서 적용되는 값.
@media (min-width: 320px) and (max-width: 800px) {
.media {
width: 300px;
height: 300px;
background-color: yellow;
border : solid 10px blue;
}
}
</style>
</head>
<body>
<div class="media"></div>
</body>
</html>
智(지)! 德(덕)! 體(체)!