gnui 1.2.0 → 1.2.13
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 +9 -2
- package/README.md +0 -0
- 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/OFL.txt +0 -0
- package/assets/images/flags.png +0 -0
- package/package.json +20 -13
- package/dist/js/gnui.esm.js +0 -24295
- package/dist/js/gnui.js +0 -24303
- package/dist/js/gnui.min.js +0 -23
- package/dist/styles/default.css +0 -1
- package/dist/styles/gpi.css +0 -1
- package/dist/styles/green24.css +0 -1
- package/dist/styles/insights.css +0 -1
- package/dist/styles/nac.css +0 -1
- package/dist/styles/ztnac.css +0 -1
- package/styleguide/assets/components.js +0 -1732
- package/styleguide/assets/guide.js +0 -47
- package/styleguide/assets/image.png +0 -0
- package/styleguide/assets/okadia.css +0 -122
- package/styleguide/assets/theme.css +0 -564
- package/styleguide/category/COLOR/index.html +0 -156
- package/styleguide/category/COMPONENT/Alert(js)/index.html +0 -418
- package/styleguide/category/COMPONENT/Bignumber/index.html +0 -269
- package/styleguide/category/COMPONENT/Breadcrumb/index.html +0 -324
- package/styleguide/category/COMPONENT/Calendar(js)/index.html +0 -236
- package/styleguide/category/COMPONENT/Card/index.html +0 -184
- package/styleguide/category/COMPONENT/Chart(js)/index.html +0 -555
- package/styleguide/category/COMPONENT/Datagrid(js)/index.html +0 -693
- package/styleguide/category/COMPONENT/Datalist(js)/index.html +0 -471
- package/styleguide/category/COMPONENT/Growl(js)/index.html +0 -285
- package/styleguide/category/COMPONENT/JsonView(js)/index.html +0 -1127
- package/styleguide/category/COMPONENT/MenuButton(js)/index.html +0 -281
- package/styleguide/category/COMPONENT/Message(js)/index.html +0 -515
- package/styleguide/category/COMPONENT/Modal(js)/index.html +0 -444
- package/styleguide/category/COMPONENT/Pagination/index.html +0 -348
- package/styleguide/category/COMPONENT/Panel/index.html +0 -305
- package/styleguide/category/COMPONENT/Progressbar(js)/index.html +0 -313
- package/styleguide/category/COMPONENT/Tab(js)/index.html +0 -473
- package/styleguide/category/COMPONENT/Tagcloud(js)/index.html +0 -260
- package/styleguide/category/COMPONENT/Tooltip(js)/index.html +0 -400
- package/styleguide/category/COMPONENT/Tree(js)/index.html +0 -404
- package/styleguide/category/CONTROLS/Button(js)/index.html +0 -455
- package/styleguide/category/CONTROLS/Checkbox/index.html +0 -194
- package/styleguide/category/CONTROLS/Colorpicker(js)/index.html +0 -263
- package/styleguide/category/CONTROLS/Datepicker(js)/index.html +0 -292
- package/styleguide/category/CONTROLS/Dropdown(js)/index.html +0 -1062
- package/styleguide/category/CONTROLS/File/index.html +0 -312
- package/styleguide/category/CONTROLS/Form/Control/index.html +0 -227
- package/styleguide/category/CONTROLS/Form/Field/index.html +0 -254
- package/styleguide/category/CONTROLS/Form/Plain/index.html +0 -193
- package/styleguide/category/CONTROLS/Input/index.html +0 -330
- package/styleguide/category/CONTROLS/MultiText(js)/index.html +0 -273
- package/styleguide/category/CONTROLS/Picklist(js)/index.html +0 -723
- package/styleguide/category/CONTROLS/Radio/index.html +0 -197
- package/styleguide/category/CONTROLS/Select/index.html +0 -438
- package/styleguide/category/CONTROLS/SelectButton(js)/index.html +0 -291
- package/styleguide/category/CONTROLS/Slider/index.html +0 -189
- package/styleguide/category/CONTROLS/Switch(js)/index.html +0 -345
- package/styleguide/category/CONTROLS/SyntaxInput(js)/index.html +0 -480
- package/styleguide/category/CONTROLS/Textarea/index.html +0 -185
- package/styleguide/category/CONTROLS/Time(js)/index.html +0 -263
- package/styleguide/category/ELEMENTS/Box/index.html +0 -163
- package/styleguide/category/ELEMENTS/Icon/index.html +0 -305
- package/styleguide/category/ELEMENTS/Image/index.html +0 -209
- package/styleguide/category/ELEMENTS/List/index.html +0 -392
- package/styleguide/category/ELEMENTS/Table/index.html +0 -479
- package/styleguide/category/ELEMENTS/Tag/index.html +0 -251
- package/styleguide/category/ELEMENTS/Title/index.html +0 -182
- package/styleguide/category/LAYOUT/Container/index.html +0 -231
- package/styleguide/category/LAYOUT/Grid/index.html +0 -396
- package/styleguide/category/LAYOUT/Splitter(js)/index.html +0 -275
- package/styleguide/category/UTILITY/index.html +0 -365
- package/styleguide/category/Utils/index.html +0 -331
- package/styleguide/color.html +0 -169
- package/styleguide/index.html +0 -169
- package/styleguide/tag/javascript/index.html +0 -7197
- package/styleguide/tag/v.0.1.0/index.html +0 -11969
|
@@ -1,365 +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
|
|
10
|
-
rel="stylesheet"
|
|
11
|
-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
|
|
12
|
-
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
|
|
13
|
-
crossorigin="anonymous"
|
|
14
|
-
/>
|
|
15
|
-
<link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet" />
|
|
16
|
-
<script src="../../assets/components.js"></script>
|
|
17
|
-
<script src="../../../dist/js/gnui.js"></script>
|
|
18
|
-
</head>
|
|
19
|
-
<body>
|
|
20
|
-
<div class="aigis-container">
|
|
21
|
-
<header class="aigis-header gn-gcolor is-primary">
|
|
22
|
-
<span><a href="../../index.html" class="main-link" style="font-family: 'Squada One', cursive">GNUI</a></span>
|
|
23
|
-
<span class="has-text-invert" style="font-size: 1em; padding-left: 10px">Start your next web project with GNUI.</span>
|
|
24
|
-
<div class="gn-select is-medium">
|
|
25
|
-
<select id="ThemeSelector">
|
|
26
|
-
|
|
27
|
-
<option value="default">default</option>
|
|
28
|
-
|
|
29
|
-
<option value="nac">nac</option>
|
|
30
|
-
|
|
31
|
-
<option value="insights">insights</option>
|
|
32
|
-
|
|
33
|
-
<option value="gpi">gpi</option>
|
|
34
|
-
|
|
35
|
-
<option value="ztnac">ztnac</option>
|
|
36
|
-
|
|
37
|
-
<option value="green24">green24</option>
|
|
38
|
-
|
|
39
|
-
</select>
|
|
40
|
-
</div>
|
|
41
|
-
<div>
|
|
42
|
-
<a class="gn-button is-primary util-link" href="../../category/Utils/index.html">
|
|
43
|
-
<span class="gn-icon is-small">
|
|
44
|
-
<i class="fas fa-tools"></i>
|
|
45
|
-
</span>
|
|
46
|
-
Gn.util
|
|
47
|
-
</a>
|
|
48
|
-
</div>
|
|
49
|
-
</header>
|
|
50
|
-
<div class="aigis-sidemenu">
|
|
51
|
-
<nav class="gn-tree is-borderless is-large left-menu"></nav>
|
|
52
|
-
</div>
|
|
53
|
-
|
|
54
|
-
<script>
|
|
55
|
-
window.Gn = window.gnui;
|
|
56
|
-
|
|
57
|
-
Gn.ready(function () {
|
|
58
|
-
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(','));
|
|
59
|
-
var jsComps = ''.split(',');
|
|
60
|
-
delete leftMenu.Utils;
|
|
61
|
-
Gn.util.append('.left-menu', renderTree(leftMenu));
|
|
62
|
-
Gn.util.scrollIntoView(Gn.util.$('.tree-item.is-active'), 300);
|
|
63
|
-
|
|
64
|
-
function renderTree(menus) {
|
|
65
|
-
var $depths = Gn.util.$('<ul></ul>');
|
|
66
|
-
Gn.util.each(menus, function (child, menu) {
|
|
67
|
-
if (Gn.util.isString(child)) {
|
|
68
|
-
Gn.util.append($depths, renderMenu(menu, '../../category/' + child + '/index.html', location.href.indexOf(child + '/') > -1));
|
|
69
|
-
} else {
|
|
70
|
-
var $_depth = renderMenu(menu, '');
|
|
71
|
-
Gn.util.append($_depth, renderTree(child));
|
|
72
|
-
Gn.util.append($depths, $_depth);
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
|
-
return $depths;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
function renderMenu(name, link, isActive) {
|
|
79
|
-
var $_menu;
|
|
80
|
-
if (link === '') {
|
|
81
|
-
$_menu = Gn.util.$('<li>' + name + '</li>');
|
|
82
|
-
} else {
|
|
83
|
-
var menuClass = isActive ? ' is-active' : '';
|
|
84
|
-
$_menu = Gn.util.$('<li><a href="' + link + '"><div class="tree-item' + menuClass + '">' + name.split('(js)').join('') + '</a></div></li>');
|
|
85
|
-
}
|
|
86
|
-
if (name.indexOf('(js)') > 0) {
|
|
87
|
-
Gn.util.append(Gn.util.find('.tree-item', $_menu), Gn.util.$('<span class="gn-tag is-small is-info-light">JS</span>'));
|
|
88
|
-
}
|
|
89
|
-
return $_menu;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
function setTree(categorys) {
|
|
93
|
-
var menus = {};
|
|
94
|
-
|
|
95
|
-
categorys.forEach(function (category) {
|
|
96
|
-
parseTree(menus, category.split('/'), category);
|
|
97
|
-
});
|
|
98
|
-
return menus;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
function parseTree(parents, child, catgry) {
|
|
102
|
-
var _depth = child.shift();
|
|
103
|
-
if (parents[_depth] === undefined) {
|
|
104
|
-
parents[_depth] = {};
|
|
105
|
-
}
|
|
106
|
-
if (child.length === 1) {
|
|
107
|
-
parents[_depth][child] = catgry;
|
|
108
|
-
} else if (child.length > 1) {
|
|
109
|
-
parseTree(parents[_depth], child, catgry);
|
|
110
|
-
} else {
|
|
111
|
-
parents[_depth] = catgry;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
});
|
|
115
|
-
</script>
|
|
116
|
-
|
|
117
|
-
<div class="aigis-contents">
|
|
118
|
-
<div class="aigis-contents__body">
|
|
119
|
-
|
|
120
|
-
<div>
|
|
121
|
-
|
|
122
|
-
<div class="aigis-module UTILITY">
|
|
123
|
-
<h2 class="aigis-module__heading" id="UTILITY">UTILITY</h2>
|
|
124
|
-
<div class="aigis-module__filepath">/scss/default/help.scss</div>
|
|
125
|
-
<div class="aigis-tags">
|
|
126
|
-
|
|
127
|
-
<span class="gn-tag">v.0.1.0</span>
|
|
128
|
-
|
|
129
|
-
</div>
|
|
130
|
-
<h2 id="box-">Box 정렬</h2>
|
|
131
|
-
<ul>
|
|
132
|
-
<li><p>.is-clearfix</p>
|
|
133
|
-
</li>
|
|
134
|
-
<li><p>.is-float-left</p>
|
|
135
|
-
</li>
|
|
136
|
-
<li><p>.is-float-right</p>
|
|
137
|
-
</li>
|
|
138
|
-
<li><p>.is-clipped</p>
|
|
139
|
-
</li>
|
|
140
|
-
<li><p>.is-vertical-middle</p>
|
|
141
|
-
</li>
|
|
142
|
-
</ul>
|
|
143
|
-
<div class="aigis-preview">
|
|
144
|
-
<div class="gn-box is-clearfix">
|
|
145
|
-
<div class="is-float-left">
|
|
146
|
-
<div class="gn-control has-arrange">
|
|
147
|
-
<button type="button" class="gn-button">
|
|
148
|
-
<span class="gn-icon">
|
|
149
|
-
<i class="fas fa-subway"></i>
|
|
150
|
-
</span> Subway </button>
|
|
151
|
-
<button type="button" class="gn-button">
|
|
152
|
-
<span class="gn-icon">
|
|
153
|
-
<i class="fas fa-laptop-code"></i>
|
|
154
|
-
</span> Code </button>
|
|
155
|
-
<button type="button" class="gn-button">
|
|
156
|
-
<span class="gn-icon">
|
|
157
|
-
<i class="fas fa-images"></i>
|
|
158
|
-
</span> Images </button>
|
|
159
|
-
</div>
|
|
160
|
-
</div>
|
|
161
|
-
<div class="is-float-right">
|
|
162
|
-
<div class="gn-control has-icon-right">
|
|
163
|
-
<span class="gn-icon is-right">
|
|
164
|
-
<i class="fas fa-search"></i>
|
|
165
|
-
</span>
|
|
166
|
-
<input type="text" class="gn-input" placeholder="input text">
|
|
167
|
-
</div>
|
|
168
|
-
</div>
|
|
169
|
-
</div></div>
|
|
170
|
-
|
|
171
|
-
<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-box is-clearfix<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
172
|
-
<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>
|
|
173
|
-
<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>
|
|
174
|
-
<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<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
175
|
-
<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>
|
|
176
|
-
<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>
|
|
177
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
178
|
-
Subway
|
|
179
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>button</span><span class="token punctuation" >></span></span>
|
|
180
|
-
<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<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
181
|
-
<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>
|
|
182
|
-
<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>
|
|
183
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
184
|
-
Code
|
|
185
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>button</span><span class="token punctuation" >></span></span>
|
|
186
|
-
<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<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
187
|
-
<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>
|
|
188
|
-
<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>
|
|
189
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
190
|
-
Images
|
|
191
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>button</span><span class="token punctuation" >></span></span>
|
|
192
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
193
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
194
|
-
<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>
|
|
195
|
-
<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>
|
|
196
|
-
<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>
|
|
197
|
-
<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>
|
|
198
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
199
|
-
<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>
|
|
200
|
-
<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 punctuation" >></span></span>
|
|
202
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
203
|
-
</code></pre>
|
|
204
|
-
<h2 id="text-">Text 정렬</h2>
|
|
205
|
-
<ul>
|
|
206
|
-
<li>.has-text-{alignment}</li>
|
|
207
|
-
</ul>
|
|
208
|
-
<div class="aigis-preview">
|
|
209
|
-
<div class="gn-box has-text-left">
|
|
210
|
-
<h4 class="gn-title is-size4">Left</h4> Aliquip nisi sint cupidatat excepteur deserunt mollit deserunt ea reprehenderit cupidatat sunt. Irure excepteur irure consequat nisi proident qui dolore ex sunt. Fugiat excepteur dolor occaecat adipisicing aliqua reprehenderit excepteur nostrud anim aute in ipsum et. Culpa sint officia elit veniam laborum enim excepteur sint ullamco aliquip commodo voluptate. Magna est qui sunt adipisicing irure anim ipsum exercitation ipsum sint.
|
|
211
|
-
</div>
|
|
212
|
-
<div class="gn-box has-text-center">
|
|
213
|
-
<h4 class="gn-title is-size4">Center</h4> Irure excepteur culpa laborum nulla ullamco velit consequat ut voluptate nisi Lorem. Pariatur sunt ipsum non sunt est fugiat do veniam duis sunt. Magna reprehenderit commodo eiusmod incididunt sunt minim eu nostrud. Ut dolor nostrud ullamco non commodo sit adipisicing dolore proident fugiat eu veniam. Nostrud consectetur do amet enim proident in nisi ullamco aliquip excepteur do. Officia ullamco voluptate tempor veniam proident ea duis laborum id incididunt.
|
|
214
|
-
</div>
|
|
215
|
-
<div class="gn-box has-text-right">
|
|
216
|
-
<h4 class="gn-title is-size4">Right</h4> Veniam pariatur nulla eu eiusmod. Veniam anim dolor labore tempor proident ad cillum. Sint laboris officia aliqua proident aute. Consequat cupidatat officia ad veniam pariatur do. Ullamco duis pariatur aliqua sit cupidatat laborum laboris eu magna. Laboris non duis occaecat esse laboris ex do. Nisi cupidatat veniam voluptate fugiat elit labore aute et excepteur.
|
|
217
|
-
</div>
|
|
218
|
-
<div class="gn-box has-text-justify">
|
|
219
|
-
<h4 class="gn-title is-size4">Justify</h4> Commodo reprehenderit cillum Lorem culpa do consectetur ullamco irure eu. Magna officia sit nisi in deserunt non duis eu duis enim quis. Eu proident pariatur aliquip anim est Lorem quis. Aliquip magna excepteur sint sint commodo nisi magna. Velit ea sint esse aliquip magna amet consequat eiusmod ex ad.
|
|
220
|
-
</div></div>
|
|
221
|
-
|
|
222
|
-
<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-box has-text-left<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
223
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>h4</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-title is-size4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Left<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>h4</span><span class="token punctuation" >></span></span>
|
|
224
|
-
Aliquip nisi sint cupidatat excepteur deserunt mollit deserunt ea reprehenderit cupidatat sunt. Irure excepteur irure consequat nisi proident qui dolore ex sunt. Fugiat excepteur dolor occaecat adipisicing aliqua reprehenderit excepteur nostrud anim aute in ipsum et. Culpa sint officia elit veniam laborum enim excepteur sint ullamco aliquip commodo voluptate. Magna est qui sunt adipisicing irure anim ipsum exercitation ipsum sint.
|
|
225
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
226
|
-
<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 has-text-center<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
227
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>h4</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-title is-size4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Center<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>h4</span><span class="token punctuation" >></span></span>
|
|
228
|
-
Irure excepteur culpa laborum nulla ullamco velit consequat ut voluptate nisi Lorem. Pariatur sunt ipsum non sunt est fugiat do veniam duis sunt. Magna reprehenderit commodo eiusmod incididunt sunt minim eu nostrud. Ut dolor nostrud ullamco non commodo sit adipisicing dolore proident fugiat eu veniam. Nostrud consectetur do amet enim proident in nisi ullamco aliquip excepteur do. Officia ullamco voluptate tempor veniam proident ea duis laborum id incididunt.
|
|
229
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
230
|
-
<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 has-text-right<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
231
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>h4</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-title is-size4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Right<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>h4</span><span class="token punctuation" >></span></span>
|
|
232
|
-
Veniam pariatur nulla eu eiusmod. Veniam anim dolor labore tempor proident ad cillum. Sint laboris officia aliqua proident aute. Consequat cupidatat officia ad veniam pariatur do. Ullamco duis pariatur aliqua sit cupidatat laborum laboris eu magna. Laboris non duis occaecat esse laboris ex do. Nisi cupidatat veniam voluptate fugiat elit labore aute et excepteur.
|
|
233
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
234
|
-
<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 has-text-justify<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
235
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>h4</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-title is-size4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Justify<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>h4</span><span class="token punctuation" >></span></span>
|
|
236
|
-
Commodo reprehenderit cillum Lorem culpa do consectetur ullamco irure eu. Magna officia sit nisi in deserunt non duis eu duis enim quis. Eu proident pariatur aliquip anim est Lorem quis. Aliquip magna excepteur sint sint commodo nisi magna. Velit ea sint esse aliquip magna amet consequat eiusmod ex ad.
|
|
237
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
238
|
-
</code></pre>
|
|
239
|
-
<h2 id="text-">Text 변환</h2>
|
|
240
|
-
<ul>
|
|
241
|
-
<li>is-capitalize, is-lowercase, is-uppercase, is-italic</li>
|
|
242
|
-
<li>한글 description 사용 시 size6 이하 사용하지 않는다.</li>
|
|
243
|
-
</ul>
|
|
244
|
-
<div class="aigis-preview">
|
|
245
|
-
<div class="gn-box is-capitalize">
|
|
246
|
-
<h4 class="gn-title is-size4">capitalize</h4> Velit Lorem nisi aute enim exercitation.
|
|
247
|
-
</div>
|
|
248
|
-
<div class="gn-box is-lowercase">
|
|
249
|
-
<h4 class="gn-title is-size4">lowercase</h4> Exercitation duis nulla id fugiat et laboris laborum aute.
|
|
250
|
-
</div>
|
|
251
|
-
<div class="gn-box is-uppercase">
|
|
252
|
-
<h4 class="gn-title is-size4">uppercase</h4> Incididunt nulla anim ut ipsum.
|
|
253
|
-
</div>
|
|
254
|
-
<div class="gn-box is-italic">
|
|
255
|
-
<h4 class="gn-title is-size4">italic</h4> Ad non deserunt veniam consectetur enim.
|
|
256
|
-
</div>
|
|
257
|
-
<div class="gn-box">
|
|
258
|
-
<h4 class="gn-title is-size4">Text Sizes</h4>
|
|
259
|
-
<p class="has-text-size1">size1 : Fugiat cillum reprehenderit ullamco esse non cillum.</p>
|
|
260
|
-
<p class="has-text-size2">size2 : Minim eu minim ea anim.</p>
|
|
261
|
-
<p class="has-text-size3">size3 : Sit adipisicing eiusmod consectetur sit qui cupidatat.</p>
|
|
262
|
-
<p class="has-text-size4">size4 : Enim qui do ullamco enim et non consectetur labore consectetur ipsum quis magna proident.</p>
|
|
263
|
-
<p class="has-text-size5">size5 : Occaecat ex voluptate ea labore labore cillum veniam officia excepteur pariatur Lorem consectetur.</p>
|
|
264
|
-
<p class="has-text-size6">size6 : In quis sunt esse esse aute ullamco laborum.</p>
|
|
265
|
-
<!-- 한글 description 사용 시 size6 이하 사용하지 않는다. -->
|
|
266
|
-
<p class="has-text-size6">size6 : 사용자 비밀번호 저장방식을 선택 합니다. RADIUS서버를 통한 MSCHAPv2 인증을 지원하기 위해서는 NT-Hash를 선택해야 합니다.</p>
|
|
267
|
-
<p class="has-text-size7">size7 : Nostrud consectetur excepteur ut duis qui pariatur irure eiusmod non Lorem aliquip id eiusmod.</p>
|
|
268
|
-
</div></div>
|
|
269
|
-
|
|
270
|
-
<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-box is-capitalize<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
271
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>h4</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-title is-size4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>capitalize<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>h4</span><span class="token punctuation" >></span></span>
|
|
272
|
-
Velit Lorem nisi aute enim exercitation.
|
|
273
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
274
|
-
<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-lowercase<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
275
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>h4</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-title is-size4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>lowercase<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>h4</span><span class="token punctuation" >></span></span>
|
|
276
|
-
Exercitation duis nulla id fugiat et laboris laborum aute.
|
|
277
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
278
|
-
<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-uppercase<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
279
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>h4</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-title is-size4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>uppercase<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>h4</span><span class="token punctuation" >></span></span>
|
|
280
|
-
Incididunt nulla anim ut ipsum.
|
|
281
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
282
|
-
<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-italic<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
283
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>h4</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-title is-size4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>italic<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>h4</span><span class="token punctuation" >></span></span>
|
|
284
|
-
Ad non deserunt veniam consectetur enim.
|
|
285
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
286
|
-
<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<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
287
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>h4</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-title is-size4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Text Sizes<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>h4</span><span class="token punctuation" >></span></span>
|
|
288
|
-
<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>has-text-size1<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>size1 : Fugiat cillum reprehenderit ullamco esse non cillum.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
289
|
-
<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>has-text-size2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>size2 : Minim eu minim ea anim.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
290
|
-
<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>has-text-size3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>size3 : Sit adipisicing eiusmod consectetur sit qui cupidatat.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
291
|
-
<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>has-text-size4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>size4 : Enim qui do ullamco enim et non consectetur labore consectetur ipsum quis magna proident.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
292
|
-
<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>has-text-size5<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>size5 : Occaecat ex voluptate ea labore labore cillum veniam officia excepteur pariatur Lorem consectetur.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
293
|
-
<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>has-text-size6<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>size6 : In quis sunt esse esse aute ullamco laborum.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
294
|
-
<span class="token comment" spellcheck="true"><!-- 한글 description 사용 시 size6 이하 사용하지 않는다. --></span>
|
|
295
|
-
<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>has-text-size6<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>size6 : 사용자 비밀번호 저장방식을 선택 합니다. RADIUS서버를 통한 MSCHAPv2 인증을 지원하기 위해서는 NT-Hash를 선택해야 합니다.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
296
|
-
<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>has-text-size7<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>size7 : Nostrud consectetur excepteur ut duis qui pariatur irure eiusmod non Lorem aliquip id eiusmod.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
297
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
298
|
-
</code></pre>
|
|
299
|
-
<h2 id="text-">Text 두께</h2>
|
|
300
|
-
<div class="aigis-preview">
|
|
301
|
-
<p class="is-weight-light">Et irure non laborum dolor esse reprehenderit occaecat.</p>
|
|
302
|
-
<p class="is-weight-normal">Lorem quis quis proident eiusmod nostrud minim velit minim.</p>
|
|
303
|
-
<p class="is-weight-medium">Duis consectetur veniam deserunt amet commodo labore aute sunt amet qui minim nulla sunt labore.</p>
|
|
304
|
-
<p class="is-weight-semibold">Irure esse nulla qui nulla sint laboris qui labore.</p>
|
|
305
|
-
<p class="is-weight-bold">Amet ullamco mollit mollit qui velit quis dolore minim fugiat tempor ea labore.</p></div>
|
|
306
|
-
|
|
307
|
-
<pre><code class="language-html"><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>is-weight-light<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Et irure non laborum dolor esse reprehenderit occaecat.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
308
|
-
<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>is-weight-normal<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Lorem quis quis proident eiusmod nostrud minim velit minim.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
309
|
-
<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>is-weight-medium<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Duis consectetur veniam deserunt amet commodo labore aute sunt amet qui minim nulla sunt labore.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
310
|
-
<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>is-weight-semibold<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Irure esse nulla qui nulla sint laboris qui labore.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
311
|
-
<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>is-weight-bold<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Amet ullamco mollit mollit qui velit quis dolore minim fugiat tempor ea labore.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
312
|
-
</code></pre>
|
|
313
|
-
<h2 id="text-">Text 색상</h2>
|
|
314
|
-
<div class="aigis-preview">
|
|
315
|
-
<span class="has-text-primary">has-text-primary</span>
|
|
316
|
-
<span class="has-color-primary">has-color-primary</span>
|
|
317
|
-
<span class="has-text-success">has-text-success</span>
|
|
318
|
-
<span class="has-color-success">has-color-success</span>
|
|
319
|
-
<span class="has-text-warning">has-text-warning</span>
|
|
320
|
-
<span class="has-color-warning">has-color-warning</span>
|
|
321
|
-
<span class="has-text-danger">has-text-danger</span>
|
|
322
|
-
<span class="has-color-danger">has-color-danger</span>
|
|
323
|
-
<span class="has-text-info">has-text-info</span>
|
|
324
|
-
<span class="has-color-info">has-color-info</span>
|
|
325
|
-
<span class="has-text-dark">has-text-dark</span>
|
|
326
|
-
<span class="has-color-dark">has-color-dark</span>
|
|
327
|
-
<span class="has-text-light">has-text-light</span>
|
|
328
|
-
<span class="has-color-light">has-color-light</span></div>
|
|
329
|
-
|
|
330
|
-
<pre><code class="language-html"> <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>has-text-primary<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>has-text-primary<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
331
|
-
<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>has-color-primary<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>has-color-primary<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
332
|
-
<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>has-text-success<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>has-text-success<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
333
|
-
<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>has-color-success<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>has-color-success<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
334
|
-
<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>has-text-warning<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>has-text-warning<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
335
|
-
<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>has-color-warning<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>has-color-warning<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
336
|
-
<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>has-text-danger<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>has-text-danger<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
337
|
-
<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>has-color-danger<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>has-color-danger<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>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>has-text-info<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>has-text-info<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
339
|
-
<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>has-color-info<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>has-color-info<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</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 attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>has-text-dark<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>has-text-dark<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>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>has-color-dark<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>has-color-dark<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
342
|
-
<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>has-text-light<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>has-text-light<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
343
|
-
<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>has-color-light<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>has-color-light<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
344
|
-
</code></pre>
|
|
345
|
-
<h2 id="display">Display</h2>
|
|
346
|
-
<ul>
|
|
347
|
-
<li>hidden, invisible, block, inline-block, inline</li>
|
|
348
|
-
</ul>
|
|
349
|
-
<h2 id="position-">Position 정렬</h2>
|
|
350
|
-
<ul>
|
|
351
|
-
<li>is-static, is-relative, is-absolute</li>
|
|
352
|
-
</ul>
|
|
353
|
-
|
|
354
|
-
</div>
|
|
355
|
-
|
|
356
|
-
</div>
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
<footer class="aigis-footer">Last update at 2024/04/15 13:52</footer>
|
|
360
|
-
</div>
|
|
361
|
-
</div>
|
|
362
|
-
</div>
|
|
363
|
-
<script src="../../assets/guide.js"></script>
|
|
364
|
-
</body>
|
|
365
|
-
</html>
|