프로그래밍/CSS

생활코딩 css 정리 - 20. media query

가카리 2017. 12. 10. 22:11
반응형
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>
<a href="http://www.naver.com";>홈페이지</a>
</footer>
</div>
</body>
</html>

실행 화면

처음에는 다음과 같이 성배형으로 구성되어 있습니다.


하지만 화면이 500px보다 작아지면 다음과 같이 flex-display가 column으로 바뀝니다.



반응형