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.
165 lines
9.4 KiB
165 lines
9.4 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">Button</a>
|
|
</li>
|
|
<li>
|
|
<a href="Input.html" class="on">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>Input</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">Text field</dt>
|
|
<dd class="comp_dd">
|
|
<div class="compline m-b-20">
|
|
<p class="comp_size m-r-40 fc_annotation87">Abled</p>
|
|
<div class="components">
|
|
<input type="text" class="wrput large w200" placeholder="Input text" />
|
|
<input type="text" class="wrput medium w200" placeholder="Input text" />
|
|
<input type="text" class="wrput small w200" placeholder="Input text" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="compline m-b-20">
|
|
<p class="comp_size m-r-40 fc_annotation87">Focused</p>
|
|
<div class="components">
|
|
<input type="text" class="wrput large on w200" placeholder="Input text" value="Input text" />
|
|
<input type="text" class="wrput medium on w200" placeholder="Input text" value="Input text" />
|
|
<input type="text" class="wrput small on w200" placeholder="Input text" value="Input text" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="compline m-b-20">
|
|
<p class="comp_size m-r-40 fc_annotation87">Disabled</p>
|
|
<div class="components">
|
|
<input type="text" class="wrput large disabled w200" placeholder="Input text" disabled />
|
|
<input type="text" class="wrput medium disabled w200" placeholder="Input text" disabled />
|
|
<input type="text" class="wrput small disabled w200" placeholder="Input text" disabled />
|
|
</div>
|
|
</div>
|
|
</dd>
|
|
</dl>
|
|
|
|
<dl class="comp_dl m-0">
|
|
<dt class="comp_dt w120 m-r-100">With timer</dt>
|
|
<dd class="comp_dd">
|
|
<div class="compline m-b-20">
|
|
<p class="comp_size m-r-40 fc_annotation87">Abled</p>
|
|
<div class="components">
|
|
<div class="put_zone">
|
|
<input type="text" class="wrput large w200" placeholder="Input text" />
|
|
<span class="timer">09:57</span>
|
|
</div>
|
|
|
|
<input type="text" class="wrput medium w200 op00" placeholder="Input text" />
|
|
<input type="text" class="wrput small w200 op00" placeholder="Input text" />
|
|
</div>
|
|
</div>
|
|
<div class="compline m-b-20">
|
|
<p class="comp_size m-r-40 fc_annotation87">Focused</p>
|
|
<div class="components">
|
|
<input type="text" class="wrput large on w200" placeholder="Input text" />
|
|
<input type="text" class="wrput medium w200 op00" placeholder="Input text" />
|
|
<input type="text" class="wrput small w200 op00" placeholder="Input text" />
|
|
</div>
|
|
</div>
|
|
<div class="compline m-b-20">
|
|
<p class="comp_size m-r-40 fc_annotation87">Disabled</p>
|
|
<div class="components">
|
|
<input type="text" class="wrput large w200" placeholder="Input text" />
|
|
<input type="text" class="wrput medium w200 op00" placeholder="Input text" />
|
|
<input type="text" class="wrput small w200 op00" placeholder="Input text" />
|
|
</div>
|
|
</div>
|
|
</dd>
|
|
</dl>
|
|
|
|
<dl class="comp_dl m-0 op00">
|
|
<dt class="comp_dt w120 m-r-100">Searchbar</dt>
|
|
<dd class="comp_dd">
|
|
<div class="compline m-b-20">
|
|
<p class="comp_size m-r-40 fc_annotation87">Abled</p>
|
|
<div class="components">
|
|
<input type="text" class="wrput large w200" placeholder="Input text" />
|
|
<input type="text" class="wrput medium w200" placeholder="Input text" />
|
|
<input type="text" class="wrput small w200" placeholder="Input text" />
|
|
</div>
|
|
</div>
|
|
<div class="compline m-b-20">
|
|
<p class="comp_size m-r-40 fc_annotation87">Focused</p>
|
|
<div class="components">
|
|
<input type="text" class="wrput large w200" placeholder="Input text" />
|
|
<input type="text" class="wrput medium w200" placeholder="Input text" />
|
|
<input type="text" class="wrput small w200" placeholder="Input text" />
|
|
</div>
|
|
</div>
|
|
<div class="compline m-b-20">
|
|
<p class="comp_size m-r-40 fc_annotation87">Disabled</p>
|
|
<div class="components">
|
|
<input type="text" class="wrput large w200" placeholder="Input text" />
|
|
<input type="text" class="wrput medium w200" placeholder="Input text" />
|
|
<input type="text" class="wrput small w200" placeholder="Input text" />
|
|
</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>
|