반응형
20.Media Query
1) 소개
media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능입니다. 특히 최근의 트랜드인 반응형 디자인의 핵심 기술이라고 할 수 있습니다.
media-query.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media (min-width:601px)
body
background-color: blue;
@media (max-width:600px)
body
background-color: green;
@media (max-width:500px)
body
background-color: red;
</style>
</head>
<body>
500px 이하 : red
501~600px : green
601px 이상 : blue
</body>
</html>
실행화면
다음과 같이 넓이에 따라 배경색이 바뀌게 됩니다.
여기서 유의할 것은 캐스케이드 룰 때문에 가장 마지막에 지정한 것이 500px이하일 때인 것입니다.
맨처음은 600px이상으로 지정해야 정상적으로 동작합니다.
2) 미디어 쿼리 응용
화면의 크기를 줄이면 레이아웃이 바뀌는 홈페이지를 만들어봅시다.
여기서 캐스케이드 룰에 의해서 적용되는 스타일의 순서를 바꿔주는 것에 유의합시다.
media-query2.html
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
.container
display: flex;
flex-direction: column;
header
border-bottom:1px solid gray;
padding-left: 20px;
footer
border-top:1px solid gray;
padding: 20px;
text-align: center;
.content
display: flex;
.content nav
border-right:1px solid gray;
.content aside
border-left:1px solid gray;
@media(max-width:500px)
.content
flex-direction:column;
.content nav .content aside
border: none;
flex-basis: auto;
main
order:0;
nav
order:1;
aside
order:2;
display: none;
nav, aside
flex-basis: 150px;
flex-shrink: 0;
main
padding: 10px;
</style>
</head>
<body>
<div class="container">
<header>
<h1>생활코딩</h1>
</header>
<section class="content">
<nav>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</nav>
<main>
css 수업 중입니다.
</main>
<aside><!--광고 태그-->
AD
</aside>
</section>
<footer>
</footer>
</div>
</body>
</html>
실행 화면
처음에는 다음과 같이 성배형으로 구성되어 있습니다.
하지만 화면이 500px보다 작아지면 다음과 같이 flex-display가 column으로 바뀝니다.
'프로그래밍 > CSS' 카테고리의 다른 글
| 생활코딩 css 정리 - 22. 다단(multi column) (0) | 2018.01.15 |
|---|---|
| 생활코딩 css 정리 - 21. Float (0) | 2017.12.18 |
| 생활코딩 css 정리 - 19. flex (0) | 2017.12.02 |
| 생활코딩 css 정리 - 18．포지션(Position) (0) | 2017.12.01 |
| 생활코딩 css 정리 - 20.마진 겹침 현상 (0) | 2017.11.20 |
| 생활코딩 css 정리 - 19. box-sizing (0) | 2017.11.19 |
| 생활코딩 css 정리 - 18. 박스 모델 (0) | 2017.11.15 |
| 생활코딩 css 정리 - 14. 레이아웃 인라인 vs 블럭레벨 (0) | 2017.10.15 |