File name
Commit message
Commit date
File name
Commit message
Commit date
<!doctype html>
<html lang="ko">
<head>
<title>다채움 한자교실</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<link href="../resources/front/site/SITE_00000/css/style.css" rel="stylesheet">
<link href="../resources/front/site/SITE_00000/css/styleGuide.css" rel="stylesheet">
<!-- 공통 plugin -->
<script src="../resources/front/site/SITE_00000/js/common/jquery/jquery-3.6.0.min.js"></script>
<script src="../resources/front/site/SITE_00000/js/common/jquery/jquery-ui.min.js"></script>
<script src="../resources/front/site/SITE_00000/js/common/vendor/swiper/swiper-bundle.js"></script>
<!-- //공통 plugin -->
<!-- 페이지 plugin-->
<!-- //페이지 plugin-->
<!-- 공통 퍼블 layout: 개발시 삭제-->
<script src="../resources/front/site/SITE_00000/js/_layout.js"></script>
<!--//퍼블 layout-->
<!--공통 퍼블 js-->
<script type="module" src="../resources/front/site/SITE_00000/js/common.js"></script>
<!--//공통 퍼블 js-->
</head>
<body>
<!-- <section class="g-section">
<header>
<h1>UI Style Guide</h1>
<h2>Colors</h2>
<em>다채움</em>
</header>
<article>
<h3>Grayscale Colors</h3>
<ul class="color gray-color">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</article>
<article>
<h3>Brand Colors</h3>
<p>
주요색상은 0번입니다. Hover시 L, Active시 D를 사용하는 등 상황에 맞게 활용합니다.<br>
Light Color는 Brand Color의 명도를 높인 것으로 Backgound에 주로 사용합니다.
</p>
<h5>Main Colors</h5>
<ul class="color brand-color blue">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="color brand-color green">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h5>Point Colors</h5>
<ul class="color brand-color pink">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="color brand-color yellow">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</article>
<article>
<h3>Semantic Colors</h3>
<p>Red와 Green은 UI에 사용하며 각각 긍정과 상승, 부정과 하강의 의미를 담고 있습니다.</p>
<ul class="color brand-color sub-color red">
<li></li>
<li></li>
<li></li>
</ul>
<ul class="color brand-color sub-color green">
<li></li>
<li></li>
<li></li>
</ul>
</article>
</section> -->
<section class="g-section">
<header>
<h1>UI Style Guide</h1>
<h2>Typography</h2>
<em>다채움</em>
</header>
<article>
<h3>Typography</h3>
<p>서체는 기본적으로 Pretendard의 Regular, Medium, Bold 세가지 굵기를 사용합니다.</p>
<table class="typography">
<caption>Typography Headding List</caption>
<colgroup>
<col style="width: 40%;">
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<td>Headding</td>
<td>Type</td>
<td>Size</td>
<td>Weight</td>
<td>Color</td>
</tr>
</thead>
<tbody>
<tr>
<td>다람쥐 헌 쳇바퀴에 타고파</td>
<td>XL</td>
<td>36px</td>
<td>Bold</td>
<td>Gray 8</td>
</tr>
<tr>
<td>다람쥐 헌 쳇바퀴에 타고파</td>
<td>L</td>
<td>24px</td>
<td>Bold</td>
<td>Gray 8</td>
</tr>
<tr>
<td>다람쥐 헌 쳇바퀴에 타고파</td>
<td>M</td>
<td>20px</td>
<td>Medium</td>
<td>Gray 8</td>
</tr>
<tr>
<td>다람쥐 헌 쳇바퀴에 타고파</td>
<td>S</td>
<td>16px</td>
<td>Bold</td>
<td>Gray 8</td>
</tr>
<tr>
<td>다람쥐 헌 쳇바퀴에 타고파</td>
<td>XS</td>
<td>14px</td>
<td>Bold</td>
<td>Gray 6</td>
</tr>
</tbody>
</table>
<table class="typography">
<caption>Typography Paragraph List</caption>
<colgroup>
<col style="width: 40%;">
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<td>Paragraph</td>
<td>Type</td>
<td>Size</td>
<td>Weight</td>
<td>Color</td>
</tr>
</thead>
<tbody>
<tr>
<td>다람쥐 헌 쳇바퀴에 타고파</td>
<td>L</td>
<td>16px</td>
<td>Regular</td>
<td>Gray 8</td>
</tr>
<tr>
<td>다람쥐 헌 쳇바퀴에 타고파</td>
<td>M</td>
<td>14px</td>
<td>Regular</td>
<td>Gray 7</td>
</tr>
<tr>
<td>다람쥐 헌 쳇바퀴에 타고파</td>
<td>S</td>
<td>12px</td>
<td>Regular</td>
<td>Gray 6</td>
</tr>
</tbody>
</table>
<table class="typography">
<caption>Etc</caption>
<colgroup>
<col style="width: 240px;">
<col>
</colgroup>
<thead>
<tr>
<td>Etc</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">font-size</th>
<td class="align-left">
<p class="font-size-xlg">font-size-xlg</p>
<p class="font-size-lg">font-size-lg</p>
<p class="font-size-sm">font-size-sm</p>
</td>
</tr>
<tr>
<th scope="row">font-color</th>
<td class="align-left">
<p class="font-color-blue">font-color-blue</p>
<p class="font-color-green">font-color-green</p>
<p class="font-color-pink">font-color-pink</p>
<p class="font-color-orange">font-color-orange</p>
<p class="font-color-red">font-color-red</p>
</td>
</tr>
<tr>
<th scope="row">em</th>
<td class="align-left">
<em>em primary</em>
</td>
</tr>
</tbody>
</table>
</article>
<article>
<h3>Title</h3>
<p>Title은 itle-xlg, title-lg, title, title-sm, title-xsm을 사용합니다.</p>
<div class="page-tit-area">
<div class="l-area dir-col">
<h2 class="title-xlg">page-tit-area : title-xlg</h2>
<p class="txt-sub">서브타이틀(2depth)</p>
</div>
<div class="r-area"><button class="btn lg cta ico-plus">타이틀버튼</button></div>
</div>
<div class="section-tit-area">
<div class="l-area dir-col">
<h2 class="title-lg">section-title-area : title-lg</h2>
<p class="txt-sub">타이틀 설명</p>
</div>
<div class="r-area"><button class="btn cta ico-plus">타이틀버튼</button></div>
</div>
<div class="tit-area">
<div class="l-area dir-col">
<h2 class="title">title-area : title</h2>
<p class="txt-sub">타이틀 설명</p>
</div>
<div class="r-area"><button class="btn cta ico-plus">타이틀버튼</button></div>
</div>
<div class="tit-area">
<div class="l-area">
<h3 class="title-sm">title-area : title-sm</h3>
</div>
<div class="r-area"><button class="btn sm cta ico-plus">타이틀버튼</button></div>
</div>
<div class="tit-area">
<div class="l-area">
<h4 class="title-xsm">title-area : title-xsm</h4>
</div>
</div>
</article>
</section>
<section class="g-section">
<header>
<h1>UI Style Guide</h1>
<h2>layout</h2>
<em>다채움</em>
</header>
<article>
<h3>margin</h3>
<p>margin은 상하/좌우(top,bottom,left,right)의 지정된 크기(xsm, sm, md, lg, xlg)안에서 사용합니다.</p>
<div class="list-type">
<table>
<caption>margin</caption>
<thead>
<tr>
<th>Name</th>
<th>Direction</th>
<th>Type</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="5">margin-direction-type<br>(ex: margin-top-xsm)</th>
<td rowspan="5">top<br>bottom<br>left<br>right</td>
<td>xsm</td>
<td>4px</td>
</tr>
<tr>
<td>sm</td>
<td>8px</td>
</tr>
<tr>
<td>md</td>
<td>16px</td>
</tr>
<tr>
<td>lg</td>
<td>24px</td>
</tr>
<tr>
<td>xlg</td>
<td>40px</td>
</tr>
</tbody>
</table>
</div>
</article>
<article>
<h3>align</h3>
<p>align은 가로정렬, 세로정렬을 사용합니다.</p>
<div style="display: flex; flex-direction: column; gap:8px">
<p class="align-left">align-left</p>
<p class="align-center">align-center</p>
<p class="align-right">align-right</p>
</div>
<div class="list-type">
<table>
<caption>valign-top</caption>
<tbody>
<tr>
<td class="valign-top">valign-top</td>
<td class="valign-middle">valign-middle</td>
<td class="valign-bottom">valign-bottom</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
<section class="g-section">
<header>
<h1>UI Style Guide</h1>
<h2>Button</h2>
<em>다채움</em>
</header>
<article>
<h3>Button Types</h3>
<p>버튼은 Default < Primary < Solid 순의 위계를 갖습니다. 버튼의 위계가 높아질수록 가급적 페이지에서 중복하지 않고 최소한으로 사용하도록 합니다.</p>
<ul class="button">
<li>
<h5>Default</h5>
<button type="button" class="btn"></button>
<button type="button" class="btn" disabled></button>
<button type="button" class="btn ico-search"></button>
<button type="button" class="btn ico-search back"></button>
<button type="button" class="btn ico-search" disabled></button>
<button type="button" class="btn ico-search circle"></button>
<button type="button" class="btn"><i class="ico-search"></i></button>
<button type="button" class="btn" disabled><i class="ico-search"></i></button>
</li>
<li>
<h5>primary</h5>
<button type="button" class="btn primary"></button>
<button type="button" class="btn primary" disabled></button>
<button type="button" class="btn primary ico-search"></button>
<button type="button" class="btn primary ico-search" disabled></button>
<button type="button" class="btn primary ico-search circle"></button>
<button type="button" class="btn primary"><i class="ico-search"></i></button>
<button type="button" class="btn primary" disabled><i class="ico-search"></i></button>
</li>
<li>
<h5>secondary</h5>
<button type="button" class="btn secondary"></button>
<button type="button" class="btn secondary" disabled></button>
<button type="button" class="btn secondary ico-search"></button>
<button type="button" class="btn secondary ico-search" disabled></button>
<button type="button" class="btn secondary ico-search circle"></button>
<button type="button" class="btn secondary"><i class="ico-search"></i></button>
<button type="button" class="btn secondary" disabled><i class="ico-search"></i></button>
</li>
<li>
<h5>ctay</h5>
<button type="button" class="btn cta"></button>
<button type="button" class="btn cta" disabled></button>
<button type="button" class="btn cta ico-search"></button>
<button type="button" class="btn cta ico-search" disabled></button>
<button type="button" class="btn cta ico-search circle"></button>
<button type="button" class="btn cta"><i class="ico-search"></i></button>
<button type="button" class="btn primary" disabled><i class="ico-search"></i></button>
</li>
<li>
<h5>Danger</h5>
<button type="button" class="btn danger"></button>
<button type="button" class="btn danger" disabled></button>
<button type="button" class="btn danger ico-search"></button>
<button type="button" class="btn danger ico-search" disabled></button>
<button type="button" class="btn danger ico-search circle"></button>
<button type="button" class="btn danger"><i class="ico-search"></i></button>
<button type="button" class="btn danger" disabled><i class="ico-search"></i></button>
</li>
<li>
<h5>Link</h5>
<a href="#none" class="btn-link" title="About Default Link">Default Link</a>
<a href="#none" class="btn-link primary" title="About Solid Link">Solid Link</a>
<a href="#none" class="btn-link secondary" title="About Solid Link">primary Link</a>
</li>
<li>
<h5>Link Button</h5>
<a href="#none" class="btn">default</a>
<a href="#none" class="btn disabled">default</a>
<a href="#none" class="btn"><i class="ico-search"></i>default</a>
<a href="#none" class="btn primary"><i class="ico-search"></i>default</a>
<a href="#none" class="btn secondary"><i class="ico-search"></i>default</a>
<a href="#none" class="btn danger"><i class="ico-search"></i>default</a>
<a href="#none" class="btn circle"><i class="ico-search"></i>default</a>
</li>
<li>
<h5>Text Button</h5>
<a href="#none" class="btn-text">바로가기 <i class="ico-fw"></i> <i class="ico-fw primary"></i> <i
class="ico-fw secondary"></i></a>
<a href="#none" class="btn-text primary">solid <i class="ico-edit primary"></i></a>
<a href="#none" class="btn-text">설정 <i class="ico-setting"></i></a>
<a href="#none" class="btn-text">초기화 <i class="ico-refresh"></i></a>
<a href="#none" class="btn-text">도움말 <i class="ico-help"></i></a>
</li>
<li>
<h5>btn-ico(버튼형 아이콘)</h5>
<button class="btn-ico ico-delete"></button>
<button class="btn-ico ico-edit"></button>
</li>
<li>
<h5>btn etc</h5>
<button class="btn circle ico-search transparent">투명버튼</button>
<button class="btn-like btn circle">좋아요</button>
<button class="btn-like btn circle btn-like-on">좋아요</button>
<button class="btn-like btn sm">좋아요</button>
<button class="btn-like btn sm btn-like-on">좋아요</button>
<button class="btn ico-favorite toggle is-active" data-toast="좋아요 추가"
data-toast-inactive="좋아요 해제">좋아요(toast)</button>
<button class="btn ico-favorite toggle is-active" data-txt="구독중"
data-txt-inactive="구독하기">구독중(txt)</button>
<button class="btn ico-favorite toggle is-active" data-txt="구독중" data-txt-inactive="구독하기"
data-toast="구독 추가" data-toast-inactive="구독 해제">구독중(toast, txt)</button>
</li>
<li>
<h5>btn style-none</h5>
<div class="btn-group order-front">
<button class="btn xsm ico-favorite toggle is-active circle style-none" title="좋아요">좋아요</button>
<button class="btn xsm ico-archive toggle circle style-none" title="담기">담기</button>
<button class="btn xsm ico-share circle style-none" title="공유">공유</button>
<button class="btn xsm ico-comment circle style-none" title="댓글">댓글</button>
</div>
</li>
</ul>
</article>
<article>
<h3>Button Size</h3>
<p>Small은 36px, Medium은 48px, Large는 64px의 높이값을 갖습니다.</p>
<ul class="button size">
<li>
<h5>Small</h5>
<button type="button" class="btn sm ico-search"></button>
<button type="button" class="btn sm ico-search" disabled></button>
<button type="button" class="btn sm ico-search primary"></button>
<button type="button" class="btn sm ico-search solid"></button>
<button type="button" class="btn sm ico-search danger"></button>
<button type="button" class="btn sm ico-search circle"></button>
<button type="button" class="btn sm"><i class="ico-search"></i></button>
</li>
<li>
<h5>Medium</h5>
<button type="button" class="btn ico-search"></button>
<button type="button" class="btn ico-search" disabled></button>
<button type="button" class="btn ico-search primary"></button>
<button type="button" class="btn ico-search solid"></button>
<button type="button" class="btn ico-search danger"></button>
<button type="button" class="btn ico-search circle"></button>
<button type="button" class="btn"><i class="ico-search"></i></button>
</li>
<li>
<h5>Large</h5>
<button type="button" class="btn lg ico-search"></button>
<button type="button" class="btn lg ico-search" disabled></button>
<button type="button" class="btn lg ico-search primary"></button>
<button type="button" class="btn lg ico-search solid"></button>
<button type="button" class="btn lg ico-search danger"></button>
<button type="button" class="btn lg ico-search circle"></button>
<button type="button" class="btn lg"><i class="ico-search"></i></button>
</li>
</ul>
</article>
<article>
<h3>Button group</h3>
<fieldset class="btn-group">
<legend>버튼그룹</legend>
<button type="button" class="btn">버튼 그룹1</button>
<button type="button" class="btn">버튼 그룹2</button>
<button type="button" class="btn">버튼 그룹3</button>
</fieldset>
<fieldset class="btn-group dir-col">
<legend>버튼그룹 dir-col</legend>
<button type="button" class="btn">버튼 그룹1</button>
<button type="button" class="btn">버튼 그룹2</button>
<button type="button" class="btn">버튼 그룹3</button>
</fieldset>
</article>
</section>
<section class="g-section">
<header>
<h1>UI Style Guide</h1>
<h2>Select & Input</h2>
<em>다채움</em>
</header>
<article>
<h3>Dropdown</h3>
<div>
<select class="small">
<option>small</option>
<option>small option</option>
</select>
<select>
<option>medium</option>
<option>medium option</option>
</select>
<select class="small select-sort">
<option>medium</option>
<option>medium option</option>
</select>
<select class="select-sort">
<option>medium</option>
<option>medium option</option>
</select>
<select disabled>
<option>disabled</option>
<option>disabled option</option>
</select>
</div>
<div>
<select class="small border-none">
<option>small</option>
<option>small option</option>
</select>
<select class="border-none">
<option>medium</option>
<option>medium option</option>
</select>
<select class="small select-sort border-none">
<option>sort sm</option>
<option>sort sm</option>
</select>
<select class="select-sort border-none">
<option>sort md</option>
<option>sort md</option>
</select>
<select class="border-none" disabled>
<option>disabled</option>
<option>disabled option</option>
</select>
</div>
</article>
<article>
<h3>Input Anatomy</h3>
<p>Input은 기본적으로 아래와 같은 구조로 이뤄져있습니다. 일부 요소를 제외하고 상황에 따라 필요한 부분만 사용해도 무방합니다.</p>
<ul class="input">
<li>
<label for="inputAnatomy0" class="input-form">Label</label>
<input type="text" id="inputAnatomy0" placeholder="Text">
<cite>message</cite>
</li>
<li>
<label for="inputAnatomy1" class="input-form">Label</label>
<input type="email" id="inputAnatomy1" placeholder="Text" class="input ico-mail" required>
<cite>message</cite>
</li>
<li>
<label for="inputAnatomy2" class="input-form required"><span>Label</span><cite>0/20</cite></label>
<input type="password" id="inputAnatomy2" placeholder="Password" required>
<cite>password는 클래스에 'valid'가 추가되어야만 통과</cite>
</li>
<li>
<label for="inputAnatomy3" class="input-form search">Search</label>
<fieldset class="search-area">
<legend>검색</legend>
<div class="search-option">
<select>
<option>search option 1_1</option>
<option>search option 1_2</option>
</select>
<select>
<option>search option 2_1</option>
<option>search option 2_2</option>
</select>
</div>
<div class="search">
<input type="text" id="inputAnatomy3" placeholder="Enter Search Keyword" title="검색어 입력">
<button class="btn ico-search">검색</button>
</div>
</fieldset>
<cite>message</cite>
</li>
<li>
<label for="inputAnatomy4" class="input-form search">Search</label>
<fieldset class="search-area small">
<legend>검색</legend>
<div class="search-option">
<select>
<option>search option 1_1</option>
<option>search option 1_2</option>
</select>
</div>
<div class="search">
<input type="search" id="inputAnatomy4" placeholder="Enter Search Keyword" title="검색어 입력">
<button class="btn ico-search">검색</button>
</div>
</fieldset>
<cite>message</cite>
</li>
<li>
<label class="input-form-block">
<div><span>User Case New</span></div>
<input type="text" placeholder="Text" required>
<cite>message</cite>
</label>
</li>
<li>
<label class="input-form-block">
<div>
<span>User Case New</span>
<cite>0/10</cite>
</div>
<div class="input-block">
<input type="password" placeholder="Password" class="password" required>
<label class="switch-hide icon-only"><input type="checkbox"><span><i class="ico-"></i>
icon-only</span></label>
<!-- 표시가 반대인 경우, switch-show 로 변경 -->
</div>
<cite>.input-block은 위와 같은 경우에만 한정 사용</cite>
</label>
</li>
<li>
<label for="inputDate0" class="input-form">Date</label>
<input type="date" id="inputDate0" class="input">
</li>
<!-- <li>
<label for="inputDate02" class="input-form">Date</label>
<input type="date" id="inputDate02" class="input icon-only ico-calendar">
</li> -->
<!-- <li>
<label for="inputDate01" class="input-form">Date</label>
<input type="month" id="inputDate01" placeholder="월 선택" class="input">
</li> -->
<li>
<label for="inputDate1" class="input-form">Date</label>
<input type="date" id="inputDate1" placeholder="날짜를 선택하세요"
class="input ico-calendar custom-datepicker">
</li>
<li>
<label for="inputDate1_1" class="input-form">Date</label>
<input type="date" id="inputDate1_1" placeholder="날짜를 선택하세요" value="2023-09-23"
class="input ico-calendar custom-datepicker">
</li>
<!-- <li>
<label for="inputDate2" class="input-form">Date Time</label>
<input type="datetime-local" id="inputDate2" class="input ico-calendar custom-datepicker" value="2018-06-12T19:30" min="2018-06-07T00:00" max="2018-06-14T00:00">
</li>
<li>
<label for="inputDate3" class="input-form">Month</label>
<input type="month" id="inputDate3" class="input ico-calendar custom-datepicker">
</li>
<li>
<label for="inputDate4" class="input-form">Week</label>
<input type="week" id="inputDate4" class="input ico-calendar custom-datepicker">
</li>
<li>
<label for="inputDate5" class="input-form">Time</label>
<input type="time" id="inputDate5" class="input ico-schedule custom-datepicker">
</li> -->
<!-- <li style="position: relative;">
<label class="input-form-block">
<div>
<span>Date Period</span>
</div>
<div class="input-block">
<input type="date" class="input ico-calendar date-period custom-datepicker" data-inputset="s0"> ~
<input type="date" class="input ico-calendar date-period custom-datepicker" data-inputset="s0">
</div>
<cite>기간 지정 인풋은 'data-period' 클래스를 주어야하며 data-inputset 어트리뷰트를 추가하고 같은 셋의 속성을 같게 지정해야한다. ex) data-inputset="s0"</cite>
</label>
</li>
<li>
<label class="input-form-block">
<div>
<span>Date Time Period</span>
</div>
<div class="input-block">
<input type="datetime-local" class="input ico-calendar date-period custom-datepicker" data-inputset="s1"> ~
<input type="datetime-local" class="input ico-calendar date-period custom-datepicker" data-inputset="s1">
</div>
<cite>기간(시간 포함) 지정 인풋은 'data-period' 클래스를 주어야하며 data-inputset 어트리뷰트를 추가하고 같은 셋의 속성을 같게 지정해야한다. ex) data-inputset="s0"</cite>
</label>
</li> -->
</ul>
</article>
<article>
<h3>Input State</h3>
<ul class="input">
<li>
<label for="inputState0" class="input-form">Default</label>
<input type="text" id="inputState0" placeholder="Text">
</li>
<li>
<label for="inputState1" class="input-form">Disabled</label>
<input type="text" id="inputState1" placeholder="Text" disabled>
</li>
<li>
<label for="inputState2" class="input-form">Readonly</label>
<input type="text" id="inputState2" placeholder="Text" readonly value="read-only text">
</li>
</ul>
</article>
<article>
<h3>Message</h3>
<div>
<p class="msg">Message</p>
<p class="msg"><i class="ico-info"></i> Message</p>
<p class="msg success"><i class="ico-info"></i> Message</p>
<p class="msg warning"><i class="ico-info"></i> Message</p>
<p class="msg info"><i class="ico-info"></i> Message</p>
<p class="msg danger"><i class="ico-info"></i> Message</p>
</div>
</article>
<article>
<h3>summary</h3>
<div>
<div class="summary">
<i class="ico-info"></i>
<div class="txt-area">
<strong class="summary-tit">title</strong>
<p>text</p>
<ul class="bullet">
<li>bullet1</li>
<li>bullet2</li>
</ul>
</div>
</div>
<div class="summary success">
<i class="ico-info"></i>
<div class="txt-area">
<strong class="summary-tit">title</strong>
<p>text</p>
</div>
</div>
<div class="summary warning">
<i class="ico-info"></i>
<div class="txt-area">
<strong class="summary-tit">title</strong>
<p>text</p>
</div>
</div>
<div class="summary info">
<i class="ico-info"></i>
<div class="txt-area">
<strong class="summary-tit">title</strong>
<p>text</p>
</div>
</div>
<div class="summary danger">
<i class="ico-info"></i>
<div class="txt-area">
<strong class="summary-tit">title</strong>
<p>text</p>
</div>
</div>
</div>
</article>
<article>
<div class="tooltip">
<button type="button" class="btn-tooltip"><i class="ico-info"></i> tooltip info</button>
<div class="txt-area"> 내용 내용 내용 내용 내용 </div>
</div>
<div class="tooltip">
<button type="button" class="btn-tooltip"><i class="ico-help"></i> tooltip help</button>
<div class="txt-area"> 내용 내용 내용 내용 내용 </div>
</div>
<div class="tooltip dir-l">
<button type="button" class="btn-tooltip"><i class="ico-info"></i> tooltip dir-l</button>
<div class="txt-area"> 내용 내용 내용 내용 내용 </div>
</div>
<div class="tooltip dir-r">
<button type="button" class="btn-tooltip"><i class="ico-info"></i> tooltip tootip tootip tootip tootip
dir-r</button>
<div class="txt-area"> 내용 내용 내용 내용 내용 </div>
</div>
</article>
<article>
<h3>percent-width</h3>
<p>width는percent-width1 ~ percent-width10 10단계로 %를 10%단위로 사용합니다. </p>
<div style="display:flex; flex-direction:column; gap: 8px;">
<input type="text" class="percent-width1" placeholder="percent-width1 : 10%">
<input type="text" class="percent-width2" placeholder="percent-width2 : 20%">
<input type="text" class="percent-width3" placeholder="percent-width3 : 30%"> ... <input type="text"
class="percent-width9" placeholder="percent-width9 : 90%">
<input type="text" class="percent-width10" placeholder="percent-width10 : 100%">
</div>
</article>
<article>
<h3>Input ETC</h3>
<fieldset class="search-area full margin-bottom-md">
<legend>검색</legend>
<div class="search-option">
<select>
<option>search option 1_1</option>
<option>search option 1_2</option>
</select>
<select>
<option>search option 2_1</option>
<option>search option 2_2</option>
</select>
</div>
<div class="search">
<input type="text" id="inputAnatomy3" placeholder="Enter Search Keyword" title="검색어 입력">
<button class="btn ico-search">검색</button>
</div>
</fieldset>
<div class="date-box">
<input type="date">
<span> ~ </span>
<input type="date">
</div>
<div class="flex-box">
<input type="text" placeholder="문항ID를 입력해주세요." title="문항ID 입력">
<button class="btn secondary">문항 추가</button>
</div>
<div class="flex-box">
<input type="text" placeholder="문항ID를 입력해주세요." class="flex1" title="문항ID 입력">
<button class="btn secondary">문항 추가</button>
</div>
<div class="input-box percent-width10">
<input type="text" class="flex1" title="이름 입력"> 선생님
</div>
<div class="input-box"><input type="number" style="width:64px" class="align-right" title="점수 입력"><span
class="font-color-gray">점</span></div>
<div class="input-mum-area">
<input type="number" class="input-num" title="점수 입력"> / <span class="total-num">5</span>
</div>
<div class="search-cus-area">
<label>
<input type="text" placeholder="검색어를 입력해주세요." title="검색어 입력">
</label>
<button>검색하기</button>
</div>
</article>
<article>
<h3>Textarea</h3>
<p>Textarea는 기본적으로 5줄까지 표시하며 나머지 구조는 Input과 같습니다.</p>
<div>
<textarea placeholder="Placeholder" title="텍스트 입력"></textarea>
</div>
<div class="txt-count-area">
<textarea title="텍스트 입력"></textarea>
<div class="txt-count"><strong>0</strong>/<span>15</span>자</div>
</div>
<div class="txt-count-area">
<input type="text" title="텍스트 입력">
<div class="txt-count"><strong>0</strong>/<span>15</span>자</div>
</div>
<div class="txt-count-area">
<textarea title="텍스트 입력">textarea 텍스트있음</textarea>
<div class="txt-count"><strong>0</strong>/<span>15</span>자</div>
</div>
<div class="txt-count-area">
<input type="text" value="input 텍스트있음" title="텍스트 입력">
<div class="txt-count"><strong>0</strong>/<span>15</span>자</div>
</div>
</article>
<article>
<h3>Check & Radio</h3>
<div>
<h5>Use Case 1</h5>
<input type="checkbox" id="check-0"><label for="check-0">Default</label>
<input type="checkbox" id="check-1" checked><label for="check-1">Checked</label>
<input type="checkbox" id="check-d0" disabled><label for="check-d0">Disabled-Default</label>
<input type="checkbox" id="check-d1" disabled checked><label for="check-d1">Disabled-Checked</label>
<input type="checkbox" id="check-n0" class="icon-only"><label for="check-n0">icon-only</label>
<h5>Use Case 2</h5>
<label class="checkbox"><input type="checkbox"><span>Default</span></label>
<label class="checkbox"><input type="checkbox" checked><span>Checked</span></label>
<label class="checkbox"><input type="checkbox" disabled><span>Disabled-Default</span></label>
<label class="checkbox"><input type="checkbox" disabled checked><span>Disabled-Checked</span></label>
<label class="checkbox icon-only"><input type="checkbox"><span>icon-only</span></label>
</div>
<div>
<h5>Use Case 1</h5>
<input type="radio" id="radio-0" name="radioA"><label for="radio-0">Default</label>
<input type="radio" id="radio-1" name="radioA" checked><label for="radio-1">Checked</label>
<input type="radio" id="radio-d0" name="radioB" disabled><label for="radio-d0">Disabled-Default</label>
<input type="radio" id="radio-d1" name="radioB" disabled checked><label
for="radio-d1">Disabled-Checked</label>
<h5>Use Case 2</h5>
<label class="radio"><input type="radio" name="radioC"><span>Default</span></label>
<label class="radio"><input type="radio" name="radioC" checked><span>Checked</span></label>
<label class="radio"><input type="radio" name="radioD" disabled><span>Disabled-Default</span></label>
<label class="radio"><input type="radio" name="radioD" disabled
checked><span>Disabled-Checked</span></label>
</div>
<div>
<h5>checkradio</h5>
<div class="checkradio">
<input type="checkbox" id="c1">
<label for="c1">체크박스</label>
</div>
<div class="checkradio">
<input type="radio" name="radio" id="r1" checked title="라디오선택">
<label for="r1">라디오</label>
</div>
<div class="checkradio">
<input type="checkbox" class="icon-only" id="chkAll">
<label for="chkAll">선택</label>
</div>
</div>
</article>
<article>
<h3>Toggle</h3>
<div>
<h5>Use Case 1</h5>
<input type="checkbox" class="toggle" id="toggle-0"><label for="toggle-0">Default</label>
<input type="checkbox" class="toggle" id="toggle-1" checked><label for="toggle-1">Checked</label>
<input type="checkbox" class="toggle" id="toggle-2" disabled><label
for="toggle-2">Disabled-Default</label>
<input type="checkbox" class="toggle" id="toggle-3" checked disabled><label
for="toggle-3">Disabled-Checked</label>
<h5>Use Case 2</h5>
<label class="toggle"><input type="checkbox" title="선택"><span></span></label>
<label class="toggle"><input type="checkbox"><span>Default</span></label>
<label class="toggle"><input type="checkbox" checked><span>Checked</span></label>
<label class="toggle"><input type="checkbox" disabled><span>Disabled-Default</span></label>
<label class="toggle"><input type="checkbox" checked disabled><span>Disabled-Checked</span></label>
</div>
</article>
<article>
<h3>Checkradio Area</h3>
<div style="display: grid; gap:2.4rem">
<div class="checkradio-area">
<div class="checkradio">
<input type="checkbox" id="achievecodeAdd1_1">
<label for="achievecodeAdd1_1">이해</label>
</div>
<div class="checkradio">
<input type="checkbox" id="achievecodeAdd1_2" checked>
<label for="achievecodeAdd1_2">계산</label>
</div>
<div class="checkradio">
<input type="checkbox" id="achievecodeAdd1_3">
<label for="achievecodeAdd1_3">추론</label>
</div>
</div>
<fieldset class="checkradio-custom-area">
<legend>학교급 선택</legend>
<div class="checkradio">
<input type="checkbox" id="sch1_1_1" checked="">
<label for="sch1_1_1">초등</label>
</div>
<div class="checkradio sm">
<input type="checkbox" id="sch1_1_2">
<label for="sch1_1_2">중등</label>
</div>
<div class="checkradio sm">
<input type="checkbox" id="sch1_1_3">
<label for="sch1_1_3">고등</label>
</div>
</fieldset>
<fieldset class="checkradio-custom-area">
<legend>학교급 선택</legend>
<div class="checkradio primary">
<input type="checkbox" id="sch1_2_1" checked="">
<label for="sch1_2_1">초등</label>
</div>
<div class="checkradio sm primary">
<input type="checkbox" id="sch1_2_2">
<label for="sch1_2_2">중등</label>
</div>
<div class="checkradio sm primary">
<input type="checkbox" id="sch1_2_3">
<label for="sch1_2_3">고등</label>
</div>
</fieldset>
<fieldset class="checkradio-custom-area">
<legend>학교급 선택</legend>
<div class="checkradio round">
<input type="checkbox" id="sch1_3_1" checked="">
<label for="sch1_3_1">초등</label>
</div>
<div class="checkradio sm round">
<input type="checkbox" id="sch1_3_2">
<label for="sch1_3_2">중등</label>
</div>
<div class="checkradio sm round">
<input type="checkbox" id="sch1_3_3">
<label for="sch1_3_3">고등</label>
</div>
</fieldset>
<fieldset class="checkradio-custom-area">
<legend>학교급 선택</legend>
<div class="checkradio primary round">
<input type="checkbox" id="sch1_4_1" checked="">
<label for="sch1_4_1">초등</label>
</div>
<div class="checkradio sm primary round">
<input type="checkbox" id="sch1_4_2">
<label for="sch1_4_2">중등</label>
</div>
<div class="checkradio sm primary round">
<input type="checkbox" id="sch1_4_3">
<label for="sch1_4_3">고등</label>
</div>
</fieldset>
<div class="checkradio-custom-area">
<div class="checkradio sm round primary">
<input type="checkbox" title="차시선택" id="chasi-fnc2">
<label for="chasi-fnc2" class="sm rond"><i class="ico-check sm"></i>전체선택</label>
</div>
</div>
<fieldset class="checkradio-custom-block-area">
<legend>난이도 선택</legend>
<div class="checkradio black">
<input type="checkbox" id="achievecode1_1" checked>
<label for="achievecode1_1">선택</label>
<div class="txt-area">
<strong class="font-color-red">상</strong> <span>여러 가지 함수의 실수배, 합, 차, 곱을 미분하고, 그 과정을 설명할 수
있다.</span>
</div>
</div>
<div class="checkradio black">
<input type="checkbox" id="achievecode1_2">
<label for="achievecode1_2">선택</label>
<div class="txt-area">
<strong class="font-color-blue">중</strong> <span>여러 가지 함수의 실수배, 합, 차, 곱을 미분하고, 그 과정을 설명할 수
있다.</span>
</div>
</div>
<div class="checkradio black">
<input type="checkbox" id="achievecode1_3">
<label for="achievecode1_3">선택</label>
<div class="txt-area">
<strong class="font-color-green">하</strong> <span>여러 가지 함수의 실수배, 합, 차, 곱을 미분하고, 그 과정을 설명할 수
있다.</span>
</div>
</div>
</fieldset>
<fieldset class="flex-box col2">
<legend>학교급 선택</legend>
<div class="checkradio">
<input type="checkbox" id="filter1_1_1" checked>
<label for="filter1_1_1">전체</label>
</div>
<div class="checkradio">
<input type="checkbox" id="filter1_1_2">
<label for="filter1_1_2">초등학교</label>
</div>
<div class="checkradio">
<input type="checkbox" id="filter1_1_3" disabled>
<label for="filter1_1_3">중학교</label>
</div>
<div class="checkradio">
<input type="checkbox" id="filter1_1_4">
<label for="filter1_1_4">고등학교</label>
</div>
<div class="checkradio">
<input type="checkbox" id="filter1_1_5">
<label for="filter1_1_5">유아</label>
</div>
<div class="checkradio">
<input type="checkbox" id="filter1_1_6">
<label for="filter1_1_6">특수교육</label>
</div>
</fieldset>
</div>
</article>
<article>
<h3>Switch</h3>
<div>
<label class="switch-show"><input type="checkbox"><span><i class="ico-"></i> Default</span></label>
<label class="switch-show"><input type="checkbox" checked><span><i class="ico-"></i>
Checked</span></label>
<label class="switch-show"><input type="checkbox" disabled><span><i class="ico-"></i>
Disabled-Default</span></label>
<label class="switch-show"><input type="checkbox" checked disabled><span><i class="ico-"></i>
Disabled-Checked</span></label>
<label class="switch-hide"><input type="checkbox"><span><i class="ico-"></i> Default</span></label>
<label class="switch-hide"><input type="checkbox" checked><span><i class="ico-"></i>
Checked</span></label>
<label class="switch-show icon-only"><input type="checkbox"><span><i class="ico-"></i>
icon-only</span></label>
</div>
</article>
<article>
<h3>fnc-extend-area</h3>
<div class="fnc-extend-area">
<div class="extend-keyword-area">
<strong class="fnc-tit">추천 키워드</strong>
<div class="txt-area">
<a href="#none">키워드</a>
<a href="#none">키워드</a>
<a href="#none">키워드</a>
<a href="#none">키워드</a>
</div>
</div>
<div class="extend-default-area">
<div class="l-area">
<p class="total">총 <em>156</em>건</p>
</div>
<div class="r-area">
<select class="select-sort border-none">
<option>최신순</option>
</select>
<select class="border-none">
<option>24개씩 보기</option>
</select>
<fieldset class="search-area">
<legend>검색</legend>
<div class="search-option" title="검색 옵션 선택">
<select>
<option>구분</option>
<option>구분1</option>
</select>
<select>
<option>작성자</option>
</select>
</div>
<div class="search">
<input type="text" placeholder="검색어를 입력하세요" title="검색어를 입력하세요">
<button class="btn ico-search">검색</button>
</div>
</fieldset>
</div>
</div>
<div class="extend-filter-area">
<div class="l-area">
<fieldset class="filter-group">
<legend>필터 선택</legend>
<select title="필터 선택">
<option value="">선택1-1</option>
<option value="">선택1-2</option>
</select>
<select title="필터 선택">
<option value="">선택2-1</option>
<option value="">선택2-2</option>
</select>
</fieldset>
<fieldset class="filter-group">
<legend>필터 선택</legend>
<div class="checkradio">
<input type="checkbox" id="extend-filter0">
<label for="extend-filter0">전체</label>
</div>
<div class="checkradio">
<input type="checkbox" id="extend-filter1">
<label for="extend-filter1">임시저장</label>
</div>
<div class="checkradio">
<input type="checkbox" id="extend-filter3">
<label for="extend-filter3">진행중</label>
</div>
</fieldset>
<fieldset class="filter-group">
<legend>필터 선택</legend>
<label class="chip"><input type="radio" name="chipC" checked><span>전체</span></label>
<label class="chip"><input type="radio" name="chipC"><span>다채움</span></label>
<label class="chip"><input type="radio" name="chipC"><span>기초학력</span></label>
</fieldset>
<fieldset class="filter-group">
<legend>필터 선택</legend>
<strong class="form-tit">추천 키워드</strong>
<div class="form-group">
<label class="chip"><input type="radio" name="chipC" checked><span>전체</span></label>
<label class="chip"><input type="radio" name="chipC"><span>다채움</span></label>
<label class="chip"><input type="radio" name="chipC"><span>기초학력</span></label>
</div>
</fieldset>
</div>
<div class="r-area"></div>
</div>
<div class="extend-fnc-area">
<div class="l-area">
<div class="checkradio">
<input type="checkbox" id="check-all">
<label for="check-all">전체 선택</label>
</div>
<button class="btn xsm">선택 인쇄</button>
<button class="btn xsm">엑셀 다운로드</button>
</div>
</div>
</div>
</article>
<article>
<h3>fnc-list</h3>
<ul class="fnc-list">
<li>
<i class="ico-info"></i>
<div class="txt-area">
<strong class="fnc-tit">Title</strong>
<p>description</p>
</div>
<div class="fnc">
<label class="toggle"><input type="checkbox" title="선택"><span></span></label>
</div>
</li>
<li>
<div class="txt-area">
<strong class="fnc-tit">Title</strong>
<p>description</p>
</div>
<div class="fnc">
<label class="toggle"><input type="checkbox" title="선택"><span></span></label>
</div>
</li>
<li>
<div class="txt-area">
<strong class="fnc-tit">Title</strong>
</div>
<div class="fnc">
<label class="toggle"><input type="checkbox" title="선택"><span></span></label>
</div>
</li>
</ul>
</article>
<article>
<h3>Chip</h3>
<p>정보 입력, 다중 또는 단일항목 선택, 내용 필터링 등의 행동에 사용됩니다.</p>
<div>
<h5>Use Case 1</h5>
<input type="checkbox" class="chip" id="chip-0"><label for="chip-0">Default</label>
<input type="checkbox" class="chip" id="chip-1" checked><label for="chip-1">Checked</label>
<input type="checkbox" class="chip" id="chip-2" disabled><label for="chip-2">Disabled-Default</label>
<input type="checkbox" class="chip" id="chip-3" checked disabled><label
for="chip-3">Disabled-Checked</label>
<input type="radio" class="chip" id="chipR-0" name="chipA"><label for="chipR-0">Default</label>
<input type="radio" class="chip" id="chipR-1" name="chipA" checked><label for="chipR-1">Checked</label>
<input type="radio" class="chip" id="chipR-2" name="chipB" disabled><label
for="chipR-2">Disabled-Default</label>
<input type="radio" class="chip" id="chipR-3" name="chipB" checked disabled><label
for="chipR-3">Disabled-Checked</label>
<h5>Use Case 2</h5>
<label class="chip"><input type="checkbox"><span>Default</span></label>
<label class="chip"><input type="checkbox" checked><span>Checked</span></label>
<label class="chip"><input type="checkbox" disabled><span>Disabled-Default</span></label>
<label class="chip"><input type="checkbox" checked disabled><span>Disabled-Checked</span></label>
<label class="chip"><input type="radio" name="chipC"><span>Default</span></label>
<label class="chip"><input type="radio" name="chipC" checked><span>Checked</span></label>
<label class="chip"><input type="radio" name="chipD" disabled><span>Disabled-Default</span></label>
<label class="chip"><input type="radio" name="chipD" checked
disabled><span>Disabled-Checked</span></label>
<h5>Use Case 3</h5>
<label class="chip ico-search"><input type="checkbox"><span>Default</span></label>
<label class="chip ico-search"><input type="checkbox" checked><span>Checked</span></label>
<label class="chip ico-search"><input type="checkbox" disabled><span>Disabled</span></label>
<label class="chip ico-search"><input type="checkbox" checked
disabled><span>Disabled-Checked</span></label>
<label class="chip ico-search"><input type="radio" name="chipE"><span>Default</span></label>
<label class="chip ico-search"><input type="radio" name="chipE" checked><span>Checked</span></label>
<label class="chip ico-search"><input type="radio" name="chipF" disabled><span>Disabled</span></label>
<label class="chip ico-search"><input type="radio" name="chipF" checked
disabled><span>Disabled-Checked</span></label>
<h5>Use Case 4</h5>
<label class="chip"><input type="checkbox"><span>Default<i class="ico-search"></i></span></label>
<label class="chip"><input type="checkbox" checked><span>Checked<i
class="ico-search"></i></span></label>
<label class="chip"><input type="checkbox" disabled><span>Disabled<i
class="ico-search"></i></span></label>
<label class="chip"><input type="checkbox" checked disabled><span>Disabled-Checked<i
class="ico-search"></i></span></label>
<label class="chip"><input type="radio" name="chipE"><span>Default<i
class="ico-search"></i></span></label>
<label class="chip"><input type="radio" name="chipE" checked><span>Checked<i
class="ico-search"></i></span></label>
<label class="chip"><input type="radio" name="chipF" disabled><span>Disabled<i
class="ico-search"></i></span></label>
<label class="chip"><input type="radio" name="chipF" checked disabled><span>Disabled-Checked<i
class="ico-search"></i></span></label>
</div>
</article>
</section>
<section class="g-section">
<header>
<h1>UI Style Guide</h1>
<h2>Indicators</h2>
<em>다채움</em>
</header>
<article>
<h3>Page Controller</h3>
<ul class="pagenation">
<li class="ppv">
<a href="#none" class="btn ico-ppv circle sm" title="전체 목록에서 가장 처음 목록으로 이동합니다">처음으로</a>
</li>
<li class="pv">
<a href="#none" class="btn ico-pv circle sm" title="이전 목록으로 이동합니다">이전으로</a>
</li>
<li class="current">
<span title="현재 페이지">1</span>
</li>
<li>
<a href="#none" title="2번째 목록으로 이동합니다">2</a>
</li>
<li>
<a href="#none" title="3번째 목록으로 이동합니다">3</a>
</li>
<li>
<a href="#none" title="4번째 목록으로 이동합니다">4</a>
</li>
<li>
<a href="#none" title="5번째 목록으로 이동합니다">5</a>
</li>
<li class="fw">
<a href="#none" class="btn ico-fw circle sm" title="다음 목록으로 이동합니다">다음으로</a>
</li>
<li class="ffw">
<a href="#none" class="btn ico-ffw circle sm" title="전체 목록에서 가장 마지막 목록으로 이동합니다">끝으로</a>
</li>
</ul>
</article>
<article>
<h3>Page Indicator</h3>
<ol class="page-indicator" data-current="2">
<li>
<a href="#none" title="1번째 목록으로 이동합니다">1</a>
</li>
<li>
<a href="#none" title="2번째 목록으로 이동합니다">2</a>
</li>
<li>
<a href="#none" title="3번째 목록으로 이동합니다">3</a>
</li>
<li>
<a href="#none" title="4번째 목록으로 이동합니다">4</a>
</li>
<li>
<a href="#none" title="5번째 목록으로 이동합니다">5</a>
</li>
</ol>
</article>
<article>
<h3>Badge</h3>
<ul class="badge-ul">
<li>Something<span class="badge">4</span></li>
<li>Something<span class="badge green">4</span></li>
<li>Something<span class="badge orange">4</span></li>
<li>Something<span class="badge ico-search">보기</span></li>
<li>Something<span class="badge min">badge</span></li>
</ul>
</article>
<article>
<h3>Icon</h3>
<ul class="icon-wrap">
<li>
<h5>ico-search</h5>
<i class="ico-search"></i>
</li>
<li>
<h5>ico-form-check</h5>
<i class="ico-form-check"></i>
</li>
<li>
<h5>ico-form-minus</h5>
<i class="ico-form-minus"></i>
</li>
<li>
<h5>ico-form-plus</h5>
<i class="ico-form-plus"></i>
</li>
<li>
<h5>ico-form-up</h5>
<i class="ico-form-up"></i>
</li>
<li>
<h5>ico-form-down</h5>
<i class="ico-form-down"></i>
</li>
<li>
<h5>ico-ppv</h5>
<i class="ico-ppv"></i>
</li>
<li>
<h5>ico-pv</h5>
<i class="ico-pv"></i>
</li>
<li>
<h5>ico-fw</h5>
<i class="ico-fw"></i>
</li>
<li>
<h5>ico-ffw</h5>
<i class="ico-ffw"></i>
</li>
<li>
<h5>ico-up</h5>
<i class="ico-up"></i>
</li>
<li>
<h5>ico-down</h5>
<i class="ico-down"></i>
</li>
<li>
<h5>ico-lt</h5>
<i class="ico-lt"></i>
</li>
<li>
<h5>ico-gt</h5>
<i class="ico-gt"></i>
</li>
<li>
<h5>ico-arrow-left</h5>
<i class="ico-arrow-left"></i>
</li>
<li>
<h5>ico-arrow-right</h5>
<i class="ico-arrow-right"></i>
</li>
<li>
<h5>ico-arrow-up</h5>
<i class="ico-arrow-up"></i>
</li>
<li>
<h5>ico-arrow-down</h5>
<i class="ico-arrow-down"></i>
</li>
<li>
<h5>ico-play</h5>
<i class="ico-play"></i>
</li>
<li>
<h5>ico-pause</h5>
<i class="ico-pause"></i>
</li>
<li>
<h5>ico-stop</h5>
<i class="ico-stop"></i>
</li>
<li>
<h5>ico-archive</h5>
<i class="ico-archive"></i>
</li>
<li>
<h5>ico-attach</h5>
<i class="ico-attach"></i>
</li>
<li>
<h5>ico-block</h5>
<i class="ico-block"></i>
</li>
<li>
<h5>ico-book</h5>
<i class="ico-book"></i>
</li>
<li>
<h5>ico-bookmark</h5>
<i class="ico-bookmark"></i>
</li>
<li>
<h5>ico-calendar</h5>
<i class="ico-calendar"></i>
</li>
<li>
<h5>ico-call</h5>
<i class="ico-call"></i>
</li>
<li>
<h5>ico-camera</h5>
<i class="ico-camera"></i>
</li>
<li>
<h5>ico-chart(ico-curation)</h5>
<i class="ico-chart"></i>
</li>
<li>
<h5>ico-chat</h5>
<i class="ico-chat"></i>
</li>
<li>
<h5>ico-check</h5>
<i class="ico-check"></i>
</li>
<li>
<h5>ico-close</h5>
<i class="ico-close"></i>
</li>
<li>
<h5>ico-comment</h5>
<i class="ico-comment"></i>
</li>
<li>
<h5>ico-copy</h5>
<i class="ico-copy"></i>
</li>
<li>
<h5>ico-delete</h5>
<i class="ico-delete"></i>
</li>
<li>
<h5>ico-document</h5>
<i class="ico-document"></i>
</li>
<li>
<h5>ico-document-plus</h5>
<i class="ico-document-plus"></i>
</li>
<li>
<h5>ico-download</h5>
<i class="ico-download"></i>
</li>
<li>
<h5>ico-move</h5>
<i class="ico-move"></i>
</li>
<li>
<h5>ico-edit</h5>
<i class="ico-edit"></i>
</li>
<li>
<h5>ico-favorite</h5>
<i class="ico-favorite"></i>
</li>
<li>
<h5>ico-favorite-active</h5>
<i class="ico-favorite-active blue"></i>
</li>
<li>
<h5>ico-file</h5>
<i class="ico-file"></i>
</li>
<li>
<h5>ico-filter</h5>
<i class="ico-filter"></i>
</li>
<li>
<h5>ico-folder</h5>
<i class="ico-folder"></i>
</li>
<li>
<h5>ico-fullscreen-exit</h5>
<i class="ico-fullscreen-exit"></i>
</li>
<li>
<h5>ico-fullscreen</h5>
<i class="ico-fullscreen"></i>
</li>
<li>
<h5>ico-headphone</h5>
<i class="ico-headphone"></i>
</li>
<li>
<h5>ico-help</h5>
<i class="ico-help"></i>
</li>
<li>
<h5>ico-history</h5>
<i class="ico-history"></i>
</li>
<li>
<h5>ico-home</h5>
<i class="ico-home"></i>
</li>
<li>
<h5>ico-hourglass</h5>
<i class="ico-hourglass"></i>
</li>
<li>
<h5>ico-img</h5>
<i class="ico-img"></i>
</li>
<!-- <li>
<h5>ico-picture</h5>
<i class="ico-picture"></i>
</li> -->
<li>
<h5>ico-info</h5>
<i class="ico-info"></i>
</li>
<li>
<h5>ico-language</h5>
<i class="ico-language"></i>
</li>
<li>
<h5>ico-layer(ico-group)</h5>
<i class="ico-layer"></i>
</li>
<li>
<h5>ico-link</h5>
<i class="ico-link"></i>
</li>
<li>
<h5>ico-location</h5>
<i class="ico-location"></i>
</li>
<li>
<h5>ico-lock</h5>
<i class="ico-lock"></i>
</li>
<li>
<h5>ico-login</h5>
<i class="ico-login"></i>
</li>
<li>
<h5>ico-logout</h5>
<i class="ico-logout"></i>
</li>
<li>
<h5>ico-mail</h5>
<i class="ico-mail"></i>
</li>
<li>
<h5>ico-map</h5>
<i class="ico-map"></i>
</li>
<li>
<h5>ico-menu</h5>
<i class="ico-menu"></i>
</li>
<li>
<h5>ico-mic</h5>
<i class="ico-mic"></i>
</li>
<li>
<h5>ico-more-horiz</h5>
<i class="ico-more-horiz"></i>
</li>
<li>
<h5>ico-mopre-vert</h5>
<i class="ico-more-vert"></i>
</li>
<li>
<h5>ico-music</h5>
<i class="ico-music"></i>
</li>
<li>
<h5>ico-openinnew</h5>
<i class="ico-openinnew"></i>
</li>
<li>
<h5>ico-plus</h5>
<i class="ico-plus"></i>
</li>
<li>
<h5>ico-people</h5>
<i class="ico-people"></i>
</li>
<li>
<h5>ico-profile</h5>
<i class="ico-profile"></i>
</li>
<li>
<h5>ico-phone</h5>
<i class="ico-phone"></i>
</li>
<li>
<h5>ico-pin</h5>
<i class="ico-pin"></i>
</li>
<li>
<h5>ico-pin-active</h5>
<i class="ico-pin-active"></i>
</li>
<li>
<h5>ico-power</h5>
<i class="ico-power"></i>
</li>
<li>
<h5>ico-print</h5>
<i class="ico-print"></i>
</li>
<li>
<h5>ico-redo</h5>
<i class="ico-redo"></i>
</li>
<li>
<h5>ico-remove</h5>
<i class="ico-remove"></i>
</li>
<li>
<h5>ico-refresh</h5>
<i class="ico-refresh"></i>
</li>
<li>
<h5>ico-save</h5>
<i class="ico-save"></i>
</li>
<li>
<h5>ico-schedule</h5>
<i class="ico-schedule"></i>
</li>
<li>
<h5>ico-send</h5>
<i class="ico-send"></i>
</li>
<li>
<h5>ico-setting</h5>
<i class="ico-setting"></i>
</li>
<li>
<h5>ico-share</h5>
<i class="ico-share"></i>
</li>
<li>
<h5>ico-sound</h5>
<i class="ico-sound"></i>
</li>
<li>
<h5>ico-star</h5>
<i class="ico-star"></i>
</li>
<li>
<h5>ico-star-active</h5>
<i class="ico-star-active"></i>
</li>
<li>
<h5>ico-sun</h5>
<i class="ico-sun"></i>
</li>
<li>
<h5>ico-thumb-up</h5>
<i class="ico-thumb-up"></i>
</li>
<li>
<h5>ico-thumb-down</h5>
<i class="ico-thumb-down"></i>
</li>
<li>
<h5>ico-trophy</h5>
<i class="ico-trophy"></i>
</li>
<li>
<h5>ico-undo</h5>
<i class="ico-undo"></i>
</li>
<li>
<h5>ico-unlock</h5>
<i class="ico-unlock"></i>
</li>
<li>
<h5>ico-update</h5>
<i class="ico-update"></i>
</li>
<li>
<h5>ico-upload</h5>
<i class="ico-upload"></i>
</li>
<li>
<h5>ico-video</h5>
<i class="ico-video"></i>
</li>
<li>
<h5>ico-visibility</h5>
<i class="ico-visibility"></i>
</li>
<li>
<h5>ico-visibility-off</h5>
<i class="ico-visibility-off"></i>
</li>
<li>
<h5>ico-warning</h5>
<i class="ico-warning"></i>
</li>
<li>
<h5>ico-zoomin</h5>
<i class="ico-zoomin"></i>
</li>
<li>
<h5>ico-zoomout</h5>
<i class="ico-zoomout"></i>
</li>
<li>
<h5>ico-hamburger</h5>
<i class="ico-hamburger"></i>
</li>
<li>
<h5>ico-app</h5>
<i class="ico-app"></i>
</li>
<li>
<h5>ico-notification</h5>
<i class="ico-notification"></i>
</li>
<li>
<h5>ico-circle-cancle</h5>
<i class="ico-circle-cancle"></i>
</li>
<li>
<h5>ico-sort</h5>
<i class="ico-sort"></i>
</li>
<li>
<h5>ico-thumblist</h5>
<i class="ico-thumblist"></i>
</li>
<li>
<h5>ico-circle-chevron-up</h5>
<i class="ico-circle-chevron-up"></i>
</li>
<li>
<h5>ico-circle-chevron-down</h5>
<i class="ico-circle-chevron-down"></i>
</li>
<li>
<h5>ico-circle-chevron-left</h5>
<i class="ico-circle-chevron-left"></i>
</li>
<li>
<h5>ico-circle-chevron-right</h5>
<i class="ico-circle-chevron-right"></i>
</li>
<li>
<h5>ico-circle-plus</h5>
<i class="ico-circle-plus"></i>
</li>
<li>
<h5>ico-circle-minus</h5>
<i class="ico-circle-minus"></i>
</li>
<li>
<h5>ico-circle-close</h5>
<i class="ico-circle-close"></i>
</li>
<li>
<h5>ico-circle-check</h5>
<i class="ico-circle-check"></i>
</li>
<li>
<h5>ico-protect</h5>
<i class="ico-protect"></i>
</li>
</ul>
<div>
<h4>icon 파일</h4>
<ul class="icon-wrap">
<li>
<h5>ico-file-</h5>
<i class="ico-file-pdf"></i>
</li>
<li>
<h5>ico-file-hwp</h5>
<i class="ico-file-hwp"></i>
</li>
<li>
<h5>ico-file-doc</h5>
<i class="ico-file-doc"></i>
</li>
<li>
<h5>ico-file-xls</h5>
<i class="ico-file-xls"></i>
</li>
</ul>
</div>
<div>
<h4>ico-img</h4>
<ul class="icon-wrap">
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-student.svg"
alt="student">
<figcaption>ico-img-student</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-teacher.svg"
alt="teacher">
<figcaption>ico-img-teacher</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-person.svg"
alt="person">
<figcaption>ico-img-person</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-mail.svg"
alt="mail">
<figcaption>ico-img-mail</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-phone.svg"
alt="phone">
<figcaption>ico-img-phone</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-folders.svg"
alt="folders">
<figcaption>ico-img-folders</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-book.svg"
alt="book">
<figcaption>ico-img-book</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-pencil.svg"
alt="pencil">
<figcaption>ico-img-pencil</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-write.svg"
alt="write">
<figcaption>ico-img-write</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-writeSelf.svg"
alt="writeSelf">
<figcaption>ico-img-writeSelf</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-writeAI.svg"
alt="writeAI">
<figcaption>ico-img-writeAI</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-sprout.svg"
alt="sprout">
<figcaption>ico-img-sprout</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-leaf.svg"
alt="leaf">
<figcaption>ico-img-leaf</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-tree.svg"
alt="tree">
<figcaption>ico-img-tree</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-rank1.svg"
alt="rank1">
<figcaption>ico-img-rank1</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-rank2.svg"
alt="rank2">
<figcaption>ico-img-rank2</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-rank3.svg"
alt="rank3">
<figcaption>ico-img-rank3</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-math.svg"
alt="math">
<figcaption>ico-img-math</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-mathplate.svg"
alt="mathplate">
<figcaption>ico-img-mathplate</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-hangul.svg"
alt="hangul">
<figcaption>ico-img-hangul</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-korean.svg"
alt="korean">
<figcaption>ico-img-korean</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-calculation.svg"
alt="calculation">
<figcaption>ico-img-calculation</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-english.svg"
alt="english">
<figcaption>ico-img-english</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-microscope.svg"
alt="microscope">
<figcaption>ico-img-microscope</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-social.svg"
alt="social">
<figcaption>ico-img-social</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-social1.svg"
alt="social1">
<figcaption>ico-img-social1</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-social2.svg"
alt="social2">
<figcaption>ico-img-social2</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-arrow-blue.svg"
alt="arrow-blue">
<figcaption>ico-img-arrow-blue</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-error.svg"
alt="error">
<figcaption>ico-img-error</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-grinningface.svg"
alt="gico-img-grinningface">
<figcaption>ico-img-grinningface</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/ico-img/ico-img-pensiveface.svg"
alt="gico-img-pensiveface">
<figcaption>ico-img-pensiveface</figcaption>
</figure>
</li>
</ul>
</div>
<div>
<h4>badge-icon</h4>
<ul class="icon-wrap">
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-home-1.svg"
alt="badge">
<figcaption>웰컴</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-classhome-1.svg"
alt="badge">
<figcaption>잘 부탁해</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-classlist-1.svg"
alt="badge">
<figcaption>클래스 가입 축하</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-classlist-2.svg"
alt="badge">
<figcaption>가입축하축하</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-classlist-3.svg"
alt="badge">
<figcaption>클래스를 부탁해</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-classhome-2.svg"
alt="badge">
<figcaption>5회 출석</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-classhome-3.svg"
alt="badge">
<figcaption>10회 출석</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-classhome-4.svg"
alt="badge">
<figcaption>20회 출석</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-classhome-5.svg"
alt="badge">
<figcaption>50회 출석</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-home-2.svg"
alt="badge">
<figcaption>학습모드</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-home-3.svg"
alt="badge">
<figcaption>열심모드</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-home-4.svg"
alt="badge">
<figcaption>불타는 열공모드</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-view-1.svg"
alt="badge">
<figcaption>영상 학습</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-view-2.svg"
alt="badge">
<figcaption>영상 학습 10회</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-view-3.svg"
alt="badge">
<figcaption>영상 학습 20회</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-view-4.svg"
alt="badge">
<figcaption>영상 학습 50회</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-view-5.svg"
alt="badge">
<figcaption>영상 학습 100회</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-exp-1.svg"
alt="badge">
<figcaption>성적향상문제풀이</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-exp-2.svg"
alt="badge">
<figcaption>도전자</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-exp-3.svg"
alt="badge">
<figcaption>풀어보자</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-exp-4.svg"
alt="badge">
<figcaption>축!성적향상</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-exp-5.svg"
alt="badge">
<figcaption>문제풀이왕</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-exp-6.svg"
alt="badge">
<figcaption>완벽한 사람</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-exp-7.svg"
alt="badge">
<figcaption>괜찮아요</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-cmt-1.svg"
alt="badge">
<figcaption>적극적인 커뮤니티</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-cmt-2.svg"
alt="badge">
<figcaption>나도 글쓴이</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-cmt-3.svg"
alt="badge">
<figcaption>나도 정보통</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-cmt-4.svg"
alt="badge">
<figcaption>클래스 평정자</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-cmt-5.svg"
alt="badge">
<figcaption>커뮤니티 없인 못살아</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-cmt-6.svg"
alt="badge">
<figcaption>일상이 커뮤니티</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-hmwrk-1.svg"
alt="badge">
<figcaption>학습시작</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-hmwrk-2.svg"
alt="badge">
<figcaption>노력하는 만큼 실력도 쑥쑥</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-hmwrk-3.svg"
alt="badge">
<figcaption>곧 마스터 각</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-hmwrk-4.svg"
alt="badge">
<figcaption>노력은 곧 성과</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-larn-1.svg"
alt="badge">
<figcaption>못해도 도전</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-larn-2.svg"
alt="badge">
<figcaption>시간 지킴이</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-larn-3.svg"
alt="badge">
<figcaption>과제 제출도 약속</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-larn-4.svg"
alt="badge">
<figcaption>칼같이 시간 지키기</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-larn-5.svg"
alt="badge">
<figcaption>이쯤이야 식은 죽 먹기</figcaption>
</figure>
</li>
</ul>
</div>
<div>
<h4>badge-list</h4>
<ul class="badge-list">
<li class="is-active">
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-home-1.svg"
alt="badge">
<figcaption>웰컴</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-classhome-1.svg"
alt="badge">
<figcaption>잘 부탁해</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-classlist-1.svg"
alt="badge">
<figcaption>클래스 가입 축하</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-classlist-2.svg"
alt="badge">
<figcaption>가입축하축하</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-classlist-3.svg"
alt="badge">
<figcaption>클래스를 부탁해</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-classhome-2.svg"
alt="badge">
<figcaption>5회 출석</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-classhome-3.svg"
alt="badge">
<figcaption>10회 출석</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-classhome-4.svg"
alt="badge">
<figcaption>20회 출석</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-classhome-5.svg"
alt="badge">
<figcaption>50회 출석</figcaption>
</figure>
</li>
<li class="is-active">
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-home-2.svg"
alt="badge">
<figcaption>학습모드</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-home-3.svg"
alt="badge">
<figcaption>열심모드</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-home-4.svg"
alt="badge">
<figcaption>불타는 열공모드</figcaption>
</figure>
</li>
<li class="is-active">
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-view-1.svg"
alt="badge">
<figcaption>영상 학습</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-view-2.svg"
alt="badge">
<figcaption>영상 학습 10회</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-view-3.svg"
alt="badge">
<figcaption>영상 학습 20회</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-view-4.svg"
alt="badge">
<figcaption>영상 학습 50회</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-view-5.svg"
alt="badge">
<figcaption>영상 학습 100회</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-exp-1.svg"
alt="badge">
<figcaption>성적향상문제풀이</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-exp-2.svg"
alt="badge">
<figcaption>도전자</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-exp-3.svg"
alt="badge">
<figcaption>풀어보자</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-exp-4.svg"
alt="badge">
<figcaption>축!성적향상</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-exp-5.svg"
alt="badge">
<figcaption>문제풀이왕</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-exp-6.svg"
alt="badge">
<figcaption>완벽한 사람</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-exp-7.svg"
alt="badge">
<figcaption>괜찮아요</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-cmt-1.svg"
alt="badge">
<figcaption>적극적인 커뮤니티</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-cmt-2.svg"
alt="badge">
<figcaption>나도 글쓴이</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-cmt-3.svg"
alt="badge">
<figcaption>나도 정보통</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-cmt-4.svg"
alt="badge">
<figcaption>클래스 평정자</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-cmt-5.svg"
alt="badge">
<figcaption>커뮤니티 없인 못살아</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-cmt-6.svg"
alt="badge">
<figcaption>일상이 커뮤니티</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-hmwrk-1.svg"
alt="badge">
<figcaption>학습시작</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-hmwrk-2.svg"
alt="badge">
<figcaption>노력하는 만큼 실력도 쑥쑥</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-hmwrk-3.svg"
alt="badge">
<figcaption>곧 마스터 각</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-hmwrk-4.svg"
alt="badge">
<figcaption>노력은 곧 성과</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-larn-1.svg"
alt="badge">
<figcaption>못해도 도전</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-larn-2.svg"
alt="badge">
<figcaption>시간 지킴이</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-larn-3.svg"
alt="badge">
<figcaption>과제 제출도 약속</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-larn-4.svg"
alt="badge">
<figcaption>칼같이 시간 지키기</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/badge-icon/badge-larn-5.svg"
alt="badge">
<figcaption>이쯤이야 식은 죽 먹기</figcaption>
</figure>
</li>
</ul>
</div>
<div>
<h4>emotion-icon</h4>
<ul class="icon-wrap">
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/emotion/emotion-happy.svg"
alt="emotion">
<figcaption>기뻐요</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/emotion/emotion-absurd.svg"
alt="emotion">
<figcaption>황당해요</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/emotion/emotion-sick.svg"
alt="emotion">
<figcaption>아파요</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/emotion/emotion-proud.svg"
alt="emotion">
<figcaption>뿌듯해요</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/emotion/emotion-angry.svg"
alt="emotion">
<figcaption>화나요</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/emotion/emotion-flutter.svg"
alt="emotion">
<figcaption>설레요</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/emotion/emotion-sad.svg"
alt="emotion">
<figcaption>슬퍼요</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/emotion/emotion-love.svg"
alt="emotion">
<figcaption>사랑해요</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/emotion/emotion-scary.svg"
alt="emotion">
<figcaption>무서워요</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/emotion/emotion-excited.svg"
alt="emotion">
<figcaption>신나요</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/emotion/emotion-not.svg"
alt="emotion">
<figcaption>해당하는 감정이 없어요</figcaption>
</figure>
</li>
</ul>
</div>
</article>
<article>
<h3>Profile</h3>
<h5>프로필 <label class="label-mark">New</label></h5>
<div class="profile sm">
<div class="img-area">
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/profile/profile-stu.svg"
alt="학생 섬네일">
</figure>
</div>
<div class="txt-area">
<strong class="profile-tit">학생명</strong>
<span>25.01.01</span>
</div>
<div class="fnc">
<button type="button" class="ico-setting">설정</button>
</div>
</div>
<div class="profile">
<div class="img-area">
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/profile/profile-stu.svg"
alt="학생 섬네일">
</figure>
</div>
<div class="txt-area">
<strong class="profile-tit">학생명</strong>
<span>25.01.01</span>
</div>
<div class="fnc">
<button type="button" class="ico-setting">설정</button>
</div>
</div>
<div class="profile lg">
<div class="img-area">
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/profile/profile-stu.svg"
alt="학생 섬네일">
</figure>
</div>
<div class="txt-area">
<strong class="profile-tit">학생명</strong>
<span>25.01.01</span>
</div>
<div class="fnc">
<button type="button" class="btn sm circle ico-setting">설정</button>
</div>
</div>
<div class="profile xlg">
<div class="img-area">
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/profile/profile-stu.svg"
alt="학생 섬네일">
</figure>
</div>
<div class="txt-area">
<strong class="profile-tit">학생명</strong>
<span>25.01.01</span>
</div>
<div class="fnc">
<button type="button" class="ico-setting">설정</button>
</div>
</div>
<h5>IMG-PNG 파일</h5>
<ul class="profile-wrap">
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/thumb/profile-stu.png"
alt="학생 섬네일">
</li>
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/thumb/profile-par.png"
alt="학부모 섬네일">
</li>
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/thumb/profile-tea.png"
alt="선생님 섬네일">
</li>
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/thumb/profile-org.png"
alt="단체 섬네일">
</li>
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/thumb/profile-sys.png"
alt="시스템 섬네일">
</li>
</ul>
<ul class="profile-wrap">
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/thumb/profile-stu.png"
alt="학생 섬네일">
<div class="txt-area"> 학생명 <span>2023-07-26</span>
</div>
</li>
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/thumb/profile-par.png"
alt="학부모 섬네일">
<div class="txt-area"> 학부모명 <span>2023-07-26</span>
</div>
</li>
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/thumb/profile-tea.png"
alt="선생님 섬네일">
<div class="txt-area"> 선생님명 <span>2023-07-26</span>
</div>
</li>
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/thumb/profile-org.png"
alt="단체 섬네일">
<div class="txt-area"> 단체명 <span>2023-07-26</span>
</div>
</li>
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/thumb/profile-sys.png"
alt="시스템 섬네일">
<div class="txt-area"> 시스템명 <span>2023-07-26</span>
</div>
</li>
</ul>
<h5>IMG-SVG 파일</h5>
<ul class="profile-wrap">
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/profile/profile-stu.svg"
alt="학생 섬네일">
</li>
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/thumb/profile-par.svg"
alt="학부모 섬네일">
</li>
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/profile/profile-tea.svg"
alt="선생님 섬네일">
</li>
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/profile/profile-org.svg"
alt="단체 섬네일">
</li>
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/thumb/profile-sys.svg"
alt="시스템 섬네일">
</li>
</ul>
<ul class="profile-wrap">
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/profile/profile-stu.svg"
alt="학생 섬네일">
<div class="txt-area"> 학생명 <span>2023-07-26</span>
</div>
</li>
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/thumb/profile-par.svg"
alt="학부모 섬네일">
<div class="txt-area"> 학부모명 <span>2023-07-26</span>
</div>
</li>
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/profile/profile-tea.svg"
alt="선생님 섬네일">
<div class="txt-area"> 선생님명 <span>2023-07-26</span>
</div>
</li>
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/profile/profile-org.svg"
alt="단체 섬네일">
<div class="txt-area"> 단체명 <span>2023-07-26</span>
</div>
</li>
<li class="profile-area">
<img src="../../../../resources/front/site/SITE_00000/images/common/thumb/profile-sys.svg"
alt="시스템 섬네일">
<div class="txt-area"> 시스템명 <span>2023-07-26</span>
</div>
</li>
</ul>
<h5>BACK-SVG 파일</h5>
<ul class="profile-wrap">
<li class="profile-area">
<div class="img-area img-stu-area">
<span class="ico-profile-stu">사용자 섬네일</span>
</div>
</li>
<li class="profile-area">
<div class="img-area img-par-area">
<span class="ico-profile-par">사용자 섬네일</span>
</div>
</li>
<li class="profile-area">
<div class="img-area img-tea-area">
<span class="ico-profile-tea">사용자 섬네일</span>
</div>
</li>
<li class="profile-area">
<div class="img-area img-org-area">
<span class="ico-profile-org">사용자 섬네일</span>
</div>
</li>
<li class="profile-area">
<div class="img-area img-sys-area">
<span class="ico-profile-sys">사용자 섬네일</span>
</div>
</li>
</ul>
<ul class="profile-wrap">
<li class="profile-area">
<div class="img-area img-stu-area">
<span class="ico-profile-stu">사용자 섬네일</span>
</div>
<div class="txt-area"> 학생명 <span>2023-07-26</span>
</div>
</li>
<li class="profile-area">
<div class="img-area img-par-area">
<span class="ico-profile-par">사용자 섬네일</span>
</div>
<div class="txt-area"> 학부모명 <span>2023-07-26</span>
</div>
</li>
<li class="profile-area">
<div class="img-area img-tea-area">
<span class="ico-profile-tea">사용자 섬네일</span>
</div>
<div class="txt-area"> 선생님명 <span>2023-07-26</span>
</div>
</li>
<li class="profile-area">
<div class="img-area img-org-area">
<span class="ico-profile-org">사용자 섬네일</span>
</div>
<div class="txt-area"> 단체명 <span>2023-07-26</span>
</div>
</li>
<li class="profile-area">
<div class="img-area img-sys-area">
<span class="ico-profile-sys">사용자 섬네일</span>
</div>
<div class="txt-area">
<strong>시스템명</strong>
<span>2023-07-26</span>
</div>
</li>
</ul>
</article>
</section>
<section class="g-section">
<header>
<h1>UI Style Guide</h1>
<h2>Tabs</h2>
<em>다채움</em>
</header>
<article>
<h3>tabs-nav-lg</h3>
<ul class="tabs-nav-lg">
<li><a href="#none" class="is-active">tabs1</a></li>
<li><a href="#none">tabs2</a></li>
<li><a href="#none">tabs3</a></li>
</ul>
</article>
<article>
<h3>tabs-nav</h3>
<ul class="tabs-nav">
<li><a href="#none" class="is-active">tabs1</a></li>
<li><a href="#none">tabs2</a></li>
<li><a href="#none">tabs3</a></li>
</ul>
<ul class="tabs-nav full">
<li><a href="#none" class="is-active">tabs full1</a></li>
<li><a href="#none">tabs full2</a></li>
<li><a href="#none">tabs full3</a></li>
</ul>
</article>
<article>
<h3>tabs-nav-sm</h3>
<ul class="tabs-nav-sm">
<li><a href="#none" class="is-active">tabs1</a></li>
<li><a href="#none">tabs2</a></li>
<li><a href="#none">tabs3</a></li>
</ul>
</article>
<article>
<h3>tabs-nav-xsm</h3>
<ul class="tabs-nav-xsm">
<li><a href="#setting1" class="is-active">읽기 <i class="ico-check"></i></a></li>
<li><a href="#setting2">쓰기 <i class="ico-check"></i></a></li>
<li><a href="#setting3">셈하기</a></li>
<li><a href="#setting3">셈하기2</a></li>
</ul>
</article>
<article>
<h3>tabs-nav-img</h3>
<ul class="tabs-nav-img">
<li>
<a href="#basicquiz1" class="is-active">
<div class="img-area">
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/temp/img_read.svg"
alt="이미지">
</figure>
</div>
<div class="txt-area">
<strong>3R's (읽기)</strong>
</div>
</a>
</li>
<li>
<a href="#basicquiz2">
<div class="img-area">
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/temp/img_write.svg"
alt="이미지">
</figure>
</div>
<div class="txt-area">
<strong>3R's (쓰기)</strong>
</div>
</a>
</li>
<li>
<a href="#basicquiz3">
<div class="img-area">
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/temp/img_sum.svg"
alt="이미지">
</figure>
</div>
<div class="txt-area">
<strong>3R's (셈하기)</strong>
</div>
</a>
</li>
<li>
<a href="#basicquiz4">
<div class="img-area">
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/temp/img_korean.svg"
alt="이미지">
</figure>
</div>
<div class="txt-area">
<strong>국어</strong>
</div>
</a>
</li>
<li>
<a href="#basicquiz5">
<div class="img-area">
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/temp/img_math.svg"
alt="이미지">
</figure>
</div>
<div class="txt-area">
<strong>수학</strong>
</div>
</a>
</li>
</ul>
</article>
</section>
<section class="g-section">
<header>
<h1>UI Style Guide</h1>
<h2>Label</h2>
<em>다채움</em>
</header>
<article>
<h3>Label</h3>
<div class="label-area">
<span class="label">label</span>
<span class="label blue">label blue</span>
<span class="label green">label green</span>
<span class="label yellow">label yellow</span>
<span class="label red">label red</span>
</div>
<div class="label-area">
<button type="button" class="label">label button</button>
<button type="button" class="label blue">label blue button</button>
<button type="button" class="label green">label green button</button>
<button type="button" class="label yellow">label yellow button</button>
<button type="button" class="label red">label red button</button>
</div>
<div class="label-area">
<a href="#none" class="label">label a</a>
<a href="#none" class="label blue">label blue button</a>
<a href="#none" class="label green">label green button</a>
<a href="#none" class="label yellow">label yellow button</a>
<a href="#none" class="label red">label red button</a>
</div>
</article>
<article>
<h3>Label Large</h3>
<div class="label-area">
<span class="label lg">label</span>
<span class="label lg blue">label blue</span>
<span class="label lg green">label green</span>
<span class="label lg yellow">label yellow</span>
<span class="label lg red">label red</span>
</div>
</article>
<article>
<h3>Label state</h3>
<div class="label-area">
<span class="label-state">대기</span>
<span class="label-state blue">진행중</span>
<span class="label-state green">승인</span>
<span class="label-state yellow">보류</span>
<span class="label-state red">반려</span>
</div>
<div class="label-area">
<button type="button" class="label-state">대기</button>
<button type="button" class="label-state blue">진행중</button>
<button type="button" class="label-state green">승인</button>
<button type="button" class="label-state yellow">보류</button>
<button type="button" class="label-state red">반려</button>
</div>
<div class="label-area">
<a href="#none" class="label-state">대기</a>
<a href="#none" class="label-state blue">진행중</a>
<a href="#none" class="label-state green">승인</a>
<a href="#none" class="label-state yellow">보류</a>
<a href="#none" class="label-state red">반려</a>
</div>
</article>
<article>
<h3>Label mark</h3>
<div class="label-area">
<span class="label-mark">Mark</span>
<span class="label-mark info">Update</span>
<span class="label-mark accent">N</span>
</div>
<div class="label-area">
<span class="label-mark lg">Mark</span>
<span class="label-mark info lg">Update</span>
<span class="label-mark accent lg">New</span>
</div>
</article>
<article>
<h3>Label cont</h3>
<div class="label-area">
<span class="label-cont-img">이미지</span>
<span class="label-cont-video">영상</span>
<span class="label-cont-doc">문서</span>
<span class="label-cont-quiz">문항</span>
<span class="label-cont-test">평가지</span>
<span class="label-cont-pack">수업꾸러미</span>
<span class="label-cont-recipe">수업레시피</span>
</div>
</article>
<article>
<h3>Label num</h3>
<div class="label-area">
<span class="label num">1</span>
<span class="label num">2</span>
<span class="label num">3</span>
</div>
<div class="label-area">
<span class="label num lg">1</span>
<span class="label num lg">2</span>
<span class="label num lg">3</span>
</div>
</article>
</section>
<section class="g-section">
<header>
<h1>UI Style Guide</h1>
<h2>accordion</h2>
<em>다채움</em>
</header>
<article>
<h3>accordion</h3>
<ul class="accordion-list">
<li class="accordion-item">
<div class="accordion-tit-area">
<a href="#none" class="btn-accordion-toggle">열기 닫기</a>
<span class="label blue">다채움</span>
<div class="accordion-tit"> 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법
안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 </div>
</div>
<div class="accordion-txt-area"> 내용 내용 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내
사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내
사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내
사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내
사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 사이트 이용방법 안내 </div>
</li>
<li class="accordion-item">
<div class="accordion-tit-area">
<a href="#none" class="btn-accordion-toggle">열기 닫기</a>
<span class="label blue">다채움</span>
<div class="accordion-tit"> 사이트 이용방법 안내 </div>
</div>
<div class="accordion-txt-area"> 내용 내용 </div>
</li>
</ul>
</article>
</section>
<section class="g-section">
<header>
<h1>UI Style Guide</h1>
<h2>Table</h2>
<em>다채움</em>
</header>
<article>
<h3>list-type</h3>
<div class="fnc-area">
<div class="l-area">
<p>Total <strong class="font-color-orange">173</strong></p>
</div>
<div class="r-area">
<select class="border-none sm">
<option>10개씩 보기</option>
</select>
<fieldset class="search-area">
<legend>검색</legend>
<div class="search-option">
<select>
<option>search option 1</option>
<option>search option 12</option>
</select>
</div>
<div class="search">
<input type="text" placeholder="Enter Search Keyword" title="검색어 입력">
<button class="btn ico-search">검색</button>
</div>
</fieldset>
</div>
</div>
<div class="list-type">
<table>
<caption>리스트타입 목록으로 선택, No, 제목, 첨부, 작성자, 조회수, 등록일로 구성되어있습니다.</caption>
<colgroup>
<col style="width:40px">
<col style="width:80px">
<col>
<col style="width:40px">
<col style="width:120px">
<col style="width:80px">
<col style="width:80px">
<col style="width:120px">
<col style="width:120px">
</colgroup>
<thead>
<tr>
<th scope="col"><label class="checkbox icon-only"><input
type="checkbox"><span>선택</span></label></th>
<th scope="col">No</th>
<th scope="col">제목</th>
<th scope="col">첨부</th>
<th scope="col">상태</th>
<th scope="col">조회수</th>
<th scope="col">작성자</th>
<th scope="col">등록일</th>
<th scope="col">기능</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox icon-only"><input type="checkbox"><span>선택</span></label>
</td>
<td>3</td>
<td class="align-left">
<a href="#none" class="table-title">링크-가나다라마바사아자차카타파하사
가나다라마바사아자차카타파하사가나다라마바사아자차카타파하사가나다라마바사아자차카타파하사가나다라마바사아자차카타파하사</a>
</td>
<td><i class="ico-attach"><span class="txt-hide">첨부파일</span></i></td>
<td><span class="label-state">대기</span></td>
<td>123,132</td>
<td>관리자</td>
<td>2020-07-23</td>
<td>
<div class="etc-fnc-area">
<button type="button" class="btn-etc-fnc btn-ico ico-more-vert">더보기</button>
<ul class="etc-fnc">
<li><a href="#none">수정</a></li>
<li><button type="button">삭제</button></li>
<li><button type="button">복사</button></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<label class="checkbox icon-only"><input type="checkbox"><span>선택</span></label>
</td>
<td>2</td>
<td class="align-left">
<a href="#none" class="table-title">링크-가나다라마바사아자차키타파하</a>
</td>
<td><i class="ico-attach"><span class="txt-hide">첨부파일</span></i></td>
<td><span class="label-state blue">진행중</span></td>
<td>123,132</td>
<td>관리자</td>
<td>2020-07-23</td>
<td>
<div class="etc-fnc-area">
<button type="button" class="btn-etc-fnc btn-ico ico-more-vert">더보기</button>
<ul class="etc-fnc">
<li><a href="#none">수정</a></li>
<li><button type="button">삭제</button></li>
<li><button type="button">복사</button></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<label class="checkbox icon-only"><input type="checkbox"><span>선택</span></label>
</td>
<td>1</td>
<td class="align-left">
<p class="table-title">링크-가나다라마바사아자차키타파하</p>
</td>
<td><i class="ico-attach"><span class="txt-hide">첨부파일</span></i></td>
<td><span class="label-state red">반려</span></td>
<td>123,132</td>
<td>관리자</td>
<td>2020-07-23</td>
<td>
<div class="etc-fnc-area">
<button type="button" class="btn-etc-fnc btn-ico ico-more-vert">더보기</button>
<ul class="etc-fnc">
<li><a href="#none">수정</a></li>
<li><button type="button">삭제</button></li>
<li><button type="button">복사</button></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<ul class="pagenation">
<li class="ppv">
<a href="#none" class="btn ico-ppv circle sm" title="전체 목록에서 가장 처음 목록으로 이동합니다">처음으로</a>
</li>
<li class="pv">
<a href="#none" class="btn ico-pv circle sm" title="이전 목록으로 이동합니다">이전으로</a>
</li>
<li class="current">
<span title="현재 페이지">1</span>
</li>
<li>
<a href="#none" title="2번째 목록으로 이동합니다">2</a>
</li>
<li>
<a href="#none" title="3번째 목록으로 이동합니다">3</a>
</li>
<li>
<a href="#none" title="4번째 목록으로 이동합니다">4</a>
</li>
<li>
<a href="#none" title="5번째 목록으로 이동합니다">5</a>
</li>
<li class="fw">
<a href="#none" class="btn ico-fw circle sm" title="다음 목록으로 이동합니다">다음으로</a>
</li>
<li class="ffw">
<a href="#none" class="btn ico-ffw circle sm" title="전체 목록에서 가장 마지막 목록으로 이동합니다">끝으로</a>
</li>
</ul>
<div class="btn-flex-cont">
<div class="r-area">
<button class="btn danger">삭제</button>
<button class="btn secondary">복제</button>
<button class="btn">수정</button>
<button class="btn primary">글쓰기</button>
</div>
</div>
</article>
<article>
<h3>write-type</h3>
<ol class="step">
<li class="is-active">
<span class="num">1</span>
<p>
<strong>진행완료</strong>
<small>보조설명</small>
</p>
</li>
<li class="is-active">
<span class="num">2</span>
<p>
<strong>진행중</strong>
<small>보조설명</small>
</p>
</li>
<li class="is-current">
<span class="num">3</span>
<p>
<strong>진행후</strong>
<small>보조설명</small>
</p>
</li>
<li>
<span class="num">4</span>
<p>
<strong>진행완료</strong>
<small>보조설명</small>
</p>
</li>
</ol>
<div class="write-type">
<table>
<caption>write-type table</caption>
<colgroup>
<col style="width:240px">
<col>
</colgroup>
<tbody>
<tr>
<th scope="row">셀렉트 유형<i class="required">필수</i></th>
<td>
<select title="셀렉트 타이틀1 선택">
<option>선택1</option>
</select>
</td>
</tr>
<tr>
<th>인풋 q0 <small class="txt-option">(선택)</small></th>
<td>
<input type="text" title="인풋박스" class="q0">
</td>
</tr>
<tr>
<th scope="row">인풋 q1</th>
<td>
<input type="text" title="인풋박스" class="q1">
<input type="text" title="인풋박스" class="q1">
<input type="text" title="인풋박스" class="q1">
<input type="text" title="인풋박스" class="q1">
</td>
</tr>
<tr>
<th scope="row">인풋 q2</th>
<td>
<input type="text" title="인풋박스" class="q2">
<input type="text" title="인풋박스" class="q2">
</td>
</tr>
<tr>
<th scope="row">인풋 q3</th>
<td>
<input type="text" title="인풋박스" class="q3">
</td>
</tr>
<tr>
<th scope="row">인풋 q4</th>
<td>
<input type="text" title="인풋박스" class="q4">
</td>
</tr>
<tr>
<th scope="row">인풋 체크박스<i class="required">필수</i></th>
<td>
<fieldset>
<legend>인풋라디오</legend>
<label class="checkbox"><input type="checkbox" name="tblCheckbox"
checked><span>Default</span></label>
<label class="checkbox"><input type="checkbox"
name="tblCheckbox"><span>Default</span></label>
</fieldset>
</td>
</tr>
<tr>
<th scope="row">인풋 라디오<i class="required">필수</i></th>
<td>
<fieldset>
<legend>인풋라디오</legend>
<label class="radio"><input type="radio" name="tblRadio"
checked><span>Default</span></label>
<label class="radio"><input type="radio"
name="tblRadio"><span>Default</span></label>
</fieldset>
</td>
</tr>
<tr>
<th scope="row">보조텍스트<i class="required">필수</i></th>
<td>
<input type="text" title="인풋박스" class="q2">
<p class="message"><em>보조</em>텍스트</p>
</td>
</tr>
<tr>
<th scope="row">주소<i class="required">필수</i></th>
<td>
<input type="text" title="우편번호 입력" class="q0">
<button type="button" class="btn secondary">우편번호</button>
<input type="text" title="주소 입력" class="q4">
<input type="text" title="상세주소 입력" class="q4">
</td>
</tr>
<tr>
<th>전화번호</th>
<td>
<select title="전화번호 앞자리 선택">
<option>010</option>
<option>011</option>
</select>
<input type="text" title="전화번호 입력" placeholder="‘-‘없이 숫자만 입력하세요.">
<button type="submit" class="btn secondary" disabled>인증번호</button>
</td>
</tr>
<tr>
<th>이메일</th>
<td>
<input type="text" title="이메일 입력">
<span>@</span>
<input type="text" title="이메일 입력">
<select title="이메일 선택">
<option>naver.com</option>
</select>
<button class="btn secondary">중복확인</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="btn-cont">
<button type="submit" class="btn lg primary">확인</button>
<button type="submit" class="btn lg">취소</button>
</div>
<div class="btn-flex-cont">
<div class="l-area">
<a href="#none" class="btn lg">이전</a>
</div>
<div class="r-area">
<button type="submit" class="btn lg">임시저장</button>
<button type="submit" class="btn lg">취소</button>
<button type="submit" class="btn lg primary">저장</button>
</div>
</div>
</article>
<article>
<h3>info-type</h3>
<div class="info-type">
<table>
<caption>종합결과</caption>
<thead>
<tr>
<!-- <th scope="col">이름</th>
<th scope="col">아이디</th> -->
<th scope="col">3R’s (읽기)</th>
<th scope="col">3R’s (쓰기)</th>
<th scope="col">3R’s (셈하기)</th>
<th scope="col">국어</th>
<th scope="col">수학</th>
<th scope="col">전체 맞은 개수</th>
</tr>
</thead>
<tbody>
<tr>
<!-- <td>초등학생1</td>
<td>abc123@cbe.go.kr</td> -->
<td>15</td>
<td>15</td>
<td>15</td>
<td class="font-color-red">1(미도달)</td>
<td class="font-color-red">1(미도달)</td>
<td>49/100</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
<section class="g-section">
<header>
<h1>UI Style Guide</h1>
<h2>Popup</h2>
<em>다채움</em>
</header>
<article>
<h3>Popup</h3>
<div class="dim"></div>
<div style="display: flex; gap:.8rem; flex-wrap: wrap;">
<button type="button" class="btn" onclick="popupOpenPub('popupmodal')">모달 팝업</button>
<div class="popup-modal" data-popuppub="popupmodal">
<div class="pop-header">
<h1>팝업 타이틀</h1>
</div>
<div class="pop-body">
<button type="button" class="btn" onclick="popupOpenPub('popup')">모달 팝업2</button>
</div>
<div class="pop-footer">
<div class="pop-btn-cont">
<button type="button" class="btn" onclick="popupClosePub('popupmodal')">취소</button>
<button type="button" class="btn primary" onclick="popupClosePub('popupmodal')">확인</button>
</div>
</div>
<button type="button" class="pop-close"><span class="txt-hide">팝업닫기</span></button>
</div>
<button type="button" class="btn" onclick="popupOpenPub('popup')">팝업</button>
<div class="popup" data-popuppub="popup">
<div class="pop-header">
<h1>팝업 타이틀</h1>
<p>Description</p>
</div>
<div class="pop-body"> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
</div>
<div class="pop-footer">
<div class="pop-btn-cont">
<button type="button" class="btn" onclick="popupClosePub('popup')">취소</button>
<button type="button" class="btn primary" onclick="popupOpenPub('popup-sm')">확인</button>
</div>
</div>
<button type="button" class="pop-close">팝업닫기</button>
</div>
<button type="button" class="btn" onclick="popupOpenPub('popup-sm')">팝업 sm</button>
<div class="popup sm" data-popuppub="popup-sm">
<div class="pop-header">
<h1>팝업 타이틀</h1>
</div>
<div class="pop-body"> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
</div>
<div class="pop-footer">
<div class="pop-btn-cont">
<button type="button" class="btn" onclick="popupClosePub('popup-sm')">취소</button>
<button type="button" class="btn primary" onclick="popupOpenPub('popup-lg')">확인</button>
</div>
</div>
<button type="button" class="pop-close">팝업닫기</button>
</div>
<button type="button" class="btn" onclick="popupOpenPub('popup-lg')">팝업 lg</button>
<div class="popup lg" data-popuppub="popup-lg">
<div class="pop-header">
<h1>팝업 타이틀</h1>
</div>
<div class="pop-body"> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
</div>
<div class="pop-footer">
<div class="pop-btn-cont">
<button type="button" class="btn" onclick="popupClosePub('popup-lg')">취소</button>
<button type="button" class="btn primary" onclick="popupOpenPub('popup-xlg')">확인</button>
</div>
</div>
<button type="button" class="pop-close">팝업닫기</button>
</div>
<button type="button" class="btn" onclick="popupOpenPub('popup-xlg')">팝업 xlg</button>
<div class="popup xlg" data-popuppub="popup-xlg">
<div class="pop-header">
<h1>팝업 타이틀</h1>
</div>
<div class="pop-body"> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
</div>
<div class="pop-footer">
<div class="pop-btn-cont">
<button type="button" class="btn" onclick="popupClosePub('popup-xlg')">취소</button>
<button type="button" class="btn primary" onclick="popupClosePub('popup-xlg')">확인</button>
</div>
</div>
<button type="button" class="pop-close">팝업닫기</button>
</div>
<button type="button" class="btn" onclick="popupOpenPub('popup-xxlg')">팝업 xxlg</button>
<div class="popup xxlg" data-popuppub="popup-xxlg">
<div class="pop-header">
<h1>팝업 타이틀</h1>
</div>
<div class="pop-body"> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
</div>
<div class="pop-footer">
<div class="pop-btn-cont">
<button type="button" class="btn" onclick="popupClosePub('popup-xxlg')">취소</button>
<button type="button" class="btn primary" onclick="popupClosePub('popup-xxlg')">확인</button>
</div>
</div>
<button type="button" class="pop-close">팝업닫기</button>
</div>
<button type="button" class="btn" onclick="popupOpenPub('popup-full')">팝업 full</button>
<div class="popup full" data-popuppub="popup-full">
<div class="pop-header">
<h1>팝업 타이틀</h1>
</div>
<div class="pop-body"> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
</div>
<div class="pop-footer">
<div class="pop-btn-cont">
<button type="button" class="btn" onclick="popupClosePub('popup-full')">취소</button>
<button type="button" class="btn primary" onclick="popupClosePub('popup-full')">확인</button>
</div>
</div>
<button type="button" class="pop-close">팝업닫기</button>
</div>
<button type="button" class="btn" onclick="popupOpenPub('popup-double')">이중 팝업</button>
<div class="popup" data-popuppub="popup-double">
<div class="pop-header">
<h1>팝업 타이틀</h1>
</div>
<div class="pop-body"> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br> 내용내용<br>
</div>
<div class="pop-footer">
<div class="pop-btn-cont">
<button type="button" class="btn primary pop-double-open"
onclick="popupOpenPub('pop-double')">확인</button>
</div>
</div>
<button type="button" class="pop-close">팝업닫기</button>
</div>
<div class="popup sm pop-double" data-popuppub="pop-double">
<div class="pop-header">
<h1>이중 팝업 타이틀</h1>
</div>
<div class="pop-body"> 내용내용<br> 내용내용<br> 내용내용<br>
</div>
<div class="pop-footer">
<div class="pop-btn-cont">
<button type="button" class="btn pop-double-close">취소</button>
<button type="button" class="btn primary pop-double-close">확인</button>
</div>
</div>
<button type="button" class="pop-close pop-double-close">팝업닫기</button>
</div>
<!-- <button type="button" class="btn" onclick="popupOpenPub('popupZoom')">팝업 이미지 zoom</button>
<div class="popup-zoom" data-popuppub="popupZoom">
<div class="pop-body">
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/temp/img1.jpg" alt="이미지 원본">
</figure>
</div>
<button type="button" class="pop-close white lg">
<span class="txt-hide">팝업닫기</span>
</button>
</div> -->
</div>
</article>
<article>
<h3>Popup Alert</h3>
<div style="display: flex; gap:.8rem; flex-wrap: wrap;">
<button type="button" class="btn" onclick="popupOpenPub('alert-popup')">alert 팝업</button>
<div class="popup-alert-area" data-popuppub="alert-popup">
<div class="popup-alert">
<div class="pop-header">
<h1>alert 팝업 타이틀</h1>
</div>
<div class="pop-body"> alert 메세지 alert 메세지<br> alert 메세지 alert 메세지 </div>
<div class="pop-footer">
<button type="button" onclick="popupClosePub('alert-popup')">취소</button>
<button type="button" class="primary" onclick="popupClosePub('alert-popup')">확인</button>
</div>
</div>
</div>
<button type="button" class="btn" onclick="popupOpenPub('alert-popup2')">alert 팝업(타이틀없음)</button>
<div class="popup-alert-area" data-popuppub="alert-popup2">
<div class="popup-alert">
<div class="pop-body"> alert 메세지 alert 메세지<br> alert 메세지 alert 메세지 </div>
<div class="pop-footer">
<button type="button" class="primary" onclick="popupClosePub('alert-popup2')">확인</button>
</div>
</div>
</div>
<button type="button" class="btn" onclick="popupOpenPub('alert-popup3')">alert 팝업(승인, 삭제)</button>
<div class="popup-alert-area" data-popuppub="alert-popup3">
<div class="popup-alert">
<div class="pop-header">
<h1>alert 승인, 삭제</h1>
</div>
<div class="pop-body"> alert 메세지 alert 메세지<br> alert 메세지 alert 메세지 </div>
<div class="pop-footer">
<button type="button" class="secondary" onclick="popupClosePub('alert-popup3')">승인</button>
<button type="button" class="danger" onclick="popupClosePub('alert-popup3')">삭제</button>
</div>
</div>
</div>
</div>
</article>
<!-- <article>
<h3>modal</h3>
<div style="display: flex; gap:.8rem; flex-wrap: wrap;">
<button type="button" class="btn" onclick="modalOpenPub('modal')">모달 팝업</button>
<div class="popup-modal-area" data-modalpub="modal">
<div class="popup-modal">
<div class="pop-header">
<h1>팝업 타이틀</h1>
</div>
<div class="pop-body">
<button type="button" class="btn" onclick="modalOpenPub('modal2')">모달 팝업2</button>
</div>
<div class="pop-footer">
<div class="pop-btn-cont">
<button type="button" class="btn" onclick="modalClosePub('modal')">취소</button>
<button type="button" class="btn primary" onclick="modalOpenPub('modal2')">확인</button>
</div>
</div>
<button type="button" class="pop-close"><span class="txt-hide">팝업닫기</span></button>
</div>
<div class="dim-modal"></div>
</div>
<div class="popup-modal-area" data-modalpub="modal2">
<div class="popup-modal">
<div class="pop-header">
<h1>팝업 타이틀2</h1>
</div>
<div class="pop-body">
111
</div>
<button type="button" class="pop-close"><span class="txt-hide">팝업닫기</span></button>
</div>
<div class="dim-modal"></div>
</div>
</div>
<div class="toast"></div>
</article> -->
<article>
<h3>Toast</h3>
<div>
<button type="button" class="btn" onclick="toastShow('토스트 메세지 입니다.')">toast</button>
</div>
<div class="toast"></div>
</article>
</section>
<section class="g-section">
<header>
<h1>UI Style Guide</h1>
<h2>색연필</h2>
<em>다채움</em>
</header>
<article>
<h3>색연필</h3>
<!-- 색연필을 적용할 컨테이너 class="paint-target" -->
<div class="paint-target" style="height: 50rem;"> The Quick Brown Fox Jumps Over The Lazy Dog<br> The Quick
Brown Fox Jumps Over The Lazy Dog<br> The Quick Brown Fox Jumps Over The Lazy Dog<br>
</div>
<!-- 색연필을 작동시키는 버튼 data-toggle="viewer-painter" -->
<button type="button" class="btn btn-painter-toggle">색연필</button>
</article>
</section>
<section class="g-section">
<header>
<h1>UI Style Guide</h1>
<h2>Etc</h2>
<em>다채움</em>
</header>
<article>
<h3>bullet</h3>
<ul class="bullet">
<li>bullet</li>
<li>bullet</li>
<li>bullet</li>
</ul>
<ul class="bullet-none">
<li>bullet-none</li>
<li>bullet-none</li>
<li>bullet-none</li>
</ul>
<ul class="bullet-tit">
<li><strong class="tit">bullet-tit</strong> bullet-tit내용</li>
<li><strong class="tit">제목입력</strong>회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.</li>
<li><strong class="tit">제목입력</strong>기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.</li>
</ul>
<ul class="bullet-dash">
<li>bullet-dash</li>
<li>bullet-dash</li>
<li>bullet-dash</li>
</ul>
<ul class="bullet-hangul">
<li>bullet-hangul</li>
<li>bullet-hangul</li>
<li>bullet-hangul</li>
</ul>
</article>
<article>
<h3>box</h3>
<div class="bg-box">
<h3 class="title-sm">box 타이틀</h3>
<ul class="bullet">
<li>bullet</li>
<li>회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.</li>
<li>기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.</li>
</ul>
<ul class="bullet-tit">
<li><strong class="tit">bullet-tit</strong> bullet-tit내용</li>
<li><strong class="tit">제목입력</strong>회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.</li>
<li><strong class="tit">제목입력</strong>기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.</li>
</ul>
<ul class="bullet-dash">
<li>bullet-dash</li>
<li>회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.</li>
<li>기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.</li>
</ul>
</div>
<div class="border-box">
<h3 class="title-sm">border-box</h3>
<ul class="bullet">
<li>bullet</li>
<li>회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.</li>
<li>기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.</li>
</ul>
<ul class="bullet-tit">
<li><strong class="tit">bullet-tit</strong> bullet-tit내용</li>
<li><strong class="tit">제목입력</strong>회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.</li>
<li><strong class="tit">제목입력</strong>기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.</li>
</ul>
<ul class="bullet-dash">
<li>bullet-dash</li>
<li>회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.</li>
<li>기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.</li>
</ul>
</div>
<div class="border-box bg sm">
<h3 class="title-sm">border-box bg sm</h3>
<ul class="bullet">
<li>bullet</li>
<li>회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.</li>
<li>기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.</li>
</ul>
<ul class="bullet-tit">
<li><strong class="tit">bullet-tit</strong> bullet-tit내용</li>
<li><strong class="tit">제목입력</strong>회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.</li>
<li><strong class="tit">제목입력</strong>기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.</li>
</ul>
<ul class="bullet-dash">
<li>bullet-dash</li>
<li>회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.</li>
<li>기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.</li>
</ul>
</div>
<div class="bg-box">
<h3 class="title-sm">box 타이틀</h3>
<ul class="bullet">
<li>bullet</li>
<li>회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.</li>
<li>기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.</li>
</ul>
<ul class="bullet-tit">
<li><strong class="tit">bullet-tit</strong> bullet-tit내용</li>
<li><strong class="tit">제목입력</strong>회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.</li>
<li><strong class="tit">제목입력</strong>기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.</li>
</ul>
<ul class="bullet-dash">
<li>bullet-dash</li>
<li>회원 종류에 따라 가입절차에 차이가 있으며 반드시 본인이 해당하는 경우를 선택해주셔야 합니다.</li>
<li>기업회원으로 가입하시기 위해서는 사업자 등록번호 확인 절차를 반드시 거치셔야 합니다.</li>
</ul>
</div>
<div class="flex-box border-box">
<div class="flex1">
<div class="label-area">
<span class="label">초등 1,2,3학년</span>
<span class="label">말하고 읽기</span>
<span class="label">순서배열형</span>
<span class="label red">어려움</span>
<i class="ico-layer" title="세트문항"></i>
<!-- <button class="label"><i class="ico-plus sm"></i>9과15-01 외 7건</button> -->
</div>
<div class="txt-area">
<div class="editor-cont"> ①의 경우 왜냐하면 이하를 먼저 해석하여 아이들이 TV영향을 쉽게 받는다를 유추할 수 있고 ②의 경우는 "말다툼"이 핵심
</div>
</div>
</div>
<div class="box-fnc">
<button class="btn sm secondary">미리보기</button>
<button class="btn sm ico-delete circle danger">삭제</button>
</div>
</div>
</article>
<article>
<h3>hr</h3>
<hr class="solid">
<hr class="dashed">
</article>
<article>
<h3><span class="label blue">작업중</span>border-box-list</h3>
<ul class="border-box-list">
<li class="is-active">
<a href="#none" class="lnk-full">문항보기</a>
<span class="label num">1</span>
<div class="txt-area ">
<div class="flex-area">
<div class="l-area label-area">
<span class="label">단순선택형</span>
</div>
<div class="r-area"><small>4점</small></div>
</div>
<p>여러 가지 함수의 실수배, 합, 차, 곱을 미분하고, 그 과정을 설명할 수 있다.</p>
</div>
</li>
<li>
<a href="#none" class="lnk-full">문항보기</a>
<span class="label num">2</span>
<div class="txt-area ">
<div class="flex-area">
<div class="l-area label-area">
<span class="label">단순선택형</span>
</div>
<div class="r-area"><small>10점</small></div>
</div>
<p>여러 가지 함수의 실수배, 합, 차, 곱을 미분하고, 그 과정을 설명할 수 있다.</p>
</div>
</li>
<li>
<a href="#none" class="lnk-full">문항보기</a>
<span class="label num">3</span>
<div class="txt-area ">
<div class="flex-area">
<div class="l-area label-area">
<span class="label">단답형</span>
</div>
<div class="r-area"><small>4점</small></div>
</div>
<p>여러 가지 함수의 실수배, 합, 차, 곱을 미분하고, 그 과정을 설명할 수 있다.</p>
</div>
</li>
</ul>
</article>
<article>
<h3>info</h3>
<h4>info-block</h4>
<dl class="info-block">
<dt>info-block 타이틀1</dt>
<dd>
<input type="text" class="percent-width10" title="텍스트 입력">
</dd>
<dt>info-block 타이틀2</dt>
<dd>
<select class="percent-width10">
<option>클래스 선택</option>
<option>클래스</option>
</select>
</dd>
</dl>
<h4>info-list</h4>
<ul class="info-list">
<li>
<strong class="info-tit">콘텐츠 명</strong>
<div class="txt-area"> 조선시대 사람들도 연립방정식을 활용했을까? </div>
</li>
<li>
<strong class="info-tit"> 내용 </strong>
<div class="txt-area"> 미지수가 2개인 연립일차방정식을 활용하여 다양한 실생활 문제를 해결할 수 있다. </div>
</li>
<li>
<strong class="info-tit">키워드</strong>
<div class="txt-area">
<div class="tag-area">
<a href="#" class="tag">키워드</a>
<a href="#" class="tag">키워드</a>
<a href="#" class="tag">키워드</a>
</div>
</div>
</li>
<li>
<strong class="info-tit">주제 차시</strong>
<div class="txt-area">
<ul class="bullet-none">
<li>[중등 수학 (2-1)]일차부등식과 연립일차방정식(81~82)</li>
<li>[중등 수학 (2-1)]일차부등식과 연립일차방정식(81~82)</li>
<li>[중등 수학 (2-1)]일차부등식과 연립일차방정식(81~82)</li>
</ul>
</div>
</li>
<li>
<strong class="info-tit">붙임자료</strong>
<div class="txt-area">
<ul class="file-down-list">
<li><a href="#none">연립일차방정식 활용교재.pdf<small>46KB</small></a></li>
<li><a href="#none">연립일차방정식 활용교재.pdf<small>46KB</small></a></li>
</ul>
</div>
</li>
<li>
<strong class="info-tit">작성자</strong>
<div class="txt-area">김톡톡 선생님</div>
</li>
</ul>
<h4>info-block-list</h4>
<ul class="info-block-list">
<li>
<strong class="info-tit">학습과정</strong>
<div class="txt-area"> 학습과정 내용 </div>
</li>
<li>
<strong class="info-tit">활동명</strong>
<div class="txt-area"> 활동명 내용 </div>
</li>
</ul>
<h4>info-inline-list</h4>
<ul class="info-inline-list">
<li>
<strong class="info-tit">학습과정</strong>
<div class="txt-area"> 학습과정 내용 </div>
</li>
<li>
<i class="ico-calendar"></i>
<strong class="info-tit">제목</strong>
<div class="txt-area"> 내용 </div>
</li>
<li>
<i class="ico-calendar"></i>
<div class="txt-area"> 내용 </div>
</li>
</ul>
<ul class="info-inline-list no-style">
<li>
<strong class="info-tit">no-style</strong>
<div class="txt-area"> 학습과정 내용 </div>
</li>
<li>
<i class="ico-calendar"></i>
<strong class="info-tit"> 제목</strong>
<div class="txt-area"> 내용 </div>
</li>
<li>
<i class="ico-calendar"></i>
<div class="txt-area"> 내용 </div>
</li>
</ul>
<h4>tag</h4>
<div class="tag-area">
<a href="#" class="tag">키워드</a>
<a href="#" class="tag">키워드</a>
<a href="#" class="tag">키워드</a>
</div>
</article>
<article>
<h3>file</h3>
<div class="url-add-area">
<label>
<input type="text" placeholder="URL로 콘텐츠를 추가해주세요." title="텍스트 입력">
</label>
<button class="btn">추가</button>
</div>
<div class="file-add-area">
<div class="file-custom">
<input type="file" class="input-file" title="파일찾기">
<button type="button" class="btn">파일 찾기</button>
</div>
<div class="item-area">
<div class="item">
<p class="txt">파일명.jpg</p>
<button type="button" class="btn-ico ico-delete"><span class="txt-hide">삭제</span></button>
</div>
</div>
</div>
<div class="file-add-txt-area">
<div class="file-custom">
<input type="file" class="input-file" title="파일찾기">
<button type="button" class="btn">파일 찾기</button>
<input type="text" placeholder="파일로 콘텐츠를 추가해주세요." readonly title="파일추가">
</div>
<button class="btn">추가</button>
</div>
<!-- <ul class="file-list">
<li><a href="#none"><i class="ico-file-hwp"></i><span>첨부파일.PDF</span><span>2,000 KB</span></a><button class="btn-close sm"><span class="txt-hide">삭제</span></button></li>
<li><a href="#none"><i class="ico-file-pdf"></i><span>첨부파일.PDF</span><span>2,000 KB</span></a><button class="btn-close sm"><span class="txt-hide">삭제</span></button></li>
<li><a href="#none"><i class="ico-file-img"></i><span>첨부파일.PDF</span><span>2,000 KB</span></a><button class="btn-close sm"><span class="txt-hide">삭제</span></button></li>
<li><a href="#none"><i class="ico-file-ppt"></i><span>첨부파일.PDF</span><span>2,000 KB</span></a><button class="btn-close sm"><span class="txt-hide">삭제</span></button></li>
<li><a href="#none"><i class="ico-file-excel"></i><span>첨부파일.PDF</span><span>2,000 KB</span></a><button class="btn-close sm"><span class="txt-hide">삭제</span></button></li>
<li><a href="#none"><i class="ico-file-down"></i><span>첨부파일.PDF</span><span>2,000 KB</span></a><button class="btn-close sm"><span class="txt-hide">삭제</span></button></li>
<li><a href="#none"><i class="ico-file-etc"></i><span>첨부파일.PDF</span><span>2,000 KB</span></a><button class="btn-close sm"><span class="txt-hide">삭제</span></button></li>
</ul> -->
<ul class="file-down-list">
<li><a href="#none">연립일차방정식 활용교재.pdf <small>124kb</small></a></li>
<li><a href="#none">연립일차방정식 활용교재.pdf <small>124kb</small></a></li>
</ul>
<div class="item-list-box">
<div class="item">
<div class="txt-area">
<i class="ico-attach"></i>
<p class="txt"> 첨부파일명.pdf </p>
<small>124kb</small>
</div>
<div class="item-fnc-area">
<a href="#none" class="btn-ico ico-download"><span class="txt-hide">다운로드</span></a>
<button type="button" class="btn-ico ico-delete"><span class="txt-hide">삭제</span></button>
</div>
</div>
<div class="item">
<div class="txt-area">
<i class="ico-attach"></i>
<p class="txt">첨부파일명.pdf</p>
<small>124kb</small>
</div>
<div class="item-fnc-area">
<a href="#none" class="btn-ico ico-download"><span class="txt-hide">다운로드</span></a>
<button type="button" class="btn-ico ico-delete"><span class="txt-hide">삭제</span></button>
</div>
</div>
<div class="item">
<div class="txt-area">
<i class="ico-attach"></i>
<p class="txt">첨부파일명.pdf</p>
<small>124kb</small>
</div>
<div class="item-fnc-area">
<a href="#none" class="btn-ico ico-download"><span class="txt-hide">다운로드</span></a>
<button type="button" class="btn-ico ico-delete"><span class="txt-hide">삭제</span></button>
</div>
</div>
</div>
<div class="item-list-inline-box">
<div class="item">
<div class="txt-area">
<p class="txt"> 첨부파일명.pdf </p>
<small>124kb</small>
</div>
<div class="item-fnc-area">
<a href="#none" class="btn-ico ico-download"><span class="txt-hide">다운로드</span></a>
<button type="button" class="btn-ico ico-delete"><span class="txt-hide">삭제</span></button>
</div>
</div>
<div class="item">
<div class="txt-area">
<p class="txt">첨부파일명.pdf</p>
<small>124kb</small>
</div>
<div class="item-fnc-area">
<a href="#none" class="btn-ico ico-download"><span class="txt-hide">다운로드</span></a>
<button type="button" class="btn-ico ico-delete"><span class="txt-hide">삭제</span></button>
</div>
</div>
<div class="item">
<div class="txt-area">
<p class="txt">첨부파일명.pdf</p>
<small>124kb</small>
</div>
<div class="item-fnc-area">
<a href="#none" class="btn-ico ico-download"><span class="txt-hide">다운로드</span></a>
<button type="button" class="btn-ico ico-delete"><span class="txt-hide">삭제</span></button>
</div>
</div>
</div>
<div class="file-add-area">
<div class="file-custom">
<div class="preview-area">
<!-- <img src="../../../../resources/front/site/SITE_00000/images/temp/img1.jpg" alt="미리보기"> -->
</div>
</div>
<div class="item-area">
<div class="item">
<p class="txt">
비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일.mp4비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일.mp4비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일.mp4비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일비디오파일.mp4
</p>
<button type="button" class="btn-ico ico-delete"><span class="txt-hide">삭제</span></button>
</div>
</div>
</div>
</article>
<article>
<h3>txt-none</h3>
<div class="txt-none">
<p>검색어를 입력해주세요.</p>
</div>
<div class="txt-none">
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/common/img_file_check.svg"
alt="콘텐츠 없음">
</figure>
<p>검색결과가 없습니다.</p>
<div class="btn-area">
<a href="#none" class="btn sm ico-arrow-left">이전으로</a>
<a href="#none" class="btn sm ico-arrow-left">목록으로</a>
<a href="#none" class="btn sm ico-refresh">다시검색</a>
<a href="#none" class="btn sm ico-home">메인으로</a>
</div>
</div>
<div class="txt-none">
<figure>
<img src="../../../../resources/front/site/SITE_00000/images/common/common/img_file_block.svg"
alt="콘텐츠 없음">
</figure>
<p>콘텐츠가 없습니다.</p>
<div class="btn-area">
<a href="#none" class="btn sm ico-arrow-left">이전으로</a>
</div>
</div>
</article>
</section>
<script>
$(document).ready(function () {
$(".txt-count-area").each(function () {
const $txtcountarea = $(this);
const $textarea = $txtcountarea.find('textarea, input');
const $countarea = $txtcountarea.find('.txt-count');
const $countStrong = $countarea.find("strong");
const $maxCountSpan = $countarea.find("span");
const maxLength = parseInt($maxCountSpan.text(), 10);
const initialLength = $textarea.val().length;
$countStrong.text(initialLength);
$textarea.on("input", function () {
const currentLength = $(this).val().length;
$countStrong.text(currentLength);
if (currentLength > maxLength) {
$(this).val($(this).val().substring(0, maxLength));
$countStrong.text(maxLength);
toastShow('최대 글자 수를 초과했습니다.');
}
});
});
});
</script>
</body>
</html>