영삼이의 전문 정보 발행처

문제
jQuery Mobile을 사용하면 화면의 세로 사이즈보다 긴 컨텐츠로 인해 페이지가 스크롤되면서 Header와 Footer가 화면에서 사라지는 경우가 많이 발생한다. data-position="fixed"을 사용하면 항상 위에 있긴 하지만, 페이지가 스크롤 될 때에는 사라졌다가 스크롤이 끝난 후에 다시 나타나게 된다.

반면, 네이티브 언어로 작성된 애플리케이션의 경우 Header와 Footer가 항상 제자리를 유지하게 되는데, jQuery Mobile에서도 이와 같이 항상 제자리를 유지하게 하는 방법이 있다.

해결 방법
핵심을 먼저 말하자면, 컨텐츠 사이즈를 고정시키는 것이다. 컨텐츠의 사이즈를 고정시키고, 고정된 사이즈 안에서 컨텐츠를 스크롤되게 하면 Header와 Footer는 제자리를 유지하게 된다.

pageshow 이벤트 핸들러에서 header와 footer의 height를 구한 후, screen.availHeight에서 두 높이를 뺀 값을 content의 height로 설정해주면 된다.

$("div[data-role='page']").live( "pageinit", function( event )
{
	for( var i = 0; i < 26; i++ )
	{
		var li = document.createElement( "li" );
		li.innerText = String.fromCharCode( i + 65 );
		$("#list").append( li );
	}
	
	$("#list").listview( "refresh" );
} );

$("div[data-role='page']").live( "pageshow", function( event )
{	
	resizeContent();
} );

function resizeContent()
{
	var headerHeight = parseInt( $("div[data-role='header']").css( "height" ) );
	var footerHeight = parseInt( $("div[data-role='footer']").css( "height" ) );
	var contentHeight = screen.availHeight - headerHeight - footerHeight - 78; // 78 : iPhone bottom bar height (retina)
	$("div[data-role='content']").css( "height", contentHeight );
}

그러면 아래와 같이 컨텐츠가 스크롤되더라도 Header와 Footer의 위치가 항상 제자리에 있는 모습을 볼 수 있다.

참고

• 결과 미리보기
• listview에 동적으로 아이템 추가하기

jQuery mobile 은 각 페이지 요소를 표현하는 CSS 설정이 default로 함께 딸려 있다. Prototype 용으로 이런 default 설정을 그대로 사용하는 것이 매우 편리하지만, 앱 디자인을 customize하기 위해선 default CSS 설정을 제거하고, 새롭게 CSS 를 설정해 디자인을 조정해야 한다.

본 post에서는 jQuery mobile 의 페이지 기본 요소인 header, content, footer 로 이루어진 페이지에서 이들 세 요소가 전체 화면 영역을 차지하도록 하는 한 가지 방법을 소개한다.

# jQuery mobile 의 기본 페이지 설정

<section data-role='page' >

  <div data-role=header >

      HEADER

  </div>

  <div data-role=content>

      CONTENT

  </div>

  <div data-role=footer>

     FOOTER

  </div>

</section>

구체적으로, header와 footer 를 설정하고 남은 영역을 content 가 완전히 차지하게 하는 것이 목표. 이 때 content가 차지하는 영역은 전체 화면 영역에서 header와 footer를 차지하는 영역을 제외한 나머지 영역을 단 1px 도 넘거나, 부족하지 않게 하는 것이 핵심이다.


방법1 :: Static  할당 
header와 footer 그리고 전체 화면 크기를 확인해보고, 전체 화면 크기에서 header와 footer를 제외한 영역을 px단위로 정확하게 <div data-role=content> 에 할당한다.

문제점: 서로 다른 모바일 기기들은 각기 다른 화면 사이즈를 가지는데, 이 방법을 이용한다면 각 모바일 기기들에 따라 서로 다른 content 영역 사이즈를 할당해야 하는데,  상당히 번거롭다는 점 뿐만 아니라, 현실적으로 존재하는 모든 device를 테스트 하기 어렵다는 근본적인 문제에 봉착한다.



방법2::  Dynamic 할당
 각 요소 사이즈를 javascript를 이용해 계산하고, content 사이즈를 할당하는 방법. javascript를 통해 동적으로 사이즈를 할당하기 때문에, 다양한 device에서도 제대로 된 영역의 사이즈를 계산하고 할당할 수 잇다.



Step 1) header와 footer 영역 사이즈 계산 
data-role=header, footer, content 모두에 padding 값이 설정되어 있다. 요소가 차지하는 전체 사이즈는 height + padding + border 이기 때문에 header와 footer 가 차지하는 공간을 계산하기 위해서는 height+padding+border 를 계산해주는 jquery의 outerHeight 메소드를 이용한다.

var head_height=$('[data-role=header]').outerHeight();

var footer_height=$('[data-role=footer]').outerHeight();

Step 2) Content 영역의 default CSS 제거 
content 영역의 padding, border 사이즈를 고려하여 height 를 알아내고, height 사이즈 만을 변경할 수도 있지만, 이 보다는 default padding, border 사이즈를 0으로 두고, height 사이즈를 변경하고, 필요하면 이후 다시 padding, border 를 CSS 를 이용하여 할당하는 쪽의 코드가 더 간결하고 명확하다는 개인적인 생각이다. 따라서 여기서는 content의  default CSS 를 제거한다.

# content 의 default padding, border 사이즈를 0으로 설정한다.

div[data-role=content]{

  padding:0;

  border:0

}

Step 3) header와 footer 가 차지하는 영역을 제외한 영역을 height가 차지하도록 설정
앞서 계산한 header와 footer 의 영역을 제거한 나머지 공간을 content가 차지하도록 설정을 한다.

  # 전체 화면의 높이 $(document).height() 에서 앞서 계산한 head와 footer의 높이를 뺀 공간의 높이를 계산하고 이를 content 영역의 높이로 설정

  var content_height= $(document).height() - head_height - footer_height ;

 $('[data-role=content]').css('height', content_height+'px');