matchHeight (jQuery)

matchHeight - 요소간의 높이를 일치

CSS 를 활용하다 보면 플로팅된 요소들이나 여러 항목을 지닌 요소들의 높이를 같도록 설정해야할 경우가 있습니다.

특히, RWD(반응형)을 구현할 경우에 요소간의 높이를 일치시켜야 하는 일이 종종 있습니다. 

이러한 요구사항에 알맞은 플러그인을 소개하고자 합니다.

matchHeight introduction

matchHeight 는 선택한 모든 요소의 높이를 정확하게 일치시켜 주고, 유사한 종류의 플러그인들이 실수하는 예외적인 경우들까지도 처리되어 있습니다.

홈페이지 : matchHeight

GitHub R: matchHeight Repository

데모보기 : matchHeight Browser Test 

matchHeight features(특징)

1. 자동적으로 그룹의 요소들에 대한 높이를 일치시켜 줍니다.

2. 최대 높이를 사용하거나 특정 대상 요소에 대한 높이를 사용할 수 있습니다.

3. DOM 구조안의 어디에서든 사용할 수 있습니다.

4. RWD(반응형) : 창 크기를 조절(window resize)할 때 업데이트가 이루어지면서 요소간의 높이가 일치됩니다.

5. 플로팅 요소와 감싸는 것을 다루기 위해 행(row)을 인식합니다.

6. padding,margin,border 값들이 혼합된 box-sizing 으로 계산되어 집니다.

7. 이미지 및 기타 미디어 처리를 로드후 업데이트를 합니다.

8. 성능향상을 고려하여 스로틀링(throttling) 기법을 사용합니다.

9. 숨겨진 요소나 눈에 보이지 않는 요소에 대해서도 지원합니다 (예. 탭에 대한 컨트롤)

10. 필요할 경우 쉽게 제거할 수 있습니다.

11. 스크롤 위치를 유지합니다.

12. 데이터 속성( data-* ) API 를 사용합니다. 

13. 콜백 이벤트를 제공합니다.

14. 모듈 로더를 지원합니다.

15. IE8+, Chrome, Firefox, Safari, Android, iOS 를 지원합니다.

Usage(사용법)

jQuery 가 우선적으로 로드되어 있어야 하고, 이후에 matchHeight.js 를 인클루드합니다.

$(function() {
    $('.target').matchHeight(options);
});

options 은 선택적인 매개변수입니다.

그리고 DOM ready 이벤트에 의해 호출합니다.(이 플러그인은 자동적으로 window load 에 의해 업데이트됩니다.)

또한 Data API 에 의해 인라인으로 사용할 수도 있습니다.

Options

기본 옵션은 다음과 같습니다.

$(element).matchHeight({
    byRow: true,
    property: 'height',
    target: null,
    remove: false
});

1. byRow : 행의 감지를 위해 true 혹은 false

2. property : CSS 속성을 설정합니다 (예. 'height' or 'min-height')

3. target : 최대 높이를 가진 요소 대신에 사용할 요소를 지정할 수 있습니다.

4. remove : 새로운 것을 적용하는 대신에 이전에 결합(바인딩)된 것을 제거하기 위해 true 또는 false 

/**
 * ----------------------
 * 기본 타입
 * ----------------------
 */
$(function() {
    $('.item').matchHeight();
});

/**
 * ----------------------
 * 기준 대상 지정한 타입
 * ----------------------
 */
$(function() {
    $('.item').matchHeight({
        target: $('.target')
    });
});

위의 코드에서 기본 타입의 예제를 보면 .item 을 가진 모든 요소들 중에 가장 높은 높이의 값을 가져와서 각각의 .item 요소들에 최대치 높이값들을 설정하게 됩니다.

만약에 항목들이 다수의 행에 걸쳐 분포되어 있다면 각각의 행의 항목들의 그 행의 가장 높이가 큰 항목의 높이로 설정됩니다.

기준 대상을 지정하는 경우는 .target 의 첫번째 항목의 높이가 모든 .item 요소들의 높이로 설정되게 됩니다.

Data API

data-mh="group-name" 처럼 데이터 속성을 사용할 수 있는데, group-name 은 그룹으로 간주할 요소들을 임의의 문자열로 설정할 수 있습니다.

페이지가 로드될 때, 동일한 그룹 이름을 가진 모든 요소는 DOM 에서의 어느 위치에서나 어떠한 다른 추가 코드를 추가할 필요없이 자동적으로 같은 높이로 설정됩니다.

그리고 Data API 를 사용하게 되면 byRow 가 true 값이 되어 활성화 되는데, 이를 사용하기 원하지 않는다면 다른 방법을 사용해야 합니다

<div data-mh="my-group">My text</div>
<div data-mh="my-group">Some other text</div>
<div data-mh="my-other-group">Even more text</div>
<div data-mh="my-other-group">The last bit of text</div>

Advanced Usage (matchHeigh 고급사용법)

고급사용을 하기 위해서 몇가지의 함수(function)와 내부 속성(property)들에 대해 알아보겠습니다.

수동으로 업데이트를 실행

모든 현재 설정되어있는 그룹의 업데이트를 수동으로 실행해야하는 경우에 사용합니다. (예, 일부 내용을 수정 한 경우.)

$.fn.matchHeight._update()

행 감지

byRow 옵션의 기본값을 true 로 설정함으로써 행 감지 기능을 전환할 수 있습니다.

또한, 언제든지 행 감지 함수를 사용할 수 있습니다.

$.fn.matchHeight._rows($('.item'));

바인딩 제거

모든 그룹으로 부터 선택된 요소들에 대한 바인딩을 제거할 수 있습니다.

$('.item').matchHeight({ remove: true });

사용자 속성 정의

heigth 속성 대신에 min-height 속성을 설정할 수 있습니다.

$('.item').matchHeight({ property: 'min-height' });

콜백 이벤트

matchHeight 가 자동으로 특정 윈도우 이벤트 핸들러 후에 레이아웃을 업데이트 처리가 필요한 경우, 전역 콜백과 같은 함수를 사용할 수 있습니다.

$.fn.matchHeight._beforeUpdate = function(event, groups) {
// do something before any updates are applied
}

$.fn.matchHeight._afterUpdate = function(event, groups) {
// do something after all updates are applied
}

event 는 jQuery 이벤트 객체(load, resize, orientationchange)이고 groups 은 $.fn.matchHeight._groups 을 참조하세요.

수동으로 높이를 일치(적용)시키기

자동 업데이트 기능을 막고 있는 경우에 apply 함수를 직접 사용할 수 있습니다.

$.fn.matchHeight._apply(elements, options)

크기조절(resize)을 할 때 업데이트 시점을 컨트롤

기본적으로 _update 메소드는 80ms 마다 최대속도로 실행하는 스로틀(throttle)입니다. _throttle 속성값을 감소시키면, 더 빠르게 레이아웃이 업데이트 되고 부드럽게 표시되지만 스로틀이 짧아지면 짧아질 수록 성능저하로 이어진다.

렉 또는 프리징 현상이 나타난다면 이 값을 증가시켜야 합니다.

$.fn.matchHeight._throttle = 80;

스크롤 위치를 유지

크기 조정으로 페이지의 크기가 동적으로 변경되는 경우나 새로운 요소를 추가하는 것과 같은 조건하에서는 페이지의 스크롤 위치가 원치않게 변경되어 브라우저의 bug 원인이 되게 됩니다.

이와 같은 현상이 발견되는 경우에는 자동적으로 강제로 스크롤의 위치를 유지시키는 다음과 같은 구문을 사용하면 됩니다.

이 전역설정의 기본값은 false 입니다.

$.fn.matchHeight._maintainScroll = true;

현재 그룹화 바인딩된 요소에 접근할 때

matchHeight 가 적용된 모든 요소의 그룹을 포함하는 배열이고 resize 이벤트를 자동으로 업데이트하기 위해 내부적으로 사용되고 있지만, 수동으로 어떤 그룹들에 접근해야 하는 경우에 이 배열을 수정할 수 있습니다.(예. 요소를 삭제하는 경우)

$.fn.matchHeight._groups

주의(제한) 사항

§ CSS 전환(transition) 및 애니메이션은 지원되지 않는다.

요소들의 높이를 변경하여 일치시키는 일련의 행동을 지연시키는 전환(transition: all 을 포함하여) 혹은 다른 애니메이션이 없는지 확인해야 한다. 그렇지 않으면, 애니메이션이은 계산되어질 수 없기 때문에 예기치 않은 결과를 생성한다.

§ 지연된 웹폰트는 부정확한 높이의 원인이 된다.

몇몇 브라우저들은 window load 이벤트가 발생하는 것을 웹폰트가 기다리지 않는다. 그래서 웹폰트의 로드로 인해 너무 느리게 플러그인이 실행되면 예기치 않은 결과를 발생시킬 수 있다.

만일 이 문제가 나타난다면, webfontloader 스크립트 같은 것을 사용하여 로드되면, _update 를 호출해야 한다.

§ 내용변경은 수동으로 업데이트 해야 한다.

matchHeight가 적용된 상태에서 요소 내부의 내용을 변경하는 경우, 나중에 $.fn.matchHeight._update() 를 수동적으로 호출해야 한다. 이렇게 해야 현재 설정되어 있는 모든 그룹들의 높이가 같게 업데이트 됩니다.

[출처] WEBDIR-흉내징이님