matchHeight - 요소간의 높이 통일화

플로트 시킨 요소들이나 여러 항목을 가진 요소들의 높이를 일치시켜야 할 때가 있습니다. 서로 다른 높이를 가진 요소들을 일관된 높이로 통일시키는 플러그인이 있어 이를 소개합니다.

matchHeight 소개

matchHeight는 선택한 모든 요소의 높이를 정확히 일치시킨다. 비슷한 종류의 플러그인들이 실수하는 예외적인 경우들을 처리했다.

HOME

matchHeight

REPO

matchHeight Repository

DEMO

matchHeight 데모

matchHeight 특징

• 자동적으로 그룹의 요소들에 대한 높이를 일치시킨다.
• 최대 높이를 사용하거나 특정 대상 요소를 정의한다.
• 페이지의 어디든지, DOM 구조안의 어디든지 제약이 없다.
• 반응형(창 크기 조정이 될때 업데이트)
• 행(row) 인식(플로팅요소와 감싸는 것을 다루기위해)
• padding, margin, border 값들이 혼합된 box-sizing을 계산
• 이미지 및 기타 미디어를 처리(로드후 업데이트)
• 숨겨진 혹은 눈에 보이지 않는 요소를 지원(예. 내부 탭 컨트롤)
• 균형적인 성능과 부드러움에 스로틀(throttle)
• 필요한 경우 쉬운 제거
• 스크롤 위치를 유지
• 데이터 속성 API를 사용
• 콜백 이벤트 지원
• IE8+, Chrome, Firefox, Chrome Android에서 테스트

matchHeight 설치

jQuery 우선 로드되어 있어야 하고, 이후에 삽입한다.

<script src="jquery.matchHeight.js" type="text/javascript"></script>

matchHeight 사용법

$(elements).matchHeight(options);

options은 선택적 매개변수이다. DOM ready 이벤트에 의해 호출된다(이 플러그인은 자동적으로 window load에 의해 업데이트된다).

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

matchHeight 옵션

기본 옵션은 아래와 같다:

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

• byRow : 행 감지를 활성화하기 위해 true 혹은 false
• property : CSS 속성을 설정하는 이름 (예. height 혹은 min-height)
• target : 최대 높이를 가진 요소 대신에 사용할 요소를 지정
• remove : 새로운 것을 적용하는 대신에 이전에 결합된(바인딩)을 제거하기 위해 true 혹은 false

matchHeight 예제

기본형

$(function() {
    $('.item').matchHeight();
});

위의 예제는, .item 을 가진 모든 요소들중에 가장 높은 높이의 값을 획득하여 각각의 .item 요소들에 설정한다. 만일 항목들이 다수의 행에 걸쳐 분포된다면, 각각의 행의 항목들은 그 행의 가장 높이가 큰 항목의 높이로 설정된다.

기준 대상지정

$(function() {
    $('.item').matchHeight({
        target: $('.sidebar')
    });
});

위의 예제는, .sidebar 의 첫번째 항목의 높이로 모든 .item 항목들의 높이가 설정된다.

그룹형

<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>

위의 예는, 그룹명이 같은 요소를 서로 같은 높이로 설정한다. my-group 과 my-other-group 은 각각 속하는 그룹의 높이로 설정된다.

matchHeight Data API

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

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

Data API를 사용하면 byRow 가 활성화되는데, 이것을 원치않는다면 위의 다른 예제들의 방법을 사용하라.

matchHeight 고급사용

당신이 알아야 할 몇 가지 내부 속성(property)과 함수(fuction)들에 대해 알아보자.

수동으로 업데이트를 실행

$.fn.matchHeight._update()

현재 설정되어 있는 그룹의 업데이트를 수동으로 실행해야 하는 경우, 예를 들어 당신이 일부 내용을 수정한 경우.

콜백 이벤트

meatchHeight가 자동으로 특정 윈도우 이벤들후에 레이아웃을 업데이트 처리하기 위해서 통보(알림)가 필요한 경우, 전역 콜백과 같은 함수를 제공할 수 있다.

$.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 을 참조한다.

수동으로 높이를 일치시키기

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

자동 업데이트 기능을 방지하고 하는 경우, apply 함수를 직접 사용한다.

크기조정(resize) 업데이트를 조절

$.fn.matchHeight._throttle = 80;

기본적으로, _update 메소드는 80ms 마다 최대속도로 실행하는 스로틀이다. 위의 _throttle 속성값을 감소시키면, 더 빠르게 레이아웃이 업데이트 되고, 크기 조정시 부드럽게 표시되는 대신 성능이 저하된다. 렉 또는 프리징 현상이 나타나면 이 값을 증가시켜야 한다.

스크롤 위치를 유지

$.fn.matchHeight._maintainScroll = true;

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

이와 같은 동작이 발견되는 경우에는 자동적으로 강제로 스크롤의 위치를 유지시키는 위의 구문을 사용하면된다. 이 전역설정 기본값은 false 이다.

현재 그룹 결합에 접속

$.fn.matchHeight._groups

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

알려진 제한

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

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

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

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

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

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

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