jQuery로 컬럼(열)의 높이를 동일하게 조정하기

열의 높이(가령 div 높이)를 동일하게 맞추는 것은 매우 간단합니다. 동일한 클래스(Class)를 가진 컬럼(열; Column)의 높이를 모두 체크하여 가장 높은 컬럼의 높이로 다른 컬럼의 높이를 설정해주면 됩니다.

다음과 같은 jQuery 스크립트를 사용할 수 있습니다.

$(document).ready(function(){
//set the starting bigestHeight variable
// 초기 bigestHeight 변수 설정
var biggestHeight = 0;
//check each of them
// 각 요소의 높이를 체크
$('.equal_height').each(function(){
//if the height of the current element is
//bigger then the current biggestHeight value
// 현재 요소의 높이가 현재 저장되어
// 있는 biggestHeight 값보다 큰 경우
if($(this).height() > biggestHeight){
//update the biggestHeight with the
//height of the current elements
// 현재 요소의 높이로 biggestHeight 업데이트
biggestHeight = $(this).height();
}
});
//when checking for biggestHeight is done set that
//height to all the elements
// biggestHeight 체크가 완료되면
// 해당 높이를 모든 요소에 적용
$('.equal_height').height(biggestHeight);

});
// Source: http://web.enavu.com

여기에서 실제 작동을 확인해볼 수 있습니다.

참고:

댓글 남기기

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드