gnui 1.1.8 → 1.2.12
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.
- package/@types/gnui.d.ts +202 -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/package.json +53 -37
- 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/js/gnui.esm.js +0 -22174
- package/dist/js/gnui.js +0 -22473
- package/dist/js/gnui.min.js +0 -1
- package/dist/styles/default.css +0 -3
- package/dist/styles/gpi.css +0 -3
- package/dist/styles/insights.css +0 -3
- package/dist/styles/nac.css +0 -3
- package/dist/styles/zt-nac.css +0 -3
- package/styleguide/assets/components.js +0 -1280
- package/styleguide/assets/guide.js +0 -45
- package/styleguide/assets/image.png +0 -0
- package/styleguide/assets/okadia.css +0 -124
- package/styleguide/assets/theme.css +0 -506
- package/styleguide/category/COLOR/index.html +0 -158
- package/styleguide/category/COMPONENT/Alert(js)/index.html +0 -421
- package/styleguide/category/COMPONENT/Bignumber/index.html +0 -273
- package/styleguide/category/COMPONENT/Breadcrumb/index.html +0 -328
- package/styleguide/category/COMPONENT/Calendar(js)/index.html +0 -239
- package/styleguide/category/COMPONENT/Card/index.html +0 -188
- package/styleguide/category/COMPONENT/Chart(js)/index.html +0 -558
- package/styleguide/category/COMPONENT/Datagrid(js)/index.html +0 -545
- package/styleguide/category/COMPONENT/Growl(js)/index.html +0 -288
- package/styleguide/category/COMPONENT/JsonView(js)/index.html +0 -829
- package/styleguide/category/COMPONENT/Message(js)/index.html +0 -391
- package/styleguide/category/COMPONENT/Modal(js)/index.html +0 -410
- package/styleguide/category/COMPONENT/Pagination/index.html +0 -352
- package/styleguide/category/COMPONENT/Panel/index.html +0 -309
- package/styleguide/category/COMPONENT/Progressbar(js)/index.html +0 -316
- package/styleguide/category/COMPONENT/Tab(js)/index.html +0 -444
- package/styleguide/category/COMPONENT/Tagcloud(js)/index.html +0 -261
- package/styleguide/category/COMPONENT/Time(js)/index.html +0 -244
- package/styleguide/category/COMPONENT/Tooltip(js)/index.html +0 -317
- package/styleguide/category/COMPONENT/Tree(js)/index.html +0 -401
- package/styleguide/category/CONTROLS/Button(js)/index.html +0 -440
- package/styleguide/category/CONTROLS/Checkbox/index.html +0 -198
- package/styleguide/category/CONTROLS/Colorpicker(js)/index.html +0 -209
- package/styleguide/category/CONTROLS/Datepicker(js)/index.html +0 -260
- package/styleguide/category/CONTROLS/Dropdown(js)/index.html +0 -1033
- package/styleguide/category/CONTROLS/File/index.html +0 -316
- package/styleguide/category/CONTROLS/Form/Control/index.html +0 -231
- package/styleguide/category/CONTROLS/Form/Field/index.html +0 -258
- package/styleguide/category/CONTROLS/Form/Plain/index.html +0 -197
- package/styleguide/category/CONTROLS/Input/index.html +0 -334
- package/styleguide/category/CONTROLS/MenuButton(js)/index.html +0 -257
- package/styleguide/category/CONTROLS/MultiText(js)/index.html +0 -260
- package/styleguide/category/CONTROLS/Picklist(js)/index.html +0 -699
- package/styleguide/category/CONTROLS/Radio/index.html +0 -201
- package/styleguide/category/CONTROLS/Select/index.html +0 -442
- package/styleguide/category/CONTROLS/SelectButton(js)/index.html +0 -236
- package/styleguide/category/CONTROLS/Slider/index.html +0 -193
- package/styleguide/category/CONTROLS/Switch(js)/index.html +0 -333
- package/styleguide/category/CONTROLS/SyntaxInput(js)/index.html +0 -483
- package/styleguide/category/CONTROLS/Textarea/index.html +0 -189
- package/styleguide/category/ELEMENTS/Box/index.html +0 -167
- package/styleguide/category/ELEMENTS/Icon/index.html +0 -265
- package/styleguide/category/ELEMENTS/Image/index.html +0 -213
- package/styleguide/category/ELEMENTS/List/index.html +0 -396
- package/styleguide/category/ELEMENTS/Table/index.html +0 -483
- package/styleguide/category/ELEMENTS/Tag/index.html +0 -255
- package/styleguide/category/ELEMENTS/Title/index.html +0 -186
- package/styleguide/category/LAYOUT/Container/index.html +0 -235
- package/styleguide/category/LAYOUT/Grid/index.html +0 -400
- package/styleguide/category/LAYOUT/Splitter(js)/index.html +0 -278
- package/styleguide/category/UTILITY/index.html +0 -367
- package/styleguide/category/Utils/index.html +0 -305
- package/styleguide/color.html +0 -168
- package/styleguide/index.html +0 -168
- package/styleguide/tag/javascript/index.html +0 -6224
- package/styleguide/tag/v.0.1.0/index.html +0 -10807
|
@@ -1,400 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width">
|
|
6
|
-
<link href="../../../../dist/styles/default.css" rel="stylesheet" id="ThemeFile">
|
|
7
|
-
<link href="../../../assets/okadia.css" rel="stylesheet">
|
|
8
|
-
<link href="../../../assets/theme.css" rel="stylesheet">
|
|
9
|
-
<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" />
|
|
10
|
-
<link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet">
|
|
11
|
-
<script src="../../../assets/components.js"></script>
|
|
12
|
-
<script src="../../../../dist/js/gnui.js"></script>
|
|
13
|
-
</head>
|
|
14
|
-
<body>
|
|
15
|
-
<div class="aigis-container">
|
|
16
|
-
<header class="aigis-header gn-gcolor is-primary">
|
|
17
|
-
<span><a href="../../../index.html" class="main-link" style="font-family: 'Squada One', cursive;">GNUI</a></span>
|
|
18
|
-
<span class="has-text-invert" style="font-size: 1.0em;padding-left: 10px;">Start your next web project with GNUI.</span>
|
|
19
|
-
<div class="gn-select is-medium">
|
|
20
|
-
<select id="ThemeSelector">
|
|
21
|
-
|
|
22
|
-
<option value="default">default</option>
|
|
23
|
-
|
|
24
|
-
<option value="nac">nac</option>
|
|
25
|
-
|
|
26
|
-
<option value="insights">insights</option>
|
|
27
|
-
|
|
28
|
-
<option value="gpi">gpi</option>
|
|
29
|
-
|
|
30
|
-
<option value="zt-nac">zt-nac</option>
|
|
31
|
-
|
|
32
|
-
</select>
|
|
33
|
-
</div>
|
|
34
|
-
<div>
|
|
35
|
-
<a class="gn-button is-primary util-link" href="../../../category/Utils/index.html">
|
|
36
|
-
<span class="gn-icon is-small">
|
|
37
|
-
<i class="fas fa-tools"></i>
|
|
38
|
-
</span>
|
|
39
|
-
Gn.util
|
|
40
|
-
</a>
|
|
41
|
-
</div>
|
|
42
|
-
</header>
|
|
43
|
-
<div class="aigis-sidemenu">
|
|
44
|
-
<nav class="gn-tree is-borderless is-large left-menu">
|
|
45
|
-
</nav>
|
|
46
|
-
</div>
|
|
47
|
-
|
|
48
|
-
<script>
|
|
49
|
-
window.Gn = window.gnui;
|
|
50
|
-
|
|
51
|
-
Gn.ready(function(){
|
|
52
|
-
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(','));
|
|
53
|
-
var jsComps = ''.split(',');
|
|
54
|
-
delete leftMenu.Utils;
|
|
55
|
-
Gn.util.append('.left-menu', renderTree(leftMenu));
|
|
56
|
-
Gn.util.scrollIntoView(Gn.util.$('.tree-item.is-active'), 300);
|
|
57
|
-
|
|
58
|
-
function renderTree(menus){
|
|
59
|
-
var $depths = Gn.util.$('<ul></ul>');
|
|
60
|
-
Gn.util.each(menus, function (child, menu){
|
|
61
|
-
if(Gn.util.isString(child)){
|
|
62
|
-
Gn.util.append($depths, renderMenu(menu, '../../../category/'+child+'/index.html', location.href.indexOf(child+'/') > -1));
|
|
63
|
-
} else {
|
|
64
|
-
var $_depth = renderMenu(menu, '');
|
|
65
|
-
Gn.util.append($_depth, renderTree(child));
|
|
66
|
-
Gn.util.append($depths, $_depth);
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
return $depths;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
function renderMenu(name, link, isActive){
|
|
73
|
-
var $_menu;
|
|
74
|
-
if (link === ''){
|
|
75
|
-
$_menu = Gn.util.$('<li>' + name + '</li>');
|
|
76
|
-
} else {
|
|
77
|
-
var menuClass = isActive ? ' is-active' :''
|
|
78
|
-
$_menu = Gn.util.$('<li><a href="' + link + '"><div class="tree-item'+menuClass+'">' + name.split('(js)').join('') + '</a></div></li>');
|
|
79
|
-
}
|
|
80
|
-
if(name.indexOf('(js)') > 0){
|
|
81
|
-
Gn.util.append(Gn.util.find('.tree-item', $_menu), Gn.util.$('<span class="gn-tag is-small is-info-light">JS</span>'));
|
|
82
|
-
}
|
|
83
|
-
return $_menu;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
function setTree(categorys){
|
|
87
|
-
var menus = {};
|
|
88
|
-
|
|
89
|
-
categorys.forEach(function(category){
|
|
90
|
-
parseTree(menus, category.split('/'), category);
|
|
91
|
-
});
|
|
92
|
-
return menus;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
function parseTree(parents, child, catgry){
|
|
96
|
-
var _depth = child.shift();
|
|
97
|
-
if (parents[_depth] === undefined) {
|
|
98
|
-
parents[_depth] = {}
|
|
99
|
-
}
|
|
100
|
-
if(child.length === 1){
|
|
101
|
-
parents[_depth][child] = catgry;
|
|
102
|
-
} else if (child.length > 1) {
|
|
103
|
-
parseTree(parents[_depth], child, catgry);
|
|
104
|
-
} else {
|
|
105
|
-
parents[_depth] = catgry;
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
});
|
|
109
|
-
</script>
|
|
110
|
-
|
|
111
|
-
<div class="aigis-contents">
|
|
112
|
-
<div class="aigis-contents__body">
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
<div>
|
|
116
|
-
<div class="aigis-module Grid">
|
|
117
|
-
<h2 class="aigis-module__heading" id="Grid">
|
|
118
|
-
Grid
|
|
119
|
-
</h2>
|
|
120
|
-
<div class="aigis-module__filepath">
|
|
121
|
-
/scss/layout/grid.scss
|
|
122
|
-
</div>
|
|
123
|
-
<div class="aigis-tags">
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
<span class="gn-tag">v.0.1.0</span>
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
</div>
|
|
130
|
-
|
|
131
|
-
<h3 id="-">기본 사용</h3>
|
|
132
|
-
<ul>
|
|
133
|
-
<li>화면을 분할하기 위한 컬럼방식의 그리드</li>
|
|
134
|
-
</ul>
|
|
135
|
-
<div class="aigis-preview">
|
|
136
|
-
<div class="gn-grid">
|
|
137
|
-
<div class="gn-column" style="background-color:#999">Dolor qui ullamco velit irure eiusmod nulla amet nostrud nostrud amet.</div>
|
|
138
|
-
<div class="gn-column" style="background-color:#aaa">Occaecat ex adipisicing sit ipsum qui ipsum minim consectetur nulla in esse et.</div>
|
|
139
|
-
<div class="gn-column" style="background-color:#bbb">Nisi cillum minim ipsum ex quis laboris.</div>
|
|
140
|
-
<div class="gn-column" style="background-color:#ccc">Voluptate ut veniam aute dolore occaecat reprehenderit labore velit pariatur qui nostrud esse.</div>
|
|
141
|
-
</div></div>
|
|
142
|
-
|
|
143
|
-
<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-grid<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
144
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column<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" >background-color</span><span class="token punctuation" >:</span><span class="token hexcode" >#999</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Dolor qui ullamco velit irure eiusmod nulla amet nostrud nostrud amet.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
145
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column<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" >background-color</span><span class="token punctuation" >:</span><span class="token hexcode" >#aaa</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Occaecat ex adipisicing sit ipsum qui ipsum minim consectetur nulla in esse et.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
146
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column<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" >background-color</span><span class="token punctuation" >:</span><span class="token hexcode" >#bbb</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Nisi cillum minim ipsum ex quis laboris.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
147
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column<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" >background-color</span><span class="token punctuation" >:</span><span class="token hexcode" >#ccc</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Voluptate ut veniam aute dolore occaecat reprehenderit labore velit pariatur qui nostrud esse.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
148
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
149
|
-
</code></pre>
|
|
150
|
-
<h3 id="-">사이즈</h3>
|
|
151
|
-
<ul>
|
|
152
|
-
<li>각 컬럼에 사이즈 클래스를 추가하여 사용한다.</li>
|
|
153
|
-
<li>사이즈 기준은 그리드의 가로사이즈 기준으로 1~12 (8.333 % ~ 100%)를 사용한다.</li>
|
|
154
|
-
</ul>
|
|
155
|
-
<div class="aigis-preview">
|
|
156
|
-
<div class="gn-grid">
|
|
157
|
-
<div class="gn-column is-1" style="background-color:#999">Dolor qui ullamco velit irure eiusmod nulla amet nostrud nostrud amet.</div>
|
|
158
|
-
<div class="gn-column is-3" style="background-color:#aaa">Occaecat ex adipisicing sit ipsum qui ipsum minim consectetur nulla in esse et.</div>
|
|
159
|
-
<div class="gn-column is-5" style="background-color:#bbb">Nisi cillum minim ipsum ex quis laboris.</div>
|
|
160
|
-
<div class="gn-column is-3" style="background-color:#ccc">Voluptate ut veniam aute dolore occaecat reprehenderit labore velit pariatur qui nostrud esse.</div>
|
|
161
|
-
</div></div>
|
|
162
|
-
|
|
163
|
-
<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-grid<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
164
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column is-1<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" >background-color</span><span class="token punctuation" >:</span><span class="token hexcode" >#999</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Dolor qui ullamco velit irure eiusmod nulla amet nostrud nostrud amet.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
165
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column is-3<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" >background-color</span><span class="token punctuation" >:</span><span class="token hexcode" >#aaa</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Occaecat ex adipisicing sit ipsum qui ipsum minim consectetur nulla in esse et.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
166
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column is-5<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" >background-color</span><span class="token punctuation" >:</span><span class="token hexcode" >#bbb</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Nisi cillum minim ipsum ex quis laboris.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
167
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column is-3<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" >background-color</span><span class="token punctuation" >:</span><span class="token hexcode" >#ccc</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Voluptate ut veniam aute dolore occaecat reprehenderit labore velit pariatur qui nostrud esse.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
168
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
169
|
-
</code></pre>
|
|
170
|
-
<h3 id="-">정렬</h3>
|
|
171
|
-
<ul>
|
|
172
|
-
<li>is-center, is-vcenter</li>
|
|
173
|
-
<li>column 정렬을 설정한다.</li>
|
|
174
|
-
</ul>
|
|
175
|
-
<div class="aigis-preview">
|
|
176
|
-
<div class="gn-grid is-center">
|
|
177
|
-
<div class="gn-column is-2" style="background-color:#999">Dolor qui ullamco velit irure eiusmod nulla amet nostrud nostrud amet.</div>
|
|
178
|
-
<div class="gn-column is-2" style="background-color:#aaa">Occaecat ex adipisicing sit ipsum qui ipsum minim consectetur nulla in esse et.</div>
|
|
179
|
-
<div class="gn-column is-2" style="background-color:#bbb">Nisi cillum minim ipsum ex quis laboris.</div>
|
|
180
|
-
<div class="gn-column is-2" style="background-color:#ccc">Voluptate ut veniam aute dolore occaecat reprehenderit labore velit pariatur qui nostrud esse.</div>
|
|
181
|
-
</div></div>
|
|
182
|
-
|
|
183
|
-
<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-grid is-center<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
184
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column is-2<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" >background-color</span><span class="token punctuation" >:</span><span class="token hexcode" >#999</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Dolor qui ullamco velit irure eiusmod nulla amet nostrud nostrud amet.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
185
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column is-2<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" >background-color</span><span class="token punctuation" >:</span><span class="token hexcode" >#aaa</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Occaecat ex adipisicing sit ipsum qui ipsum minim consectetur nulla in esse et.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
186
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column is-2<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" >background-color</span><span class="token punctuation" >:</span><span class="token hexcode" >#bbb</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Nisi cillum minim ipsum ex quis laboris.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
187
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column is-2<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" >background-color</span><span class="token punctuation" >:</span><span class="token hexcode" >#ccc</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Voluptate ut veniam aute dolore occaecat reprehenderit labore velit pariatur qui nostrud esse.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
188
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
189
|
-
</code></pre>
|
|
190
|
-
<div class="aigis-preview">
|
|
191
|
-
<div class="gn-grid is-vcenter">
|
|
192
|
-
<div class="gn-column is-1" style="background-color:#999">Dolor qui ullamco velit irure eiusmod nulla amet nostrud nostrud amet.</div>
|
|
193
|
-
<div class="gn-column is-3" style="background-color:#aaa">Occaecat ex adipisicing sit ipsum qui ipsum minim consectetur nulla in esse et.</div>
|
|
194
|
-
<div class="gn-column is-5" style="background-color:#bbb">Nisi cillum minim ipsum ex quis laboris.</div>
|
|
195
|
-
<div class="gn-column is-3" style="background-color:#ccc">Voluptate ut veniam aute dolore occaecat reprehenderit labore velit pariatur qui nostrud esse.</div>
|
|
196
|
-
</div></div>
|
|
197
|
-
|
|
198
|
-
<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-grid is-vcenter<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
199
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column is-1<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" >background-color</span><span class="token punctuation" >:</span><span class="token hexcode" >#999</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Dolor qui ullamco velit irure eiusmod nulla amet nostrud nostrud amet.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
200
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column is-3<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" >background-color</span><span class="token punctuation" >:</span><span class="token hexcode" >#aaa</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Occaecat ex adipisicing sit ipsum qui ipsum minim consectetur nulla in esse et.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
201
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column is-5<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" >background-color</span><span class="token punctuation" >:</span><span class="token hexcode" >#bbb</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Nisi cillum minim ipsum ex quis laboris.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
202
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column is-3<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" >background-color</span><span class="token punctuation" >:</span><span class="token hexcode" >#ccc</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Voluptate ut veniam aute dolore occaecat reprehenderit labore velit pariatur qui nostrud esse.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
203
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
204
|
-
</code></pre>
|
|
205
|
-
<h3 id="-">활용</h3>
|
|
206
|
-
<div class="aigis-preview">
|
|
207
|
-
<div class="gn-grid">
|
|
208
|
-
<div class="gn-column">
|
|
209
|
-
<div class="gn-box is-clearfix has-color-primary">
|
|
210
|
-
<div class="is-float-left">
|
|
211
|
-
<div class="gn-control has-arrange">
|
|
212
|
-
<button type="button" class="gn-button is-invert">
|
|
213
|
-
<span class="gn-icon">
|
|
214
|
-
<i class="fas fa-subway"></i>
|
|
215
|
-
</span> Subway </button>
|
|
216
|
-
<button type="button" class="gn-button is-invert">
|
|
217
|
-
<span class="gn-icon">
|
|
218
|
-
<i class="fas fa-laptop-code"></i>
|
|
219
|
-
</span> Code </button>
|
|
220
|
-
<button type="button" class="gn-button is-invert">
|
|
221
|
-
<span class="gn-icon">
|
|
222
|
-
<i class="fas fa-images"></i>
|
|
223
|
-
</span> Images </button>
|
|
224
|
-
<div class="gn-plain is-primary">
|
|
225
|
-
<span class="gn-icon">
|
|
226
|
-
<i class="fas fa-box"></i>
|
|
227
|
-
</span>
|
|
228
|
-
</div>
|
|
229
|
-
<div class="gn-dropdown">
|
|
230
|
-
<div class="dropdown-label"> 선택하세요 <span class="gn-icon dropdown-icon">
|
|
231
|
-
<i class="fas fa-angle-down"></i>
|
|
232
|
-
</span>
|
|
233
|
-
</div>
|
|
234
|
-
<div class="dropdown-items">
|
|
235
|
-
<ul>
|
|
236
|
-
<li class="dropdown-item">아이템 1</li>
|
|
237
|
-
<li class="dropdown-item">아이템 2</li>
|
|
238
|
-
<li class="dropdown-item">아이템 3</li>
|
|
239
|
-
</ul>
|
|
240
|
-
</div>
|
|
241
|
-
</div>
|
|
242
|
-
</div>
|
|
243
|
-
</div>
|
|
244
|
-
<div class="is-float-right">
|
|
245
|
-
<div class="gn-control has-icon-right">
|
|
246
|
-
<span class="gn-icon is-right">
|
|
247
|
-
<i class="fas fa-search"></i>
|
|
248
|
-
</span>
|
|
249
|
-
<input type="text" class="gn-input" placeholder="input text">
|
|
250
|
-
</div>
|
|
251
|
-
</div>
|
|
252
|
-
</div>
|
|
253
|
-
</div>
|
|
254
|
-
</div>
|
|
255
|
-
<div class="gn-grid">
|
|
256
|
-
<div class="gn-column is-2 has-color-dark">
|
|
257
|
-
<div class="gn-container has-padding">
|
|
258
|
-
<div class="gn-tree">
|
|
259
|
-
<p class="tree-label">
|
|
260
|
-
<span class="gn-icon is-small">
|
|
261
|
-
<i class="fas fa-home"></i>
|
|
262
|
-
</span> HOME
|
|
263
|
-
</p>
|
|
264
|
-
<ul>
|
|
265
|
-
<li>Genians</li>
|
|
266
|
-
<li>R&D Center</li>
|
|
267
|
-
<li>Front-end</li>
|
|
268
|
-
<li>GNUI <ul>
|
|
269
|
-
<li>Genians</li>
|
|
270
|
-
<li>R&D Center</li>
|
|
271
|
-
<li>Front-end</li>
|
|
272
|
-
<li>GNUI</li>
|
|
273
|
-
</ul>
|
|
274
|
-
</li>
|
|
275
|
-
<li>GNUI core</li>
|
|
276
|
-
</ul>
|
|
277
|
-
</div>
|
|
278
|
-
</div>
|
|
279
|
-
</div>
|
|
280
|
-
<div class="gn-column">
|
|
281
|
-
<div class="gn-container has-padding">
|
|
282
|
-
<p>Reprehenderit fugiat et ex Lorem deserunt non. Nulla anim enim dolore nulla quis in dolore proident minim. Consequat sint reprehenderit cupidatat ipsum irure excepteur fugiat. Officia nulla duis cupidatat cupidatat velit laborum aliquip in eu eu nisi laboris veniam eiusmod.</p>
|
|
283
|
-
<p>Quis exercitation aliqua do voluptate duis duis nostrud qui eiusmod. Tempor nostrud eu ut anim labore. Occaecat aliqua sit voluptate esse. Eiusmod in ea minim labore quis aliquip excepteur anim excepteur consequat duis. Ut adipisicing incididunt mollit ullamco eu minim sint deserunt eiusmod magna sit nulla irure. Aliquip magna excepteur officia aute laboris magna mollit cillum eiusmod laborum ut duis.</p>
|
|
284
|
-
<p>Adipisicing voluptate non ullamco ex cupidatat ad cillum qui adipisicing ullamco consectetur magna cupidatat commodo. Anim ex culpa deserunt duis sit esse aliqua. Culpa sit cillum ipsum culpa pariatur anim sunt velit voluptate deserunt ut voluptate id excepteur. Eu laborum excepteur dolor cupidatat occaecat esse. Ullamco consequat labore consequat consectetur quis consequat sint nostrud adipisicing consequat proident veniam ut et. Sint non laboris veniam voluptate exercitation commodo laborum adipisicing sint.</p>
|
|
285
|
-
<p>Proident irure veniam ipsum dolore mollit culpa ut ex laboris id ad culpa ullamco proident. Aute reprehenderit et eu anim est et. Cillum est incididunt eu irure ut consectetur culpa commodo. Incididunt eiusmod excepteur in do magna dolor voluptate eiusmod veniam qui tempor. Lorem fugiat minim pariatur veniam ut adipisicing velit elit quis cillum.</p>
|
|
286
|
-
<p>Aliquip laborum id ut fugiat commodo fugiat minim. Aute ea ea laborum minim duis occaecat proident dolore non. Aliqua amet qui officia officia magna irure aliqua eiusmod duis. Proident sint fugiat incididunt labore anim. Magna in aliqua irure aute aute amet magna sunt labore exercitation qui. Labore sunt dolore tempor exercitation id.</p>
|
|
287
|
-
</div>
|
|
288
|
-
</div>
|
|
289
|
-
</div></div>
|
|
290
|
-
|
|
291
|
-
<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-grid<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
292
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
293
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-box is-clearfix has-color-primary<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
294
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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>is-float-left<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
295
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-control has-arrange<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
296
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-invert<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
297
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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>
|
|
298
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-subway<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>i</span><span class="token punctuation" >></span></span>
|
|
299
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
300
|
-
Subway
|
|
301
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>button</span><span class="token punctuation" >></span></span>
|
|
302
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-invert<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
303
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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>
|
|
304
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-laptop-code<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>i</span><span class="token punctuation" >></span></span>
|
|
305
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
306
|
-
Code
|
|
307
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>button</span><span class="token punctuation" >></span></span>
|
|
308
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-invert<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
309
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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>
|
|
310
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-images<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>i</span><span class="token punctuation" >></span></span>
|
|
311
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
312
|
-
Images
|
|
313
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>button</span><span class="token punctuation" >></span></span>
|
|
314
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-plain is-primary<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
315
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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>
|
|
316
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-box<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>i</span><span class="token punctuation" >></span></span>
|
|
317
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
318
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
319
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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>
|
|
320
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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>
|
|
321
|
-
선택하세요
|
|
322
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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 dropdown-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
323
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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" ></</span>i</span><span class="token punctuation" >></span></span>
|
|
324
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
325
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
326
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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>
|
|
327
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>ul</span><span class="token punctuation" >></span></span>
|
|
328
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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" ></</span>li</span><span class="token punctuation" >></span></span>
|
|
329
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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" ></</span>li</span><span class="token punctuation" >></span></span>
|
|
330
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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" ></</span>li</span><span class="token punctuation" >></span></span>
|
|
331
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>ul</span><span class="token punctuation" >></span></span>
|
|
332
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
333
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
334
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
335
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
336
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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>is-float-right<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
337
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-control has-icon-right<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
338
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-right<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
339
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-search<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>i</span><span class="token punctuation" >></span></span>
|
|
340
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
341
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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>gn-input<span class="token punctuation" >"</span></span> <span class="token attr-name" >placeholder</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>input text<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
342
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
343
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
344
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
345
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
346
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
347
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-grid<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
348
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column is-2 has-color-dark<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
349
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-container has-padding<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
350
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-tree<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
351
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>p</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>tree-label<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
352
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
353
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-home<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>i</span><span class="token punctuation" >></span></span>
|
|
354
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
355
|
-
HOME
|
|
356
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
357
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>ul</span><span class="token punctuation" >></span></span>
|
|
358
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>li</span><span class="token punctuation" >></span></span>Genians<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>li</span><span class="token punctuation" >></span></span>
|
|
359
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>li</span><span class="token punctuation" >></span></span>R<span class="token entity" title="&">&amp;</span>D Center<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>li</span><span class="token punctuation" >></span></span>
|
|
360
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>li</span><span class="token punctuation" >></span></span>Front-end<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>li</span><span class="token punctuation" >></span></span>
|
|
361
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>li</span><span class="token punctuation" >></span></span>GNUI
|
|
362
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>ul</span><span class="token punctuation" >></span></span>
|
|
363
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>li</span><span class="token punctuation" >></span></span>Genians<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>li</span><span class="token punctuation" >></span></span>
|
|
364
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>li</span><span class="token punctuation" >></span></span>R<span class="token entity" title="&">&amp;</span>D Center<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>li</span><span class="token punctuation" >></span></span>
|
|
365
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>li</span><span class="token punctuation" >></span></span>Front-end<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>li</span><span class="token punctuation" >></span></span>
|
|
366
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>li</span><span class="token punctuation" >></span></span>GNUI<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>li</span><span class="token punctuation" >></span></span>
|
|
367
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>ul</span><span class="token punctuation" >></span></span>
|
|
368
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>li</span><span class="token punctuation" >></span></span>
|
|
369
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>li</span><span class="token punctuation" >></span></span>GNUI core<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>li</span><span class="token punctuation" >></span></span>
|
|
370
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>ul</span><span class="token punctuation" >></span></span>
|
|
371
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
372
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
373
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
374
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-column<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
375
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-container has-padding<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
376
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>p</span><span class="token punctuation" >></span></span>Reprehenderit fugiat et ex Lorem deserunt non. Nulla anim enim dolore nulla quis in dolore proident minim. Consequat sint reprehenderit cupidatat ipsum irure excepteur fugiat. Officia nulla duis cupidatat cupidatat velit laborum aliquip in eu eu nisi laboris veniam eiusmod.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
377
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>p</span><span class="token punctuation" >></span></span>Quis exercitation aliqua do voluptate duis duis nostrud qui eiusmod. Tempor nostrud eu ut anim labore. Occaecat aliqua sit voluptate esse. Eiusmod in ea minim labore quis aliquip excepteur anim excepteur consequat duis. Ut adipisicing incididunt mollit ullamco eu minim sint deserunt eiusmod magna sit nulla irure. Aliquip magna excepteur officia aute laboris magna mollit cillum eiusmod laborum ut duis.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
378
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>p</span><span class="token punctuation" >></span></span>Adipisicing voluptate non ullamco ex cupidatat ad cillum qui adipisicing ullamco consectetur magna cupidatat commodo. Anim ex culpa deserunt duis sit esse aliqua. Culpa sit cillum ipsum culpa pariatur anim sunt velit voluptate deserunt ut voluptate id excepteur. Eu laborum excepteur dolor cupidatat occaecat esse. Ullamco consequat labore consequat consectetur quis consequat sint nostrud adipisicing consequat proident veniam ut et. Sint non laboris veniam voluptate exercitation commodo laborum adipisicing sint.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
379
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>p</span><span class="token punctuation" >></span></span>Proident irure veniam ipsum dolore mollit culpa ut ex laboris id ad culpa ullamco proident. Aute reprehenderit et eu anim est et. Cillum est incididunt eu irure ut consectetur culpa commodo. Incididunt eiusmod excepteur in do magna dolor voluptate eiusmod veniam qui tempor. Lorem fugiat minim pariatur veniam ut adipisicing velit elit quis cillum.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
380
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>p</span><span class="token punctuation" >></span></span>Aliquip laborum id ut fugiat commodo fugiat minim. Aute ea ea laborum minim duis occaecat proident dolore non. Aliqua amet qui officia officia magna irure aliqua eiusmod duis. Proident sint fugiat incididunt labore anim. Magna in aliqua irure aute aute amet magna sunt labore exercitation qui. Labore sunt dolore tempor exercitation id.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
381
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
382
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
383
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
384
|
-
</code></pre>
|
|
385
|
-
|
|
386
|
-
</div>
|
|
387
|
-
</div>
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
<footer class="aigis-footer">Last update at 2023/04/04 17:59</footer>
|
|
392
|
-
</div>
|
|
393
|
-
</div>
|
|
394
|
-
</div>
|
|
395
|
-
<script src="../../../assets/guide.js"></script>
|
|
396
|
-
</body>
|
|
397
|
-
</html>
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|