반응형 웹 화면을 위한 설정방법

1. meta태그에 viewport설정

 

 

1) meta 태그에 viewport를 사용하여 브라우저 뷰포트의 너비와 배율을 제어.

 

2) 기기 독립적 픽셀에서 화면 너비에 맞추려면 width=device-width를 포함

 

3) 기기 독립적 픽셀과 CSS 픽셀 간에 1:1 관계를 설정하려면 initial-scale=1을 포함

 

 

ex) <meta name="viewport" content="width=device-width, initial-scale=1">

 

 

*** viewport에서 initial-scale 이외 속성

 

minimum-scale

 

maximum-scale

 

user-scalable

 

이들 속성은 사용자가 뷰포트를 확대/축소할 수 없음

 

 

2. 상대 너비 값 사용

   

   : viewport 설정 후 width값을 %로 설정

 

 

3. CSS 미디어 쿼리 사용 ( css에 필터 적용 )

 

 

1) 기기 특성을 기반으로 스타일을 적용하여 

  

   min-device-width보다 min-width를 사용하여 가장 넓은 환경으로 확보

   

   레이아웃이 깨지는 것을 막으려면 요소에 상대 크기를 사용

 

 

2) CSS 파일에서 미디어 쿼리 삽입 방법

  

  a) @media (query) { }  --> 성능상으로 이 방법 추천  

 

  b) @import url(common.css) basic;

 

 

3) 자주 사용하는 매개변수 

 

min-width 쿼리에 정의된 값보다 큰 브라우저 너비에 적용되는 규칙.

 

max-width 쿼리에 정의된 값보다 작은 브라우저 너비에 적용되는 규칙.

 

min-height 쿼리에 정의된 값보다 큰 브라우저 높이에 적용되는 규칙.

 

max-height 쿼리에 정의된 값보다 작은 브라우저 높이에 적용되는 규칙.

 

orientation=portrait 높이가 너비보다 크거나 같은 브라우저에 적용되는 규칙.

 

orientation=landscape 너비가 높이보다 큰 브라우저에 적용되는 규칙.

 

참고 사이트 : https://developers.google.com/web/fundamentals/design-and-ux/responsive/?hl=ko

 

 

 

ex1) css파일 내에 

 

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

   #wrap {

      width:90%;

   }

}

 

@media screen and (max-width:800px) {

   #wrap {

      width:100%;

   }

}

 

@media screen and (max-width:480px) {

   #box_a {

      float:none;

      width:auto;

   }

 

   #box_b {

      float:left;

      width:auto;

   }

}

반응형

 

ex2) css파일 내에 

 

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

   #wrap {

      width:100%;

   }

}

 

@media screen and (max-width:800px) {

   #wrap_box {

      position:absolute;

      width:150%;

   }

 

   #box_a {     

      width:33.333%;

   }

 

   #box_b {     

      width:33.333%;

      float:left;

   }

 

   #box_c {     

      width:33.334%;

      float:left;

   }

}

 

@media screen and (max-width:480px) {

   #wrap_box {      

      width:300%;

      margin-left:-100%;

   }

}

 

오래전에 연습용으로 했던 내용이라, 

 

width설정은 요즘 모바일기기 사이즈로 설정해서 해 봐야할듯하다. 

 

미디어 쿼리 작동 샘플로 바로 소스 수정에서 확인 가능한 사이트가 있을듯 하다.

 

w3schools ( https://www.w3schools.com )에서도 소스 변경하면서 

 

바로 확인 기능 있을듯함.