CSS3

반응형코딩

지니 2016. 12. 23. 21:58
반응형
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
            @media screen and (min-width: 400px) {
                body { background-color: red; }
               
            }
            @media screen and (min-width: 600px){
                body { background-color: blue; }
               
            }
            @media screen and (min-width: 800px) {
                body { background-color: #cdcdcd; }
               
            }
        </style>
</head>

<body>
   반응형 디자인 
</body>
</html>



위 프로그램을 그래도 복사해서 넣은다음 웹 페이지를 띄운뒤 브라우저 가로 사이즈를 조절해보면 배경색이 그때 그때 바뀔것이다..! 이것만 알면 끝난거다



min-width 

max-width 


이 두가지만 적절히 조합해서 사용하면 반응형 코딩끝!!

그 외에는 모두 일반 css와 똑같이 코딩해주면 끝!!!












반응형