반응형 웹

1. 반응형 웹 (Responsive Web)

  1. 디바이스 종류에 따라 적합한 스타일 적용.jsseo-140329-css-01-900x365
  2. Mobile,  타블렛pc, 데스트탑등 각각의 해상도에 맞춰 스타일을 디자인 할 수있다.
  3. 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>