npm - gnui - Versions diffs - 1.1.7 → 1.2.0 - Mend

gnui 1.1.7 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (107) hide show

package/@types/gnui.d.ts +195 -154
package/README.md +9 -3
package/assets/NotoSansKR-Black.otf +0 -0
package/assets/NotoSansKR-Black.woff +0 -0
package/assets/NotoSansKR-Black.woff2 +0 -0
package/assets/NotoSansKR-Bold.otf +0 -0
package/assets/NotoSansKR-Bold.woff +0 -0
package/assets/NotoSansKR-Bold.woff2 +0 -0
package/assets/NotoSansKR-DemiLight.otf +0 -0
package/assets/NotoSansKR-DemiLight.woff +0 -0
package/assets/NotoSansKR-DemiLight.woff2 +0 -0
package/assets/NotoSansKR-Light.otf +0 -0
package/assets/NotoSansKR-Light.woff +0 -0
package/assets/NotoSansKR-Light.woff2 +0 -0
package/assets/NotoSansKR-Medium.otf +0 -0
package/assets/NotoSansKR-Medium.woff +0 -0
package/assets/NotoSansKR-Medium.woff2 +0 -0
package/assets/NotoSansKR-Regular.otf +0 -0
package/assets/NotoSansKR-Regular.woff +0 -0
package/assets/NotoSansKR-Regular.woff2 +0 -0
package/assets/NotoSansKR-Thin.otf +0 -0
package/assets/NotoSansKR-Thin.woff +0 -0
package/assets/NotoSansKR-Thin.woff2 +0 -0
package/assets/{LICENSE_OFL.txt → OFL.txt} +93 -92
package/assets/images/flags.png +0 -0
package/dist/js/gnui.esm.js +19752 -17625
package/dist/js/gnui.js +19767 -17931
package/dist/js/gnui.min.js +23 -1
package/dist/styles/default.css +1 -3
package/dist/styles/gpi.css +1 -3
package/dist/styles/green24.css +1 -0
package/dist/styles/insights.css +1 -3
package/dist/styles/nac.css +1 -3
package/dist/styles/ztnac.css +1 -0
package/package.json +39 -30
package/styleguide/assets/components.js +1031 -579
package/styleguide/assets/guide.js +28 -26
package/styleguide/assets/okadia.css +115 -117
package/styleguide/assets/theme.css +140 -82
package/styleguide/category/COLOR/index.html +75 -77
package/styleguide/category/COMPONENT/Alert(js)/index.html +89 -92
package/styleguide/category/COMPONENT/Bignumber/index.html +78 -82
package/styleguide/category/COMPONENT/Breadcrumb/index.html +78 -82
package/styleguide/category/COMPONENT/Calendar(js)/index.html +89 -92
package/styleguide/category/COMPONENT/Card/index.html +78 -82
package/styleguide/category/COMPONENT/Chart(js)/index.html +89 -92
package/styleguide/category/COMPONENT/Datagrid(js)/index.html +354 -206
package/styleguide/category/COMPONENT/Datalist(js)/index.html +471 -0
package/styleguide/category/COMPONENT/Growl(js)/index.html +89 -92
package/styleguide/category/COMPONENT/JsonView(js)/index.html +544 -246
package/styleguide/category/{CONTROLS → COMPONENT}/MenuButton(js)/index.html +116 -92
package/styleguide/category/COMPONENT/Message(js)/index.html +219 -95
package/styleguide/category/COMPONENT/Modal(js)/index.html +128 -94
package/styleguide/category/COMPONENT/Pagination/index.html +78 -82
package/styleguide/category/COMPONENT/Panel/index.html +78 -82
package/styleguide/category/COMPONENT/Progressbar(js)/index.html +89 -92
package/styleguide/category/COMPONENT/Tab(js)/index.html +122 -93
package/styleguide/category/COMPONENT/Tagcloud(js)/index.html +88 -89
package/styleguide/category/COMPONENT/Tooltip(js)/index.html +175 -92
package/styleguide/category/COMPONENT/Tree(js)/index.html +95 -92
package/styleguide/category/CONTROLS/Button(js)/index.html +110 -95
package/styleguide/category/CONTROLS/Checkbox/index.html +82 -86
package/styleguide/category/CONTROLS/Colorpicker(js)/index.html +147 -93
package/styleguide/category/CONTROLS/Datepicker(js)/index.html +124 -92
package/styleguide/category/CONTROLS/Dropdown(js)/index.html +161 -132
package/styleguide/category/CONTROLS/File/index.html +78 -82
package/styleguide/category/CONTROLS/Form/Control/index.html +78 -82
package/styleguide/category/CONTROLS/Form/Field/index.html +78 -82
package/styleguide/category/CONTROLS/Form/Plain/index.html +78 -82
package/styleguide/category/CONTROLS/Input/index.html +80 -84
package/styleguide/category/CONTROLS/MultiText(js)/index.html +105 -92
package/styleguide/category/CONTROLS/Picklist(js)/index.html +165 -141
package/styleguide/category/CONTROLS/Radio/index.html +78 -82
package/styleguide/category/CONTROLS/Select/index.html +80 -84
package/styleguide/category/CONTROLS/SelectButton(js)/index.html +147 -92
package/styleguide/category/CONTROLS/Slider/index.html +78 -82
package/styleguide/category/CONTROLS/Switch(js)/index.html +105 -93
package/styleguide/category/CONTROLS/SyntaxInput(js)/index.html +89 -92
package/styleguide/category/CONTROLS/Textarea/index.html +78 -82
package/styleguide/category/{COMPONENT → CONTROLS}/Time(js)/index.html +111 -92
package/styleguide/category/ELEMENTS/Box/index.html +78 -82
package/styleguide/category/ELEMENTS/Icon/index.html +122 -82
package/styleguide/category/ELEMENTS/Image/index.html +78 -82
package/styleguide/category/ELEMENTS/List/index.html +78 -82
package/styleguide/category/ELEMENTS/Table/index.html +78 -82
package/styleguide/category/ELEMENTS/Tag/index.html +78 -82
package/styleguide/category/ELEMENTS/Title/index.html +78 -82
package/styleguide/category/LAYOUT/Container/index.html +78 -82
package/styleguide/category/LAYOUT/Grid/index.html +78 -82
package/styleguide/category/LAYOUT/Splitter(js)/index.html +89 -92
package/styleguide/category/UTILITY/index.html +80 -82
package/styleguide/category/Utils/index.html +97 -71
package/styleguide/color.html +66 -65
package/styleguide/index.html +66 -65
package/styleguide/tag/javascript/index.html +1984 -1011
package/styleguide/tag/v.0.1.0/index.html +2730 -1568
package/assets/NotoSansCJKkr-Black.otf +0 -0
package/assets/NotoSansCJKkr-Bold.otf +0 -0
package/assets/NotoSansCJKkr-DemiLight.otf +0 -0
package/assets/NotoSansCJKkr-Light.otf +0 -0
package/assets/NotoSansCJKkr-Medium.otf +0 -0
package/assets/NotoSansCJKkr-Regular.otf +0 -0
package/assets/NotoSansCJKkr-Thin.otf +0 -0
package/assets/NotoSansMonoCJKkr-Bold.otf +0 -0
package/assets/NotoSansMonoCJKkr-Regular.otf +0 -0
package/assets/README +0 -11
package/dist/styles/zt-nac.css +0 -3

package/styleguide/tag/javascript/index.html CHANGED Viewed

@@ -1,65 +1,71 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width">
-    <link href="../../../dist/styles/default.css" rel="stylesheet" id="ThemeFile">
-    <link href="../../assets/okadia.css" rel="stylesheet">
-    <link href="../../assets/theme.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
-    <link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link href="../../../dist/styles/default.css" rel="stylesheet" id="ThemeFile" />
+    <link href="../../assets/okadia.css" rel="stylesheet" />
+    <link href="../../assets/theme.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
+      crossorigin="anonymous"
+    />
+    <link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet" />
     <script src="../../assets/components.js"></script>
     <script src="../../../dist/js/gnui.js"></script>
   </head>
-<body>
-  <div class="aigis-container">
-    <header class="aigis-header gn-gcolor is-primary">
-      <span><a href="../../index.html" class="main-link" style="font-family: 'Squada One', cursive;">GNUI</a></span>
-      <span class="has-text-invert" style="font-size: 1.0em;padding-left: 10px;">Start your next web project with GNUI.</span>
-      <div class="gn-select is-medium">
-        <select id="ThemeSelector">
+  <body>
+    <div class="aigis-container">
+      <header class="aigis-header gn-gcolor is-primary">
+        <span><a href="../../index.html" class="main-link" style="font-family: 'Squada One', cursive">GNUI</a></span>
+        <span class="has-text-invert" style="font-size: 1em; padding-left: 10px">Start your next web project with GNUI.</span>
+        <div class="gn-select is-medium">
+          <select id="ThemeSelector">
             <option value="default">default</option>
             <option value="nac">nac</option>
             <option value="insights">insights</option>
             <option value="gpi">gpi</option>
-            <option value="zt-nac">zt-nac</option>
-        </select>
-      </div>
-      <div>
-        <a class="gn-button is-primary util-link" href="../../category/Utils/index.html">
-          <span class="gn-icon is-small">
-            <i class="fas fa-tools"></i>
-          </span>
-          Gn.util
-        </a>
-      </div>
-    </header>
-    <div class="aigis-sidemenu">
-  <nav class="gn-tree is-borderless is-large left-menu">
-  </nav>
+            <option value="ztnac">ztnac</option>
+            <option value="green24">green24</option>
+          </select>
+        </div>
+        <div>
+          <a class="gn-button is-primary util-link" href="../../category/Utils/index.html">
+            <span class="gn-icon is-small">
+              <i class="fas fa-tools"></i>
+            </span>
+            Gn.util
+          </a>
+        </div>
+      </header>
+      <div class="aigis-sidemenu">
+  <nav class="gn-tree is-borderless is-large left-menu"></nav>
 </div>
 <script>
   window.Gn = window.gnui;
-  Gn.ready(function(){
-    var leftMenu = setTree('COLOR,COMPONENT/Alert(js),COMPONENT/Bignumber,COMPONENT/Breadcrumb,COMPONENT/Calendar(js),COMPONENT/Card,COMPONENT/Chart(js),COMPONENT/Datagrid(js),COMPONENT/Growl(js),COMPONENT/JsonView(js),COMPONENT/Message(js),COMPONENT/Modal(js),COMPONENT/Pagination,COMPONENT/Panel,COMPONENT/Progressbar(js),COMPONENT/Tab(js),COMPONENT/Tagcloud(js),COMPONENT/Time(js),COMPONENT/Tooltip(js),COMPONENT/Tree(js),CONTROLS/Button(js),CONTROLS/Checkbox,CONTROLS/Colorpicker(js),CONTROLS/Datepicker(js),CONTROLS/Dropdown(js),CONTROLS/File,CONTROLS/Form/Control,CONTROLS/Form/Field,CONTROLS/Form/Plain,CONTROLS/Input,CONTROLS/MenuButton(js),CONTROLS/MultiText(js),CONTROLS/Picklist(js),CONTROLS/Radio,CONTROLS/Select,CONTROLS/SelectButton(js),CONTROLS/Slider,CONTROLS/Switch(js),CONTROLS/SyntaxInput(js),CONTROLS/Textarea,ELEMENTS/Box,ELEMENTS/Icon,ELEMENTS/Image,ELEMENTS/List,ELEMENTS/Table,ELEMENTS/Tag,ELEMENTS/Title,LAYOUT/Container,LAYOUT/Grid,LAYOUT/Splitter(js),UTILITY,Utils'.split(','));
+  Gn.ready(function () {
+    var leftMenu = setTree('COLOR,COMPONENT/Alert(js),COMPONENT/Bignumber,COMPONENT/Breadcrumb,COMPONENT/Calendar(js),COMPONENT/Card,COMPONENT/Chart(js),COMPONENT/Datagrid(js),COMPONENT/Datalist(js),COMPONENT/Growl(js),COMPONENT/JsonView(js),COMPONENT/MenuButton(js),COMPONENT/Message(js),COMPONENT/Modal(js),COMPONENT/Pagination,COMPONENT/Panel,COMPONENT/Progressbar(js),COMPONENT/Tab(js),COMPONENT/Tagcloud(js),COMPONENT/Tooltip(js),COMPONENT/Tree(js),CONTROLS/Button(js),CONTROLS/Checkbox,CONTROLS/Colorpicker(js),CONTROLS/Datepicker(js),CONTROLS/Dropdown(js),CONTROLS/File,CONTROLS/Form/Control,CONTROLS/Form/Field,CONTROLS/Form/Plain,CONTROLS/Input,CONTROLS/MultiText(js),CONTROLS/Picklist(js),CONTROLS/Radio,CONTROLS/Select,CONTROLS/SelectButton(js),CONTROLS/Slider,CONTROLS/Switch(js),CONTROLS/SyntaxInput(js),CONTROLS/Textarea,CONTROLS/Time(js),ELEMENTS/Box,ELEMENTS/Icon,ELEMENTS/Image,ELEMENTS/List,ELEMENTS/Table,ELEMENTS/Tag,ELEMENTS/Title,LAYOUT/Container,LAYOUT/Grid,LAYOUT/Splitter(js),UTILITY,Utils'.split(','));
     var jsComps = ''.split(',');
     delete leftMenu.Utils;
     Gn.util.append('.left-menu', renderTree(leftMenu));
     Gn.util.scrollIntoView(Gn.util.$('.tree-item.is-active'), 300);
-    function renderTree(menus){
+    function renderTree(menus) {
       var $depths = Gn.util.$('<ul></ul>');
-      Gn.util.each(menus, function (child, menu){
-        if(Gn.util.isString(child)){
-          Gn.util.append($depths, renderMenu(menu, '../../category/'+child+'/index.html', location.href.indexOf(child+'/') > -1));
+      Gn.util.each(menus, function (child, menu) {
+        if (Gn.util.isString(child)) {
+          Gn.util.append($depths, renderMenu(menu, '../../category/' + child + '/index.html', location.href.indexOf(child + '/') > -1));
         } else {
           var $_depth = renderMenu(menu, '');
           Gn.util.append($_depth, renderTree(child));
@@ -69,35 +75,35 @@
       return $depths;
     }
-    function renderMenu(name, link, isActive){
+    function renderMenu(name, link, isActive) {
       var $_menu;
-      if (link === ''){
+      if (link === '') {
         $_menu = Gn.util.$('<li>' + name + '</li>');
       } else {
-        var menuClass = isActive ? ' is-active' :''
-        $_menu = Gn.util.$('<li><a href="' + link + '"><div class="tree-item'+menuClass+'">' + name.split('(js)').join('') + '</a></div></li>');
+        var menuClass = isActive ? ' is-active' : '';
+        $_menu = Gn.util.$('<li><a href="' + link + '"><div class="tree-item' + menuClass + '">' + name.split('(js)').join('') + '</a></div></li>');
       }
-      if(name.indexOf('(js)') > 0){
+      if (name.indexOf('(js)') > 0) {
         Gn.util.append(Gn.util.find('.tree-item', $_menu), Gn.util.$('<span class="gn-tag is-small is-info-light">JS</span>'));
       }
       return $_menu;
     }
-    function setTree(categorys){
+    function setTree(categorys) {
       var menus = {};
-      categorys.forEach(function(category){
+      categorys.forEach(function (category) {
         parseTree(menus, category.split('/'), category);
       });
       return menus;
     }
-    function parseTree(parents, child, catgry){
+    function parseTree(parents, child, catgry) {
       var _depth = child.shift();
       if (parents[_depth] === undefined) {
-        parents[_depth] = {}
+        parents[_depth] = {};
       }
-      if(child.length === 1){
+      if (child.length === 1) {
         parents[_depth][child] = catgry;
       } else if (child.length > 1) {
         parseTree(parents[_depth], child, catgry);
@@ -108,38 +114,32 @@
   });
 </script>
-    <div class="aigis-contents">
-      <div class="aigis-contents__body">
-  <div>
-    <div class="aigis-module Alert">
-      <h2 class="aigis-module__heading" id="Alert">
-        Alert
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/components/alert.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+      <div class="aigis-contents">
+        <div class="aigis-contents__body">
+<div>
+  <div class="aigis-module Alert">
+    <h2 class="aigis-module__heading" id="Alert">Alert</h2>
+    <div class="aigis-module__filepath">/scss/components/alert.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-alert-">기본 Alert 확장</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-alert-">기본 Alert 확장</h3>
 <ul>
 <li>가로 사이즈 400이하 일 때 버튼은 가운데 정렬 선택</li>
 <li>가로 사이즈 400이상 일 때 버튼은 오른쪽 정력 선택</li>
@@ -404,34 +404,29 @@
   </tbody>
 </table>
-    </div>
-    <div class="aigis-module Calendar">
-      <h2 class="aigis-module__heading" id="Calendar">
-        Calendar
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/components/calendar.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module Calendar">
+    <h2 class="aigis-module__heading" id="Calendar">Calendar</h2>
+    <div class="aigis-module__filepath">/scss/components/calendar.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">생성 옵션</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">생성 옵션</h3>
 <ul>
 <li>Calendar 단일 컴포넌트로 사용되거나, DatePicker의 type이 datetime 또는 date인 경우에 사용됨</li>
 </ul>
@@ -514,34 +509,29 @@
   </tbody>
 </table>
-    </div>
-    <div class="aigis-module Time">
-      <h2 class="aigis-module__heading" id="Time">
-        Time
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/components/calendar.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module Time">
+    <h2 class="aigis-module__heading" id="Time">Time</h2>
+    <div class="aigis-module__filepath">/scss/components/calendar.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">생성 옵션</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">생성 옵션</h3>
 <div class="aigis-preview">
 <div class="new-time"></div>
@@ -604,6 +594,18 @@
       <td></td>
       <td>시간 변경 시 발생 이벤트</td>
     </tr>
+    <tr>
+      <td colspan="2">disabled</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>Disable 여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">readonly</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>읽기전용 여부</td>
+    </tr>
   </tbody>
 </table>
@@ -626,37 +628,42 @@
       <td>string</td>
       <td>설정된 시간 값을 반환한다.</td>
     </tr>
+    <tr>
+      <td>disable()</td>
+      <td>void</td>
+      <td>Disabled 처리한다.</td>
+    </tr>
+    <tr>
+      <td>enable()</td>
+      <td>void</td>
+      <td>Enabled 처리한다.</td>
+    </tr>
   </tbody>
 </table>
-    </div>
-    <div class="aigis-module Chart">
-      <h2 class="aigis-module__heading" id="Chart">
-        Chart
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/components/chart.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module Chart">
+    <h2 class="aigis-module__heading" id="Chart">Chart</h2>
+    <div class="aigis-module__filepath">/scss/components/chart.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <div class="aigis-preview">
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <div class="aigis-preview">
 <div class="lineChart"></div>
 <div class="splineChart"></div>
@@ -1058,170 +1065,274 @@
   labels<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'data1'</span><span class="token punctuation" >]</span>
 }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
 </code></pre>
-    </div>
-    <div class="aigis-module Datagrid">
-      <h2 class="aigis-module__heading" id="Datagrid">
-        Datagrid
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/components/datagrid.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module Datagrid">
+    <h2 class="aigis-module__heading" id="Datagrid">Datagrid</h2>
+    <div class="aigis-module__filepath">/scss/components/datagrid.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">기본 사용</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">기본 사용</h3>
 <ul>
 <li>데이터 테이블</li>
 </ul>
 <div class="aigis-preview">
-<div class="new-grid is-border"></div>
+<div class="new-grid"></div>
 <div style="width: 100%; height: 150px; overflow-x: auto">
-  <div class="new-grid2 is-border"></div>
+  <div class="new-grid2"></div>
 </div>
 </div>
-<pre><code class="language-ejs"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid is-border<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<pre><code class="language-ejs"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token style-attr language-css" ><span class="token attr-name" > <span class="token attr-name" >style</span></span><span class="token punctuation" >="</span><span class="token attr-value" ><span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span> <span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >150</span>px<span class="token punctuation" >;</span> <span class="token property" >overflow-x</span><span class="token punctuation" >:</span> auto</span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid2 is-border<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 </code></pre>
 <pre><code>Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'datagrid'</span><span class="token punctuation" >,</span> {
-      target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid'</span><span class="token punctuation" >,</span>
-      headers<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
-        label<span class="token punctuation" >:</span> <span class="token string" >'no'</span><span class="token punctuation" >,</span>
-        key<span class="token punctuation" >:</span> <span class="token string" >'number'</span><span class="token punctuation" >,</span>
-        onSelect<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span>{
-          console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>arguments<span class="token punctuation" >)</span>
-        }<span class="token punctuation" >,</span>
-        template<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>k<span class="token punctuation" >,</span> d<span class="token punctuation" >)</span> {
-          return <span class="token string" >'&lt;span>'</span><span class="token operator" >+</span>d<span class="token punctuation" >[</span>k<span class="token punctuation" >]</span><span class="token operator" >+</span><span class="token string" >'&lt;/span>'</span>
-        }<span class="token punctuation" >,</span>
-        sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
-        sort<span class="token punctuation" >:</span> <span class="token string" >'asc'</span>
-      }<span class="token punctuation" >,</span> {
-        label<span class="token punctuation" >:</span> <span class="token string" >'제목'</span><span class="token punctuation" >,</span>
-        key<span class="token punctuation" >:</span> <span class="token string" >'title'</span><span class="token punctuation" >,</span>
-        style<span class="token punctuation" >:</span> {
-          width<span class="token punctuation" >:</span> <span class="token string" >'250px'</span>
-        }<span class="token punctuation" >,</span>
-        className<span class="token punctuation" >:</span> <span class="token string" >'has-text-center'</span><span class="token punctuation" >,</span>
-        bodyClass<span class="token punctuation" >:</span> <span class="token string" >'has-text-left'</span><span class="token punctuation" >,</span>
-        sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
-      }<span class="token punctuation" >,</span> {
-        label<span class="token punctuation" >:</span> <span class="token string" >'날짜'</span><span class="token punctuation" >,</span>
-        key<span class="token punctuation" >:</span> <span class="token string" >'date'</span><span class="token punctuation" >,</span>
-        style<span class="token punctuation" >:</span> {
-          width<span class="token punctuation" >:</span> <span class="token string" >'150px'</span>
-        }<span class="token punctuation" >,</span>
-        className<span class="token punctuation" >:</span> <span class="token string" >'has-text-center'</span><span class="token punctuation" >,</span>
-        bodyClass<span class="token punctuation" >:</span> <span class="token string" >'has-text-left'</span><span class="token punctuation" >,</span>
-      }<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
-      data<span class="token punctuation" >:</span><span class="token punctuation" >[</span>{
-        number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
-        title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
-        date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
-        desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
-        child <span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
+  target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid'</span><span class="token punctuation" >,</span>
+  headers<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'no'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'number'</span><span class="token punctuation" >,</span>
+      onSelect<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> {
+        console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>arguments<span class="token punctuation" >)</span>
+      }<span class="token punctuation" >,</span>
+      template<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>k<span class="token punctuation" >,</span> d<span class="token punctuation" >)</span> {
+        return <span class="token string" >'&lt;span>'</span> <span class="token operator" >+</span> d<span class="token punctuation" >[</span>k<span class="token punctuation" >]</span> <span class="token operator" >+</span> <span class="token string" >'&lt;/span>'</span>
+      }<span class="token punctuation" >,</span>
+      draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+      sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+      sort<span class="token punctuation" >:</span> <span class="token string" >'asc'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'제목'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'title'</span><span class="token punctuation" >,</span>
+      style<span class="token punctuation" >:</span> {
+        width<span class="token punctuation" >:</span> <span class="token string" >'250px'</span>
+      }<span class="token punctuation" >,</span>
+      className<span class="token punctuation" >:</span> <span class="token string" >'has-text-right'</span><span class="token punctuation" >,</span>
+      draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+      bodyClass<span class="token punctuation" >:</span> <span class="token string" >'has-text-left'</span><span class="token punctuation" >,</span>
+      sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'날짜'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'date'</span><span class="token punctuation" >,</span>
+      style<span class="token punctuation" >:</span> {
+        width<span class="token punctuation" >:</span> <span class="token string" >'150px'</span>
+      }<span class="token punctuation" >,</span>
+      className<span class="token punctuation" >:</span> <span class="token string" >'has-text-center'</span><span class="token punctuation" >,</span>
+      bodyClass<span class="token punctuation" >:</span> <span class="token string" >'has-text-left'</span>
+    }
+  <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+  data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+    {
+      number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
+      title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
+      date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
+      desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
+      child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+        {
           number<span class="token punctuation" >:</span> <span class="token string" >'1-1'</span><span class="token punctuation" >,</span>
           title<span class="token punctuation" >:</span> <span class="token string" >'1-하나'</span><span class="token punctuation" >,</span>
           date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
-        }<span class="token punctuation" >,</span> {
+        }<span class="token punctuation" >,</span>
+        {
           number<span class="token punctuation" >:</span> <span class="token string" >'1-2'</span><span class="token punctuation" >,</span>
           title<span class="token punctuation" >:</span> <span class="token string" >'1-둘'</span><span class="token punctuation" >,</span>
           date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
           desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
-          child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
-            number<span class="token punctuation" >:</span> <span class="token string" >'1-2-1'</span><span class="token punctuation" >,</span>
-            title<span class="token punctuation" >:</span> <span class="token string" >'1-둘-1'</span><span class="token punctuation" >,</span>
-            date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
-            desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
-            child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
-              number<span class="token punctuation" >:</span> <span class="token string" >'1-2-1-1'</span><span class="token punctuation" >,</span>
-              title<span class="token punctuation" >:</span> <span class="token string" >'1-둘-1-1'</span><span class="token punctuation" >,</span>
+          child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+            {
+              number<span class="token punctuation" >:</span> <span class="token string" >'1-2-1'</span><span class="token punctuation" >,</span>
+              title<span class="token punctuation" >:</span> <span class="token string" >'1-둘-1'</span><span class="token punctuation" >,</span>
+              date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
               desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
-              date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
-            }<span class="token punctuation" >]</span>
-          }<span class="token punctuation" >]</span>
-        }<span class="token punctuation" >]</span>
-      }<span class="token punctuation" >,</span> {
-        number<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
-        title<span class="token punctuation" >:</span> <span class="token string" >'둘'</span><span class="token punctuation" >,</span>
-        date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
-        desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span>
-      }<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
-      onSort<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>column<span class="token punctuation" >)</span>{
-        console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'column'</span><span class="token punctuation" >,</span>column<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
-      }<span class="token punctuation" >,</span>
-      onCheckAll<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>ggg<span class="token punctuation" >)</span>{
-        console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'ggg'</span><span class="token punctuation" >,</span>ggg<span class="token punctuation" >)</span>
-      }<span class="token punctuation" >,</span>
-      hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
-    }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
-    Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'datagrid'</span><span class="token punctuation" >,</span> {
-      target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid2'</span><span class="token punctuation" >,</span>
-      headers<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
-        label<span class="token punctuation" >:</span> <span class="token string" >'row data numbers'</span><span class="token punctuation" >,</span>
-        key<span class="token punctuation" >:</span> <span class="token string" >'number'</span><span class="token punctuation" >,</span>
-        style<span class="token punctuation" >:</span> { width<span class="token punctuation" >:</span> <span class="token string" >'50px'</span>}<span class="token punctuation" >,</span>
-        sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
-      }<span class="token punctuation" >,</span> {
-        label<span class="token punctuation" >:</span> <span class="token string" >'제목'</span><span class="token punctuation" >,</span>
-        key<span class="token punctuation" >:</span> <span class="token string" >'title'</span><span class="token punctuation" >,</span>
-        sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
-      }<span class="token punctuation" >,</span> {
-        label<span class="token punctuation" >:</span> <span class="token string" >'날짜를 표시하는 컬럼입니다'</span><span class="token punctuation" >,</span>
-        key<span class="token punctuation" >:</span> <span class="token string" >'date'</span><span class="token punctuation" >,</span>
-        style<span class="token punctuation" >:</span> {
-          width<span class="token punctuation" >:</span> <span class="token string" >'100px'</span>
-        }<span class="token punctuation" >,</span>
-        tipField<span class="token punctuation" >:</span> <span class="token string" >'desc'</span>
-      }<span class="token punctuation" >,</span> {
-        label<span class="token punctuation" >:</span> <span class="token string" >'헤더명도길어집니다'</span><span class="token punctuation" >,</span>
-        key<span class="token punctuation" >:</span> <span class="token string" >'desc'</span><span class="token punctuation" >,</span>
-        style<span class="token punctuation" >:</span> { width<span class="token punctuation" >:</span> <span class="token string" >'50px'</span> }
-      }<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
-      data<span class="token punctuation" >:</span><span class="token punctuation" >[</span>
-        {
-          number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
-          title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
-          date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
-        }<span class="token punctuation" >,</span> {
-          number<span class="token punctuation" >:</span> <span class="token string" >'232342333'</span><span class="token punctuation" >,</span>
-          title<span class="token punctuation" >:</span> <span class="token string" >'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.'</span><span class="token punctuation" >,</span>
-          date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
-          desc<span class="token punctuation" >:</span> <span class="token string" >'Voluptate enim culpa anim dolor magna excepteur ullamco id aliquip consequat ullamco voluptate consectetur.'</span>
+              child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+                {
+                  number<span class="token punctuation" >:</span> <span class="token string" >'1-2-1-1'</span><span class="token punctuation" >,</span>
+                  title<span class="token punctuation" >:</span> <span class="token string" >'1-둘-1-1'</span><span class="token punctuation" >,</span>
+                  desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
+                  date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
+                }
+              <span class="token punctuation" >]</span>
+            }
+          <span class="token punctuation" >]</span>
         }
-        <span class="token punctuation" >.</span><span class="token punctuation" >.</span><span class="token punctuation" >.</span>
-      <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
-      sort<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>column<span class="token punctuation" >)</span>{
-        console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'column'</span><span class="token punctuation" >,</span>column<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
-      }<span class="token punctuation" >,</span>
-      onSelect<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>row<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span>{
-        console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'row'</span><span class="token punctuation" >,</span>row<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span>
+      <span class="token punctuation" >]</span>
+    }<span class="token punctuation" >,</span>
+    {
+      number<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
+      title<span class="token punctuation" >:</span> <span class="token string" >'둘'</span><span class="token punctuation" >,</span>
+      date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
+      desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span>
+    }
+  <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+  onSort<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>column<span class="token punctuation" >)</span> {
+    console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'column'</span><span class="token punctuation" >,</span> column<span class="token punctuation" >)</span>
+  }<span class="token punctuation" >,</span>
+  onDragEnd<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>col<span class="token punctuation" >,</span> position<span class="token punctuation" >)</span> {
+    console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>col<span class="token punctuation" >,</span> position<span class="token punctuation" >)</span>
+  }<span class="token punctuation" >,</span>
+  onToggle<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>type<span class="token punctuation" >,</span> row<span class="token punctuation" >,</span> n<span class="token punctuation" >)</span> {
+    console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>type<span class="token punctuation" >,</span> row<span class="token punctuation" >,</span> n<span class="token punctuation" >)</span>
+        <span class="token operator" >/</span><span class="token operator" >/</span> 이렇게 하면 펼쳐질때마다 해당 로우에 <span class="token number" >2</span>개의 자식을 바인딩한다<span class="token punctuation" >.</span>
+        <span class="token operator" >/</span><span class="token operator" >/</span> type <span class="token operator" >==</span><span class="token operator" >=</span> <span class="token string" >'expanded'</span> <span class="token operator" >&amp;</span><span class="token operator" >&amp;</span> this<span class="token punctuation" >.</span><span class="token function" >addChild</span><span class="token punctuation" >(</span>n<span class="token punctuation" >,</span> <span class="token punctuation" >[</span>{
+        <span class="token operator" >/</span><span class="token operator" >/</span>   number<span class="token punctuation" >:</span> <span class="token string" >'000'</span><span class="token punctuation" >,</span>
+        <span class="token operator" >/</span><span class="token operator" >/</span>   title<span class="token punctuation" >:</span> <span class="token string" >'추가된 자식1'</span><span class="token punctuation" >,</span>
+        <span class="token operator" >/</span><span class="token operator" >/</span>   date<span class="token punctuation" >:</span> <span class="token string" >'2020-02-02'</span>
+        <span class="token operator" >/</span><span class="token operator" >/</span> }<span class="token punctuation" >,</span>{
+        <span class="token operator" >/</span><span class="token operator" >/</span>   number<span class="token punctuation" >:</span> <span class="token string" >'001'</span><span class="token punctuation" >,</span>
+        <span class="token operator" >/</span><span class="token operator" >/</span>   title<span class="token punctuation" >:</span> <span class="token string" >'추가된 자식2'</span><span class="token punctuation" >,</span>
+        <span class="token operator" >/</span><span class="token operator" >/</span>   date<span class="token punctuation" >:</span> <span class="token string" >'2020-02-02'</span>
+        <span class="token operator" >/</span><span class="token operator" >/</span> }<span class="token punctuation" >]</span><span class="token punctuation" >)</span>
+  }<span class="token punctuation" >,</span>
+  onCheckAll<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>ggg<span class="token punctuation" >)</span> {
+    console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'ggg'</span><span class="token punctuation" >,</span> ggg<span class="token punctuation" >)</span>
+  }<span class="token punctuation" >,</span>
+  onDoubleClick<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>e<span class="token punctuation" >)</span> {
+    console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'dbclick'</span><span class="token punctuation" >,</span> e<span class="token punctuation" >)</span>
+  }<span class="token punctuation" >,</span>
+  hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+  hasDelete<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+}<span class="token punctuation" >)</span>
+Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'datagrid'</span><span class="token punctuation" >,</span> {
+  target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid2'</span><span class="token punctuation" >,</span>
+  headers<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'row data numbers'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'number'</span><span class="token punctuation" >,</span>
+      style<span class="token punctuation" >:</span> { width<span class="token punctuation" >:</span> <span class="token string" >'50px'</span> }<span class="token punctuation" >,</span>
+      sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+      draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'제목'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'title'</span><span class="token punctuation" >,</span>
+      sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+      draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'날짜를 표시하는 컬럼입니다'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'date'</span><span class="token punctuation" >,</span>
+      style<span class="token punctuation" >:</span> {
+        width<span class="token punctuation" >:</span> <span class="token string" >'100px'</span>
       }<span class="token punctuation" >,</span>
-      isEllipsis<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
-      hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
-      fixHeader<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
-    }<span class="token punctuation" >)</span>
+      tipField<span class="token punctuation" >:</span> <span class="token string" >'desc'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'헤더명도길어집니다'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'desc'</span><span class="token punctuation" >,</span>
+      style<span class="token punctuation" >:</span> { width<span class="token punctuation" >:</span> <span class="token string" >'50px'</span> }
+    }
+  <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+  data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+    {
+      number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
+      title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
+      date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      number<span class="token punctuation" >:</span> <span class="token string" >'232342333'</span><span class="token punctuation" >,</span>
+      title<span class="token punctuation" >:</span>
+        <span class="token string" >'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.'</span><span class="token punctuation" >,</span>
+      date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
+      desc<span class="token punctuation" >:</span>
+        <span class="token string" >'Voluptate enim culpa anim dolor magna excepteur ullamco id aliquip consequat ullamco voluptate consectetur.'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
+      title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
+      date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      number<span class="token punctuation" >:</span> <span class="token string" >'232342333'</span><span class="token punctuation" >,</span>
+      title<span class="token punctuation" >:</span>
+        <span class="token string" >'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.'</span><span class="token punctuation" >,</span>
+      date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
+      desc<span class="token punctuation" >:</span>
+        <span class="token string" >'Voluptate enim culpa anim dolor magna excepteur ullamco id aliquip consequat ullamco voluptate consectetur.'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
+      title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
+      date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      number<span class="token punctuation" >:</span> <span class="token string" >'232342333'</span><span class="token punctuation" >,</span>
+      title<span class="token punctuation" >:</span>
+        <span class="token string" >'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.'</span><span class="token punctuation" >,</span>
+      date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
+      desc<span class="token punctuation" >:</span>
+        <span class="token string" >'Voluptate enim culpa anim dolor magna excepteur ullamco id aliquip consequat ullamco voluptate consectetur.'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
+      title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
+      date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      number<span class="token punctuation" >:</span> <span class="token string" >'232342333'</span><span class="token punctuation" >,</span>
+      title<span class="token punctuation" >:</span>
+        <span class="token string" >'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.'</span><span class="token punctuation" >,</span>
+      date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
+      desc<span class="token punctuation" >:</span>
+        <span class="token string" >'Voluptate enim culpa anim dolor magna excepteur ullamco id aliquip consequat ullamco voluptate consectetur.'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
+      title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
+      date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      number<span class="token punctuation" >:</span> <span class="token string" >'232342333'</span><span class="token punctuation" >,</span>
+      title<span class="token punctuation" >:</span>
+        <span class="token string" >'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.'</span><span class="token punctuation" >,</span>
+      date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
+      desc<span class="token punctuation" >:</span>
+        <span class="token string" >'Voluptate enim culpa anim dolor magna excepteur ullamco id aliquip consequat ullamco voluptate consectetur.'</span>
+    }
+  <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+  sort<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>column<span class="token punctuation" >)</span> {
+    console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'column'</span><span class="token punctuation" >,</span> column<span class="token punctuation" >)</span>
+  }<span class="token punctuation" >,</span>
+  onSelect<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>row<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span> {
+    console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'row'</span><span class="token punctuation" >,</span> row<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span>
+  }<span class="token punctuation" >,</span>
+  onDoubleClick<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>e<span class="token punctuation" >)</span> {
+    console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'dbclick'</span><span class="token punctuation" >,</span> e<span class="token punctuation" >)</span>
+  }<span class="token punctuation" >,</span>
+  isEllipsis<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+  hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+  hasOrder<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+  textSets<span class="token punctuation" >:</span> {
+    orderLabel<span class="token punctuation" >:</span> <span class="token string" >'이동'</span>
+  }<span class="token punctuation" >,</span>
+  hasDelete<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+  fixHeader<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+  onChange<span class="token punctuation" >:</span> updatedData <span class="token operator" >=</span><span class="token operator" >></span> {
+    console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>updatedData<span class="token punctuation" >)</span>
+  }
+}<span class="token punctuation" >)</span>
 </code></pre><table class="gn-table is-full is-border">
   <thead>
     <th colspan="2">name</th>
@@ -1318,20 +1429,33 @@
     <tr>
       <td colspan="2">data</td>
       <td>array</td>
-      <td></td>
+      <td>[]</td>
       <td>key: value로 이루어진 그리드 데이터 <br>
       <b>isOpened:true</b> =&gt; 열린상태로 표시<br>
       <b>isSelectedRow: true</b> =&gt; 활성화 된 상태로 표시<br>
       <b>noCheck: true</b> =&gt; 체크박스 표시안함<br>
-      <b>isChecked: true</b> =&gt; 체크박스 체크된 상태로 표시</td>
+      <b>isChecked: true</b> =&gt; 체크박스 체크된 상태로 표시<br>
+      <b>color:is-warning-light</b> =&gt; 행의 색 변경</td>
     </tr>
     <tr>
-      <td>textSets</td>
+      <td rowspan="3">textSets</td>
       <td>noData</td>
       <td>string</td>
       <td>No records available.</td>
       <td>데이터가 없을 경우 출력 메시지</td>
     </tr>
+    <tr>
+      <td>orderLabel</td>
+      <td>string</td>
+      <td></td>
+      <td>이동버튼 헤더표시문구</td>
+    </tr>
+    <tr>
+      <td>deleteLabel</td>
+      <td>string</td>
+      <td></td>
+      <td>삭제버튼 헤더표시문구</td>
+    </tr>
     <tr>
       <td colspan="2">childField</td>
       <td>string</td>
@@ -1344,6 +1468,24 @@
       <td>false</td>
       <td>1열 체크박스 출력 여부</td>
     </tr>
+    <tr>
+      <td colspan="2">hasOrder</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>이동버튼 생성 여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">hasDelete</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>삭제버튼 생성 여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">readonly</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>읽기전용 여부 - 이동(hasOrder), 삭제(hasDelete) 버튼 미생성</td>
+    </tr>
     <tr>
       <td colspan="2">checkCapturing</td>
       <td>boolean</td>
@@ -1404,6 +1546,12 @@
       <td></td>
       <td>넓이조정 완료 시 발생이벤트</td>
     </tr>
+    <tr>
+      <td colspan="2">onChange</td>
+      <td>function(updatedData)</td>
+      <td></td>
+      <td>이동, 삭제 등의 데이터 변경이 있는 경우, 변경된 데이터를 가져오기 위한 이벤트핸들러</td>
+    </tr>
   </tbody>
 </table>
@@ -1461,6 +1609,11 @@
       <td>void</td>
       <td>파라메터 배열에 전달된 key에 해당하는 컬럼만 보여준다</td>
     </tr>
+    <tr>
+      <td>showDetail(index: number, headerKeys?: string[])</td>
+      <td>void</td>
+      <td>headerKeys로 넘겨진 항목들의 상세정보를 하단에 표시한다. headerKeys가 없는 경우 전체 항목 표시한다.</td>
+    </tr>
     <tr>
       <td>showAll()</td>
       <td>void</td>
@@ -1474,120 +1627,455 @@
   </tbody>
 </table>
-    </div>
-    <div class="aigis-module Dropdown">
-      <h2 class="aigis-module__heading" id="Dropdown">
-        Dropdown
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/components/dropdown.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module Datalist">
+    <h2 class="aigis-module__heading" id="Datalist">Datalist</h2>
+    <div class="aigis-module__filepath">/scss/components/datalist.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">기본 사용</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">기본 사용</h3>
 <ul>
-<li>드롭다운은 버튼과 생김새가 거의 동일 합니다. </li>
-<li>용도에 따라 3가지 버전으로 사용 합니다.</li>
+<li>데이터 테이블</li>
 </ul>
 <div class="aigis-preview">
-  <div class="gn-dropdown">
-    <div class="dropdown-label"> 선택하세요 <span class="gn-icon is-small dropdown-icon">
-            <i class="fas fa-angle-down"></i>
-        </span>
-    </div>
-    <div class="dropdown-items">
-        <ul>
-            <li class="dropdown-item">아이템 1</li>
-            <li class="dropdown-item">아이템 2</li>
-            <li class="dropdown-item">아이템 3</li>
-        </ul>
-        <ul>
-            <li class="dropdown-item">아이템 4</li>
-            <li class="dropdown-item is-active">아이템 4-1</li>
-            <li class="dropdown-item">아이템 4-2</li>
-        </ul>
-    </div>
+<div class="new-list is-border"></div>
+<div style="width: 100%; height: 200px; overflow-x: auto">
+  <div class="new-list2 is-border"></div>
 </div>
-<div class="gn-dropdown is-mono">
-    <div class="dropdown-label"> 선택하세요 <span class="gn-icon is-small dropdown-icon">
-            <i class="fas fa-angle-down"></i>
-        </span>
-    </div>
-    <div class="dropdown-items">
-        <ul>
-            <li class="dropdown-item">아이템 1</li>
-            <li class="dropdown-item">아이템 2</li>
-            <li class="dropdown-item">아이템 3</li>
-        </ul>
-        <ul>
-            <li class="dropdown-item">아이템 4</li>
-            <li class="dropdown-item is-active">아이템 4-1</li>
-            <li class="dropdown-item">아이템 4-2</li>
-        </ul>
-    </div>
 </div>
-<div class="gn-dropdown is-primary">
-    <div class="dropdown-label"> 선택하세요 <span class="gn-icon is-small dropdown-icon">
-            <i class="fas fa-angle-down"></i>
-        </span>
-    </div>
-    <div class="dropdown-items">
-        <ul>
-            <li class="dropdown-item">아이템 1</li>
-            <li class="dropdown-item">아이템 2</li>
-            <li class="dropdown-item">아이템 3</li>
-        </ul>
-        <ul>
-            <li class="dropdown-item">아이템 4</li>
-            <li class="dropdown-item is-active">아이템 제목이 길어집니다.4-1</li>
-            <li class="dropdown-item">아이템 4-2</li>
-        </ul>
-    </div>
-</div></div>
-<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-dropdown<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-label<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    선택하세요
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-small dropdown-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-items<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>ul</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>아이템 1<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>아이템 2<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>아이템 3<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>ul</span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>ul</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>아이템 4<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item is-active<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>아이템 4-1<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>아이템 4-2<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>ul</span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<pre><code class="language-ejs"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-list is-border<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token style-attr language-css" ><span class="token attr-name" > <span class="token attr-name" >style</span></span><span class="token punctuation" >="</span><span class="token attr-value" ><span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span> <span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >200</span>px<span class="token punctuation" >;</span> <span class="token property" >overflow-x</span><span class="token punctuation" >:</span> auto</span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-list2 is-border<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-dropdown is-mono<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-label<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    선택하세요
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-small dropdown-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+</code></pre>
+<pre><code>Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'datalist'</span><span class="token punctuation" >,</span> {
+  target<span class="token punctuation" >:</span> <span class="token string" >'.new-list'</span><span class="token punctuation" >,</span>
+  headers<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'no'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'number'</span><span class="token punctuation" >,</span>
+      bodyClass<span class="token punctuation" >:</span> <span class="token string" >'has-text-left'</span><span class="token punctuation" >,</span>
+      style<span class="token punctuation" >:</span> {
+        width<span class="token punctuation" >:</span> <span class="token string" >'50px'</span><span class="token punctuation" >,</span>
+        <span class="token string" >'text-align'</span><span class="token punctuation" >:</span> <span class="token string" >'center'</span>
+      }
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'제목'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'title'</span><span class="token punctuation" >,</span>
+      className<span class="token punctuation" >:</span> <span class="token string" >'main-title'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'날짜'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'date'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'설명'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'desc'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'기타'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'etc'</span>
+    }
+  <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+  data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+    {
+      number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
+      title<span class="token punctuation" >:</span> <span class="token string" >'오늘'</span><span class="token punctuation" >,</span>
+      date<span class="token punctuation" >:</span> <span class="token string" >'2023-07-28'</span><span class="token punctuation" >,</span>
+      desc<span class="token punctuation" >:</span> <span class="token string" >'hellojj'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      number<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
+      title<span class="token punctuation" >:</span> <span class="token string" >'내일'</span><span class="token punctuation" >,</span>
+      date<span class="token punctuation" >:</span> <span class="token string" >'2023-07-29'</span><span class="token punctuation" >,</span>
+      desc<span class="token punctuation" >:</span> <span class="token string" >'chaaaaaa'</span>
+    }
+  <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+  onChange<span class="token punctuation" >:</span> updatedData <span class="token operator" >=</span><span class="token operator" >></span> {
+    console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'updatedData'</span><span class="token punctuation" >,</span> updatedData<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+  }
+}<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'datalist'</span><span class="token punctuation" >,</span> {
+  target<span class="token punctuation" >:</span> <span class="token string" >'.new-list2'</span><span class="token punctuation" >,</span>
+  headers<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'row-number'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'number'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'제목'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'title'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'날짜'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'date'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'상세설명'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'desc'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'숨김'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'ishidden'</span><span class="token punctuation" >,</span>
+      isHidden<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+    }
+  <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+  data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+    { number<span class="token punctuation" >:</span> <span class="token number" >1</span><span class="token punctuation" >,</span> title<span class="token punctuation" >:</span> <span class="token string" >'첫 번째'</span><span class="token punctuation" >,</span> date<span class="token punctuation" >:</span> <span class="token string" >'2023-07-28'</span><span class="token punctuation" >,</span> desc<span class="token punctuation" >:</span> <span class="token string" >'이것은 첫 번째 요소입니다.'</span><span class="token punctuation" >,</span> ishidden<span class="token punctuation" >:</span> <span class="token string" >'datalist에 표시되지 않습니다.'</span> }<span class="token punctuation" >,</span>
+    { number<span class="token punctuation" >:</span> <span class="token number" >2</span><span class="token punctuation" >,</span> title<span class="token punctuation" >:</span> <span class="token string" >'두 번째'</span><span class="token punctuation" >,</span> date<span class="token punctuation" >:</span> <span class="token string" >'2023-07-29'</span><span class="token punctuation" >,</span> desc<span class="token punctuation" >:</span> <span class="token string" >'이것은 두 번째 요소입니다.'</span><span class="token punctuation" >,</span> ishidden<span class="token punctuation" >:</span> <span class="token string" >'datalist에 표시되지 않습니다.'</span> }<span class="token punctuation" >,</span>
+    { number<span class="token punctuation" >:</span> <span class="token number" >3</span><span class="token punctuation" >,</span> title<span class="token punctuation" >:</span> <span class="token string" >'세 번째'</span><span class="token punctuation" >,</span> date<span class="token punctuation" >:</span> <span class="token string" >'2023-07-30'</span><span class="token punctuation" >,</span> desc<span class="token punctuation" >:</span> <span class="token string" >''</span><span class="token punctuation" >,</span> ishidden<span class="token punctuation" >:</span> <span class="token string" >'datalist에 표시되지 않습니다.'</span> }<span class="token punctuation" >,</span>
+    { number<span class="token punctuation" >:</span> <span class="token number" >4</span><span class="token punctuation" >,</span> title<span class="token punctuation" >:</span> <span class="token string" >''</span><span class="token punctuation" >,</span> date<span class="token punctuation" >:</span> <span class="token string" >'2023-07-31'</span><span class="token punctuation" >,</span> desc<span class="token punctuation" >:</span> <span class="token string" >'이것은 네 번째 요소입니다.'</span><span class="token punctuation" >,</span> ishidden<span class="token punctuation" >:</span> <span class="token string" >'datalist에 표시되지 않습니다.'</span> }<span class="token punctuation" >,</span>
+    { number<span class="token punctuation" >:</span> <span class="token number" >5</span><span class="token punctuation" >,</span> title<span class="token punctuation" >:</span> <span class="token string" >'다섯 번째'</span><span class="token punctuation" >,</span> date<span class="token punctuation" >:</span> <span class="token string" >'2023-08-01'</span><span class="token punctuation" >,</span> desc<span class="token punctuation" >:</span> <span class="token string" >'이것은 다섯 번째 요소입니다.'</span> }<span class="token punctuation" >,</span>
+    { number<span class="token punctuation" >:</span> <span class="token number" >6</span><span class="token punctuation" >,</span> title<span class="token punctuation" >:</span> <span class="token string" >'여섯 번째'</span><span class="token punctuation" >,</span> date<span class="token punctuation" >:</span> <span class="token string" >'2023-08-02 ~ 2023-11-02'</span><span class="token punctuation" >,</span> desc<span class="token punctuation" >:</span> <span class="token string" >'이것은 여섯 번째 요소입니다.'</span> }<span class="token punctuation" >,</span>
+    { number<span class="token punctuation" >:</span> <span class="token number" >7</span><span class="token punctuation" >,</span> title<span class="token punctuation" >:</span> <span class="token string" >'일곱 번째 일곱 번째 일곱 번째'</span><span class="token punctuation" >,</span> date<span class="token punctuation" >:</span> <span class="token string" >'2023-08-03'</span><span class="token punctuation" >,</span> desc<span class="token punctuation" >:</span> <span class="token string" >'이것은 일곱 번째 요소입니다.'</span> }<span class="token punctuation" >,</span>
+    {
+      number<span class="token punctuation" >:</span> <span class="token number" >8</span><span class="token punctuation" >,</span>
+      title<span class="token punctuation" >:</span> <span class="token string" >'여덟 번째'</span><span class="token punctuation" >,</span>
+      date<span class="token punctuation" >:</span> <span class="token string" >'2023-08-08'</span><span class="token punctuation" >,</span>
+      desc<span class="token punctuation" >:</span> <span class="token string" >'이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.'</span>
+    }
+  <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+  hasUpdate<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+  hasDelete<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+  onUpdate<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>row<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span> {
+    console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'row'</span><span class="token punctuation" >,</span> row<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+    console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'index'</span><span class="token punctuation" >,</span> index<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+  }<span class="token punctuation" >,</span>
+  onChange<span class="token punctuation" >:</span> updatedData <span class="token operator" >=</span><span class="token operator" >></span> {
+    console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'updatedData'</span><span class="token punctuation" >,</span> updatedData<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+  }<span class="token punctuation" >,</span>
+  isHiddenEmpty<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+}<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+</code></pre><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>컴포넌트 생성 타겟</td>
+    </tr>
+    <tr>
+      <td rowspan="9">headers</td>
+      <td>label</td>
+      <td>string</td>
+      <td></td>
+      <td>화면에 출력될 헤더 텍스트</td>
+    </tr>
+    <tr>
+      <td>key</td>
+      <td>string</td>
+      <td></td>
+      <td>data의 항목에 매치되는 키값</td>
+    </tr>
+    <tr>
+      <td>isHidden</td>
+      <td>boolean</td>
+      <td></td>
+      <td>컬럼 노출여부 (data에는 있지만 화면에 출력되지 않음)</td>
+    </tr>
+    <tr>
+      <td>className</td>
+      <td>string</td>
+      <td></td>
+      <td>클래스 명</td>
+    </tr>
+    <tr>
+      <td>bodyClass</td>
+      <td>string</td>
+      <td></td>
+      <td>바디에 별개의 스타일을 적용할 경우 클래스 명을 추가한다</td>
+    </tr>
+    <tr>
+      <td>style</td>
+      <td>string</td>
+      <td></td>
+      <td>inline style</td>
+    </tr>
+    <tr>
+      <td>template</td>
+      <td>function(key, row)</td>
+      <td></td>
+      <td>데이터를 표시할 템플릿</td>
+    </tr>
+    <tr>
+      <td>onSelect</td>
+      <td>function(row)</td>
+      <td></td>
+      <td>데이터 셀 클릭 이벤트</td>
+    </tr>
+    <tr>
+      <td>onDoubleClick</td>
+      <td>function</td>
+      <td></td>
+      <td>row 더블 클릭 시 수행 이벤트</td>
+    </tr>
+    <tr>
+      <td colspan="2">data</td>
+      <td>array</td>
+      <td>[]</td>
+      <td>key: value로 이루어진 그리드 데이터</td>
+    </tr>
+    <tr>
+      <td rowspan="1">textSets</td>
+      <td>noData</td>
+      <td>string</td>
+      <td>No records available.</td>
+      <td>데이터가 없을 경우 출력 메시지</td>
+    </tr>
+    <tr>
+      <td colspan="2">isHiddenEmpty</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>데이터가 없는 경우 헤더 미출력 여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">hasUpdate</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>수정버튼 생성 여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">hasDelete</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>삭제버튼 생성 여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">readonly</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>읽기전용 여부 - 삭제(hasDelete) 버튼 미생성</td>
+    </tr>
+    <tr>
+      <td colspan="2">disabled</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>Disable 여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">onUpdate</td>
+      <td>function(row, index)</td>
+      <td></td>
+      <td>데이터 수정 버튼을 클릭한 경우, 수정할 데이터를 가져오기 위한 이벤트핸들러</td>
+    </tr>
+    <tr>
+      <td colspan="2">onChange</td>
+      <td>function(updatedData)</td>
+      <td></td>
+      <td>수정, 삭제 등의 데이터 변경이 있는 경우, 변경된 데이터를 가져오기 위한 이벤트핸들러</td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="-">메소드</h3>
+<table class="gn-table is-full is-border">
+  <thead>
+    <th>name</th>
+    <th>return</th>
+    <th>description</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>reRender({headers: Array<headers>, data: Array<any>})</td>
+      <td>void</td>
+      <td>변경된 값으로 다시 렌더링 한다. 컬럼 헤더까지 바뀌는 경우 사용한다.</td>
+    </tr>
+    <tr>
+      <td>resetData(data: Array<any>)</td>
+      <td>void</td>
+      <td>데이터를 변경한다.</td>
+    </tr>
+    <tr>
+      <td>addChild(index: number, data: Array<any>)</td>
+      <td>void</td>
+      <td>index번째 row의 child로 data를 추가한다.</td>
+    </tr>
+    <tr>
+      <td>addRow(data: Array<any>)</td>
+      <td>void</td>
+      <td>마지막 데이터 하단에 data를 추가한다.</td>
+    </tr>
+    <tr>
+      <td>expand(index: number)</td>
+      <td>void</td>
+      <td>index번째  row의 child를 확장한다. </td>
+    </tr>
+    <tr>
+      <td>collapse(index: number)</td>
+      <td>void</td>
+      <td>index번째 row의 child 데이터를 축소한다. </td>
+    </tr>
+    <tr>
+      <td>getChecked()</td>
+      <td>array</td>
+      <td>체크박스가 있는 경우(hasCheck: true) 체크된 데이터를 리턴한다</td>
+    </tr>
+    <tr>
+      <td>hideCols(keys: Array<string>)</td>
+      <td>void</td>
+      <td>파라메터 배열에 전달된 key에 해당하지 않는 컬럼만 보여준다</td>
+    </tr>
+    <tr>
+      <td>showCols(keys: Array<string>)</td>
+      <td>void</td>
+      <td>파라메터 배열에 전달된 key에 해당하는 컬럼만 보여준다</td>
+    </tr>
+    <tr>
+      <td>showAll()</td>
+      <td>void</td>
+      <td>hideCols, showCols 수행 시 숨김처리된 컬럼을 모두 보여준다</td>
+    </tr>
+    <tr>
+      <td>disable()</td>
+      <td>void</td>
+      <td>Disabled 처리한다.</td>
+    </tr>
+    <tr>
+      <td>enable()</td>
+      <td>void</td>
+      <td>Enabled 처리한다.</td>
+    </tr>
+  </tbody>
+</table>
+  </div>
+  <div class="aigis-module Dropdown">
+    <h2 class="aigis-module__heading" id="Dropdown">Dropdown</h2>
+    <div class="aigis-module__filepath">/scss/components/dropdown.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">기본 사용</h3>
+<ul>
+<li>드롭다운은 버튼과 생김새가 거의 동일 합니다. </li>
+<li>용도에 따라 3가지 버전으로 사용 합니다.</li>
+</ul>
+<div class="aigis-preview">
+  <div class="gn-dropdown">
+    <div class="dropdown-label"> 선택하세요 <span class="gn-icon is-small dropdown-icon">
+            <i class="fas fa-angle-down"></i>
+        </span>
+    </div>
+    <div class="dropdown-items">
+        <ul>
+            <li class="dropdown-item">아이템 1</li>
+            <li class="dropdown-item">아이템 2</li>
+            <li class="dropdown-item">아이템 3</li>
+        </ul>
+        <ul>
+            <li class="dropdown-item">아이템 4</li>
+            <li class="dropdown-item is-active">아이템 4-1</li>
+            <li class="dropdown-item">아이템 4-2</li>
+        </ul>
+    </div>
+</div>
+<div class="gn-dropdown is-mono">
+    <div class="dropdown-label"> 선택하세요 <span class="gn-icon is-small dropdown-icon">
+            <i class="fas fa-angle-down"></i>
+        </span>
+    </div>
+    <div class="dropdown-items">
+        <ul>
+            <li class="dropdown-item">아이템 1</li>
+            <li class="dropdown-item">아이템 2</li>
+            <li class="dropdown-item">아이템 3</li>
+        </ul>
+        <ul>
+            <li class="dropdown-item">아이템 4</li>
+            <li class="dropdown-item is-active">아이템 4-1</li>
+            <li class="dropdown-item">아이템 4-2</li>
+        </ul>
+    </div>
+</div>
+<div class="gn-dropdown is-primary">
+    <div class="dropdown-label"> 선택하세요 <span class="gn-icon is-small dropdown-icon">
+            <i class="fas fa-angle-down"></i>
+        </span>
+    </div>
+    <div class="dropdown-items">
+        <ul>
+            <li class="dropdown-item">아이템 1</li>
+            <li class="dropdown-item">아이템 2</li>
+            <li class="dropdown-item">아이템 3</li>
+        </ul>
+        <ul>
+            <li class="dropdown-item">아이템 4</li>
+            <li class="dropdown-item is-active">아이템 제목이 길어집니다.4-1</li>
+            <li class="dropdown-item">아이템 4-2</li>
+        </ul>
+    </div>
+</div></div>
+<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-dropdown<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-label<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    선택하세요
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-small dropdown-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-items<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>ul</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>아이템 1<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>아이템 2<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>아이템 3<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>ul</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>ul</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>아이템 4<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item is-active<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>아이템 4-1<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>아이템 4-2<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>ul</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-dropdown is-mono<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-label<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    선택하세요
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-small dropdown-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-items<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>ul</span><span class="token punctuation" >></span></span>
@@ -2157,16 +2645,19 @@
 <h3 id="-">생성 옵션</h3>
 <div class="aigis-preview">
+  <select class="new-dropdown0" name="dropdown0">
+  </select>
   <select class="new-dropdown1" name="dropdown1">
   </select>
-  <select class="new-dropdown3" name="dropdown3">
+  <select class="new-dropdown2" name="dropdown2">
   </select>
-  <select class="new-dropdown4" name="dropdown4">
+  <select class="new-dropdown3" name="dropdown3">
   </select>
-  <select class="new-dropdown2" name="dropdown2">
+  <select class="new-dropdown4" name="dropdown4">
     <option value="item1">항목1</option>
     <option value="item2">항목2</option>
     <option value="item3">항목3은 텍스트가 길어집니다.</option>
@@ -2174,18 +2665,22 @@
     <option value="item5">항목5</option>
   </select>
 </div>
-<pre><code class="language-ejs">  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown1<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown1<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+<pre><code class="language-ejs">  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown0<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown0<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>select</span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown3<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown1<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown1<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>select</span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown4<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown2<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>select</span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown2<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown3<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>select</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown4<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>option</span> <span class="token attr-name" >value</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>item1<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목1<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>option</span><span class="token punctuation" >></span></span>
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>option</span> <span class="token attr-name" >value</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>item2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목2<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>option</span><span class="token punctuation" >></span></span>
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>option</span> <span class="token attr-name" >value</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>item3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목3은 텍스트가 길어집니다.<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>option</span><span class="token punctuation" >></span></span>
@@ -2193,16 +2688,29 @@
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>option</span> <span class="token attr-name" >value</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>item5<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목5<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>option</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>select</span><span class="token punctuation" >></span></span>
 </code></pre>
 <pre><code>  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'dropdown'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown0'</span><span class="token punctuation" >,</span>
+    onChange<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>val<span class="token punctuation" >,</span> txt<span class="token punctuation" >,</span> values<span class="token punctuation" >)</span> {
+      console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'선택된 값은 [ '</span> <span class="token operator" >+</span> val <span class="token operator" >+</span> <span class="token string" >' ]입니다.'</span><span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+    }<span class="token punctuation" >,</span>
+    width<span class="token punctuation" >:</span> <span class="token string" >'150px'</span><span class="token punctuation" >,</span>
+    data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'옵션 1'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'옵션 2'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'3'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'옵션 3'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'4'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'옵션 4'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'5'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'옵션 5'</span> }
+    <span class="token punctuation" >]</span>
+  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'dropdown'</span><span class="token punctuation" >,</span> {
     target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown1'</span><span class="token punctuation" >,</span>
-    className<span class="token punctuation" >:</span> <span class="token string" >'is-top'</span><span class="token punctuation" >,</span>
     onChange<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>val<span class="token punctuation" >,</span> txt<span class="token punctuation" >,</span> values<span class="token punctuation" >)</span>{
       console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'선택된 값은 [ '</span> <span class="token operator" >+</span> val <span class="token operator" >+</span> <span class="token string" >' ]입니다.'</span><span class="token punctuation" >)</span>
     }<span class="token punctuation" >,</span>
     width<span class="token punctuation" >:</span> <span class="token string" >'150px'</span><span class="token punctuation" >,</span>
     value<span class="token punctuation" >:</span> <span class="token string" >'item2,item5'</span><span class="token punctuation" >,</span>
-    type<span class="token punctuation" >:</span> <span class="token string" >'opened'</span><span class="token punctuation" >,</span>
     multiple<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
     data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
       { value<span class="token punctuation" >:</span> <span class="token string" >'item1'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목1'</span> }<span class="token punctuation" >,</span>
@@ -2215,32 +2723,7 @@
     <span class="token punctuation" >]</span>
   }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
   Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'dropdown'</span><span class="token punctuation" >,</span> {
-    target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown2'</span><span class="token punctuation" >,</span>
-    onChange<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>val<span class="token punctuation" >,</span> txt<span class="token punctuation" >)</span>{
-      console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'선택된 항목은 [ '</span> <span class="token operator" >+</span> txt <span class="token operator" >+</span> <span class="token string" >' ]입니다.'</span><span class="token punctuation" >)</span>
-    }<span class="token punctuation" >,</span>
-    textSets<span class="token punctuation" >:</span> {
-      selectText<span class="token punctuation" >:</span> <span class="token string" >'골라라'</span>
-    }<span class="token punctuation" >,</span>
-    value<span class="token punctuation" >:</span> <span class="token string" >'item2'</span><span class="token punctuation" >,</span>
-    hasSearch<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
-    color<span class="token punctuation" >:</span> <span class="token string" >'danger'</span>
-  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
-  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'dropdown'</span><span class="token punctuation" >,</span> {
-    target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown3'</span><span class="token punctuation" >,</span>
-    data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
-      { value<span class="token punctuation" >:</span> <span class="token string" >'item1'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목1'</span> }<span class="token punctuation" >,</span>
-      { value<span class="token punctuation" >:</span> <span class="token string" >'item2'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목2'</span> }<span class="token punctuation" >,</span>
-      { value<span class="token punctuation" >:</span> <span class="token string" >'item3'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목3'</span> }<span class="token punctuation" >,</span>
-      { value<span class="token punctuation" >:</span> <span class="token string" >'item4'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목4'</span> }<span class="token punctuation" >,</span>
-      { value<span class="token punctuation" >:</span> <span class="token string" >'item5'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목5'</span><span class="token punctuation" >,</span> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;p>&lt;strong>text&lt;/strong>가 있는 항목은 선택 시 &lt;u>text&lt;/u>로 대체됩니다.&lt;/p>'</span> }<span class="token punctuation" >,</span>
-      { value<span class="token punctuation" >:</span> <span class="token string" >'item6'</span><span class="token punctuation" >,</span> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;p>&lt;strong>text&lt;/strong>가 없는 항목은 &lt;u>선택&lt;/u>할 수 없습니다.&lt;/p>'</span> }
-    <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
-    width<span class="token punctuation" >:</span> <span class="token number" >150</span><span class="token punctuation" >,</span>
-    scrollHeight<span class="token punctuation" >:</span> <span class="token number" >100</span>
-  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
-  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'dropdown'</span><span class="token punctuation" >,</span> {
-    target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown4'</span><span class="token punctuation" >,</span>
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown2'</span><span class="token punctuation" >,</span>
     data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
       <span class="token punctuation" >[</span>
         { value<span class="token punctuation" >:</span> <span class="token string" >'item1'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'Group1-항목1'</span> }<span class="token punctuation" >,</span>
@@ -2252,6 +2735,32 @@
       <span class="token punctuation" >]</span>
     <span class="token punctuation" >]</span>
   }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'dropdown'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown3'</span><span class="token punctuation" >,</span>
+    data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >''</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> '<span class="token operator" >&amp;</span>lt<span class="token comment" spellcheck="true">;선택안함&amp;gt;' },</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'item1'</span><span class="token punctuation" >,</span> icon<span class="token punctuation" >:</span> <span class="token string" >'home'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목1'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'item2'</span><span class="token punctuation" >,</span> icon<span class="token punctuation" >:</span> <span class="token string" >'star'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목2'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'item3'</span><span class="token punctuation" >,</span> icon<span class="token punctuation" >:</span> <span class="token string" >'heart'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목3'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'item4'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목4'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'item5'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> '<span class="token operator" >&amp;</span>lt<span class="token comment" spellcheck="true">;항목5&amp;gt;', html: '&lt;p>&lt;strong>text&lt;/strong>가 있는 항목은 선택 시 &lt;u>text&lt;/u>로 대체됩니다.&lt;/p>' },</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'item6'</span><span class="token punctuation" >,</span> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;p>&lt;strong>text&lt;/strong>가 없는 항목은 &lt;u>선택&lt;/u>할 수 없습니다.&lt;/p>'</span> }
+    <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+    width<span class="token punctuation" >:</span> <span class="token number" >150</span><span class="token punctuation" >,</span>
+    scrollHeight<span class="token punctuation" >:</span> <span class="token number" >100</span>
+  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'dropdown'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown4'</span><span class="token punctuation" >,</span>
+    onChange<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>val<span class="token punctuation" >,</span> txt<span class="token punctuation" >)</span>{
+      console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'선택된 항목은 [ '</span> <span class="token operator" >+</span> txt <span class="token operator" >+</span> <span class="token string" >' ]입니다.'</span><span class="token punctuation" >)</span>
+    }<span class="token punctuation" >,</span>
+    textSets<span class="token punctuation" >:</span> {
+      selectText<span class="token punctuation" >:</span> <span class="token string" >'골라라'</span>
+    }<span class="token punctuation" >,</span>
+    value<span class="token punctuation" >:</span> <span class="token string" >'item2'</span><span class="token punctuation" >,</span>
+    hasSearch<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+    color<span class="token punctuation" >:</span> <span class="token string" >'danger'</span>
+  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
 </code></pre><table class="gn-table is-full is-border">
   <thead>
     <th colspan="2">name</th>
@@ -2267,17 +2776,28 @@
       <td>dropdown을 생성할 대상의 선택자(selector)</td>
     </tr>
     <tr>
-      <td>textSets</td>
+      <td rowspan="2">textSets</td>
       <td>selectText</td>
       <td>string</td>
+      <td></td>
       <td>&#39;선택하세요&#39;</td>
+    </tr>
+    <tr>
+      <td>searchText</td>
+      <td>string</td>
+      <td>&#39;search item&#39;</td>
       <td></td>
     </tr>
     <tr>
       <td colspan="2">data</td>
-      <td>array[{value: string|array, text: string, html: string}]</td>
-      <td></td>
+      <td>array[{value: string|array, text: string, html?: string, icon?:string}]</td>
       <td></td>
+      <td>
+        value: 항목 값<br/>
+        text: 옵션 텍스트<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 colspan="2">value</td>
@@ -2366,46 +2886,41 @@
       <td>선택 항목을 변경한다.</td>
     </tr>
     <tr>
-      <td>disable</td>
+      <td>disable()</td>
       <td>void</td>
       <td>Disabled 처리한다.</td>
     </tr>
     <tr>
-      <td>enable</td>
+      <td>enable()</td>
       <td>void</td>
       <td>Enabled 처리한다.</td>
     </tr>
   </tbody>
 </table>
-    </div>
-    <div class="aigis-module Growl">
-      <h2 class="aigis-module__heading" id="Growl">
-        Growl
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/components/growl.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module Growl">
+    <h2 class="aigis-module__heading" id="Growl">Growl</h2>
+    <div class="aigis-module__filepath">/scss/components/growl.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">기본 사용</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">기본 사용</h3>
 <div class="aigis-preview">
   <div class="gn-growl" style="width: 400px"> Non et elit ea Lorem. Sit dolor id irure cillum ad eu velit duis mollit proident ad et. Anim nisi culpa elit deserunt eiusmod. Pariatur anim ipsum sunt exercitation pariatur. Nulla laboris amet minim eu et. Elit aliquip amet anim elit non eu sit duis nulla. Laboris nulla laboris in officia eiusmod irure. </div>
 <div class="gn-growl is-primary" style="width: 500px"> Non et elit ea Lorem. Sit dolor id irure cillum ad eu velit duis mollit proident ad et. Anim nisi culpa elit deserunt eiusmod. Pariatur anim ipsum sunt exercitation pariatur. Nulla laboris amet minim eu et. Elit aliquip amet anim elit non eu sit duis nulla. Laboris nulla laboris in officia eiusmod irure. </div></div>
@@ -2537,41 +3052,36 @@
 </table>
-    </div>
-    <div class="aigis-module Message">
-      <h2 class="aigis-module__heading" id="Message">
-        Message
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/components/message.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module Message">
+    <h2 class="aigis-module__heading" id="Message">Message</h2>
+    <div class="aigis-module__filepath">/scss/components/message.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">기본 메세지 알림</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">기본 메세지 알림</h3>
 <p>-Text with icon / Text only 선택 사용 할 수 있다.</p>
 <div class="aigis-preview">
   <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. </p>
+    <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">
@@ -2596,13 +3106,19 @@
     <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></div>
 <pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-success has-arrange<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-normal<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-check<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span>Success! Your message has been sent successfully. <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span>Success! Your message has been sent successfully. <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>br</span><span class="token punctuation" >/></span></span> Success! Your message has been sent successfully. <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-warning has-arrange<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-normal<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
@@ -2628,6 +3144,13 @@
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-times<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-guide has-arrange<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-normal<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-info-circle<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span> 가이드 메시지 한글 폰드 테스트  Guide!<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 </code></pre>
 <h3 id="-">일반 메세지</h3>
 <div class="aigis-preview">
@@ -2656,52 +3179,166 @@
 <pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-success<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
   Success
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-warning<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  Warning
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-warning<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  Warning
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-danger<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  Danger
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-info<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  Info
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-cancel<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  Cancel
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-dark<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  Dark
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-link<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  Link
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-secondary<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  Secondary
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-mono<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  Mono
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+</code></pre>
+<h3 id="-">크기</h3>
+<div class="aigis-preview">
+  <div class="gn-message is-small"> Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing. </div>
+<div class="gn-message is-normal"> Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing. </div>
+<div class="gn-message is-medium"> Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing. </div>
+<div class="gn-message is-large"> Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing. </div></div>
+<pre><code class="language-html">
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-small<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing.
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-normal<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing.
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-medium<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing.
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-large<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing.
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+</code></pre>
+<h3 id="-">테두리 스타일</h3>
+<div class="aigis-preview">
+  <div class="gn-message is-success has-arrange is-border">
+    <span class="gn-icon is-normal">
+        <i class="fas fa-check"></i>
+    </span>
+    <p>Success! Your message has been sent successfully. </p>
+</div>
+<div class="gn-message is-warning has-arrange is-border">
+    <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 is-border">
+    <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 is-border">
+    <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-help has-arrange is-border">
+    <span class="gn-icon is-normal">
+        <i class="fas fa-info-circle"></i>
+    </span>
+    <p> Help Info! (icon+닫기)</p>
+    <span class="gn-icon is-close is-dark">
+        <i class="fas fa-times"></i>
+    </span>
+</div>
+<div class="gn-message is-help has-arrange is-border">
+    <span class="gn-icon is-normal">
+        <i class="fas fa-info-circle"></i>
+    </span>
+    <p> Help Info! (icon)</p>
+</div>
+<div class="gn-message is-cancel is-border"> Cancel </div>
+<div class="gn-message is-dark is-border"> Dark </div>
+<div class="gn-message is-link is-border"> Link </div>
+<div class="gn-message is-secondary is-border"> Secondary </div>
+<div class="gn-message is-mono is-border"> Mono </div></div>
+<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-success has-arrange is-border<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-normal<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-check<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span>Success! Your message has been sent successfully. <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-warning has-arrange is-border<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-normal<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-exclamation-circle<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span>Warning! There was a problem with your network connection.<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-close is-dark<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-times<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-danger has-arrange is-border<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-normal<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-exclamation-triangle<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span>Error! A problem has been occurred while submitting your data.<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-danger<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  Danger
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-info has-arrange is-border<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-normal<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-info-circle<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span>Info! Please read the comments carefully.<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-close is-dark<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-times<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-info<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  Info
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-help has-arrange is-border<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-normal<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-info-circle<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span> Help Info! (icon+닫기)<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-close is-dark<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-times<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-cancel<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-help has-arrange is-border<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-normal<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-info-circle<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span> Help Info! (icon)<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-cancel is-border<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
   Cancel
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-dark<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-dark is-border<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
   Dark
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-link<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-link is-border<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
   Link
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-secondary<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-secondary is-border<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
   Secondary
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-mono<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-mono is-border<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
   Mono
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 </code></pre>
-<h3 id="-">크기</h3>
-<div class="aigis-preview">
-  <div class="gn-message is-small"> Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing. </div>
-<div class="gn-message is-normal"> Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing. </div>
-<div class="gn-message is-medium"> Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing. </div>
-<div class="gn-message is-large"> Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing. </div></div>
-<pre><code class="language-html">
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-small<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing.
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-normal<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing.
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-medium<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing.
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message is-large<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing.
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-</code></pre>
 <h3 id="-">생성 옵션</h3>
 <div class="aigis-preview">
@@ -2714,7 +3351,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
 </code></pre>
 <pre><code>  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'message'</span><span class="token punctuation" >,</span> {
     target<span class="token punctuation" >:</span> <span class="token string" >'.page-message'</span><span class="token punctuation" >,</span>
-    textSets <span class="token punctuation" >:</span> {message<span class="token punctuation" >:</span> <span class="token string" >'메세지가 생성됩니다!'</span>}
+    textSets<span class="token punctuation" >:</span> { message<span class="token punctuation" >:</span> <span class="token string" >'메세지가 생성됩니다!&lt;br>잠시만 기다려주세요.'</span> }
   }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
 </code></pre><table class="gn-table is-full is-border">
   <thead>
@@ -2799,34 +3436,29 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
   </tbody>
 </table>
-    </div>
-    <div class="aigis-module Modal">
-      <h2 class="aigis-module__heading" id="Modal">
-        Modal
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/components/modal.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module Modal">
+    <h2 class="aigis-module__heading" id="Modal">Modal</h2>
+    <div class="aigis-module__filepath">/scss/components/modal.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">기본 사용</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">기본 사용</h3>
 <ul>
 <li>상태 클래스 (is-active)를 사용하여 토글한다.</li>
 <li>주색 (Primary Color), 보조색 (Secondary Color), 단색 (Mono) 사용</li>
@@ -2902,6 +3534,12 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
     onClick<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span>{
       Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'modal'</span><span class="token punctuation" >,</span> {
         textSets <span class="token punctuation" >:</span> { title<span class="token punctuation" >:</span> <span class="token string" >'새로운 모달'</span> }<span class="token punctuation" >,</span>
+        hasConfirm<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+        hasCancel<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+        height<span class="token punctuation" >:</span> <span class="token number" >600</span><span class="token punctuation" >,</span>
+        onConfirm<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span><span class="token punctuation" >)</span> {
+          console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'확인하였습니다.'</span><span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+        }<span class="token punctuation" >,</span>
         contents<span class="token punctuation" >:</span> `
           <span class="token operator" >&lt;</span>ul class<span class="token operator" >=</span><span class="token string" >"gn-list is-medium"</span><span class="token operator" >></span>
             <span class="token operator" >&lt;</span>li<span class="token operator" >></span>Ad nisi excepteur nostrud <span class="token keyword" >in</span><span class="token punctuation" >.</span><span class="token operator" >&lt;</span><span class="token operator" >/</span>li<span class="token operator" >></span>
@@ -2944,7 +3582,9 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
           <span class="token operator" >&lt;</span><span class="token operator" >/</span>tr<span class="token operator" >></span>
         <span class="token operator" >&lt;</span><span class="token operator" >/</span>table<span class="token operator" >></span>`<span class="token punctuation" >,</span>
         isModal<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
-        draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+        draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+        minimized<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+        resizable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
       }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
     }
   }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
@@ -2957,12 +3597,24 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
   </thead>
   <tbody>
     <tr>
-      <td>textSets</td>
+      <td rowspan="3">textSets</td>
       <td>title</td>
       <td>string</td>
       <td></td>
       <td>타이틀</td>
     </tr>
+    <tr>
+      <td>confirm</td>
+      <td>string</td>
+      <td>확인</td>
+      <td>확인버튼에 표기할 문구</td>
+    </tr>
+    <tr>
+      <td>cancel</td>
+      <td>string</td>
+      <td>취소</td>
+      <td>취소버튼에 표기할 문구</td>
+    </tr>
     <tr>
       <td colspan="2">width</td>
       <td>number</td>
@@ -2981,6 +3633,18 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>20px</td>
       <td>컨텐츠 영역(타이틀영역 제외) 여백</td>
     </tr>
+    <tr>
+      <td colspan="2">color</td>
+      <td>string</td>
+      <td></td>
+      <td>&#39;success&#39;,&#39;warning&#39;,&#39;danger&#39;,&#39;info&#39;,&#39;cancel&#39;,&#39;dark&#39;,&#39;link&#39;,&#39;trans&#39;,&#39;secondary&#39;,&#39;mono&#39;</td>
+    </tr>
+    <tr>
+      <td colspan="2">icon</td>
+      <td>string</td>
+      <td></td>
+      <td><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 colspan="2">isModal</td>
       <td>boolean</td>
@@ -3076,58 +3740,58 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>void</td>
       <td>modal 창을 표시한다.</td>
     </tr>
+    <tr>
+      <td>focus()</td>
+      <td>void</td>
+      <td>modal 창을 포커스한다.</td>
+    </tr>
   </tbody>
 </table>
-    </div>
-    <div class="aigis-module Picklist">
-      <h2 class="aigis-module__heading" id="Picklist">
-        Picklist
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/components/picklist.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module Picklist">
+    <h2 class="aigis-module__heading" id="Picklist">Picklist</h2>
+    <div class="aigis-module__filepath">/scss/components/picklist.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">기본 사용</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">기본 사용</h3>
 <div class="aigis-preview">
   <div class="gn-picklist">
     <div class="picklist-source">
         <div class="picklist-controls gn-control is-small has-arrange is-vertical is-center">
-            <button type="button" class="gn-button">
+            <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">
+            <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">
+            <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">
+            <button type="button" class="gn-button is-outline">
                 <span class="gn-icon">
                     <i class="fas fa-angle-double-down"></i>
                 </span>
@@ -3152,22 +3816,22 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         </div>
     </div>
     <div class="picklist-controls gn-control is-small has-arrange is-vertical is-center">
-        <button type="button" class="gn-button">
+        <button type="button" class="gn-button is-outline">
             <span class="gn-icon">
                 <i class="fas fa-angle-double-right"></i>
             </span>
         </button>
-        <button type="button" class="gn-button">
+        <button type="button" class="gn-button is-outline">
             <span class="gn-icon">
                 <i class="fas fa-angle-right"></i>
             </span>
         </button>
-        <button type="button" class="gn-button">
+        <button type="button" class="gn-button is-outline">
             <span class="gn-icon">
                 <i class="fas fa-angle-left"></i>
             </span>
         </button>
-        <button type="button" class="gn-button">
+        <button type="button" class="gn-button is-outline">
             <span class="gn-icon">
                 <i class="fas fa-angle-double-left"></i>
             </span>
@@ -3175,22 +3839,22 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
     </div>
     <div class="picklist-target">
         <div class="picklist-controls gn-control is-small has-arrange is-vertical is-center">
-            <button type="button" class="gn-button">
+            <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">
+            <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">
+            <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">
+            <button type="button" class="gn-button is-outline">
                 <span class="gn-icon">
                     <i class="fas fa-angle-double-down"></i>
                 </span>
@@ -3208,22 +3872,22 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
 <pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-picklist<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>picklist-source<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>picklist-controls gn-control is-small has-arrange is-vertical is-center<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
           <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-up<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
           <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-up<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
           <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
           <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
@@ -3248,22 +3912,22 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>picklist-controls gn-control is-small has-arrange is-vertical is-center<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-right<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-right<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-left<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-left<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
@@ -3271,22 +3935,22 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>picklist-target<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>picklist-controls gn-control is-small has-arrange is-vertical is-center<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
           <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-up<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
           <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-up<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
           <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
           <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
@@ -3306,22 +3970,22 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
   <div class="gn-picklist is-vertical" style="height: 400px; width: 550px">
     <div class="picklist-source">
         <div class="picklist-controls gn-control is-small has-arrange is-vertical is-center">
-            <button type="button" class="gn-button">
+            <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">
+            <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">
+            <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">
+            <button type="button" class="gn-button is-outline">
                 <span class="gn-icon">
                     <i class="fas fa-angle-double-down"></i>
                 </span>
@@ -3342,22 +4006,22 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         </div>
     </div>
     <div class="picklist-controls gn-control is-small has-arrange is-center">
-        <button type="button" class="gn-button">
+        <button type="button" class="gn-button is-outline">
             <span class="gn-icon">
                 <i class="fas fa-angle-double-down"></i>
             </span>
         </button>
-        <button type="button" class="gn-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">
+        <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">
+        <button type="button" class="gn-button is-outline">
             <span class="gn-icon">
                 <i class="fas fa-angle-double-up"></i>
             </span>
@@ -3365,22 +4029,22 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
     </div>
     <div class="picklist-target">
         <div class="picklist-controls gn-control is-small has-arrange is-vertical is-center">
-            <button type="button" class="gn-button">
+            <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">
+            <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">
+            <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">
+            <button type="button" class="gn-button is-outline">
                 <span class="gn-icon">
                     <i class="fas fa-angle-double-down"></i>
                 </span>
@@ -3398,22 +4062,22 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
 <pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-picklist is-vertical<span class="token punctuation" >"</span></span><span class="token style-attr language-css" ><span class="token attr-name" > <span class="token attr-name" >style</span></span><span class="token punctuation" >="</span><span class="token attr-value" ><span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >400</span>px<span class="token punctuation" >;</span> <span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >550</span>px</span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>picklist-source<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>picklist-controls gn-control is-small has-arrange is-vertical is-center<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
           <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-up<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
           <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-up<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
           <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
           <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
@@ -3434,22 +4098,22 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>picklist-controls gn-control is-small has-arrange is-center<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-up<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-up<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
@@ -3457,22 +4121,22 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>picklist-target<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>picklist-controls gn-control is-small has-arrange is-vertical is-center<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
           <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-up<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
           <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-up<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
           <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
       <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
           <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
         <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
@@ -3559,7 +4223,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>target 항목 배열</td>
     </tr>
     <tr>
-      <td rowspan="2">textSets</td>
+      <td rowspan="3">textSets</td>
       <td>sourceCaption</td>
       <td>string</td>
       <td></td>
@@ -3571,6 +4235,12 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td></td>
       <td>target 항목 캡션</td>
     </tr>
+    <tr>
+      <td>searchText</td>
+      <td>string</td>
+      <td>&#39;search item&#39;</td>
+      <td></td>
+    </tr>
     <tr>
       <td colspan="2">orderable</td>
       <td>string, boolean</td>
@@ -3601,6 +4271,12 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>false</td>
       <td>target 항목 검색기능 활성화 여부</td>
     </tr>
+    <tr>
+      <td colspan="2">disabled</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>Disable 여부</td>
+    </tr>
     <tr>
       <td colspan="2">onChange</td>
       <td>function(source, target)</td>
@@ -3647,37 +4323,47 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>array</td>
       <td>target 항목의 배열을 반환한다.</td>
     </tr>
+    <tr>
+      <td>getValue()</td>
+      <td>string</td>
+      <td>target 항목의 value를 콤마(,)로 구분하여 반환한다.</td>
+    </tr>
+    <tr>
+      <td>disable()</td>
+      <td>void</td>
+      <td>Disabled 처리한다.</td>
+    </tr>
+    <tr>
+      <td>enable()</td>
+      <td>void</td>
+      <td>Enabled 처리한다.</td>
+    </tr>
   </tbody>
 </table>
-    </div>
-    <div class="aigis-module Progressbar">
-      <h2 class="aigis-module__heading" id="Progressbar">
-        Progressbar
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/components/progressbar.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module Progressbar">
+    <h2 class="aigis-module__heading" id="Progressbar">Progressbar</h2>
+    <div class="aigis-module__filepath">/scss/components/progressbar.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">기본 사용</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">기본 사용</h3>
 <div class="aigis-preview">
   <div class="gn-progressbar is-primary">
     <span class="gauge" style="width: 30%"></span>
@@ -3837,34 +4523,29 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
 </table>
-    </div>
-    <div class="aigis-module Tab">
-      <h2 class="aigis-module__heading" id="Tab">
-        Tab
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/components/tab.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module Tab">
+    <h2 class="aigis-module__heading" id="Tab">Tab</h2>
+    <div class="aigis-module__filepath">/scss/components/tab.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">기본 사용</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">기본 사용</h3>
 <div class="aigis-preview">
   <div class="gn-tab">
     <ul>
@@ -4013,6 +4694,14 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         <li><a href="#fd">Front-end</a></li>
         <li><a href="#gnui">GNUI</a></li>
     </ul>
+</div>
+<div class="gn-tab is-vertical is-medium">
+    <ul>
+        <li class="is-active"><a href="#genians">Genians</a></li>
+        <li><a href="#rndcenter">R&amp;D Center</a></li>
+        <li><a href="#fd">Front-end</a></li>
+        <li><a href="#gnui">GNUI</a></li>
+    </ul>
 </div></div>
 <pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-tab is-full<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
@@ -4039,6 +4728,14 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#gnui<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>GNUI<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>ul</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-tab is-vertical is-medium<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>ul</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>is-active<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#genians<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Genians<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#rndcenter<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>R<span class="token entity" title="&amp;">&amp;amp;</span>D Center<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#fd<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Front-end<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#gnui<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>GNUI<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>ul</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 </code></pre>
 <h3 id="-">생성 옵션</h3>
 <div class="aigis-preview">
@@ -4118,7 +4815,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td colspan="2">align</td>
       <td>string</td>
       <td>full</td>
-      <td>&#39;full&#39;, &#39;left&#39;,&#39;right&#39;</td>
+      <td>&#39;full&#39;, &#39;left&#39;,&#39;right&#39;, &#39;vertical&#39;</td>
     </tr>
     <tr>
       <td colspan="2">style</td>
@@ -4132,6 +4829,12 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td></td>
       <td>탭 전환 시 발생 이벤트 (idx: 활성화 탭 인덱스)</td>
     </tr>
+    <tr>
+      <td colspan="2">disabled</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>비활성화 여부</td>
+    </tr>
   </tbody>
 </table>
@@ -4148,38 +4851,43 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>void</td>
       <td>index에 해당하는 탭을 활성화한다.</td>
     </tr>
+    <tr>
+      <td>disable()</td>
+      <td>void</td>
+      <td>Disabled 처리한다.</td>
+    </tr>
+    <tr>
+      <td>enable()</td>
+      <td>void</td>
+      <td>Enabled 처리한다.</td>
+    </tr>
   </tbody>
 </table>
-    </div>
-    <div class="aigis-module Tooltip">
-      <h2 class="aigis-module__heading" id="Tooltip">
-        Tooltip
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/components/tooltip.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module Tooltip">
+    <h2 class="aigis-module__heading" id="Tooltip">Tooltip</h2>
+    <div class="aigis-module__filepath">/scss/components/tooltip.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">기본사용</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">기본사용</h3>
 <div class="aigis-preview">
   <div class="gn-tooltip is-left is-relative">
     <span>Popper!!!</span>
@@ -4235,6 +4943,64 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 </code></pre>
+<h3 id="-">색상</h3>
+<div class="aigis-preview">
+  <div class="gn-tooltip is-success is-left is-relative">
+    <span>Success</span>
+</div>
+<div class="gn-tooltip is-warning is-bottom is-relative">
+    <span>Warning</span>
+</div>
+<div class="gn-tooltip is-danger is-top is-relative">
+    <span>Danger</span>
+</div>
+<div class="gn-tooltip is-info is-right is-relative">
+    <span>Info</span>
+</div>
+<div class="gn-tooltip is-cancel is-left-bottom is-relative">
+    <span>Cancel</span>
+</div>
+<div class="gn-tooltip is-dark is-right-top is-relative">
+    <span>Dark</span>
+</div>
+<div class="gn-tooltip is-link is-top is-relative">
+    <span>Link</span>
+</div>
+<div class="gn-tooltip is-secondary is-bottom is-relative">
+    <span>Secondary</span>
+</div>
+<div class="gn-tooltip is-mono is-right is-relative">
+    <span>Mono</span>
+</div></div>
+<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-tooltip is-success is-left is-relative<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span><span class="token punctuation" >></span></span>Success<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-tooltip is-warning is-bottom is-relative<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span><span class="token punctuation" >></span></span>Warning<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-tooltip is-danger is-top is-relative<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span><span class="token punctuation" >></span></span>Danger<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-tooltip is-info is-right is-relative<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span><span class="token punctuation" >></span></span>Info<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-tooltip is-cancel is-left-bottom is-relative<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span><span class="token punctuation" >></span></span>Cancel<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-tooltip is-dark is-right-top is-relative<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span><span class="token punctuation" >></span></span>Dark<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-tooltip is-link is-top is-relative<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span><span class="token punctuation" >></span></span>Link<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-tooltip is-secondary is-bottom is-relative<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span><span class="token punctuation" >></span></span>Secondary<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-tooltip is-mono is-right is-relative<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span><span class="token punctuation" >></span></span>Mono<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+</code></pre>
 <h3 id="-">생성 옵션</h3>
 <div class="aigis-preview">
@@ -4279,6 +5045,28 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       contents<span class="token punctuation" >:</span> <span class="token string" >'right 툴팁'</span><span class="token punctuation" >,</span>
       direction<span class="token punctuation" >:</span> <span class="token string" >'right'</span>
     }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+    Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'tooltip'</span><span class="token punctuation" >,</span> {
+      target<span class="token punctuation" >:</span> <span class="token string" >'.has-tooltip5'</span><span class="token punctuation" >,</span>
+      contents<span class="token punctuation" >:</span> <span class="token string" >'left top 툴팁'</span><span class="token punctuation" >,</span>
+      direction<span class="token punctuation" >:</span> <span class="token string" >'left-top'</span><span class="token punctuation" >,</span>
+      width<span class="token punctuation" >:</span> <span class="token string" >'200px'</span>
+    }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+    Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'tooltip'</span><span class="token punctuation" >,</span> {
+      target<span class="token punctuation" >:</span> <span class="token string" >'.has-tooltip6'</span><span class="token punctuation" >,</span>
+      contents<span class="token punctuation" >:</span> <span class="token string" >'left bottom 툴팁'</span><span class="token punctuation" >,</span>
+      direction<span class="token punctuation" >:</span> <span class="token string" >'left-bottom'</span>
+    }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+    Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'tooltip'</span><span class="token punctuation" >,</span> {
+      target<span class="token punctuation" >:</span> <span class="token string" >'.has-tooltip7'</span><span class="token punctuation" >,</span>
+      contents<span class="token punctuation" >:</span>
+        '<span class="token operator" >&lt;</span><span class="token operator" >/</span>b<span class="token operator" >></span>자주 사용되는 정규식 특수문자<span class="token operator" >&lt;</span><span class="token operator" >/</span>b<span class="token operator" >></span><span class="token operator" >&lt;</span>br<span class="token operator" >/</span><span class="token operator" >></span><span class="token operator" >&lt;</span>br<span class="token operator" >/</span><span class="token operator" >></span><span class="token punctuation" >.</span> 임의의 한 문자 예<span class="token punctuation" >)</span> <span class="token punctuation" >.</span><span class="token operator" >*</span> 모든문자열<span class="token operator" >&lt;</span>br<span class="token operator" >/</span><span class="token operator" >></span><span class="token operator" >^</span> 문자열 시작 예<span class="token punctuation" >)</span> <span class="token operator" >^</span>Genians Genians으로 시작하는 문자열<span class="token operator" >&lt;</span>br<span class="token operator" >/</span><span class="token operator" >></span>$ 문자열 끝 예<span class="token punctuation" >)</span> Genians$ Genians로 끝나는 문자열<span class="token operator" >&lt;</span>br<span class="token operator" >/</span><span class="token operator" >></span><span class="token punctuation" >[</span> 문자집합 시작 표시 예<span class="token punctuation" >)</span> <span class="token punctuation" >[</span>ab<span class="token punctuation" >]</span> a 또는 b문자가 포함되는 문자열<span class="token operator" >&lt;</span>br<span class="token operator" >/</span><span class="token operator" >></span><span class="token punctuation" >]</span> 문자집합 끝 표시<span class="token operator" >&lt;</span>br<span class="token operator" >/</span><span class="token operator" >></span><span class="token punctuation" >(</span> 문자열 집합 시작 예<span class="token punctuation" >)</span> <span class="token function" >a</span><span class="token punctuation" >(</span>b<span class="token punctuation" >)</span>|<span class="token punctuation" >(</span>c<span class="token punctuation" >)</span>d abd 또는 acd를 의미<span class="token operator" >&lt;</span>br<span class="token operator" >/</span><span class="token operator" >></span> 문자열 집합 끝<span class="token operator" >&lt;</span>br<span class="token operator" >/</span><span class="token operator" >></span>| 또는<span class="token punctuation" >(</span><span class="token operator" >OR</span><span class="token punctuation" >)</span><span class="token operator" >&lt;</span>br<span class="token operator" >/</span><span class="token operator" >></span> 특수한 기능을 하는 다음 문자표시 예<span class="token punctuation" >)</span> <span class="token punctuation" >.</span> Period 문자표시<span class="token operator" >&lt;</span>br<span class="token operator" >/</span><span class="token operator" >></span>n<span class="token operator" >*</span> <span class="token number" >0</span>개 이상의 n문자<span class="token operator" >&lt;</span>br<span class="token operator" >/</span><span class="token operator" >></span>n<span class="token operator" >+</span> <span class="token number" >1</span>개 이상의 n문자<span class="token operator" >&lt;</span>br<span class="token operator" >/</span><span class="token operator" >></span><span class="token operator" >&amp;</span>#<span class="token number" >123</span><span class="token comment" spellcheck="true">;n&amp;#125; 앞문자가 n개 예) ab&amp;#123;2&amp;#125;c abbc를 의미&lt;br/>&amp;#123;n,&amp;#125; 앞문자가 n개 이상&lt;br/>&amp;#123;,m&amp;#125; 앞문자가 m개 이하&lt;br/>&amp;#123;n,m&amp;#125; 앞문자가 n개 이상 m개 이하&lt;br/>',</span>
+      direction<span class="token punctuation" >:</span> <span class="token string" >'right-top'</span>
+    }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+    Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'tooltip'</span><span class="token punctuation" >,</span> {
+      target<span class="token punctuation" >:</span> <span class="token string" >'.has-tooltip8'</span><span class="token punctuation" >,</span>
+      contents<span class="token punctuation" >:</span> <span class="token string" >'&lt;br/>right bottom 툴팁&lt;br/>'</span><span class="token punctuation" >,</span>
+      direction<span class="token punctuation" >:</span> <span class="token string" >'right-bottom'</span>
+    }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
 </code></pre><table class="gn-table is-full is-border">
   <thead>
     <th colspan="2">name</th>
@@ -4311,6 +5099,12 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td></td>
       <td>툴팁에 표시할 문구 또는 html 텍스트</td>
     </tr>
+    <tr>
+      <td colspan="2">color</td>
+      <td>string</td>
+      <td></td>
+      <td>&#39;success&#39;,&#39;warning&#39;,&#39;danger&#39;,&#39;info&#39;,&#39;cancel&#39;,&#39;dark&#39;,&#39;link&#39;,&#39;trans&#39;,&#39;secondary&#39;,&#39;mono&#39;</td>
+    </tr>
   </tbody>
 </table>
@@ -4340,34 +5134,29 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
   </tbody>
 </table>
-    </div>
-    <div class="aigis-module Tree">
-      <h2 class="aigis-module__heading" id="Tree">
-        Tree
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/components/tree.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module Tree">
+    <h2 class="aigis-module__heading" id="Tree">Tree</h2>
+    <div class="aigis-module__filepath">/scss/components/tree.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">생성 옵션</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">생성 옵션</h3>
 <div class="aigis-preview">
 <div style="display: flex">
@@ -4486,6 +5275,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <br><b>selected</b>: true 인 경우 체크박스 체크된 상태로 표시
       <br><b>opened</b>: true 인 경우 하위항목이 열린상태로 표시
       <br><b>actived</b>: true 인 경우 선택된 상태로 표시
+      <br><b>disabled</b>: true 인 경우 선택할 수 없는 항목으로 표시
       <br><b>icon</b>: 기본 트리 아이콘이 있는 경우(showIcon: true) HTMLElement String 을 통해 사용자 정의 아이콘으로 변경
       <br><b>hideIcon</b>: 기본 트리 아이콘이 있는 경우(showIcon: true) 아이콘 숨김 처리</td></td>
     </tr>
@@ -4609,37 +5399,37 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>any</td>
       <td>index에 해당하는 아이템을 리턴한다</td>
     </tr>
+    <tr>
+      <td>filter(keyword: string)</td>
+      <td>any</td>
+      <td>keyword를 포함한 아이템만 표시한다</td>
+    </tr>
   </tbody>
 </table>
-    </div>
-    <div class="aigis-module Button">
-      <h2 class="aigis-module__heading" id="Button">
-        Button
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/controls/button.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module Button">
+    <h2 class="aigis-module__heading" id="Button">Button</h2>
+    <div class="aigis-module__filepath">/scss/controls/button.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">기본 사용</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">기본 사용</h3>
 <ul>
 <li>사용 태그 :  <code>a</code>, <code>button</code>, <code>input[submit]</code>, <code>input[reset]</code></li>
 </ul>
@@ -4650,7 +5440,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
 <button type="button" class="gn-button is-dark">수정</button>
 <button type="button" class="gn-button">목록</button>
 <button type="button" class="gn-button is-cancel">취소</button>
-<button type="button" class="gn-button is-outline is-trans">확인</button></div>
+<button type="button" class="gn-button is-outline">확인</button></div>
 <pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>확인<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-dark<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>확인<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
@@ -4658,7 +5448,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-dark<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>수정<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>목록<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-cancel<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>취소<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline is-trans<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>확인<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>확인<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
 </code></pre>
 <h3 id="buttons-with-icons">Buttons with icons</h3>
 <ul>
@@ -4768,13 +5558,15 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
 <button type="button" class="gn-button is-focus">Focus</button>
 <button type="button" class="gn-button is-active">Active</button>
 <button type="button" class="gn-button is-disabled">Disabled</button>
-<button type="button" class="gn-button is-invalid">Invalid</button></div>
+<button type="button" class="gn-button is-invalid">Invalid</button>
+<button type="button" class="gn-button is-loading">Loading</button></div>
 <pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-hover<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Hover<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-focus<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Focus<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-active<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Active<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-disabled<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Disabled<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-invalid<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Invalid<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-loading<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Loading<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
 </code></pre>
 <h3 id="-">확장</h3>
 <ul>
@@ -4880,6 +5672,12 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td></td>
       <td>버튼에 표기할 문구</td>
     </tr>
+    <tr>
+      <td colspan="2">disabled</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>버튼 비활성화 여부</td>
+    </tr>
     <tr>
       <td colspan="2">color</td>
       <td>string</td>
@@ -4920,37 +5718,42 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>void</td>
       <td>버튼을 클릭을 동작한다.</td>
     </tr>
+    <tr>
+      <td>disable()</td>
+      <td>void</td>
+      <td>Disabled 처리한다.</td>
+    </tr>
+    <tr>
+      <td>enable()</td>
+      <td>void</td>
+      <td>Enabled 처리한다.</td>
+    </tr>
   </tbody>
 </table>
-    </div>
-    <div class="aigis-module MenuButton">
-      <h2 class="aigis-module__heading" id="MenuButton">
-        MenuButton
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/controls/button.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module MenuButton">
+    <h2 class="aigis-module__heading" id="MenuButton">MenuButton</h2>
+    <div class="aigis-module__filepath">/scss/controls/button.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">생성 옵션</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">생성 옵션</h3>
 <div class="aigis-preview">
   <button name="new-button"></button>
@@ -5029,6 +5832,18 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td></td>
       <td>&#39;simple&#39;,&#39;borderless&#39;</td>
     </tr>
+    <tr>
+      <td colspan="2">align</td>
+      <td>string</td>
+      <td>&#39;center&#39;</td>
+      <td>&#39;center&#39;,&#39;left&#39;,&#39;right&#39;</td>
+    </tr>
+    <tr>
+      <td colspan="2">width</td>
+      <td>string</td>
+      <td>auto</td>
+      <td>&#39;200px&#39;</td>
+    </tr>
     <tr>
       <td colspan="2">icon</td>
       <td>string</td>
@@ -5050,41 +5865,53 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
   </tbody>
 </table>
+<h3 id="-">메소드</h3>
+<table class="gn-table is-full is-border">
+  <thead>
+    <th>name</th>
+    <th>return</th>
+    <th>description</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>buttonText(text: string)</td>
+      <td>void</td>
+      <td>버튼명을 변경한다.</td>
+    </tr>
+  </tbody>
+</table>
-    </div>
-    <div class="aigis-module SelectButton">
-      <h2 class="aigis-module__heading" id="SelectButton">
-        SelectButton
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/controls/button.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module SelectButton">
+    <h2 class="aigis-module__heading" id="SelectButton">SelectButton</h2>
+    <div class="aigis-module__filepath">/scss/controls/button.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">생성 옵션</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">생성 옵션</h3>
 <div class="aigis-preview">
   <div class="new-selectButtons"></div>
+  <div class="new-selectButtons-v"></div>
 </div>
 <pre><code class="language-ejs">  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-selectButtons<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-selectButtons-v<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 </code></pre>
 <pre><code>  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'selectbutton'</span><span class="token punctuation" >,</span> {
     target<span class="token punctuation" >:</span> <span class="token string" >'.new-selectButtons'</span><span class="token punctuation" >,</span>
@@ -5107,6 +5934,29 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       value<span class="token punctuation" >:</span> <span class="token string" >'menu4'</span>
     }<span class="token punctuation" >]</span>
   }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'selectbutton'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-selectButtons-v'</span><span class="token punctuation" >,</span>
+    size<span class="token punctuation" >:</span> <span class="token string" >'normal'</span><span class="token punctuation" >,</span>
+    value<span class="token punctuation" >:</span> <span class="token string" >'menu1,menu2'</span><span class="token punctuation" >,</span>
+    multiple<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+    align<span class="token punctuation" >:</span> <span class="token string" >'vertical'</span><span class="token punctuation" >,</span>
+    onChange<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>option<span class="token punctuation" >)</span>{
+      console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'선택된 옵션은 '</span> <span class="token operator" >+</span> option <span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+    }<span class="token punctuation" >,</span>
+    data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
+      text<span class="token punctuation" >:</span> <span class="token string" >'menu1'</span><span class="token punctuation" >,</span>
+      value<span class="token punctuation" >:</span> <span class="token string" >'menu1'</span>
+    }<span class="token punctuation" >,</span>{
+      text<span class="token punctuation" >:</span> <span class="token string" >'menu2'</span><span class="token punctuation" >,</span>
+      value<span class="token punctuation" >:</span> <span class="token string" >'menu2'</span>
+    }<span class="token punctuation" >,</span>{
+      text<span class="token punctuation" >:</span> <span class="token string" >'menu3'</span><span class="token punctuation" >,</span>
+      value<span class="token punctuation" >:</span> <span class="token string" >'menu3'</span>
+    }<span class="token punctuation" >,</span>{
+      text<span class="token punctuation" >:</span> <span class="token string" >'menu4'</span><span class="token punctuation" >,</span>
+      value<span class="token punctuation" >:</span> <span class="token string" >'menu4'</span>
+    }<span class="token punctuation" >]</span>
+  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
 </code></pre><table class="gn-table is-full is-border">
   <thead>
     <th colspan="2">name</th>
@@ -5127,12 +5977,30 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td></td>
       <td>&#39;small&#39;,&#39;normal&#39;,&#39;medium&#39;,&#39;large&#39;</td>
     </tr>
+    <tr>
+      <td colspan="2">align</td>
+      <td>string</td>
+      <td>horizontal</td>
+      <td>&#39;horizontal&#39;, &#39;vertical&#39;</td>
+    </tr>
     <tr>
       <td colspan="2">data</td>
       <td>Array[{text, value, icon}]</td>
       <td></td>
       <td>옵션 목록</td>
     </tr>
+    <tr>
+      <td colspan="2">disabled</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>버튼 비활성화 여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">multiple</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>다중선택 가능 여부</td>
+    </tr>
     <tr>
       <td colspan="2">onChange</td>
       <td>function(value, text)</td>
@@ -5155,49 +6023,67 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>void</td>
       <td>버튼 선택값을 변경한다.</td>
     </tr>
+    <tr>
+      <td>getValue()</td>
+      <td>string</td>
+      <td>선택된 값을 반환한다.</td>
+    </tr>
+    <tr>
+      <td>disable()</td>
+      <td>void</td>
+      <td>Disabled 처리한다.</td>
+    </tr>
+    <tr>
+      <td>enable()</td>
+      <td>void</td>
+      <td>Enabled 처리한다.</td>
+    </tr>
   </tbody>
 </table>
-    </div>
-    <div class="aigis-module Colorpicker">
-      <h2 class="aigis-module__heading" id="Colorpicker">
-        Colorpicker
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/controls/colorpicker.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module Colorpicker">
+    <h2 class="aigis-module__heading" id="Colorpicker">Colorpicker</h2>
+    <div class="aigis-module__filepath">/scss/controls/colorpicker.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">생성 옵션</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">생성 옵션</h3>
 <div class="aigis-preview">
   <input type="text" class="colorPicker" />
   <input type="text" class="colorPicker2" />
+  <input type="text" class="colorPicker3" />
+  <input type="text" class="colorPicker4" />
 </div>
 <pre><code class="language-ejs">  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>text<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>colorPicker<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>text<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>colorPicker2<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>text<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>colorPicker3<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>text<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>colorPicker4<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
 </code></pre>
 <pre><code>  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'colorpicker'</span><span class="token punctuation" >,</span> {
     target<span class="token punctuation" >:</span> <span class="token string" >'.colorPicker'</span><span class="token punctuation" >,</span>
-    size<span class="token punctuation" >:</span> <span class="token string" >'large'</span>
+    size<span class="token punctuation" >:</span> <span class="token string" >'large'</span><span class="token punctuation" >,</span>
+    readonly<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
+    onChange<span class="token punctuation" >:</span> color <span class="token operator" >=</span><span class="token operator" >></span> {
+      console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'color'</span><span class="token punctuation" >,</span> color<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+    }
   }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
   Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'colorpicker'</span><span class="token punctuation" >,</span> {
     target<span class="token punctuation" >:</span> <span class="token string" >'.colorPicker2'</span><span class="token punctuation" >,</span>
@@ -5229,6 +6115,24 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td></td>
       <td>초기 색상 값</td>
     </tr>
+    <tr>
+      <td colspan="2">editable</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>색상 입력 가능여부 (true 설정 후 팔레트를 보여줄 때 입력받은 색상이 올바르지 않은 헥사코드인 경우 기본색상으로 변경)</td>
+    </tr>
+    <tr>
+      <td colspan="2">readonly</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>읽기전용 여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">disabled</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>비활성화 여부</td>
+    </tr>
     <tr>
       <td colspan="2">onChange</td>
       <td>function</td>
@@ -5238,34 +6142,60 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
   </tbody>
 </table>
-    </div>
-    <div class="aigis-module Datepicker">
-      <h2 class="aigis-module__heading" id="Datepicker">
-        Datepicker
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/controls/datepicker.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+<h3 id="-">메소드</h3>
+<table class="gn-table is-full is-border">
+  <thead>
+    <th>name</th>
+    <th>return</th>
+    <th>description</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>change(color)</td>
+      <td>void</td>
+      <td>컬러값을 변경한다.</td>
+    </tr>
+    <tr>
+      <td>getValue()</td>
+      <td>string</td>
+      <td>설정된 컬러값을 반환한다.</td>
+    </tr>
+    <tr>
+      <td>disable()</td>
+      <td>void</td>
+      <td>Disabled 처리한다.</td>
+    </tr>
+    <tr>
+      <td>enable()</td>
+      <td>void</td>
+      <td>Enabled 처리한다.</td>
+    </tr>
+  </tbody>
+</table>
+  </div>
+  <div class="aigis-module Datepicker">
+    <h2 class="aigis-module__heading" id="Datepicker">Datepicker</h2>
+    <div class="aigis-module__filepath">/scss/controls/datepicker.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">생성 옵션</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">생성 옵션</h3>
 <div class="aigis-preview">
 <input type="text" class="new-datepicker" />
@@ -5303,12 +6233,25 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td></td>
       <td>datepicker 생성 타겟</td>
     </tr>
+    <tr>
+      <td>textSets</td>
+      <td>placeholder</td>
+      <td>string</td>
+      <td>&#39;pick a date&#39;</td>
+      <td></td>
+    </tr>
     <tr>
       <td colspan="2">type</td>
       <td>string</td>
       <td>date</td>
       <td>picker type : date | datetime</td>
     </tr>
+    <tr>
+      <td colspan="2">size</td>
+      <td>string</td>
+      <td></td>
+      <td>&#39;small&#39;,&#39;normal&#39;,&#39;medium&#39;,&#39;large&#39;</td>
+    </tr>
     <tr>
       <td colspan="2">value</td>
       <td>string | Date</td>
@@ -5327,6 +6270,18 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>true</td>
       <td>달력 아이콘 표시여부</td>
     </tr>
+    <tr>
+      <td colspan="2">disabled</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>Disable 여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">readonly</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>읽기전용 여부 </td>
+    </tr>
     <tr>
       <td colspan="2">min</td>
       <td>string</td>
@@ -5366,37 +6321,42 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>Date</td>
       <td>날짜 값을 타임스탬프 형식으로 반환한다.</td>
     </tr>
+    <tr>
+      <td>disable()</td>
+      <td>void</td>
+      <td>Disabled 처리한다.</td>
+    </tr>
+    <tr>
+      <td>enable()</td>
+      <td>void</td>
+      <td>Enabled 처리한다.</td>
+    </tr>
   </tbody>
 </table>
-    </div>
-    <div class="aigis-module MultiText">
-      <h2 class="aigis-module__heading" id="MultiText">
-        MultiText
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/controls/multitext.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module MultiText">
+    <h2 class="aigis-module__heading" id="MultiText">MultiText</h2>
+    <div class="aigis-module__filepath">/scss/controls/multitext.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">생성 옵션</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">생성 옵션</h3>
 <div class="aigis-preview">
 <div class="default-multitext">
@@ -5480,6 +6440,12 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
       <td></td>
       <td>값 변경 시 발생 이벤트</td>
     </tr>
+    <tr>
+      <td colspan="2">disabled</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>비활성화 여부</td>
+    </tr>
   </tbody>
 </table>
@@ -5497,37 +6463,42 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
       <td>String</td>
       <td>값을 반환한다. </td>
     </tr>
+    <tr>
+      <td>disable()</td>
+      <td>void</td>
+      <td>Disabled 처리한다.</td>
+    </tr>
+    <tr>
+      <td>enable()</td>
+      <td>void</td>
+      <td>Enabled 처리한다.</td>
+    </tr>
   </tbody>
 </table>
-    </div>
-    <div class="aigis-module Switch">
-      <h2 class="aigis-module__heading" id="Switch">
-        Switch
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/controls/switch.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module Switch">
+    <h2 class="aigis-module__heading" id="Switch">Switch</h2>
+    <div class="aigis-module__filepath">/scss/controls/switch.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">기본 사용</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">기본 사용</h3>
 <ul>
 <li>사용 태그 :  <code>label &gt; input[checkbox] + .switch-toggle</code></li>
 </ul>
@@ -5664,7 +6635,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
       <td colspan="2">disabled</td>
       <td>boolean</td>
       <td>false</td>
-      <td>스위치 비활성화 상태</td>
+      <td>스위치 비활성화 여부</td>
     </tr>
     <tr>
       <td colspan="2">color</td>
@@ -5700,38 +6671,48 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
       <td>void</td>
       <td>스위치 상태를 토글한다.</td>
     </tr>
+    <tr>
+      <td>getValue()</td>
+      <td>boolean</td>
+      <td>스위치 상태를 반환한다.</td>
+    </tr>
+    <tr>
+      <td>disable()</td>
+      <td>void</td>
+      <td>Disabled 처리한다.</td>
+    </tr>
+    <tr>
+      <td>enable()</td>
+      <td>void</td>
+      <td>Enabled 처리한다.</td>
+    </tr>
   </tbody>
 </table>
-    </div>
-    <div class="aigis-module SyntaxInput">
-      <h2 class="aigis-module__heading" id="SyntaxInput">
-        SyntaxInput
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/controls/syntaxinput.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module SyntaxInput">
+    <h2 class="aigis-module__heading" id="SyntaxInput">SyntaxInput</h2>
+    <div class="aigis-module__filepath">/scss/controls/syntaxinput.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">생성 옵션</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">생성 옵션</h3>
 <div class="aigis-preview">
   <p><input type="text" class="syntaxInput" /></p>
@@ -6058,34 +7039,29 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
   </tbody>
 </table>
-    </div>
-    <div class="aigis-module Splitter">
-      <h2 class="aigis-module__heading" id="Splitter">
-        Splitter
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/layout/splitter.scss
-      </div>
-      <div class="aigis-tags">
-            <span class="gn-tag">v.0.1.0</span>
-            <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+  </div>
+  <div class="aigis-module Splitter">
+    <h2 class="aigis-module__heading" id="Splitter">Splitter</h2>
+    <div class="aigis-module__filepath">/scss/layout/splitter.scss</div>
+    <div class="aigis-tags">
+      <span class="gn-tag">v.0.1.0</span>
-      </div>
-        <!--   <div id="ComponentTab">
-    <ul>
-      <li><a href="#styleguide">Style</a></li>
-      <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
-    </ul>
-  </div> -->
-      <h3 id="-">생성 옵션</h3>
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">생성 옵션</h3>
 <div class="aigis-preview">
   <div id="horizontal-splitter" style="height: 300px">
@@ -6207,18 +7183,15 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
 </table>
-    </div>
   </div>
-        <footer class="aigis-footer">Last update at 2023/01/03 13:07</footer>
+</div>
+          <footer class="aigis-footer">Last update at 2024/04/15 13:52</footer>
+        </div>
       </div>
     </div>
-  </div>
-  <script src="../../assets/guide.js"></script>
-</body>
+    <script src="../../assets/guide.js"></script>
+  </body>
 </html>