가로 정렬은 흔히 알려진 margin:0 auto; 만으로 간단히 해결이 가능하다.

그런데 세로로 정렬을 하려면?

브라우저 사이즈에 따라 유동적으로 움직이게 하려면?

$(document).ready(function(){ 

var currentHeight = $(window).height(); 

$("#wrapper").each(function(){ 

var wrapperHeight = $(this).css("height"); // wrapper의 height 구하기 

if (parseInt(currentHeight) > parseInt(wrapperHeight)){ 

var newHeight = parseInt(currentHeight) - parseInt(wrapperHeight); 

newHeight = newHeight/2; 

$(this).css('margin-top',newHeight); 

} 

}); 

}); 

위 스크립트로 브라우저의 뷰포트(툴바, 창틀 등을 제외한 순수 컨텐츠 영역)의 사이즈를 구해 마진을 조절해 준다.

매 변동시마다 적용하려면 resize 함수를 사용해 보길 바란다.

혹은, body옵션으로 onresize도 있지만 적극 추천하진 않는다.

사이트를 만들다보면 사이트 내용에 따라서 전체 페이지가 이동하는 것보단 일부분만 변경하는 것이 더 이득일 때가 있다.

특히, 이미지 자료가 많이 쓰이는 사이트의 경우 필요한 부분이 있을 수 있다.

아래 스크립트는 jquery 라이브러리에 포함된 jquery ajax를 통해 특정 레이어를 원하는 페이지로 변경하는 스크립트이다.

function open_url( type, url, data, target ){ 

$.ajax({ 

  type: type, 

  url: url, 

  data: data, 

  success: function(data){ 

    $("#"+target).html(data); 

  } 

})}; 

type에는 get, post 선택을, data에는 같이 넘겨줄 파라미터 값을 적는다.

ex) <a href="javascript:;" onClick="open_url('get', 'aaaa.php', 'num=1102&field=2', 'wrapper')">클릭</a>

위와 같이 사용하며 이렇게 하면 get 방식으로 aaaa.php에 num=1102와 field=2 값을 보내 나오는 결과페이지를 wrapper 레이어에 뿌려주는 것이다.