You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
306 lines
17 KiB
306 lines
17 KiB
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>KISA</title>
|
|
<meta name="keywords" content="KISA" />
|
|
<meta name="author" content="KISA" />
|
|
<meta name="descripption" content="KISA" />
|
|
<link rel="shortcut icon" href="../assets/images/favicon.ico" />
|
|
<link rel="stylesheet" type="text/css" href="../assets/css/index.css" />
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<div class="guide_back">
|
|
<div class="guide_wrap two_line">
|
|
<header class="two_line">
|
|
<article class="header_in">
|
|
<div class="header_left">
|
|
<h1 class="header_logo">
|
|
<a href="../template/Main.html">
|
|
<span class=""></span>
|
|
</a>
|
|
</h1>
|
|
</div>
|
|
<nav class="gnb two_line w500">
|
|
<ul class="col_gap40 w500">
|
|
<li>
|
|
<a href="Button.html" class="on">Button</a>
|
|
</li>
|
|
<li>
|
|
<a href="Input.html">Input</a>
|
|
</li>
|
|
<li class="m-t-36">
|
|
<div class="lightmode">
|
|
<div class="inner">
|
|
<input type="radio" name="toggle" id="toggle-radio-light" />
|
|
<label for="toggle-radio-light" class="tolight">
|
|
<i class="fas fa-sun tolight"></i>
|
|
</label>
|
|
<input type="radio" name="toggle" id="toggle-radio-dark" checked />
|
|
<label for="toggle-radio-dark" class="todark">
|
|
<i class="fas fa-moon todark"></i>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</article>
|
|
</header>
|
|
|
|
<div class="guide_center width1720">
|
|
<article class="guide_top">
|
|
<h1>Button</h1>
|
|
</article>
|
|
|
|
<article class="Gr_contents m-t-100">
|
|
<section class="comp_conts">
|
|
<dl class="comp_dl m-0">
|
|
<dt class="comp_dt w120 m-r-100">Box</dt>
|
|
<dd class="comp_dd">
|
|
<div class="compline m-b-20">
|
|
<p class="comp_size m-r-40 fc_annotation87">Large</p>
|
|
<p class="comp_size m-r-40 fc_annotation87">Pri</p>
|
|
<div class="components">
|
|
<button class="btn_primary btn_l w160" type="button">Button</button>
|
|
<button class="btn_primary btn_l w160 disabled" type="button">Button</button>
|
|
<button class="btn_primary btn_l w160 disabled" type="button">Button</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="compline m-b-20">
|
|
<p class="comp_size m-r-40 fc_annotation87 op00">Large</p>
|
|
<p class="comp_size m-r-40 fc_annotation87">Sec</p>
|
|
<div class="components">
|
|
<button class="btn_secondary btn_l w160" type="button">Button</button>
|
|
<button class="btn_secondary btn_l w160 disabled" type="button">Button</button>
|
|
<button class="btn_secondary btn_l w160 disabled" type="button">Button</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="compline">
|
|
<p class="comp_size m-r-40 fc_annotation87 op00">Large</p>
|
|
<p class="comp_size m-r-40 fc_annotation87">Line</p>
|
|
<div class="components">
|
|
<button class="btn_line btn_l w160" type="button">Button</button>
|
|
<button class="btn_line btn_l disabled w160" type="button">Button</button>
|
|
<button class="btn_line btn_l disabled w160" type="button">Button</button>
|
|
</div>
|
|
</div>
|
|
</dd>
|
|
</dl>
|
|
</section>
|
|
|
|
<section class="comp_conts m-t-50">
|
|
<dl class="comp_dl m-0">
|
|
<dt class="comp_dt w120 m-r-100"></dt>
|
|
<dd class="comp_dd">
|
|
<div class="compline m-b-20">
|
|
<p class="comp_size m-r-40 fc_annotation87 op00"></p>
|
|
<p class="comp_size m-r-40 fc_annotation87">Pri</p>
|
|
<div class="components">
|
|
<button class="btn_primary btn_l" type="button">Button</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="compline m-b-20">
|
|
<p class="comp_size m-r-40 fc_annotation87 op00"></p>
|
|
<p class="comp_size m-r-40 fc_annotation87">Sec</p>
|
|
<div class="components">
|
|
<button class="btn_secondary btn_l" type="button">Button</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="compline">
|
|
<p class="comp_size m-r-40 fc_annotation87 op00"></p>
|
|
<p class="comp_size m-r-40 fc_annotation87">Line</p>
|
|
<div class="components">
|
|
<button class="btn_line btn_l" type="button">Button</button>
|
|
</div>
|
|
</div>
|
|
</dd>
|
|
</dl>
|
|
</section>
|
|
|
|
<section class="comp_conts m-t-50">
|
|
<dl class="comp_dl m-0">
|
|
<dt class="comp_dt w120 m-r-100"></dt>
|
|
<dd class="comp_dd">
|
|
<div class="compline m-b-20">
|
|
<p class="comp_size m-r-40 fc_annotation87 op00"></p>
|
|
<p class="comp_size m-r-40 fc_annotation87">Pri</p>
|
|
<div class="components">
|
|
<button class="btn_primary btn_l" type="button">Button</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="compline m-b-20">
|
|
<p class="comp_size m-r-40 fc_annotation87 op00"></p>
|
|
<p class="comp_size m-r-40 fc_annotation87">Sec</p>
|
|
<div class="components">
|
|
<button class="btn_secondary btn_l" type="button">Button</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="compline">
|
|
<p class="comp_size m-r-40 fc_annotation87 op00"></p>
|
|
<p class="comp_size m-r-40 fc_annotation87">Line</p>
|
|
<div class="components">
|
|
<button class="btn_line btn_l" type="button">Button</button>
|
|
</div>
|
|
</div>
|
|
</dd>
|
|
</dl>
|
|
</section>
|
|
</article>
|
|
|
|
|
|
<article class="Gr_contents m-t-100">
|
|
<section class="comp_conts">
|
|
<dl class="comp_dl m-0">
|
|
<dt class="comp_dt w120 m-r-100">With icon</dt>
|
|
<dd class="comp_dd">
|
|
<div class="compline">
|
|
<p class="comp_size m-r-40 fc_annotation87 op00"></p>
|
|
<p class="comp_size m-r-40 fc_annotation87">Pri</p>
|
|
<div class="components">
|
|
<button class="btn_primary btn_l w160" type="button">
|
|
<span class="m-r-6">
|
|
<img src="../assets/images/reset_fff_20.svg" alt="" class="w20" />
|
|
</span>
|
|
<span class="fc_white">Button</span>
|
|
</button>
|
|
<button class="btn_primary btn_l w160" type="button">
|
|
<span class="m-r-6">
|
|
<img src="../assets/images/reset_fff_20.svg" alt="" class="w20" />
|
|
</span>
|
|
<span class="fc_white">Button</span>
|
|
</button>
|
|
<button class="btn_primary btn_l w160" type="button">
|
|
<span class="m-r-6">
|
|
<img src="../assets/images/reset_fff_20.svg" alt="" class="w20" />
|
|
</span>
|
|
<span class="fc_white">Button</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="compline">
|
|
<p class="comp_size m-r-40 fc_annotation87 op00"></p>
|
|
<p class="comp_size m-r-40 fc_annotation87">Sec</p>
|
|
<div class="components">
|
|
<button class="btn_secondary btn_l w160" type="button">
|
|
<span class="m-r-6">
|
|
<img src="../assets/images/reset_fff_20.svg" alt="" class="w20" />
|
|
</span>
|
|
<span class="fc_white">Button</span>
|
|
</button>
|
|
<button class="btn_secondary btn_l w160" type="button">
|
|
<span class="m-r-6">
|
|
<img src="../assets/images/reset_fff_20.svg" alt="" class="w20" />
|
|
</span>
|
|
<span class="fc_white">Button</span>
|
|
</button>
|
|
<button class="btn_secondary btn_l w160" type="button">
|
|
<span class="m-r-6">
|
|
<img src="../assets/images/reset_fff_20.svg" alt="" class="w20" />
|
|
</span>
|
|
<span class="fc_white">Button</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="compline">
|
|
<p class="comp_size m-r-40 fc_annotation87 op00"></p>
|
|
<p class="comp_size m-r-40 fc_annotation87">Line</p>
|
|
<div class="components">
|
|
<button class="btn_line btn_l w160" type="button">
|
|
<span class="m-r-6">
|
|
<img src="../assets/images/reset_fff_20.svg" alt="" class="w20" />
|
|
</span>
|
|
<span class="fc_white">Button</span>
|
|
</button>
|
|
<button class="btn_line btn_l w160" type="button">
|
|
<span class="m-r-6">
|
|
<img src="../assets/images/reset_fff_20.svg" alt="" class="w20" />
|
|
</span>
|
|
<span class="fc_white">Button</span>
|
|
</button>
|
|
<button class="btn_line btn_l w160" type="button">
|
|
<span class="m-r-6">
|
|
<img src="../assets/images/reset_fff_20.svg" alt="" class="w20" />
|
|
</span>
|
|
<span class="fc_white">Button</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</dd>
|
|
</dl>
|
|
</section>
|
|
|
|
<section class="comp_conts m-t-50">
|
|
<dl class="comp_dl m-0">
|
|
<dt class="comp_dt w120 m-r-100"></dt>
|
|
<dd class="comp_dd">
|
|
<div class="compline m-b-20">
|
|
<p class="comp_size m-r-40 fc_annotation87 op00"></p>
|
|
<p class="comp_size m-r-40 fc_annotation87">Pri</p>
|
|
<div class="components">
|
|
<button class="btn_primary btn_l" type="button">Button</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="compline m-b-20">
|
|
<p class="comp_size m-r-40 fc_annotation87 op00"></p>
|
|
<p class="comp_size m-r-40 fc_annotation87">Sec</p>
|
|
<div class="components">
|
|
<button class="btn_secondary btn_l" type="button">Button</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="compline">
|
|
<p class="comp_size m-r-40 fc_annotation87 op00"></p>
|
|
<p class="comp_size m-r-40 fc_annotation87">Line</p>
|
|
<div class="components">
|
|
<button class="btn_line btn_l" type="button">Button</button>
|
|
</div>
|
|
</div>
|
|
</dd>
|
|
</dl>
|
|
</section>
|
|
|
|
<section class="comp_conts m-t-50">
|
|
<dl class="comp_dl m-0">
|
|
<dt class="comp_dt w120 m-r-100"></dt>
|
|
<dd class="comp_dd">
|
|
<div class="compline m-b-20">
|
|
<div class="components">
|
|
<button class="btn_primary btn_l" type="button">Button</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="compline m-b-20">
|
|
<div class="components">
|
|
<button class="btn_secondary btn_l" type="button">Button</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="compline">
|
|
<div class="components">
|
|
<button class="btn_line btn_l" type="button">Button</button>
|
|
</div>
|
|
</div>
|
|
</dd>
|
|
</dl>
|
|
</section>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="../assets/js/jquery.min.js"></script>
|
|
<script type="text/javascript" src="../assets/js/common.js"></script>
|
|
</body>
|
|
</html>
|