03.반응형 웹 (미디어쿼리)

1. 반응형 웹 (Responsive Web)

디바이스 종류에 따라 적합한 스타일 적용.
Mobile, 타블렛pc, 데스트탑등 각각의 해상도에 맞춰 스타일을 디자인 할 수있다.
CSS – 미디어쿼리(Media Query) 적용.

2. 미디어 쿼리(Media Query)

@media screen and (min-width:512px) and (max-width:1024px)

3. 미디어 쿼리 적용

<html>
 <head>
 <style>
/* 작은 기기들 (태블릿, 768px 이하) */
 div{
 width: 100%;
 height: 500px;
 }
 /* 작은 기기들 (태블릿, 768px 이상) */
 @media screen and (min-width: 768px){
 div{background-color: red;}
 }
 /* 중간 기기들 (데스크탑, 992px 이상) */
 @media screen and (min-width: 992px){
 div{background-color: blue;}
 }
 /* 큰 기기들 (큰 데스크탑, 1200px 이상) */
 @media screen and (min-width: 1200px){
 div{background-color: green;}
 }
 </style>
 <body>
 <div></div>
 </body>
</html>

4. 유동형 그리드(Fluid Grid)

<html>  
    <head>
        <style>
            div{
                height: 100%;
                float:left;
            }
            #grid_1{
                width: 30%;
                background-color: green;
            }
            #grid_2{
                margin-left: 5%;
                width: 45%;
                background-color: blue;
            }
            #grid_3{
                margin-left: 5%;
                width: 15%;
                background-color: red;
            }
        </style>
    <body>
        <div id="grid_1"></div>
        <div id="grid_2"></div>
        <div id="grid_3"></div>
    </body>
</html>

5. 유동형 레이아웃(Liquid Layouts)

<html>
 <head>
 <style>
 div{
 height: 450px;
 float:left;
 }
 #layout_1{
 width: 30%;
 background-color: green;
 }
 #layout_2{
 margin-left: 5%;
 width: 65%;
 background-color: blue;
 }
 #layout_3{
 width: 100%;
 margin-top: 5%;
 background-color: red;
 }

@media screen and (min-width: 1000px){
 #layout_1{
 width: 30%;
 background-color: green;
 }
 #layout_2{
 margin-left: 5%;
 width: 45%;
 background-color: blue;
 }
 #layout_3{
 margin-left: 5%;
 margin-top: 0;
 width: 15%;
 background-color: red;
 }

 }
 </style>
 <body>
 <div id="layout_1"></div>
 <div id="layout_2"></div>
 <div id="layout_3"></div>
 </body>
</html>