1. 구조
div 구조와 Layout
| div 구조 | Layout |
|---|---|
 |  |
2. HTML
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.0/split.min.js"></script>
</head>
<body>
<div class="example p-0" style="height: 400px">
<div class="h-100 splitter">
<div id="gutter-vertical"
class="d-flex flex-justify-center flex-align-center split-block">panel 1</div>
<div id="gutter-horizontal"
class="split-block splitter vertical">
<div id="gutter-top"
class="d-flex flex-justify-center flex-align-center split-block">topPanel</div>
<div id="gutter-bottom"
class="d-flex flex-justify-center flex-align-center split-block">bottomPanel</div>
</div>
</div>
</div>
</body>
</html>
- CDN 방식을 사용하여 Splitter를 구현하기 위해 script태그안에 링크 넣어줌
- 최상단의 div에 기본 height값을 지정
3. CSS
/*
** Flex Container 설정 **
*/
.example {
position: relative;
padding: 0.125rem;
border: 2px solid #eee;
margin-bottom: 1rem;
}
.splitter {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
position: relative;
}
.p-0 {
padding: 0 !impotant;
}
.h-100 {
height: 100% !important;
}
.d-flex {
display: flex!important;
background-color: skyblue;
}
/*
** Flex Item 설정 **
*/
.flex-justify-center {
justify-content: center !important;
}
.flex-align-center {
align-items: center !important;
}
.splitter > .split-block {
position: relative;
flex-grow: 1;
overflow: hidden;
}
/* 오른쪽 flex item 정렬을 열(세로) 방향으로 배치*/
.splitter > .vertical {
flex-direction: column;
}
/* 사이의 간격 설정*/
.gutter {
background-repeat: no-repeat;
background-position: 50%;
}
/* 좌우 Splitter에 cursor 올릴 경우 크기 변경 모양으로 변경 */
.gutter.gutter-horizontal {
cursor: col-resize;
background-color: #f9f9f9;
}
/* 상하 Splitter에 cursor 올릴 경우 크기 변경 모양으로 변경 */
.gutter.gutter-vertical {
cursor: row-resize;
background-color: #f9f9f9;
}
/* splitter 클릭 시(:active) 색상 변경되도록 설정 */
.gutter.gutter-horizontal:active, .gutter.gutter-vertical:active {
background-color: #c3c3c3;
}
/* 왼쪽 div의 최소 크기 지정 */
#gutter-vertical {
min-width: 350px;
}
/* 오른쪽 div의 최소 크기 지정 */
#gutter-horizontal {
min-width: 350px;
}
/* 오른쪽 > 위 div의 최소 크기 지정 */
#gutter-top {
min-height: 130px;
}
/* 오른쪽 > 아래 div의 최소 크기 지정 */
#gutter-bottem {
min-height: 130px;
}- 기본 화면은 relative(자기 자신을 기준으로 배치)로 배치
- 최상단 다음의 div는 flex(지정한 위치에 고정하여 배치)로 배치
- .gutter : 스타일 값을 설정
.gutter.gutter-horizontal : 좌우 splitter를 설정
.gutter.gutter-vertical : 상하 splitter를 설정head태그 안의 script태그에 호출한 split.js 파일로 인해 html에 gutter, gutter-horizontal, gutter-vertical 에 대한 class를 따로 지정해주지 않아도 호출하여 설정
- splitter로 화면크기 변동 시 min-width 설정을 통해 최소크기 제한을 둠
- !important : 해당 속성이 변경되지 않도록 함
- justify-content : 메인축 기준으로 아이템 정렬
- space-between : 아이템들의 사이(between)에 균일한 간격
4. JavaScript
new Split(["#gutter-vertical", "#gutter-horizontal"], {
sizes: [50, 50], // 50:50 비율
})
new Split(["#gutter-top", "#gutter-bottom"], {
sizes: [50, 50], // 50:50 비율
direction: "vertical" // splitter를 가로 방향으로 설정
})- new splitter로 인스턴스 만들어 좌우, 상하 Splitter를 생성
생성자를 통해 상하, 좌우 인스턴스를 만들어주어 각각의 객체를 만들어줌new 연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성
ex. function Splitter(args){
this.args = args;
return this.args;
}
let a = new Splitter("test");
5. 구현화면
6. 참고 사이트
- Splitter (https://metroui.org.ua/splitter.html?#_splitter_gutter)
- JavaScript로 SplitterLayout 구현하기 (https://blog.naver.com/PostView.naver?blogId=senshig&logNo=222529168964&parentCategoryNo=&categoryNo=85&viewDate=&isShowPopularPosts=true&from=search)
- Flex 설명 (https://studiomeal.com/archives/197)
- new 의미(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/new)
사부작