반응형 웹 만들기

반응형 웹 만들기 (JQUERY 브라우저 창크기 변화에 따라 Contents 크기 변경)

반응형 웹의 가장 기본되는 개념은 브라우저의 창 크기의 변화에 따라 안의 Contents의 크기도 변경이 되는 것이다. 

반응형 웹을 적용하면 스마트폰, 태블릿, 데스크탑에서 컨텐츠의 일그러짐 없이 정상적으로 보이게 만들수 있다. 

반응형 웹을 만들 때 자주 사용되는 언어가 JQUERY이다. JQUERY를 사용하지 않고도, JavaScript로만도 가능하지만 JavaScript를 사용하게 된다면 상당히 긴 소스를 사용해야 하고, 해당 소스의 관리에 비효율적이고, 불편함을 감수해야 한다. 

반응형 웹스킨 적용하기

여기서는 JQUERY를 이용하여 브라우저의 창 크기의 변화에 따라 Contents가 변경되도록 만들어 보자. 

$(window).resize(function(){ 
  $("#contents").children("table").each(function () {
  var window_windth = $(window).width();
  if(window_windth>1000){
     $(this).width('1000px');
   }else if(window_windth>500 && window_windth<=1000){
     $(this).width('700px');
  }else{
    $(this).width('300px');
  }                  
  }); 
});

html은 아래와 같이 되어 있다. 

---

<div id='contents'>

<table width="610px;" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="blue">

---

윈도우 창의 크기가 변경되면, id가 contents인 요소를 찾아서 하위 태그인 table 태그를 찾는다. 

.

table 태그를 찾으면, 현재 윈도우 창의 크기를 비교하여, table의 width를 변경한다. 

창 크기 변화시에 창 크기에 맞게 Contents의 크기를 변화시키는 것이 반응형 웹의 기본이다. 

위의 내용만 알아도 반응형 웹을 만드는 것에 큰 어려움이 없을 것이다. 

.