4. 미디어 쿼리를 써보자.
4. 미디어 쿼리를 써보자.
3. 뷰포트란 무엇인가?! ( 바로가기 )
에 이어서 미디어 쿼리를 사용해서 웹사이트의 디바이스가 달라질때, 웹사이트가 어떻게 변하는지 확인해봅시다.
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>TEST</title>
<style>
@media all and (min-width:320px) {
body {
background:#ff0000;
}
}
@media all and (min-width:760px) {
body {
background:#00ff00;
}
}
@media all and (min-width:960px) {
body {
background:#0000ff;
}
}
</style>
</head>
<body>
</body>
</html>
위 코드에 보면 viewport와 함께 적용이 되어 있습니다.
실제로 코드를 작성한 후에 실습을 해봤는데 매우 흥미롭군요ㅎㅎ
웹의 크기를 변경하면 배경색이 바뀌네요~!
자~! 미디어 쿼리를 사용해봤습니다ㅎㅎ
실제로 터미널을 열어서 코딩을 하면서 확인을 해보면 더욱 잘 익혀집니다~!
4. 미디어 쿼리를 써보자. 끝.