IBSheet 초기화 시 크기 설정 및 리사이즈 동작 : IBSHEET8

IBSheet.create 함수 호출 시 el 객체의 크기가 정의되지 않으면, IBSheet는 너비 100% 높이 800px로 고정됩니다.

el 객체가 크기를 갖고 있고, 리사이즈가 가능하면 IBSheet도 el Div 의 크기에 맞춰 자동 조정됩니다.

//시트객체 생성
IBSheet.create({
  id: "sheet", // 생성할 시트의 id
  el: "sheetDiv", // 시트를 생성할 Dom 객체 및 id
  options: opt // 생성될 시트의 속성
});

1. IBSheet를 그릴 DIV 객체가 리사이즈에 잘 반응하는지 확인한다.

순수 HTML 환경에서 IBSheet를 그릴 DIV가 리사이즈시 높이와 너비를 제대로 갖고 있는지 확인한다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>가로세로 꽉찬 반응형 예제</title>
<style>
  /* 기본 리셋 */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html, body {
    width: 100%;
    height: 100%;
    min-width: 1024px;
    min-height: 768px;
    font-family: Arial, sans-serif;
  }

  .page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 1024px;
    min-height: 768px;
  }

  /* 고정 높이 영역 */
  .header, .form, .text-area {
    flex: 0 0 auto;
    padding: 20px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ccc;
  }

  .form {
    background-color: #e8e8e8;
    border-bottom: 1px solid #bbb;
  }

  .text-area {
    background-color: #f9f9f9;
    border-bottom: 1px solid #ccc;
    color: #333;
    font-size: 1.2rem;
  }

  /* 좌우 박스가 포함된 영역과 하단 박스가 동일 높이 분배 */
  .responsive-row,
  .responsive-box.bottom {
    flex: 1 1 0;
    display: flex;
    padding: 10px 20px;
    gap: 10px;
  }

  .responsive-row {
    background-color: #d0eaff;
    align-items: stretch;
  }

  /* 좌우 박스 */
  .responsive-box.left,
  .responsive-box.right {
    flex: 1 1 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    border-radius: 8px;
    height: 100%;  /* 부모 높이 꽉 채우기 */
    min-height: 200px;
  }

  .responsive-box.left {
    background-color: #4CAF50;
    color: white;
  }

  .responsive-box.right {
    background-color: #FF9800;
    color: white;
  }

  /* 하단 박스 */
  .responsive-box.bottom {
    background-color: steelblue;
    color: white;
    margin: 0 20px 20px 20px;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    min-height: 200px; /* 기본 높이 추가 */
  }

  /* footer 스타일 */
  .footer {
    flex: 0 0 auto; /* 고정 높이 */
    background-color: #222;
    color: #ccc;
    padding: 15px 20px;
    text-align: center;
    font-size: 0.9rem;
    border-top: 1px solid #444;
  }

  /* 폼 입력 요소 스타일 */
  .form label,
  .form input {
    display: block;
    margin-bottom: 10px;
  }
</style>
</head>
<body>
  <div class="page">
    <div class="header">
      <h1>상단 텍스트 영역</h1>
      <p>이곳은 페이지 상단에 표시되는 설명 텍스트입니다.</p>
    </div>

    <form class="form">
      <label for="name">이름</label>
      <input type="text" id="name" name="name" placeholder="이름을 입력하세요" />

      <label for="email">이메일</label>
      <input type="email" id="email" name="email" placeholder="이메일을 입력하세요" />
    </form>

    <div class="responsive-row">
      <div class="responsive-box left">IBSheet 왼쪽 박스</div>
      <div class="responsive-box right">IBSheet 오른쪽 박스</div>
    </div>

    <div class="text-area">
      <h2>공지사항</h2>
      <p>
        안녕하세요! 본 사이트는 최신 웹 표준과 반응형 디자인을 적용하여 제작되었습니다.<br />
        사용 중 궁금한 점이나 오류가 발견되면 언제든지 문의해 주세요.
      </p>
      <ul>
        <li>2025년 9월 1일 - 새로운 기능 추가 예정</li>
        <li>2025년 8월 15일 - 시스템 점검 완료</li>
        <li>2025년 7월 30일 - 사용자 피드백 반영 업데이트</li>
      </ul>
      <p>앞으로도 지속적인 개선을 통해 더 나은 서비스를 제공하겠습니다. 감사합니다.</p>
    </div>

    <div class="responsive-box bottom">
      IBSheet 하단 박스
    </div>

    <footer class="footer">
      <p>© 2025 Your Company. All rights reserved.</p>
      <p>문의: support@yourcompany.com | 전화: 02-1234-5678</p>
    </footer>
  </div>
</body>
</html>

2. IBSheet를 그린다.

리사이즈시 el객체의 DIV 너비와 높이가 잘 설정되어 있다면 IBSheet를 초기화 한다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>가로세로 꽉찬 반응형 예제</title>
  <link rel="stylesheet" href="https://www.ibsheet.com/v8/assets/lib/ibsheet/css/default/main.css"/>
<!--  ibsheet 필수 js -->
<script src="https://www.ibsheet.com/v8/assets/lib/iblicense.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/ibsheet.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/locale/ko.js"></script>

<!--  ibsheet 선택/추가 js -->
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/plugins/ibsheet-common.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/plugins/ibsheet-dialog.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/plugins/ibsheet-excel.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/plugins/jszip.min.js"></script>
<style>
  /* 기본 리셋 */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html, body {
    width: 100%;
    height: 100%;
    min-width: 1024px;
    min-height: 768px;
    font-family: Arial, sans-serif;
  }

  .page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 1024px;
    min-height: 768px;
  }

  /* 고정 높이 영역 */
  .header, .form, .text-area {
    flex: 0 0 auto;
    padding: 20px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ccc;
  }

  .form {
    background-color: #e8e8e8;
    border-bottom: 1px solid #bbb;
  }

  .text-area {
    background-color: #f9f9f9;
    border-bottom: 1px solid #ccc;
    color: #333;
    font-size: 1.2rem;
  }

  /* 좌우 박스가 포함된 영역과 하단 박스가 동일 높이 분배 */
  .responsive-row,
  .responsive-box.bottom {
    flex: 1 1 0;
    display: flex;
    padding: 10px 20px;
    gap: 10px;
  }


  .responsive-row {
    background-color: #d0eaff;
    align-items: stretch;
  }

  /* 좌우 박스 */
  .responsive-box.left,
  .responsive-box.right {
    flex: 1 1 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    height: 100%;  /* 부모 높이 꽉 채우기 */
    min-height: 200px;
  }

  .responsive-box.left {
    background-color: #4CAF50;
    color: white;
  }

  .responsive-box.right {
    background-color: #FF9800;
    color: white;
  }

  /* 하단 박스 */
  .responsive-box.bottom {
    background-color: #d0eaff;
    justify-content: center;
    align-items: center;
    min-height: 200px; /* 기본 높이 추가 */
     padding: 10px 20px;
  }

  /* footer 스타일 */
  .footer {
    flex: 0 0 auto; /* 고정 높이 */
    background-color: #222;
    color: #ccc;
    padding: 15px 20px;
    text-align: center;
    font-size: 0.9rem;
    border-top: 1px solid #444;
  }

  /* 폼 입력 요소 스타일 */
  .form label,
  .form input {
    display: block;
    margin-bottom: 10px;
  }

  .size{
    width:100%;
    height:100%;

  }
</style>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    // DOM이 준비되었을 때 실행
    initSheet();
  });

  function initSheet(){
    var opt = {
      //공통기능 설정 부분
      "Cfg": {
        "SearchMode": 0,
        "Size":"Tiny",
        "MaxPages": 3,
        "SuppressMessage": 3,
        "SelFocusColor": 1
      },
      Def:{
        Col:{RelWidth :1}
      },
      //틀고정 좌측 컬럼 설정
      "LeftCols": [
        {"Header": "No","Type": "Int","MinWidth": 50,"Align": "Center","Name": "SEQ","CanMove": 0,"CanFocus": 0}
      ],
      //중앙(메인) 컬럼 설정
      "Cols": [
        {"Header": "부서명","Type": "Text","Name": "sDept","MinWidth":"170","Align": "Center","CanEdit": 1,"RawSort": 1,"Suggest": "|CEO|SI사업부|인사부|솔루션사업부|영업팀|기술연구소|경영지원팀","Color": "#EFFFEF"},
        {"Header": "팀명","Type": "Text","Name": "sTeam","MinWidth": "125","Align": "Center","CanEdit": 1,"RawSort": 1,"Suggest": "|임원|개발1팀|인사2팀|개발2팀|영업팀|기술지원팀|영업1팀|영업2팀|연구1팀|경영1팀","Color": "#EFFFEF"},
        {"Header": "직급","Type": "Text","Name": "sPos","MinWidth": "95","Align": "Center","CanEdit": 1,"RawSort": 1,"Suggest": "|대표이사|상무|부장|과장|대리|사원|차장|이사","Color": "#EFFFEF"},
        {"Header": "성명","Type": "Text","Name": "sName","MinWidth": "130","Align": "Center","CanEdit": 1,"RawSort": 1},
        {"Header": "성별","Type": "Enum","Name": "sSex","MinWidth": "70","Align": "Center","CanEdit": 1,"RawSort": 1,"Enum": "|남자|여자","EnumKeys": "|男|女"},
        {"Header": "연령대","Type": "Text","Name": "sAge2","MinWidth": "70","Align": "Center","CanEdit": 1,"RawSort": 1,"Suggest": "|10대|20대|30대|40대|50대|60대 이상","Color": "#EFFFEF"},
        {"Header": "거주지","Type": "Text","Name": "sAddr1","MinWidth": "80","Align": "Center","CanEdit": 1,"RawSort": 1,"Suggest": "|서울|경기|강원","Color": "#EFFFEF"},
        {"Header": "나이","Type": "Int","Name": "sAge","MinWidth": "65","Align": "Right","CanEdit": 1,"RawSort": 1,"Format": "#0세"},
        {"Header": "근속기간","Type": "Int","Name": "sYearOfService","MinWidth": "85","Align": "Right","CanEdit": 1,"RawSort": 1,"Format": "#0년"},
        {"Header": "급여","Type": "Int","Name": "sSalary","MinWidth": "100","Align": "Right","CanEdit": 1,"RawSort": 1,"Format": "#,##0원"}
      ],Events:{
        onRenderFirstFinish : function(paramObject) {
          //시트가 다 그려지고 나서 이후 동작 처리
        }
      }
    }
   
    //시트객체 생성 비동기로 동작한다. 시트 초기화 하고 조회 하려면 onRenderFirstFinish 이벤트나 onRenderFirstFinishAll 이벤트에서 처리해야 한다.
    IBSheet.create({
        id: "sheet", // 생성할 시트의 id
        el: "sheetDiv", // 시트를 생성할 Dom 객체 및 id
        options: opt
    });

     IBSheet.create({
        id: "sheet1", // 생성할 시트의 id
        el: "sheetDiv1", // 시트를 생성할 Dom 객체 및 id
        options: opt
    });

     IBSheet.create({
        id: "sheet2", // 생성할 시트의 id
        el: "sheetDiv2", // 시트를 생성할 Dom 객체 및 id
        options: opt
    });

    IBSheet.onRenderFirstFinishAll= function(obj){
      //조회 데이터
      let data = [{"sDept":"CEO","sTeam":"임원","sPos":"대표이사","sName":"황정열","sSex":"男","sAge2":"50대","sAddr1":"서울","sAge":50,"sYearOfService":15,"sSalary":10122200,"sBonus":1012220},{"sDept":"SI사업부","sTeam":"임원","sPos":"상무","sName":"강대호","sSex":"男","sAge2":"40대","sAddr1":"경기","sAge":47,"sYearOfService":15,"sSalary":6756170,"sBonus":675617},{"sDept":"SI사업부","sTeam":"개발1팀","sPos":"부장","sName":"김미경","sSex":"女","sAge2":"30대","sAddr1":"강원","sAge":39,"sYearOfService":12,"sSalary":4180950,"sBonus":418095},{"sDept":"SI사업부","sTeam":"개발1팀","sPos":"과장","sName":"김선희","sSex":"女","sAge2":"30대","sAddr1":"경기","sAge":34,"sYearOfService":7,"sSalary":3217000,"sBonus":321700},{"sDept":"SI사업부","sTeam":"개발1팀","sPos":"과장","sName":"최세희","sSex":"女","sAge2":"30대","sAddr1":"경기","sAge":32,"sYearOfService":3,"sSalary":2750800,"sBonus":275080},{"sDept":"SI사업부","sTeam":"개발1팀","sPos":"대리","sName":"이명희","sSex":"女","sAge2":"20대","sAddr1":"서울","sAge":29,"sYearOfService":3,"sSalary":2571900,"sBonus":257190},{"sDept":"SI사업부","sTeam":"개발1팀","sPos":"사원","sName":"노효일","sSex":"男","sAge2":"20대","sAddr1":"서울","sAge":23,"sYearOfService":1,"sSalary":1520150,"sBonus":152020},{"sDept":"SI사업부","sTeam":"개발1팀","sPos":"사원","sName":"원영국","sSex":"男","sAge2":"20대","sAddr1":"경기","sAge":28,"sYearOfService":2,"sSalary":2557000,"sBonus":255700},{"sDept":"SI사업부","sTeam":"개발1팀","sPos":"사원","sName":"이지선","sSex":"女","sAge2":"20대","sAddr1":"서울","sAge":24,"sYearOfService":2,"sSalary":2007500,"sBonus":200750},{"sDept":"인사부","sTeam":"인사1팀","sPos":"부장","sName":"김상도","sSex":"男","sAge2":"40대","sAddr1":"경기","sAge":40,"sYearOfService":9,"sSalary":4290850,"sBonus":429085},{"sDept":"인사부","sTeam":"인사1팀","sPos":"대리","sName":"한보라","sSex":"女","sAge2":"20대","sAddr1":"서울","sAge":28,"sYearOfService":5,"sSalary":1959500,"sBonus":195950},{"sDept":"인사부","sTeam":"인사2팀","sPos":"사원","sName":"장태우","sSex":"男","sAge2":"20대","sAddr1":"서울","sAge":28,"sYearOfService":1,"sSalary":1959500,"sBonus":195950},{"sDept":"인사부","sTeam":"인사2팀","sPos":"차장","sName":"정필석","sSex":"男","sAge2":"40대","sAddr1":"경기","sAge":40,"sYearOfService":4,"sSalary":3851150,"sBonus":385120},{"sDept":"솔루션사업부","sTeam":"임원","sPos":"이사","sName":"조성목","sSex":"男","sAge2":"40대","sAddr1":"경기","sAge":41,"sYearOfService":15,"sSalary":6313700,"sBonus":631370},{"sDept":"솔루션사업부","sTeam":"개발1팀","sPos":"부장","sName":"유봉근","sSex":"男","sAge2":"40대","sAddr1":"서울","sAge":42,"sYearOfService":5,"sSalary":5187610,"sBonus":518760},{"sDept":"솔루션사업부","sTeam":"개발1팀","sPos":"차장","sName":"오필환","sSex":"男","sAge2":"30대","sAddr1":"서울","sAge":37,"sYearOfService":4,"sSalary":3412510,"sBonus":341250},{"sDept":"솔루션사업부","sTeam":"개발1팀","sPos":"차장","sName":"송복석","sSex":"男","sAge2":"30대","sAddr1":"경기","sAge":39,"sYearOfService":6,"sSalary":3871680,"sBonus":387170},{"sDept":"솔루션사업부","sTeam":"개발1팀","sPos":"과장","sName":"김남연","sSex":"男","sAge2":"30대","sAddr1":"서울","sAge":36,"sYearOfService":4,"sSalary":3500700,"sBonus":350070},{"sDept":"솔루션사업부","sTeam":"개발1팀","sPos":"대리","sName":"한혜선","sSex":"女","sAge2":"20대","sAddr1":"서울","sAge":29,"sYearOfService":2,"sSalary":2746000,"sBonus":274600},{"sDept":"솔루션사업부","sTeam":"개발1팀","sPos":"사원","sName":"조미미","sSex":"女","sAge2":"20대","sAddr1":"서울","sAge":25,"sYearOfService":2,"sSalary":2297040,"sBonus":229700}];
      sheet.loadSearchData(data);
      sheet1.loadSearchData(data);
      sheet2.loadSearchData(data);
      
    }
  }


</script>
</head>
<body>
  <div class="page">
    <div class="header">
      <h1>상단 텍스트 영역</h1>
      <p>이곳은 페이지 상단에 표시되는 설명 텍스트입니다.</p>
    </div>

    <form class="form">
      <label for="name">이름</label>
      <input type="text" id="name" name="name" placeholder="이름을 입력하세요" />

      <label for="email">이메일</label>
      <input type="email" id="email" name="email" placeholder="이메일을 입력하세요" />
    </form>

    <div class="responsive-row">
      <div class="responsive-box left"><div id="sheetDiv" style="width:100%;height:100%"></div></div>
      <div class="responsive-box right"><div id="sheetDiv1" style="width:100%;height:100%"></div></div>
    </div>

    <div class="text-area">
      <h2>공지사항</h2>
      <p>
        안녕하세요! 본 사이트는 최신 웹 표준과 반응형 디자인을 적용하여 제작되었습니다.<br />
        사용 중 궁금한 점이나 오류가 발견되면 언제든지 문의해 주세요.
      </p>
      <ul>
        <li>2025년 9월 1일 - 새로운 기능 추가 예정</li>
        <li>2025년 8월 15일 - 시스템 점검 완료</li>
        <li>2025년 7월 30일 - 사용자 피드백 반영 업데이트</li>
      </ul>
      <p>앞으로도 지속적인 개선을 통해 더 나은 서비스를 제공하겠습니다. 감사합니다.</p>
    </div>
    
    <div class="responsive-box bottom">
      <div id="sheetDiv2" style="width:100%;height:100%"></div>
    </div>

    <footer class="footer">
      <p>© 2025 Your Company. All rights reserved.</p>
      <p>문의: support@yourcompany.com | 전화: 02-1234-5678</p>
    </footer>
  </div>
</body>
</html>

※ 예제 확인방법

위의 코드를 복사하여 .html 파일로 만든 후 브라우저로 실행한다.

IBSheet 초기화 시 크기 설정 및 리사이즈 동작 인쇄

1. IBSheet를 그릴 DIV 객체가 리사이즈에 잘 반응하는지 확인한다.

2. IBSheet를 그린다.

관련 아티클