gnui 1.2.17 → 1.2.19

package/styleguide/assets/styles/green24.css

@@ -18,7 +18,7 @@
     transform: translateX(100%);
   }
 }
-.gn-container:not(:last-child), .gn-tagcloud:not(:last-child), .gn-tab:not(:last-child), .gn-progressbar:not(:last-child), .gn-picklist:not(:last-child), .gn-panel-3:not(:last-child), .gn-panel-2:not(:last-child), .gn-pagination:not(:last-child), .gn-message:not(:last-child), .gn-jsonview .jsonview-header:not(:last-child), .gn-growl:not(:last-child), .gn-gcolor:not(:last-child), .gn-card:not(:last-child), .gn-breadcrumb:not(:last-child), .gn-bignumber:not(:last-child), .gn-alert:not(:last-child), .gn-slider:not(:last-child), .gn-multitext:not(:last-child), .gn-field:not(:last-child), .gn-title:not(:last-child),
+.gn-container:not(:last-child), .gn-tagcloud:not(:last-child), .gn-tab:not(:last-child), .gn-progressbar:not(:last-child), .gn-sortablelist:not(:last-child), .gn-picklist:not(:last-child), .gn-panel-3:not(:last-child), .gn-panel-2:not(:last-child), .gn-pagination:not(:last-child), .gn-message:not(:last-child), .gn-jsonview .jsonview-header:not(:last-child), .gn-growl:not(:last-child), .gn-gcolor:not(:last-child), .gn-card:not(:last-child), .gn-breadcrumb:not(:last-child), .gn-bignumber:not(:last-child), .gn-alert:not(:last-child), .gn-slider:not(:last-child), .gn-multitext:not(:last-child), .gn-field:not(:last-child), .gn-title:not(:last-child),
 .gn-sub-title:not(:last-child), .gn-table:not(:last-child), .gn-list:not(:last-child), .gn-box-no-line:not(:last-child), .gn-box:not(:last-child) {
   margin-bottom: 1rem;
 }
@@ -681,16 +681,16 @@ tag:
 }
 
 .has-text-help {
-  color: #268ccf !important;
+  color: #3681a5 !important;
 }
 
 .has-color-help {
-  background-color: #268ccf !important;
+  background-color: #3681a5 !important;
   color: #fff !important;
 }
 
 .has-border-help {
-  border-color: #268ccf !important;
+  border-color: #3681a5 !important;
 }
 
 .has-text-plain {
@@ -746,16 +746,16 @@ tag:
 }
 
 .has-text-guide {
-  color: #0487da !important;
+  color: #3681a5 !important;
 }
 
 .has-color-guide {
-  background-color: #0487da !important;
+  background-color: #3681a5 !important;
   color: #fff !important;
 }
 
 .has-border-guide {
-  border-color: #0487da !important;
+  border-color: #3681a5 !important;
 }
 
 .has-text-size1 {
@@ -1583,33 +1583,33 @@ tag:
   border-color: hsl(0, 0%, 29%);
 }
 .gn-icon.is-help {
-  color: #268ccf;
+  color: #3681a5;
 }
 .gn-icon.is-help[role=button]:hover, .gn-icon.is-help[role=button].is-hover {
-  color: rgb(33.2228571429, 122.4, 180.9771428571);
+  color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
 }
 .gn-icon.is-help.is-circle, .gn-icon.is-help.is-rect {
   color: #fff;
   border-color: #fff;
-  background-color: #268ccf;
+  background-color: #3681a5;
 }
 .gn-icon.is-help.is-circle[role=button]:hover, .gn-icon.is-help.is-circle[role=button].is-hover, .gn-icon.is-help.is-rect[role=button]:hover, .gn-icon.is-help.is-rect[role=button].is-hover {
-  color: #268ccf;
-  border-color: #268ccf;
-  background-color: rgb(34.0448979592, 125.4285714286, 185.4551020408);
+  color: #3681a5;
+  border-color: #3681a5;
+  background-color: rgb(47.7123287671, 113.9794520548, 145.7876712329);
 }
 .gn-icon.is-help.is-circle.is-outline, .gn-icon.is-help.is-rect.is-outline {
   background-color: #fff;
-  color: rgb(35.5959183673, 131.1428571429, 193.9040816327);
-  border-color: rgb(33.2228571429, 122.4, 180.9771428571);
+  color: rgb(54.0739726027, 129.1767123288, 165.2260273973);
+  border-color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
   border-width: 1px;
   border-style: solid;
   border-radius: 2px;
 }
 .gn-icon.is-help.is-circle.is-outline[role=button]:hover, .gn-icon.is-help.is-circle.is-outline[role=button].is-hover, .gn-icon.is-help.is-rect.is-outline[role=button]:hover, .gn-icon.is-help.is-rect.is-outline[role=button].is-hover {
-  background-color: #268ccf;
+  background-color: #3681a5;
   color: #fff;
-  border-color: rgb(33.2228571429, 122.4, 180.9771428571);
+  border-color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
 }
 .gn-icon.is-plain {
   color: #fff;
@@ -1728,33 +1728,33 @@ tag:
   border-color: rgb(221.3358870968, 18.3641129032, 22.2302419355);
 }
 .gn-icon.is-guide {
-  color: #0487da;
+  color: #3681a5;
 }
 .gn-icon.is-guide[role=button]:hover, .gn-icon.is-guide[role=button].is-hover {
-  color: rgb(3.9513513514, 133.3581081081, 215.3486486486);
+  color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
 }
 .gn-icon.is-guide.is-circle, .gn-icon.is-guide.is-rect {
   color: #fff;
   border-color: #fff;
-  background-color: #0487da;
+  background-color: #3681a5;
 }
 .gn-icon.is-guide.is-circle[role=button]:hover, .gn-icon.is-guide.is-circle[role=button].is-hover, .gn-icon.is-guide.is-rect[role=button]:hover, .gn-icon.is-guide.is-rect[role=button].is-hover {
-  color: #0487da;
-  border-color: #0487da;
-  background-color: rgb(3.5405405405, 119.4932432432, 192.9594594595);
+  color: #3681a5;
+  border-color: #3681a5;
+  background-color: rgb(47.7123287671, 113.9794520548, 145.7876712329);
 }
 .gn-icon.is-guide.is-circle.is-outline, .gn-icon.is-guide.is-rect.is-outline {
   background-color: #fff;
-  color: rgb(3.9513513514, 133.3581081081, 215.3486486486);
-  border-color: rgb(3.9513513514, 133.3581081081, 215.3486486486);
+  color: rgb(54.0739726027, 129.1767123288, 165.2260273973);
+  border-color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
   border-width: 1px;
   border-style: solid;
   border-radius: 2px;
 }
 .gn-icon.is-guide.is-circle.is-outline[role=button]:hover, .gn-icon.is-guide.is-circle.is-outline[role=button].is-hover, .gn-icon.is-guide.is-rect.is-outline[role=button]:hover, .gn-icon.is-guide.is-rect.is-outline[role=button].is-hover {
-  background-color: #0487da;
+  background-color: #3681a5;
   color: #fff;
-  border-color: rgb(3.9513513514, 133.3581081081, 215.3486486486);
+  border-color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
 }
 
 .gn-flag {
@@ -2799,7 +2799,7 @@ tag:
 }
 .gn-icon-ext::before {
   content: "\f15b";
-  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free";
+  font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome";
   font-weight: 300;
   font-size: 1.6rem;
 }
@@ -3566,19 +3566,19 @@ tag:
   color: hsl(0, 0%, 29%);
 }
 .gn-tag.is-help {
-  background-color: #268ccf;
+  background-color: #3681a5;
   color: #fff;
 }
 .gn-tag.is-help.is-outline {
   background-color: transparent;
-  color: #268ccf;
-  border-color: #268ccf;
+  color: #3681a5;
+  border-color: #3681a5;
   border-width: 1px;
   border-style: solid;
 }
 .gn-tag.is-help-light {
   background-color: #fff;
-  color: rgb(33.2228571429, 122.4, 180.9771428571);
+  color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
 }
 .gn-tag.is-plain {
   background-color: #fff;
@@ -3641,19 +3641,19 @@ tag:
   color: rgb(221.3358870968, 18.3641129032, 22.2302419355);
 }
 .gn-tag.is-guide {
-  background-color: #0487da;
+  background-color: #3681a5;
   color: #fff;
 }
 .gn-tag.is-guide.is-outline {
   background-color: transparent;
-  color: #0487da;
-  border-color: #0487da;
+  color: #3681a5;
+  border-color: #3681a5;
   border-width: 1px;
   border-style: solid;
 }
 .gn-tag.is-guide-light {
   background-color: #fff;
-  color: rgb(3.9513513514, 133.3581081081, 215.3486486486);
+  color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
 }
 .gn-tag.is-round {
   border-radius: 290486px;
@@ -4196,13 +4196,13 @@ tag:
 .gn-table tr.is-help,
 .gn-table td.is-help,
 .gn-table th.is-help {
-  background-color: #268ccf;
+  background-color: #3681a5;
   color: #fff;
 }
 .gn-table tr.is-help:hover,
 .gn-table td.is-help:hover,
 .gn-table th.is-help:hover {
-  background-color: rgb(35.6269387755, 131.2571428571, 194.0730612245);
+  background-color: rgb(50.2273972603, 119.9876712329, 153.4726027397);
 }
 .gn-table tr.is-help-light,
 .gn-table td.is-help-light,
@@ -4301,13 +4301,13 @@ tag:
 .gn-table tr.is-guide,
 .gn-table td.is-guide,
 .gn-table th.is-guide {
-  background-color: #0487da;
+  background-color: #3681a5;
   color: #fff;
 }
 .gn-table tr.is-guide:hover,
 .gn-table td.is-guide:hover,
 .gn-table th.is-guide:hover {
-  background-color: rgb(3.7243243243, 125.6959459459, 202.9756756757);
+  background-color: rgb(50.2273972603, 119.9876712329, 153.4726027397);
 }
 .gn-table tr.is-guide-light,
 .gn-table td.is-guide-light,
@@ -4380,10 +4380,6 @@ tag:
   display: block;
   word-break: break-word;
 }
-.gn-title:not(:last-child),
-.gn-sub-title:not(:last-child) {
-  margin-bottom: 1rem;
-}
 
 .gn-title {
   color: #000;
@@ -5433,44 +5429,44 @@ compile: true
   border-color: rgba(0, 0, 0, 0.7);
 }
 .gn-button.is-help {
-  background-color: #268ccf;
+  background-color: #3681a5;
   color: #fff;
-  border-color: #268ccf;
+  border-color: #3681a5;
 }
 .gn-button.is-help:hover, .gn-button.is-help.is-hover {
-  background-color: rgb(33.2228571429, 122.4, 180.9771428571);
+  background-color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
   color: #fff;
-  border-color: rgb(33.2228571429, 122.4, 180.9771428571);
+  border-color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
 }
 .gn-button.is-help.is-disabled:hover, .gn-button.is-help.is-disabled.is-hover {
-  background-color: #268ccf;
+  background-color: #3681a5;
   color: #fff;
-  border-color: #268ccf;
+  border-color: #3681a5;
 }
 .gn-button.is-help:focus, .gn-button.is-help.is-focus {
   color: rgb(229.5, 229.5, 229.5);
 }
 .gn-button.is-help:active, .gn-button.is-help.is-active {
-  background-color: rgb(33.2228571429, 122.4, 180.9771428571);
+  background-color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
   color: #fff;
 }
 .gn-button.is-help.is-outline {
   background-color: #fff;
-  color: rgb(35.5959183673, 131.1428571429, 193.9040816327);
-  border-color: rgb(33.2228571429, 122.4, 180.9771428571);
+  color: rgb(54.0739726027, 129.1767123288, 165.2260273973);
+  border-color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
 }
 .gn-button.is-help.is-outline:hover, .gn-button.is-help.is-outline.is-hover {
-  background-color: #268ccf;
+  background-color: #3681a5;
   color: #fff;
-  border-color: rgb(33.2228571429, 122.4, 180.9771428571);
+  border-color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
 }
 .gn-button.is-help.is-outline.is-disabled:hover, .gn-button.is-help.is-outline.is-disabled.is-hover {
   background-color: #fff;
-  color: #268ccf;
+  color: #3681a5;
 }
 .gn-button.is-help.is-invert {
   background-color: #fff;
-  color: #268ccf;
+  color: #3681a5;
   border-color: #fff;
 }
 .gn-button.is-help.is-invert:hover, .gn-button.is-help.is-invert.is-hover {
@@ -5479,7 +5475,7 @@ compile: true
 }
 .gn-button.is-help.is-invert.is-disabled:hover, .gn-button.is-help.is-invert.is-disabled.is-hover {
   background-color: #fff;
-  color: #268ccf;
+  color: #3681a5;
   border-color: #fff;
 }
 .gn-button.is-plain {
@@ -5683,44 +5679,44 @@ compile: true
   border-color: #fff;
 }
 .gn-button.is-guide {
-  background-color: #0487da;
+  background-color: #3681a5;
   color: #fff;
-  border-color: #0487da;
+  border-color: #3681a5;
 }
 .gn-button.is-guide:hover, .gn-button.is-guide.is-hover {
-  background-color: rgb(3.9513513514, 133.3581081081, 215.3486486486);
+  background-color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
   color: #fff;
-  border-color: rgb(3.9513513514, 133.3581081081, 215.3486486486);
+  border-color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
 }
 .gn-button.is-guide.is-disabled:hover, .gn-button.is-guide.is-disabled.is-hover {
-  background-color: #0487da;
+  background-color: #3681a5;
   color: #fff;
-  border-color: #0487da;
+  border-color: #3681a5;
 }
 .gn-button.is-guide:focus, .gn-button.is-guide.is-focus {
   color: rgb(229.5, 229.5, 229.5);
 }
 .gn-button.is-guide:active, .gn-button.is-guide.is-active {
-  background-color: rgb(3.9513513514, 133.3581081081, 215.3486486486);
+  background-color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
   color: #fff;
 }
 .gn-button.is-guide.is-outline {
   background-color: #fff;
-  color: rgb(3.9513513514, 133.3581081081, 215.3486486486);
-  border-color: rgb(3.9513513514, 133.3581081081, 215.3486486486);
+  color: rgb(54.0739726027, 129.1767123288, 165.2260273973);
+  border-color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
 }
 .gn-button.is-guide.is-outline:hover, .gn-button.is-guide.is-outline.is-hover {
-  background-color: #0487da;
+  background-color: #3681a5;
   color: #fff;
-  border-color: rgb(3.9513513514, 133.3581081081, 215.3486486486);
+  border-color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
 }
 .gn-button.is-guide.is-outline.is-disabled:hover, .gn-button.is-guide.is-outline.is-disabled.is-hover {
   background-color: #fff;
-  color: #0487da;
+  color: #3681a5;
 }
 .gn-button.is-guide.is-invert {
   background-color: #fff;
-  color: #0487da;
+  color: #3681a5;
   border-color: #fff;
 }
 .gn-button.is-guide.is-invert:hover, .gn-button.is-guide.is-invert.is-hover {
@@ -5729,7 +5725,7 @@ compile: true
 }
 .gn-button.is-guide.is-invert.is-disabled:hover, .gn-button.is-guide.is-invert.is-disabled.is-hover {
   background-color: #fff;
-  color: #0487da;
+  color: #3681a5;
   border-color: #fff;
 }
 
@@ -5753,6 +5749,7 @@ compile: true
 ```ejs
   <button name="new-button"></button>
   <button name="new-button2"></button>
+  <button name="new-button-submenu">편집 메뉴</button>
 ```
 
 ````
@@ -5792,6 +5789,51 @@ compile: true
       value: 'menu2'
     }]
   });
+  // 서브메뉴 예시
+  Gn.create('menubutton', {
+    target: 'button[name=new-button-submenu]',
+    size: 'normal',
+    textSets: {
+      buttonText: '편집 메뉴'
+    },
+    onSelect: function (value, text, menu, e) {
+      console.log('선택된 메뉴:', { value: value, text: text, menu: menu });
+    },
+    data: [
+      {
+        text: '파일',
+        value: 'file',
+        child: [
+          { text: '새 파일', value: 'file-new' },
+          { text: '열기', value: 'file-open' },
+          {
+            text: '최근 파일',
+            value: 'file-recent',
+            child: [
+              { text: 'document.txt', value: 'file-recent-1' },
+              { text: 'image.png', value: 'file-recent-2' }
+            ]
+          },
+          { text: '저장', value: 'file-save', disabled: true },
+          { text: '다른 이름으로 저장', value: 'file-saveas' }
+        ]
+      },
+      {
+        text: '편집',
+        value: 'edit',
+        actived: true,
+        child: [
+          { text: '실행 취소', value: 'edit-undo' },
+          { text: '다시 실행', value: 'edit-redo' }
+        ]
+      },
+      {
+        text: '도움말',
+        value: 'help',
+        disabled: true
+      }
+    ]
+  });
 ````
 
 
@@ -5848,15 +5890,21 @@ compile: true
     </tr>
     <tr>
       <td colspan="2">data</td>
-      <td>Array[{value, text, _html_}]</td>
+      <td>Array[{value, text, html, child, disabled, actived}]</td>
       <td></td>
-      <td>메뉴 목록에 출력할 목록</td>
+      <td>메뉴 목록에 출력할 목록<br/>- value: 메뉴 값<br/>- text: 메뉴 텍스트<br/>- html: HTML로 렌더링할 내용<br/>- child: 하위 메뉴 배열 (최대 2단계)<br/>- disabled: 비활성화 여부 (boolean)<br/>- actived: 활성화 상태 표시 여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">disabled</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>버튼 비활성화 여부</td>
     </tr>
     <tr>
       <td colspan="2">onSelect</td>
-      <td>function(value, text)</td>
+      <td>function(value, text, menu, e)</td>
       <td></td>
-      <td>메뉴 선택 시 수행될 이벤트</td>
+      <td>메뉴 선택 시 수행될 이벤트<br/>- value: 선택된 메뉴의 값<br/>- text: 선택된 메뉴의 텍스트<br/>- menu: 선택된 메뉴 객체<br/>- e: MouseEvent 객체</td>
     </tr>
   </tbody>
 </table>
@@ -5875,6 +5923,21 @@ compile: true
       <td>void</td>
       <td>버튼명을 변경한다.</td>
     </tr>
+    <tr>
+      <td>reRender(data: Array)</td>
+      <td>void</td>
+      <td>메뉴 데이터를 전달받아 DOM을 다시 생성한다.</td>
+    </tr>
+    <tr>
+      <td>disabled()</td>
+      <td>void</td>
+      <td>버튼을 비활성화한다.</td>
+    </tr>
+    <tr>
+      <td>enabled()</td>
+      <td>void</td>
+      <td>버튼을 활성화한다.</td>
+    </tr>
   </tbody>
 </table>
 */
@@ -5962,6 +6025,47 @@ compile: true
   color: #fff;
   background-color: #88b50f;
 }
+.gn-menuButton .menuButton-menu.is-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.gn-menuButton .menuButton-menu.is-actived {
+  background-color: #b5bdbd !important;
+}
+.gn-menuButton .menuButton-menu.has-submenu .menuButton-menu-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.gn-menuButton .menuButton-menu.has-submenu .menuButton-menu-arrow {
+  margin-left: 10px;
+  display: inline-flex;
+  align-items: center;
+}
+.gn-menuButton .menuButton-menu .menuButton-submenu {
+  display: none;
+  position: absolute;
+  left: 100%;
+  top: 0;
+  min-width: 150px;
+  background-color: hsl(0, 0%, 100%);
+  border: 1px solid hsl(0, 0%, 86%);
+  border-radius: 2px;
+  z-index: 21;
+  padding: 0.35rem;
+}
+.gn-menuButton .menuButton-menu .menuButton-submenu .menuButton-menu {
+  color: hsl(0, 0%, 29%);
+  cursor: pointer;
+}
+.gn-menuButton .menuButton-menu .menuButton-submenu .menuButton-menu:hover {
+  color: #fff;
+  background-color: #88b50f;
+}
+.gn-menuButton .menuButton-menu:hover > .menuButton-submenu {
+  display: block;
+}
 .gn-menuButton.is-white button {
   color: hsl(0, 0%, 100%);
   border-color: hsl(0, 0%, 100%);
@@ -6155,19 +6259,19 @@ compile: true
   background-color: hsl(0, 0%, 100%);
 }
 .gn-menuButton.is-help button {
-  color: #268ccf;
-  border-color: #268ccf;
+  color: #3681a5;
+  border-color: #3681a5;
 }
 .gn-menuButton.is-help .menuButton-icon {
-  color: rgb(30.0897959184, 110.8571428571, 163.9102040816);
+  color: rgb(41.4246575342, 98.9589041096, 126.5753424658);
 }
 .gn-menuButton.is-help .menuButton-item.is-active {
   color: #fff;
-  background-color: #268ccf;
+  background-color: #3681a5;
 }
 .gn-menuButton.is-help .menuButton-item.is-hover,
 .gn-menuButton.is-help .menuButton-item:hover {
-  color: #268ccf;
+  color: #3681a5;
   background-color: #fff;
 }
 .gn-menuButton.is-plain button {
@@ -6235,19 +6339,19 @@ compile: true
   background-color: #ffcecf;
 }
 .gn-menuButton.is-guide button {
-  color: #0487da;
-  border-color: #0487da;
+  color: #3681a5;
+  border-color: #3681a5;
 }
 .gn-menuButton.is-guide .menuButton-icon {
-  color: rgb(3.0810810811, 103.9864864865, 167.9189189189);
+  color: rgb(41.4246575342, 98.9589041096, 126.5753424658);
 }
 .gn-menuButton.is-guide .menuButton-item.is-active {
   color: #fff;
-  background-color: #0487da;
+  background-color: #3681a5;
 }
 .gn-menuButton.is-guide .menuButton-item.is-hover,
 .gn-menuButton.is-guide .menuButton-item:hover {
-  color: #0487da;
+  color: #3681a5;
   background-color: #fff;
 }
 .gn-menuButton.is-simple button {
@@ -7725,25 +7829,25 @@ tag:
   border-color: hsla(0, 0%, -5%, 0.7);
 }
 .gn-file.is-help {
-  background-color: #268ccf;
+  background-color: #3681a5;
   color: #fff;
-  border-color: #268ccf;
+  border-color: #3681a5;
 }
 .gn-file.is-help:hover, .gn-file.is-help.is-hover {
-  background-color: rgb(35.6269387755, 131.2571428571, 194.0730612245);
+  background-color: rgb(50.2273972603, 119.9876712329, 153.4726027397);
   color: #fff;
 }
 .gn-file.is-help.is-outline {
   background-color: transparent;
-  color: #268ccf;
+  color: #3681a5;
 }
 .gn-file.is-help.is-outline:hover, .gn-file.is-help.is-outline.is-hover {
-  background-color: #268ccf;
+  background-color: #3681a5;
   color: #fff;
 }
 .gn-file.is-help.is-invert {
   background-color: #fff;
-  color: #268ccf;
+  color: #3681a5;
   border-color: #fff;
 }
 .gn-file.is-help.is-invert:hover, .gn-file.is-help.is-invert.is-hover {
@@ -7855,25 +7959,25 @@ tag:
   border-color: rgb(242.25, 242.25, 242.25);
 }
 .gn-file.is-guide {
-  background-color: #0487da;
+  background-color: #3681a5;
   color: #fff;
-  border-color: #0487da;
+  border-color: #3681a5;
 }
 .gn-file.is-guide:hover, .gn-file.is-guide.is-hover {
-  background-color: rgb(3.7243243243, 125.6959459459, 202.9756756757);
+  background-color: rgb(50.2273972603, 119.9876712329, 153.4726027397);
   color: #fff;
 }
 .gn-file.is-guide.is-outline {
   background-color: transparent;
-  color: #0487da;
+  color: #3681a5;
 }
 .gn-file.is-guide.is-outline:hover, .gn-file.is-guide.is-outline.is-hover {
-  background-color: #0487da;
+  background-color: #3681a5;
   color: #fff;
 }
 .gn-file.is-guide.is-invert {
   background-color: #fff;
-  color: #0487da;
+  color: #3681a5;
   border-color: #fff;
 }
 .gn-file.is-guide.is-invert:hover, .gn-file.is-guide.is-invert.is-hover {
@@ -8332,19 +8436,19 @@ tag:
   color: hsl(0, 0%, 29%);
 }
 .gn-plain.is-help {
-  background-color: #268ccf;
+  background-color: #3681a5;
   color: #fff;
 }
 .gn-plain.is-help.is-outline {
   background-color: transparent;
-  color: #268ccf;
-  border-color: #268ccf;
+  color: #3681a5;
+  border-color: #3681a5;
   border-width: 1px;
   border-style: solid;
 }
 .gn-plain.is-help-light {
   background-color: #fff;
-  color: rgb(33.2228571429, 122.4, 180.9771428571);
+  color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
 }
 .gn-plain.is-plain {
   background-color: #fff;
@@ -8407,19 +8511,19 @@ tag:
   color: rgb(221.3358870968, 18.3641129032, 22.2302419355);
 }
 .gn-plain.is-guide {
-  background-color: #0487da;
+  background-color: #3681a5;
   color: #fff;
 }
 .gn-plain.is-guide.is-outline {
   background-color: transparent;
-  color: #0487da;
-  border-color: #0487da;
+  color: #3681a5;
+  border-color: #3681a5;
   border-width: 1px;
   border-style: solid;
 }
 .gn-plain.is-guide-light {
   background-color: #fff;
-  color: rgb(3.9513513514, 133.3581081081, 215.3486486486);
+  color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
 }
 
 /* 
@@ -8576,7 +8680,7 @@ tag:
   color: hsl(0, 0%, 100%);
 }
 .gn-field.is-help {
-  color: #268ccf;
+  color: #3681a5;
 }
 .gn-field.is-plain {
   color: #fff;
@@ -8591,7 +8695,7 @@ tag:
   color: #e51317;
 }
 .gn-field.is-guide {
-  color: #0487da;
+  color: #3681a5;
 }
 .gn-field .gn-label {
   color: hsl(0, 0%, 21%);
@@ -8648,7 +8752,7 @@ tag:
   color: hsl(0, 0%, 100%);
 }
 .gn-field .gn-label.is-help {
-  color: #268ccf;
+  color: #3681a5;
 }
 .gn-field .gn-label.is-plain {
   color: #fff;
@@ -8663,7 +8767,7 @@ tag:
   color: #e51317;
 }
 .gn-field .gn-label.is-guide {
-  color: #0487da;
+  color: #3681a5;
 }
 
 /* 
@@ -8951,7 +9055,7 @@ tag:
 }
 .gn-input.is-help,
 .gn-textarea.is-help {
-  border-color: #268ccf;
+  border-color: #3681a5;
 }
 .gn-input.is-help:hover, .gn-input.is-help.is-hover,
 .gn-textarea.is-help:hover,
@@ -8996,7 +9100,7 @@ tag:
 }
 .gn-input.is-guide,
 .gn-textarea.is-guide {
-  border-color: #0487da;
+  border-color: #3681a5;
 }
 .gn-input.is-guide:hover, .gn-input.is-guide.is-hover,
 .gn-textarea.is-guide:hover,
@@ -9253,19 +9357,19 @@ tag:
   color: hsl(0, 0%, 29%);
 }
 .gn-plain2.is-help {
-  background-color: #268ccf;
+  background-color: #3681a5;
   color: #fff;
 }
 .gn-plain2.is-help.is-outline {
   background-color: transparent;
-  color: #268ccf;
-  border-color: #268ccf;
+  color: #3681a5;
+  border-color: #3681a5;
   border-width: 1px;
   border-style: solid;
 }
 .gn-plain2.is-help-light {
   background-color: #fff;
-  color: rgb(33.2228571429, 122.4, 180.9771428571);
+  color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
 }
 .gn-plain2.is-plain {
   background-color: #fff;
@@ -9328,19 +9432,19 @@ tag:
   color: rgb(221.3358870968, 18.3641129032, 22.2302419355);
 }
 .gn-plain2.is-guide {
-  background-color: #0487da;
+  background-color: #3681a5;
   color: #fff;
 }
 .gn-plain2.is-guide.is-outline {
   background-color: transparent;
-  color: #0487da;
-  border-color: #0487da;
+  color: #3681a5;
+  border-color: #3681a5;
   border-width: 1px;
   border-style: solid;
 }
 .gn-plain2.is-guide-light {
   background-color: #fff;
-  color: rgb(3.9513513514, 133.3581081081, 215.3486486486);
+  color: rgb(55.3315068493, 132.1808219178, 169.0684931507);
 }
 
 .is-invalid > .gn-input,
@@ -9921,7 +10025,7 @@ tag:
 }
 .gn-select::after {
   content: "\f107";
-  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome";
+  font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome";
   font-weight: 900;
   position: absolute;
   right: 0.5rem;
@@ -10088,11 +10192,11 @@ tag:
   color: hsl(0, 0%, 100%);
 }
 .gn-select.is-help select {
-  color: #268ccf;
-  border-color: #268ccf;
+  color: #3681a5;
+  border-color: #3681a5;
 }
 .gn-select.is-help::after {
-  color: #268ccf;
+  color: #3681a5;
 }
 .gn-select.is-plain select {
   color: #fff;
@@ -10123,11 +10227,11 @@ tag:
   color: #e51317;
 }
 .gn-select.is-guide select {
-  color: #0487da;
-  border-color: #0487da;
+  color: #3681a5;
+  border-color: #3681a5;
 }
 .gn-select.is-guide::after {
-  color: #0487da;
+  color: #3681a5;
 }
 
 .is-invalid > .gn-select select,
@@ -10396,10 +10500,10 @@ tag:
   background-color: rgb(247.35, 247.35, 247.35);
 }
 .gn-slider.is-help::-webkit-slider-thumb, .gn-slider.is-help::-ms-thumb {
-  background-color: #268ccf;
+  background-color: #3681a5;
 }
 .gn-slider.is-help::-webkit-slider-thumb:hover, .gn-slider.is-help:active::-webkit-slider-thumb, .gn-slider.is-help::-ms-thumb:hover, .gn-slider.is-help:active::-ms-thumb {
-  background-color: rgb(35.6269387755, 131.2571428571, 194.0730612245);
+  background-color: rgb(50.2273972603, 119.9876712329, 153.4726027397);
 }
 .gn-slider.is-help:hover {
   background-color: rgb(239.7, 239.7, 239.7);
@@ -10456,10 +10560,10 @@ tag:
   background-color: rgb(247.35, 247.35, 247.35);
 }
 .gn-slider.is-guide::-webkit-slider-thumb, .gn-slider.is-guide::-ms-thumb {
-  background-color: #0487da;
+  background-color: #3681a5;
 }
 .gn-slider.is-guide::-webkit-slider-thumb:hover, .gn-slider.is-guide:active::-webkit-slider-thumb, .gn-slider.is-guide::-ms-thumb:hover, .gn-slider.is-guide:active::-ms-thumb {
-  background-color: rgb(3.7243243243, 125.6959459459, 202.9756756757);
+  background-color: rgb(50.2273972603, 119.9876712329, 153.4726027397);
 }
 .gn-slider.is-guide:hover {
   background-color: rgb(239.7, 239.7, 239.7);
@@ -10775,7 +10879,7 @@ tag:
   background: hsl(0, 0%, 100%);
 }
 .gn-switch.is-help input:checked + .switch-toggle {
-  background: #268ccf;
+  background: #3681a5;
 }
 .gn-switch.is-plain input:checked + .switch-toggle {
   background: #fff;
@@ -10790,7 +10894,7 @@ tag:
   background: #e51317;
 }
 .gn-switch.is-guide input:checked + .switch-toggle {
-  background: #0487da;
+  background: #3681a5;
 }
 
 .is-invalid > .gn-switch .switch-toggle,
@@ -11670,11 +11774,11 @@ tag:
   background-color: hsl(0, 0%, 94%);
 }
 .gn-alert.is-help {
-  background-color: #268ccf;
+  background-color: #3681a5;
   color: #fff;
 }
 .gn-alert.is-help > .is-close:hover {
-  background-color: rgb(33.253877551, 122.5142857143, 181.146122449);
+  background-color: rgb(46.4547945205, 110.9753424658, 141.9452054795);
 }
 .gn-alert.is-plain {
   background-color: #fff;
@@ -11705,11 +11809,11 @@ tag:
   background-color: rgb(200.7443548387, 16.6556451613, 20.1620967742);
 }
 .gn-alert.is-guide {
-  background-color: #0487da;
+  background-color: #3681a5;
   color: #fff;
 }
 .gn-alert.is-guide > .is-close:hover {
-  background-color: rgb(3.4486486486, 116.3918918919, 187.9513513514);
+  background-color: rgb(46.4547945205, 110.9753424658, 141.9452054795);
 }
 
 /* 
@@ -11904,8 +12008,8 @@ tag:
   color: hsl(0, 0%, 29%);
 }
 .gn-bignumber.is-help {
-  border-color: #268ccf;
-  color: rgb(35.6269387755, 131.2571428571, 194.0730612245);
+  border-color: #3681a5;
+  color: rgb(50.2273972603, 119.9876712329, 153.4726027397);
   background-color: #fff;
 }
 .gn-bignumber.is-plain {
@@ -11929,8 +12033,8 @@ tag:
   background-color: #ffcecf;
 }
 .gn-bignumber.is-guide {
-  border-color: #0487da;
-  color: rgb(3.7243243243, 125.6959459459, 202.9756756757);
+  border-color: #3681a5;
+  color: rgb(50.2273972603, 119.9876712329, 153.4726027397);
   background-color: #fff;
 }
 
@@ -13117,7 +13221,7 @@ category:
   color: rgba(0, 0, 0, 0.7);
 }
 .gn-gcolor.is-help {
-  background-color: #268ccf;
+  background-color: #3681a5;
   color: #fff;
 }
 .gn-gcolor.is-plain {
@@ -13137,7 +13241,7 @@ category:
   color: #fff;
 }
 .gn-gcolor.is-guide {
-  background-color: #0487da;
+  background-color: #3681a5;
   color: #fff;
 }
 
@@ -13159,9 +13263,13 @@ tag:
 ```ejs
 <div class="new-grid"></div>
 
-<div style="width: 100%; height: 350px; overflow-x: auto; margin-top: 20px;">
+<div style="width: 100%; height: 100px; overflow-x: auto; margin-top: 20px;">
   <div class="new-grid2"></div>
 </div>
+
+<div style="width: 100%; height: 350px; overflow-x: auto; margin-top: 20px;">
+  <div class="new-grid3"></div>
+</div>
 ```
 ````
 Gn.create('datagrid', {
@@ -13274,19 +13382,122 @@ Gn.create('datagrid', {
 })
 Gn.create('datagrid', {
   target: '.new-grid2',
+  headers: [
+    {
+      label: 'no',
+      key: 'number',
+      onSelect: function () {
+        // eslint-disable-next-line prefer-rest-params
+        console.log(arguments);
+      },
+      template: function (k, d) {
+        return '<span>' + d[k] + '</span>';
+      },
+      draggable: true,
+      sortable: true,
+      sort: 'asc'
+    },
+    {
+      label: '제목',
+      key: 'title',
+      style: {
+        width: '250px'
+      },
+      className: 'has-text-right',
+      draggable: true,
+      bodyClass: 'has-text-left',
+      sortable: true
+    },
+    {
+      label: '날짜',
+      key: 'date',
+      style: {
+        width: '150px'
+      },
+      className: 'has-text-center',
+      bodyClass: 'has-text-left'
+    }
+  ],
+  data: [
+    {
+      number: '1',
+      title: '하나',
+      date: '2020-09-19',
+      desc: 'hello, world',
+      child: [
+        {
+          number: '1-1',
+          title: '1-하나',
+          date: '2020-09-19'
+        },
+        {
+          number: '1-2',
+          title: '1-둘',
+          date: '2020-09-19',
+          desc: 'hello, world',
+          child: [
+            {
+              number: '1-2-1',
+              title: '1-둘-1',
+              date: '2020-09-19',
+              desc: 'hello, world',
+              child: [
+                {
+                  number: '1-2-1-1',
+                  title: '1-둘-1-1',
+                  desc: 'hello, world',
+                  date: '2020-09-19'
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      color: 'is-danger-light'
+    },
+    {
+      number: '2',
+      title: '둘',
+      date: '2020-09-19',
+      desc: 'hello, world'
+    }
+  ],
+  hasHeader: false,
+  hasCheck: true,
+  hasDelete: true,
+  textSets: {
+    deleteConfirmMessage: '파일을 삭제하시겠습니까?'
+  },
+  // onDelete 에서 false 를 반환하면 해당 행 삭제를 취소할 수 있다.
+  onDelete: (data, index) => {
+    console.log(data, index);
+    // 예) 특정 조건에 따라 삭제 취소
+    // if (index === 0) {
+    //   return false;
+    // }
+  }
+})
+Gn.create('datagrid', {
+  target: '.new-grid3',
   headers: [
     {
       label: 'row data numbers',
       key: 'number',
       style: { width: '50px' },
       sortable: true,
-      draggable: true
+      draggable: true,
+      template: function (k, d) {
+        return '<span>' + d[k] + '</span>';
+      }
     },
     {
       label: '제목',
       key: 'title',
       sortable: true,
-      draggable: true
+      draggable: true,
+      template: function (k, d) {
+        return '<span>' + d[k] + '</span>';
+      }
     },
     {
       label: '날짜를 표시하는 컬럼입니다',
@@ -13349,8 +13560,6 @@ Gn.create('datagrid', {
   paginator: {
     rows: 30
   },
-  hasDelete: true,
-  fixHeader: true,
   onChange: updatedData => {
     console.log(updatedData)
   }
@@ -13465,7 +13674,7 @@ Gn.create('datagrid', {
       <b>color:is-warning-light</b> => 행의 색 변경</td>
     </tr>
     <tr>
-      <td rowspan="3">textSets</td>
+      <td rowspan="4">textSets</td>
       <td>noData</td>
       <td>string</td>
       <td>No records available.</td>
@@ -13483,6 +13692,12 @@ Gn.create('datagrid', {
       <td></td>
       <td>삭제버튼 헤더표시문구</td>
     </tr>
+    <tr>
+      <td>deleteConfirmMessage</td>
+      <td>string</td>
+      <td></td>
+      <td>삭제 확인 창 표시문구 - 삭제 버튼 클릭시 확인 창 출력</td>
+    </tr>
     <tr>
       <td colspan="2">childField</td>
       <td>string</td>
@@ -13507,6 +13722,12 @@ Gn.create('datagrid', {
       <td>false</td>
       <td>삭제버튼 생성 여부</td>
     </tr>
+    <tr>
+      <td colspan="2">hasHeader</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>헤더 생성 여부</td>
+    </tr>
     <tr>
       <td colspan="2">readonly</td>
       <td>boolean</td>
@@ -13604,6 +13825,12 @@ Gn.create('datagrid', {
       <td></td>
       <td>이동, 삭제 등의 데이터 변경이 있는 경우, 변경된 데이터를 가져오기 위한 이벤트핸들러</td>
     </tr>
+    <tr>
+      <td colspan="2">onDelete</td>
+      <td>function(deletedData, index)</td>
+      <td>deletedData, index 를 인자로 받으며, false 를 반환하면 해당 행 삭제를 취소한다.</td>
+      <td>삭제 버튼 클릭 시 삭제 대상 데이터와 인덱스를 받을 수 있는 이벤트핸들러<br>onChange 보다 먼저 동작하며, onDelete 에서 false 를 반환하면 실제 삭제 및 onChange 호출이 수행되지 않는다.</td>
+    </tr>
   </tbody>
 </table>
 
@@ -13789,11 +14016,11 @@ Gn.create('datagrid', {
 }
 .gn-datagrid .gn-datagrid-body-row .is-toggler::before {
   content: "\f0d7";
-  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome";
+  font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome";
   font-weight: 700;
 }
 .gn-datagrid .gn-datagrid-body-row.has-child[data-depth="0"] .is-toggler {
-  margin-left: -3px;
+  margin-left: -6px;
 }
 .gn-datagrid .gn-datagrid-body-row.is-collapsed .is-toggler::before {
   content: "\f0da";
@@ -13943,10 +14170,10 @@ Gn.create('datagrid', {
   background-color: hsl(0, 0%, 97%);
 }
 .gn-datagrid .gn-datagrid-body-row.is-help {
-  background-color: #268ccf;
+  background-color: #3681a5;
 }
 .gn-datagrid .gn-datagrid-body-row.is-help.is-hover .gn-datagrid-body-cell, .gn-datagrid .gn-datagrid-body-row.is-help:hover .gn-datagrid-body-cell {
-  background-color: rgb(35.6269387755, 131.2571428571, 194.0730612245);
+  background-color: rgb(50.2273972603, 119.9876712329, 153.4726027397);
 }
 .gn-datagrid .gn-datagrid-body-row.is-help-light {
   background-color: #fff;
@@ -14003,10 +14230,10 @@ Gn.create('datagrid', {
   background-color: rgb(255, 190.7, 192.012244898);
 }
 .gn-datagrid .gn-datagrid-body-row.is-guide {
-  background-color: #0487da;
+  background-color: #3681a5;
 }
 .gn-datagrid .gn-datagrid-body-row.is-guide.is-hover .gn-datagrid-body-cell, .gn-datagrid .gn-datagrid-body-row.is-guide:hover .gn-datagrid-body-cell {
-  background-color: rgb(3.7243243243, 125.6959459459, 202.9756756757);
+  background-color: rgb(50.2273972603, 119.9876712329, 153.4726027397);
 }
 .gn-datagrid .gn-datagrid-body-row.is-guide-light {
   background-color: #fff;
@@ -14017,6 +14244,9 @@ Gn.create('datagrid', {
 .gn-datagrid.has-left-padding .gn-datagrid-body-row:not(.has-child)[data-depth="0"] .gn-datagrid-body-cell:first-child {
   padding-left: 15px;
 }
+.gn-datagrid.is-headless .gn-datagrid-body-row:first-child {
+  border-top: 1px solid hsl(0, 0%, 86%);
+}
 .gn-datagrid .gn-datagrid-header-cell {
   border-right: 1px solid hsl(0, 0%, 86%);
   padding: 0.55rem;
@@ -14259,9 +14489,9 @@ Gn.create('datagrid', {
   border-color: hsl(0, 0%, 100%);
 }
 .gn-datagrid.is-help {
-  color: #268ccf;
+  color: #3681a5;
   background-color: #fff;
-  border-color: #268ccf;
+  border-color: #3681a5;
 }
 .gn-datagrid.is-plain {
   color: #fff;
@@ -14284,9 +14514,9 @@ Gn.create('datagrid', {
   border-color: #e51317;
 }
 .gn-datagrid.is-guide {
-  color: #0487da;
+  color: #3681a5;
   background-color: #fff;
-  border-color: #0487da;
+  border-color: #3681a5;
 }
 
 .btn-container {
@@ -16026,15 +16256,15 @@ tag:
   color: rgba(0, 0, 0, 0.7);
 }
 .gn-dropdown.is-help .dropdown-label {
-  color: #268ccf;
-  border-color: #268ccf;
+  color: #3681a5;
+  border-color: #3681a5;
 }
 .gn-dropdown.is-help .dropdown-icon {
-  color: rgb(30.0897959184, 110.8571428571, 163.9102040816);
+  color: rgb(41.4246575342, 98.9589041096, 126.5753424658);
 }
 .gn-dropdown.is-help .dropdown-item.is-active {
   color: #fff;
-  background-color: #268ccf;
+  background-color: #3681a5;
 }
 .gn-dropdown.is-help .dropdown-item.is-unselectable {
   cursor: default;
@@ -16044,23 +16274,23 @@ tag:
   background-color: inherit;
 }
 .gn-dropdown.is-help .dropdown-item .gn-checks input[type=checkbox]:checked + label:before {
-  color: #268ccf;
-  border-color: #268ccf;
+  color: #3681a5;
+  border-color: #3681a5;
 }
 .gn-dropdown.is-help .dropdown-item.is-hover,
 .gn-dropdown.is-help .dropdown-item:hover {
-  color: #268ccf;
+  color: #3681a5;
   background-color: #fff;
 }
 .gn-dropdown.is-help.is-disabled .dropdown-label {
   cursor: not-allowed;
 }
 .gn-dropdown.is-help.is-disabled .dropdown-item:hover label {
-  color: #268ccf;
+  color: #3681a5;
 }
 .gn-dropdown.is-help.is-disabled .dropdown-item.is-active:hover {
   color: #fff;
-  background-color: #268ccf;
+  background-color: #3681a5;
 }
 .gn-dropdown.is-help.is-disabled .dropdown-item.is-active:hover label {
   color: #fff;
@@ -16226,15 +16456,15 @@ tag:
   color: #fff;
 }
 .gn-dropdown.is-guide .dropdown-label {
-  color: #0487da;
-  border-color: #0487da;
+  color: #3681a5;
+  border-color: #3681a5;
 }
 .gn-dropdown.is-guide .dropdown-icon {
-  color: rgb(3.0810810811, 103.9864864865, 167.9189189189);
+  color: rgb(41.4246575342, 98.9589041096, 126.5753424658);
 }
 .gn-dropdown.is-guide .dropdown-item.is-active {
   color: #fff;
-  background-color: #0487da;
+  background-color: #3681a5;
 }
 .gn-dropdown.is-guide .dropdown-item.is-unselectable {
   cursor: default;
@@ -16244,23 +16474,23 @@ tag:
   background-color: inherit;
 }
 .gn-dropdown.is-guide .dropdown-item .gn-checks input[type=checkbox]:checked + label:before {
-  color: #0487da;
-  border-color: #0487da;
+  color: #3681a5;
+  border-color: #3681a5;
 }
 .gn-dropdown.is-guide .dropdown-item.is-hover,
 .gn-dropdown.is-guide .dropdown-item:hover {
-  color: #0487da;
+  color: #3681a5;
   background-color: #fff;
 }
 .gn-dropdown.is-guide.is-disabled .dropdown-label {
   cursor: not-allowed;
 }
 .gn-dropdown.is-guide.is-disabled .dropdown-item:hover label {
-  color: #0487da;
+  color: #3681a5;
 }
 .gn-dropdown.is-guide.is-disabled .dropdown-item.is-active:hover {
   color: #fff;
-  background-color: #0487da;
+  background-color: #3681a5;
 }
 .gn-dropdown.is-guide.is-disabled .dropdown-item.is-active:hover label {
   color: #fff;
@@ -16709,10 +16939,10 @@ tag:
   border-color: hsl(0, 0%, 100%);
 }
 .gn-growl.is-help {
-  color: #268ccf;
+  color: #3681a5;
   background-color: #fff;
   background-color: #fff;
-  border-color: #268ccf;
+  border-color: #3681a5;
 }
 .gn-growl.is-plain {
   color: #fff;
@@ -16739,10 +16969,10 @@ tag:
   border-color: #e51317;
 }
 .gn-growl.is-guide {
-  color: #0487da;
+  color: #3681a5;
   background-color: #fff;
   background-color: #fff;
-  border-color: #0487da;
+  border-color: #3681a5;
 }
 
 /* 
@@ -17833,11 +18063,21 @@ tag:
 <div class="gn-loader is-info"></div>
 ```
 
+```html
+<div class="gn-loader is-inline"></div>
+<div class="gn-loader is-inline is-success"></div>
+<div class="gn-loader is-inline is-warning"></div>
+<div class="gn-loader is-inline is-danger"></div>
+<div class="gn-loader is-inline is-info"></div>
+<div class="gn-loader is-inline is-primary"></div>
+```
+
 ### 타입
 
 ```html
 <div class="gn-loader is-bounce"></div><br>
 <div class="gn-loader is-move"></div>
+<div class="gn-loader is-inline"></div><br>
 ```
 
 ### 생성 옵션
@@ -17897,7 +18137,7 @@ Gn.create('button', {
       <td colspan="2">type</td>
       <td>string</td>
       <td></td>
-      <td>'bounce','move','circle'</td>
+      <td>'inline','bounce','move','</td>
     </tr>
     <tr>
       <td colspan="2">positionX</td>
@@ -18006,6 +18246,7 @@ Gn.create('button', {
 .gn-loader.is-small {
   width: 15px;
   height: 15px;
+  border-width: 5px;
 }
 .gn-loader.is-normal {
   width: 25px;
@@ -18068,7 +18309,7 @@ Gn.create('button', {
   border-top: 9px solid #f3f3f3;
 }
 .gn-loader.is-help {
-  border: 9px solid #268ccf;
+  border: 9px solid #3681a5;
   border-top: 9px solid #f3f3f3;
 }
 .gn-loader.is-plain {
@@ -18088,7 +18329,7 @@ Gn.create('button', {
   border-top: 9px solid #f3f3f3;
 }
 .gn-loader.is-guide {
-  border: 9px solid #0487da;
+  border: 9px solid #3681a5;
   border-top: 9px solid #f3f3f3;
 }
 .gn-loader.is-bounce {
@@ -18099,6 +18340,88 @@ Gn.create('button', {
   border: 13px solid #88b50f;
   animation: move 1.5s ease-in-out infinite alternate;
 }
+.gn-loader.is-inline {
+  border: 0;
+  position: relative;
+  margin-left: 10px;
+  margin-right: 10px;
+  animation-delay: -0.12s;
+  background: hsl(0, 0%, 96%);
+}
+.gn-loader.is-inline, .gn-loader.is-inline::before, .gn-loader.is-inline::after {
+  display: inline-block !important;
+  width: 3px;
+  height: 3px;
+  animation: colorPulse 1.4s ease-in-out infinite;
+  border-radius: 50%;
+}
+.gn-loader.is-inline::before, .gn-loader.is-inline::after {
+  content: "";
+  position: absolute;
+  top: 0;
+}
+.gn-loader.is-inline::before {
+  animation-delay: -0.24s;
+  margin-left: -8px;
+}
+.gn-loader.is-inline::after {
+  animation-delay: 0s;
+  margin-left: 8px;
+}
+.gn-loader.is-inline.is-white, .gn-loader.is-inline.is-white::before, .gn-loader.is-inline.is-white::after {
+  animation-name: colorPulse-white;
+}
+.gn-loader.is-inline.is-black, .gn-loader.is-inline.is-black::before, .gn-loader.is-inline.is-black::after {
+  animation-name: colorPulse-black;
+}
+.gn-loader.is-inline.is-light, .gn-loader.is-inline.is-light::before, .gn-loader.is-inline.is-light::after {
+  animation-name: colorPulse-light;
+}
+.gn-loader.is-inline.is-dark, .gn-loader.is-inline.is-dark::before, .gn-loader.is-inline.is-dark::after {
+  animation-name: colorPulse-dark;
+}
+.gn-loader.is-inline.is-primary, .gn-loader.is-inline.is-primary::before, .gn-loader.is-inline.is-primary::after {
+  animation-name: colorPulse-primary;
+}
+.gn-loader.is-inline.is-link, .gn-loader.is-inline.is-link::before, .gn-loader.is-inline.is-link::after {
+  animation-name: colorPulse-link;
+}
+.gn-loader.is-inline.is-info, .gn-loader.is-inline.is-info::before, .gn-loader.is-inline.is-info::after {
+  animation-name: colorPulse-info;
+}
+.gn-loader.is-inline.is-cancel, .gn-loader.is-inline.is-cancel::before, .gn-loader.is-inline.is-cancel::after {
+  animation-name: colorPulse-cancel;
+}
+.gn-loader.is-inline.is-success, .gn-loader.is-inline.is-success::before, .gn-loader.is-inline.is-success::after {
+  animation-name: colorPulse-success;
+}
+.gn-loader.is-inline.is-warning, .gn-loader.is-inline.is-warning::before, .gn-loader.is-inline.is-warning::after {
+  animation-name: colorPulse-warning;
+}
+.gn-loader.is-inline.is-danger, .gn-loader.is-inline.is-danger::before, .gn-loader.is-inline.is-danger::after {
+  animation-name: colorPulse-danger;
+}
+.gn-loader.is-inline.is-trans, .gn-loader.is-inline.is-trans::before, .gn-loader.is-inline.is-trans::after {
+  animation-name: colorPulse-trans;
+}
+.gn-loader.is-inline.is-help, .gn-loader.is-inline.is-help::before, .gn-loader.is-inline.is-help::after {
+  animation-name: colorPulse-help;
+}
+.gn-loader.is-inline.is-plain, .gn-loader.is-inline.is-plain::before, .gn-loader.is-inline.is-plain::after {
+  animation-name: colorPulse-plain;
+}
+.gn-loader.is-inline.is-secondary, .gn-loader.is-inline.is-secondary::before, .gn-loader.is-inline.is-secondary::after {
+  animation-name: colorPulse-secondary;
+}
+.gn-loader.is-inline.is-mono, .gn-loader.is-inline.is-mono::before, .gn-loader.is-inline.is-mono::after {
+  animation-name: colorPulse-mono;
+}
+.gn-loader.is-inline.is-error, .gn-loader.is-inline.is-error::before, .gn-loader.is-inline.is-error::after {
+  animation-name: colorPulse-error;
+}
+.gn-loader.is-inline.is-guide, .gn-loader.is-inline.is-guide::before, .gn-loader.is-inline.is-guide::after {
+  animation-name: colorPulse-guide;
+}
 
 @keyframes load-spin {
   0% {
@@ -18127,54 +18450,282 @@ Gn.create('button', {
     transform: translateX(15px);
   }
 }
-/* 
----
-name: Message
-category:
-  - COMPONENT/Message(js)
-tag:
-  - v.0.1.0
-  - javascript
----
-
-
-### 기본 메세지 알림
--Text with icon / Text only 선택 사용 할 수 있다.
-
-```html
-<div class="gn-message is-success has-arrange">
-  <span class="gn-icon is-normal">
-    <i class="fas fa-check"></i>
-  </span>
-  <p>Success! Your message has been sent successfully. <br/> Success! Your message has been sent successfully. </p>
-</div>
-<div class="gn-message is-warning has-arrange">
-<span class="gn-icon is-normal">
-    <i class="fas fa-exclamation-circle"></i>
-  </span>
-  <p>Warning! There was a problem with your network connection.</p>
-  <span class="gn-icon is-close is-dark">
-    <i class="fas fa-times"></i>
-  </span>
-</div>
-<div class="gn-message is-danger has-arrange">
-  <span class="gn-icon is-normal">
-    <i class="fas fa-exclamation-triangle"></i>
-  </span>
-  <p>Error! A problem has been occurred while submitting your data.</p>
-</div>
-<div class="gn-message is-info has-arrange">
-  <span class="gn-icon is-normal">
-    <i class="fas fa-info-circle"></i>
-  </span>
-  <p>Info! Please read the comments carefully.</p>
-  <span class="gn-icon is-close is-dark">
-    <i class="fas fa-times"></i>
-  </span>
-</div>
-<div class="gn-message is-guide has-arrange">
-  <span class="gn-icon is-normal">
-    <i class="fas fa-info-circle"></i>
+@keyframes colorPulse {
+  0%, 70%, 100% {
+    background: hsl(0, 0%, 96%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: #88b50f;
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-white {
+  0%, 70%, 100% {
+    background: hsl(0, 0%, 71%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: hsl(0, 0%, 100%);
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-black {
+  0%, 70%, 100% {
+    background: hsl(0, 0%, 86%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: hsl(0, 0%, 4%);
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-light {
+  0%, 70%, 100% {
+    background: hsl(0, 0%, 93%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: hsl(0, 0%, 96%);
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-dark {
+  0%, 70%, 100% {
+    background: hsl(0, 0%, 86%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: hsl(0, 0%, 20%);
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-primary {
+  0%, 70%, 100% {
+    background: rgb(248.7551020408, 253.4387755102, 236.1612244898);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: #88b50f;
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-link {
+  0%, 70%, 100% {
+    background: hsl(217, 71%, 96%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: hsl(217, 71%, 53%);
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-info {
+  0%, 70%, 100% {
+    background: #dae9ff;
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: #0087ff;
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-cancel {
+  0%, 70%, 100% {
+    background: rgb(244.8, 244.8, 244.8);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: #b5b5b5;
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-success {
+  0%, 70%, 100% {
+    background: #c7f1c8;
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: #218801;
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-warning {
+  0%, 70%, 100% {
+    background: #fce4c7;
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: #d67400;
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-danger {
+  0%, 70%, 100% {
+    background: #ffcecf;
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: #e51317;
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-trans {
+  0%, 70%, 100% {
+    background: hsl(0, 0%, 100%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: hsl(0, 0%, 100%);
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-help {
+  0%, 70%, 100% {
+    background: #fff;
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: #3681a5;
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-plain {
+  0%, 70%, 100% {
+    background: rgb(120.3183673469, 160.1295918367, 13.2704081633);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: #fff;
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-secondary {
+  0%, 70%, 100% {
+    background: rgb(234.6, 246.9169811321, 255);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: #0080d4;
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-mono {
+  0%, 70%, 100% {
+    background: rgb(244.8, 244.8, 244.8);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: #656565;
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-error {
+  0%, 70%, 100% {
+    background: #ffcecf;
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: #e51317;
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-guide {
+  0%, 70%, 100% {
+    background: #fff;
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: #3681a5;
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+/* 
+---
+name: Message
+category:
+  - COMPONENT/Message(js)
+tag:
+  - v.0.1.0
+  - javascript
+---
+
+
+### 기본 메세지 알림
+-Text with icon / Text only 선택 사용 할 수 있다.
+
+```html
+<div class="gn-message is-success has-arrange">
+  <span class="gn-icon is-normal">
+    <i class="fas fa-check"></i>
+  </span>
+  <p>Success! Your message has been sent successfully. <br/> Success! Your message has been sent successfully. </p>
+</div>
+<div class="gn-message is-warning has-arrange">
+<span class="gn-icon is-normal">
+    <i class="fas fa-exclamation-circle"></i>
+  </span>
+  <p>Warning! There was a problem with your network connection.</p>
+  <span class="gn-icon is-close is-dark">
+    <i class="fas fa-times"></i>
+  </span>
+</div>
+<div class="gn-message is-danger has-arrange">
+  <span class="gn-icon is-normal">
+    <i class="fas fa-exclamation-triangle"></i>
+  </span>
+  <p>Error! A problem has been occurred while submitting your data.</p>
+</div>
+<div class="gn-message is-info has-arrange">
+  <span class="gn-icon is-normal">
+    <i class="fas fa-info-circle"></i>
+  </span>
+  <p>Info! Please read the comments carefully.</p>
+  <span class="gn-icon is-close is-dark">
+    <i class="fas fa-times"></i>
+  </span>
+</div>
+<div class="gn-message is-guide has-arrange">
+  <span class="gn-icon is-normal">
+    <i class="fas fa-info-circle"></i>
   </span>
   <p> 가이드 메시지 한글 폰드 테스트  Guide!</p>
 </div>
@@ -18510,9 +19061,9 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
   border-color: hsl(0, 0%, 100%);
 }
 .gn-message.is-help {
-  color: #268ccf;
+  color: #3681a5;
   background-color: #fff;
-  border-color: #268ccf;
+  border-color: #3681a5;
 }
 .gn-message.is-plain {
   color: #fff;
@@ -18535,9 +19086,9 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
   border-color: #e51317;
 }
 .gn-message.is-guide {
-  color: #0487da;
+  color: #3681a5;
   background-color: #fff;
-  border-color: #0487da;
+  border-color: #3681a5;
 }
 
 /* 
@@ -18922,7 +19473,7 @@ tag:
   color: rgba(0, 0, 0, 0.7);
 }
 .gn-modal .modal-header.is-help {
-  background-color: #268ccf;
+  background-color: #3681a5;
   color: #fff;
 }
 .gn-modal .modal-header.is-plain {
@@ -18942,7 +19493,7 @@ tag:
   color: #fff;
 }
 .gn-modal .modal-header.is-guide {
-  background-color: #0487da;
+  background-color: #3681a5;
   color: #fff;
 }
 .gn-modal .modal-header .modal-control {
@@ -19713,22 +20264,26 @@ tag:
 ```
 ````
   Gn.create('picklist', {
-    target: '.new-picklist', 
-    data : {
+    target: '.new-picklist',
+    data: {
       source: [
-        { value: 'item1', text: '항목1' },
-        { value: 'item2', text: '항목2' },
-        { value: 'item5', text: '항목3' },
-        { value: 'item4', text: '항목4' },
-        { value: 'item5', text: '항목5' },
-        { value: 'item6', text: '항목6' },
-        { value: 'item7', text: '항목7' },
-        { value: 'item8', text: '항목8' }
+        { value: '항목1', text: 'item1', html: '<span class="gn-tag is-primary">항목1</span> item1' },
+        { value: '항목2', text: 'item2', html: '<span class="gn-tag is-danger">항목2</span> item2' },
+        { value: '항목3', text: 'item3', html: '<span class="gn-tag is-warning">항목3</span> item3' }
       ],
-      target: [],
+      target: [
+        { value: '항목4', text: 'item4', html: '<span class="gn-tag is-help">항목4</span> item4' },
+        { value: '항목5', text: 'item5', html: '<span class="gn-tag is-success">항목5</span> item5' }
+      ]
     },
+    hasSourceSearch: true,
+    hasTargetSearch: true,
     width: '80%',
-    height: 180
+    height: 180,
+    onChange: function (s, t) {
+      console.log(s, t);
+    },
+    orderable: 'target'
   });
   Gn.create('picklist', {
     target: '.new-picklist-v', 
@@ -19765,15 +20320,21 @@ tag:
     <tr>
       <td rowspan="2">data</td>
       <td>source</td>
-      <td>array[{value: string|array, text: string}]</td>
+      <td>array[{value: string|array, text: string, html?: string, icon?:string}]</td>
       <td></td>
-      <td>source 항목 배열</td>
+      <td>source 항목 배열<br>
+        html: 옵션 html(html이 있는 경우 text가 있는 항목만 선택 가능하다.)<br>
+        icon : <a href="https://fontawesome.com/cheatsheet?from=io" target="_blank">font awesome <span class="gn-icon is-small"><i class="fas fa-external-link-alt"></i></span></a> solid icon name 
+      </td>
     </tr>
     <tr>
       <td>target</td>
-      <td>array[{value: string|array, text: string}]</td>
+      <td>array[{value: string|array, text: string, html?: string, icon?:string}]</td>
       <td></td>
-      <td>target 항목 배열</td>
+      <td>target 항목 배열<br>
+        html: 옵션 html(html이 있는 경우 text가 있는 항목만 선택 가능하다.)<br>
+        icon : <a href="https://fontawesome.com/cheatsheet?from=io" target="_blank">font awesome <span class="gn-icon is-small"><i class="fas fa-external-link-alt"></i></span></a> solid icon name 
+      </td>
     </tr>
     <tr>
       <td rowspan="3">textSets</td>
@@ -19927,23 +20488,17 @@ tag:
 .gn-picklist .picklist-caption + .dropdown-items {
   border-radius: 0 0 2px 2px;
 }
-.gn-picklist .picklist-source {
+.gn-picklist .gn-dropdown {
+  display: block;
+}
+.gn-picklist .picklist-source,
+.gn-picklist .picklist-target {
   display: flex;
   flex-basis: calc(50% - 16px);
   width: calc(50% - 16px);
   flex-grow: 0;
   flex-shrink: 0;
 }
-.gn-picklist .picklist-source > .gn-dropdown {
-  order: 2;
-  width: 100%;
-}
-.gn-picklist .picklist-source .picklist-controls {
-  order: 1;
-}
-.gn-picklist .gn-dropdown {
-  display: block;
-}
 .gn-picklist .picklist-source.no-controls,
 .gn-picklist .picklist-target.no-controls {
   flex-basis: calc(50% - 45px);
@@ -19954,23 +20509,22 @@ tag:
   width: 100%;
   height: 100%;
 }
-.gn-picklist.is-vertical .picklist-source,
-.gn-picklist .picklist-target {
-  display: flex;
-  flex-basis: calc(50% - 16px);
-  width: calc(50% - 16px);
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-.gn-picklist.is-vertical .picklist-source > .gn-dropdown,
+.gn-picklist .picklist-source > .gn-dropdown,
 .gn-picklist .picklist-target > .gn-dropdown {
   order: 1;
   width: 100%;
 }
-.gn-picklist.is-vertical .picklist-source .picklist-controls,
+.gn-picklist .picklist-source .picklist-controls,
 .gn-picklist .picklist-target .picklist-controls {
   order: 2;
 }
+.gn-picklist .picklist-source > .gn-dropdown {
+  order: 2;
+  width: 100%;
+}
+.gn-picklist .picklist-source .picklist-controls {
+  order: 1;
+}
 .gn-picklist .picklist-controls {
   margin: 0.5rem;
 }
@@ -19980,6 +20534,16 @@ tag:
 .gn-picklist.is-vertical {
   flex-direction: column;
 }
+.gn-picklist.is-vertical .picklist-source,
+.gn-picklist.is-vertical .picklist-target {
+  width: calc(100% - 32px);
+}
+.gn-picklist.is-vertical .picklist-source > .gn-dropdown {
+  order: 1;
+}
+.gn-picklist.is-vertical .picklist-source .picklist-controls {
+  order: 2;
+}
 .gn-picklist.is-vertical > .picklist-controls {
   width: 90%;
   width: calc(100% - 50px);
@@ -19990,6 +20554,382 @@ tag:
   box-shadow: 0 0 0 0.1em rgba(241.077, 70.023, 104.2338, 0.7);
 }
 
+/* 
+---
+name: SortableList
+category:
+  - CONTROLS/SortableList(js)
+tag:
+  - v.0.1.0
+  - javascript
+---
+### 기본 사용
+
+```html
+<div class="gn-sortablelist">
+  <div class="sortablelist-controls gn-control is-small has-arrange is-vertical is-center">
+    <button type="button" class="gn-button is-outline">
+      <span class="gn-icon">
+        <i class="fas fa-angle-double-up"></i>
+      </span>
+    </button>
+    <button type="button" class="gn-button is-outline">
+      <span class="gn-icon">
+        <i class="fas fa-angle-up"></i>
+      </span>
+    </button>
+    <button type="button" class="gn-button is-outline">
+      <span class="gn-icon">
+        <i class="fas fa-angle-down"></i>
+      </span>
+    </button>
+    <button type="button" class="gn-button is-outline">
+      <span class="gn-icon">
+        <i class="fas fa-angle-double-down"></i>
+      </span>
+    </button>
+  </div>
+  <div class="gn-dropdown is-opened sortablelist-items">
+    <div class="dropdown-items">
+      <ul class="sortablelist-rows">
+        <li class="dropdown-item">항목 1</li>
+        <li class="dropdown-item">항목 2</li>
+        <li class="dropdown-item">항목 3</li>
+        <li class="dropdown-item">항목 4</li>
+      </ul>
+    </div>
+  </div>
+</div>
+```
+
+### 버튼 우측 배치
+
+```html
+<div class="gn-sortablelist">
+  <div class="gn-dropdown is-opened sortablelist-items">
+    <div class="dropdown-items">
+      <ul class="sortablelist-rows">
+        <li class="dropdown-item">항목 1</li>
+        <li class="dropdown-item">항목 2</li>
+        <li class="dropdown-item">항목 3</li>
+      </ul>
+    </div>
+  </div>
+  <div class="sortablelist-controls gn-control is-small has-arrange is-vertical is-center is-right">
+    <button type="button" class="gn-button is-outline">
+      <span class="gn-icon">
+        <i class="fas fa-angle-double-up"></i>
+      </span>
+    </button>
+    <button type="button" class="gn-button is-outline">
+      <span class="gn-icon">
+        <i class="fas fa-angle-up"></i>
+      </span>
+    </button>
+    <button type="button" class="gn-button is-outline">
+      <span class="gn-icon">
+        <i class="fas fa-angle-down"></i>
+      </span>
+    </button>
+    <button type="button" class="gn-button is-outline">
+      <span class="gn-icon">
+        <i class="fas fa-angle-double-down"></i>
+      </span>
+    </button>
+  </div>
+</div>
+```
+
+### 생성 옵션
+```ejs
+  <div class="new-sortablelist"></div>
+  <div class="new-sortablelist-drag"></div>
+  <div class="new-sortablelist-cols"></div>
+```
+````
+  // 단일 컬럼
+  Gn.create('sortablelist', {
+    target: '.new-sortablelist',
+    data: [
+      { value: '1', text: '항목 1' },
+      { value: '2', text: '항목 2' },
+      { value: '3', text: '항목 3' },
+      { value: '4', text: '항목 4' },
+      { value: '5', text: '항목 5' },
+      { value: '6', text: '항목 6' },
+      { value: '7', text: '항목 7' },
+      { value: '8', text: '항목 8' },
+      { value: '9', text: '항목 9' },
+      { value: '10', text: '항목 10' }
+    ]
+  });
+  // 드래그 앤 드롭
+  Gn.create('sortablelist', {
+    target: '.new-sortablelist-drag',
+      data: [
+      { value: 'a', text: '항목 A' },
+      { value: 'b', text: '항목 B' },
+      { value: 'c', text: '항목 C' },
+      { value: 'd', text: '항목 D' },
+      { value: 'e', text: '항목 E' },
+      { value: 'f', text: '항목 F' },
+      { value: 'g', text: '항목 G' },
+      { value: 'h', text: '항목 H' },
+      { value: 'i', text: '항목 I' },
+      { value: 'j', text: '항목 J' }
+    ],
+    draggable: true
+  });
+  // 다중 컬럼
+  Gn.create('sortablelist', {
+    target: '.new-sortablelist-cols',
+    buttonPosition: 'right',
+    data: [
+      { value: 'x1', cols: ['항목1', '카테고리A', '1000'] },
+      { value: 'x2', cols: ['항목2', '카테고리B', '2000'] },
+      { value: 'x3', cols: ['항목3', '카테고리C', '3000'] },
+      { value: 'x4', cols: ['항목4', '카테고리D', '4000'] },
+      { value: 'x5', cols: ['항목5', '카테고리E', '5000'] },
+      { value: 'x6', cols: ['항목6', '카테고리F', '6000'] },
+      { value: 'x7', cols: ['항목7', '카테고리G', '7000'] },
+      { value: 'x8', cols: ['항목8', '카테고리H', '8000'] },
+      { value: 'x9', cols: ['항목9', '카테고리I', '9000'] },
+      { value: 'x10', cols: ['항목10', '카테고리J', '10000'] }
+    ]    
+  });
+````
+
+### 데이터 모델 (SortableListItem)
+
+<table class="gn-table is-full is-border">
+  <thead>
+    <th>필드</th>
+    <th>type</th>
+    <th>필수</th>
+    <th>description</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>value</td>
+      <td>string</td>
+      <td>Y</td>
+      <td>고유 값 (빈 문자열 불가)</td>
+    </tr>
+    <tr>
+      <td>text</td>
+      <td>string</td>
+      <td>N</td>
+      <td>단일 컬럼 표시 텍스트</td>
+    </tr>
+    <tr>
+      <td>cols</td>
+      <td>string[]</td>
+      <td>N</td>
+      <td>다중 컬럼 표시 값 배열</td>
+    </tr>
+  </tbody>
+</table>
+
+### 옵션
+<table class="gn-table is-full is-border">
+  <thead>
+    <th colspan="2">name</th>
+    <th>type</th>
+    <th>default</th>
+    <th>description</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2">target</td>
+      <td>string</td>
+      <td></td>
+      <td>sortablelist를 표시할 대상의 선택자(selector)</td>
+    </tr>
+    <tr>
+      <td colspan="2">data</td>
+      <td>SortableListItem[]</td>
+      <td></td>
+      <td>sortablelist에 표시할 데이터 배열</td>
+    </tr>
+    <tr>
+      <td colspan="2">buttonPosition</td>
+      <td>left | right</td>
+      <td>left</td>
+      <td>순서 변경 버튼 위치</td>
+    </tr>
+    <tr>
+      <td colspan="2">draggable</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>드래그 앤 드롭 순서 변경 활성화 여부</td>
+    </tr>
+    <tr>
+    <td>textSets</td>
+      <td>noData</td>
+      <td>string</td>
+      <td>No records available.</td>
+    <td>데이터가 없을 경우 출력 메시지</td>
+    </tr>
+    <tr>
+      <td colspan="2">disabled</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>컴포넌트 비활성화 여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">width</td>
+      <td>number, string</td>
+      <td>100%</td>
+      <td>컴포넌트 너비</td>
+    </tr>
+    <tr>
+      <td colspan="2">height</td>
+      <td>number, string</td>
+      <td>150</td>
+      <td>리스트 높이 (미지정 시 150)</td>
+    </tr>
+    <tr>
+      <td colspan="2">onChange</td>
+      <td>function(data)</td>
+      <td></td>
+      <td>데이터 변경 시 발생 이벤트</td>
+    </tr>
+  </tbody>
+</table>
+
+### 메소드
+
+<table class="gn-table is-full is-border">
+  <thead>
+    <th>name</th>
+    <th>return</th>
+    <th>description</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>getData()</td>
+      <td>SortableListItem[]</td>
+      <td>현재 데이터 배열을 반환한다.</td>
+    </tr>
+    <tr>
+      <td>setData(data: SortableListItem[]})</td>
+      <td>void</td>
+      <td>데이터 배열을 설정하고 다시 렌더링한다.</td>
+    </tr>
+    <tr>
+      <td>disable()</td>
+      <td>void</td>
+      <td>컴포넌트를 비활성화한다.</td>
+    </tr>
+    <tr>
+      <td>enable()</td>
+      <td>void</td>
+      <td>컴포넌트를 활성화한다.</td>
+    </tr>
+  </tbody>
+</table>
+
+*/
+.gn-sortablelist {
+  display: flex;
+  align-items: stretch;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.gn-sortablelist .gn-dropdown {
+  display: block;
+}
+.gn-sortablelist .sortablelist-items {
+  flex: 1 1 auto;
+}
+.gn-sortablelist .sortablelist-controls {
+  margin: 0.5rem;
+}
+.gn-sortablelist .sortablelist-controls .gn-button {
+  padding: 0.25rem 0.75rem;
+}
+.gn-sortablelist .sortablelist-controls.is-right {
+  order: 2;
+  margin-left: 0.5rem;
+  margin-right: 0;
+  justify-content: center;
+}
+.gn-sortablelist .sortablelist-rows {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.gn-sortablelist .sortablelist-cols {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+}
+.gn-sortablelist .sortablelist-col {
+  flex: 1 1 0;
+  min-width: 0;
+}
+.gn-sortablelist .dropdown-item.is-empty {
+  color: hsl(0, 0%, 48%);
+}
+.gn-sortablelist .dropdown-item.is-dragging {
+  opacity: 0.6;
+}
+.gn-sortablelist .dropdown-item.is-group-dragging {
+  outline: 1px dashed hsl(0, 0%, 71%);
+}
+.gn-sortablelist .dropdown-item.is-drag-over-top,
+.gn-sortablelist .dropdown-item.is-drag-over-bottom {
+  background-color: hsl(0, 0%, 96%);
+}
+.gn-sortablelist .dropdown-item.is-drag-over-top {
+  box-shadow: inset 0 2px 0 0 #88b50f;
+}
+.gn-sortablelist .dropdown-item.is-drag-over-bottom {
+  box-shadow: inset 0 -2px 0 0 #88b50f;
+}
+
+.sortablelist-drag-preview {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  background-color: hsl(0, 0%, 20%);
+  color: hsl(0, 0%, 98%);
+  font-size: 12px;
+  line-height: 1;
+}
+
+.sortablelist-drag-preview::before {
+  content: attr(data-count);
+  min-width: 18px;
+  height: 18px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background-color: hsl(0, 0%, 98%);
+  color: hsl(0, 0%, 20%);
+  font-size: 11px;
+  line-height: 18px;
+  text-align: center;
+}
+
+.sortablelist-drag-preview-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sortablelist-drag-preview .dropdown-item.is-ghost {
+  padding: 4px 8px;
+  background-color: hsl(0, 0%, 18%);
+  border-radius: 4px;
+  color: hsl(0, 0%, 98%);
+}
+
 /* 
 ---
 name: Progressbar
@@ -20279,7 +21219,7 @@ tag:
   background-color: rgb(247.35, 247.35, 247.35);
 }
 .gn-progressbar.is-help > span.gauge {
-  background-color: #268ccf;
+  background-color: #3681a5;
 }
 .gn-progressbar.is-help > span.figure.inner {
   color: #fff;
@@ -20324,7 +21264,7 @@ tag:
   background-color: rgb(247.35, 247.35, 247.35);
 }
 .gn-progressbar.is-guide > span.gauge {
-  background-color: #0487da;
+  background-color: #3681a5;
 }
 .gn-progressbar.is-guide > span.figure.inner {
   color: #fff;
@@ -20586,7 +21526,8 @@ tag:
 }
 .gn-tab > ul {
   display: flex;
-  border-bottom: 3px solid #bebebe;
+  border-bottom: 1px solid #bebebe;
+  padding-bottom: 2px;
 }
 .gn-tab.is-center > ul {
   justify-content: center;
@@ -21401,18 +22342,18 @@ tag:
   border-left-color: hsl(0, 0%, 100%);
 }
 .gn-tooltip.is-help {
-  color: #268ccf;
+  color: #3681a5;
   background-color: hsl(0, 0%, 96%);
   background-color: #fff;
-  border-color: #268ccf;
+  border-color: #3681a5;
 }
 .gn-tooltip.is-help::before {
   background-color: hsl(0, 0%, 96%);
 }
 .gn-tooltip.is-help::before {
   background: #fff;
-  border-top-color: #268ccf;
-  border-left-color: #268ccf;
+  border-top-color: #3681a5;
+  border-left-color: #3681a5;
 }
 .gn-tooltip.is-plain {
   color: #fff;
@@ -21471,18 +22412,18 @@ tag:
   border-left-color: #e51317;
 }
 .gn-tooltip.is-guide {
-  color: #0487da;
+  color: #3681a5;
   background-color: hsl(0, 0%, 96%);
   background-color: #fff;
-  border-color: #0487da;
+  border-color: #3681a5;
 }
 .gn-tooltip.is-guide::before {
   background-color: hsl(0, 0%, 96%);
 }
 .gn-tooltip.is-guide::before {
   background: #fff;
-  border-top-color: #0487da;
-  border-left-color: #0487da;
+  border-top-color: #3681a5;
+  border-left-color: #3681a5;
 }
 
 /*
@@ -21764,7 +22705,7 @@ Gn.create('tree', {
 }
 .gn-tree li .tree-item .is-toggler::before {
   content: "\f0da";
-  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome";
+  font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome";
   font-weight: 900;
 }
 .gn-tree li .tree-item + ul {
@@ -21868,7 +22809,7 @@ Gn.create('tree', {
   color: hsl(0, 0%, 100%);
 }
 .gn-tree.is-help .tree-item.is-active {
-  color: #268ccf;
+  color: #3681a5;
 }
 .gn-tree.is-plain .tree-item.is-active {
   color: #fff;
@@ -21883,7 +22824,7 @@ Gn.create('tree', {
   color: #e51317;
 }
 .gn-tree.is-guide .tree-item.is-active {
-  color: #0487da;
+  color: #3681a5;
 }
 .gn-tree.is-borderless li {
   padding-left: calc(0.75em + 0.5rem);