match box height (같은 박스 높이값을 설정하는 스크립트)

Match Height Box

이 포스팅에서 소개하는 소스는 박스간의 높이값을 동일하게 만들어주는 스크립트입니다.

CSS3를 이용하면 컬럼들 간의 높이값을 설정하는 것이 가능하지만 아직까지는 지원이 미흡한 실정입니다.

이 소스는&nbsp;data-compare-height="2" 로 기본으로 설정되어 있으며 .box를 찾아서 같은 높이값을 만들도록 합니다.

data 속성값인 number 값을 변경하여 커스텀 가능합니다.

예) data-compare-height="3" 이 경우 3개씩 박스가 같은 높이값을 반환합니다.

HTML

다음의 마크업은 match box height 에 사용되며 data-compare-height="2"와 매치시킬 박스의 클래스를 .box로 정의하면 사용자 정의하여 사용하실 수 있습니다.

html

<div class="divide-box" data-compare-height="2">
  <div class="box icon-01 button">
    <strong>공인인증서 신규발급/재발급</strong>
    <ul class="dotlist">
      <li>처음 인증서를 발급받는 고객</li>
      <li>인증서 유효기간이 만료된 고객</li>
      <li>인증서 암호를 잊어버린 고객</li>
      <li>인증서를 삭제한 고객</li>
    </ul>
    <div class="button-area">
      <a href="#none" class="btn-white-s">발급받기</a>
      <a href="#none" class="btn-white-s">등록안내</a>
    </div>
  </div>
  <div class="box icon-02 button">
    <strong>타행/타기관 인증서 등록</strong>
    <ul class="dotlist">
      <li>다른 은행 및 다른 기관에서 발급 받은 인증서를 은행에서 사용을 위해 등록하실 고객</li>
    </ul>
    <div class="button-area">
      <a href="#none" class="btn-white-s">등록하기</a>
      <a href="#none" class="btn-white-s">등록안내</a>
    </div>
  </div>
  <div class="box icon-03 button">
    <strong>공인인증서 갱신</strong>
    <ul class="dotlist">
      <li>발급받은 인증서 사용기간을 1년 연장하시려는 고객</li>
      <li>갱신은 인증서 만료 30일 전부터 가능</li>
    </ul>
    <div class="button-area">
      <a href="#none" class="btn-white-s">갱신하기</a>
    </div>
  </div>
  <div class="box icon-04 button">
    <strong>공인인증서 복사 및 관리</strong>
    <ul class="dotlist">
      <li>집과 직장 등 여러 PC에서 공인인증서를 등록하여 동시 사용하실 고객</li>
      <li>인증서 암호변경, 삭제, 백업 등을 하시려는 고객</li>
    </ul>
    <div class="button-area">
      <a href="#none" class="btn-white-s">관리하기</a>
    </div>
  </div>
</div>

CSS

css

body {width: 980px; margin: 0 auto;}

.dotlist {margin-bottom: 10px;}
.dotlist li { padding: 0 0 2px 10px;line-height: 20px;text-align: left;}

a[class^="btn-"], span[class^="btn-"] {display: inline-block;text-align: center;vertical-align: middle;white-space: nowrap; font-family: "Malgun Gothic";, text-decoration: none;}
.btn-white-s {border: 1px solid #bbb; min-width: 53px; padding: 0 10px; background-color: #fff; border-radius: 3px; font-size: 13px;line-height: 24px;}

.divide-box {margin-top: 20px;border: 2px solid #bbb; position: relative;display: table; width: 100%;table-layout: fixed; font-size: 0;}
.divide-box strong {margin-bottom: 20px;font-size: 20px;display: block;}
.divide-box .box {min-height: 90px; padding: 30px 30px 30px 140px; width: 50%; display: inline-table;vertical-align: top; font-size: 14px; position: relative;}
.divide-box .box.button {padding: 30px 30px 60px 160px;}
.divide-box .button-area {position: absolute;bottom: 30px;}
.divide-box:after {display: block;content: ''; width: 1px; position: absolute;left: 50%;top: 30px;bottom: 30px; /* background: url(/bg_dotline.png) repeat-y; */ border:1px dotted #bbb; }
.divide-box .box:nth-child(2n+1) {content: '';}
.divide-box .box:nth-child(2n+1):before {display: block;content: ''; height: 1px;position: absolute;top: 0;left: 30px;right: -460px;/* background: url(/bg_dotline.png) repeat-x; */border:1px dotted #bbb; z-index: 2;}
.divide-box .box:first-child:before {display: none;}
.divide-box .icon-01 {background: url('http://lorempixel.com/90/90/sports/1') no-repeat 30px 30px; }
.divide-box .icon-02 {background: url('http://lorempixel.com/90/90/sports/2') no-repeat 30px 30px; }
.divide-box .icon-03 {background: url('http://lorempixel.com/90/90/sports/3') no-repeat 30px 30px; }
.divide-box .icon-04 {background: url('http://lorempixel.com/90/90/sports/5') no-repeat 30px 30px; }

javaScript

javascript

/* helper */
var KUI = {};

KUI.helper = (function($) {
   
    function maxValue(value) {
        return Math.max.apply(null, value);
    }
    
    return {
      maxValue : maxValue
    }
  
}(jQuery));

/* Match Box Height */

function maxHeight(compare) {
  
  if(!$('[data-compare-height]')) {
    return;
  }
  
  var module = $('[data-compare-height]'),
      compareLength = module.attr('data-compare-height'),
      box = module.find('.box'),
      boxLength = box.size(),
      dataStore = [],
      dataStoreGroup = [],
      start = 0;
  
  function setHeight(obj) {
    var value = [];
    
    for(var i = 0; i < obj.length; i++) {
        if(obj[i]) {
            value.push(obj[i].outerHeight());
        } else {
          value.push(0);
        }
    }
    
    for(var j = 0; j < value.length; j++) {
        if(!obj[j]) {
          continue;
        }
        obj[j].css({
            'height' : KUI.helper.maxValue(value) + 'px'
        });
    }
    
  }
  
  for(var i = 0; i < Math.ceil(boxLength / compareLength); i++) {
      dataStoreGroup.push([]);
  }
  
  box.each(function() {
    dataStore.push($(this));
  });
  
  while(dataStore.length > 0) {
      for(var j = 0; j < compareLength; j++) {
          dataStoreGroup[start].push(dataStore.shift());
      }
      start = start + 1;
  }
  
  for(var n = 0; n < dataStoreGroup.length; n++) {
      setHeight(dataStoreGroup[n]);
  }
  
}

$(document).ready(function(){
    maxHeight();
});

Result View

개발자 도구로 소스검사를 해보면 같은 높이값이 설정되어 있는 것을 확인하실 수 있습니다.