Code - yangart/sejongOn

<!DOCTYPE html> <html lang="ko"> <head> <title>온세종학교</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta name="format-detection" content="telephone=no"> <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">  <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.js"></script> <script src="/resources/front/site/SITE_00000/js/common-custom.js"></script>  <link rel="stylesheet" href="/resources/front/site/SITE_00000/css/styleGuide.css"> </head> <body> <section class="g-section"> <header> <h1>UI Style Guide</h1> <h2>Typography</h2> <em>온세종</em> </header> <article> <h3>Title</h3> <p>Title은 itle-xlg, title-lg, title, title-sm, title-xsm을 사용합니다.</p> <div class="page-tit-area"> <h2 class="title-xlg">page-tit-area: title-xlg</h2> </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>CTA</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 title="선택"> <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" title="정렬 선택"> <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> <fieldset class="search-area"> <legend>검색</legend> <div class="search-option"> <select title="선택"> <option>search option 1_1</option> <option>search option 1_2</option> </select> <select title="선택"> <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> </li> <li> <fieldset class="search-area sm"> <legend>검색</legend> <div class="search-option"> <select title="선택"> <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> </li> <li> <input type="date" id="inputDate0" class="input"> </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> <section class="form-box"> <div class="form-header"> <h3 class="txt-hide">정보입력</h3> <p>회원가입 시 등록한 휴대전화 번호를 입력 후 발송된 인증번호를 입력하세요.</p> </div> <div class="form-body wrap-xsm"> <ul class="form-list"> <li> <div class="form-tit-area"> <div class="l-area"> <strong class="form-tit">핸드폰번호</strong> </div> </div> <div class="form-cont"> <div class="form-row"> <div class="input-phone-area"> <div class="phone"> <select title="전화번호 앞자리 선택"> <option value="010">010</option> <option value="011">011</option> </select> <span aria-hidden="true">-</span> <input type="tel" inputmode="numeric" maxlength="4" pattern="[0-9]*" title="전화번호 가운데자리 입력"> <span aria-hidden="true">-</span> <input type="tel" inputmode="numeric" maxlength="4" pattern="[0-9]*" title="전화번호 뒷자리 입력"> </div> <div class="fnc"><button type="button" class="btn primary">인증번호 발송</button></div> </div> </div> </div> </li> <li> <div class="form-tit-area"> <div class="l-area"> <strong class="form-tit">이메일</strong> </div> </div> <div class="form-cont"> <div class="form-row"> <div class="input-email-area"> <div class="email-id"> <input type="email" title="이메일 아이디 입력"> <span aria-hidden="true">@</span> </div> <div class="email-domain"> <select title="도메인 선택">  <option>직접입력</option> </select> <input type="text" class="domain-custom" placeholder="직접 입력" title="직접 입력"> </div> </div> </div> </div> </li> <li class="item-row"> <div class="item-cont"> <div class="form-tit-area"> <div class="l-area"> <strong class="form-tit">반</strong> </div> </div> <div class="form-cont"> <div class="form-row"> <input type="number" placeholder="숫자를 입력하세요." title="반 숫자 입력"> </div> </div> </div> <div class="item-cont"> <div class="form-tit-area"> <div class="l-area"> <strong class="form-tit">번호</strong> </div> </div> <div class="form-cont"> <div class="form-row"> <input type="number" placeholder="숫자를 입력하세요." title="번호 숫자 입력"> </div> </div> </div> </li> <li> <div class="form-tit-area"> <div class="l-area"> <strong class="form-tit">인증번호 입력</strong> </div> </div> <div class="form-cont"> <div class="form-row"> <input type="number" placeholder="전송된 인증번호를 입력하세요." title="전송된 인증번호를 입력"> </div> </div> <p class="msg"><i class="ico-hourglass sm"></i>인증유효시간 2:59</p> </li> <li> <div class="form-tit-area"> <div class="l-area"> <strong class="form-tit">비밀번호 <i class="required">*</i></strong> </div> </div> <div class="form-cont"> <div class="form-row input-box input-pw-area"> <input type="password" class="pw-input input" placeholder="비밀번호를 입력하세요." title="비밀번호를 입력하세요"> <button type="button" class="btn-pw-toggle">비밀번호보기</button> </div> <p class="msg">영문 대문자, 영문 소문자, 숫자, 특수문자 중 2종류 이상을 조합하여 최소 10자리 이상으로 구성하세요.</p> </div> </li> </ul> <ul class="form-info-list"> <li> <strong class="info-tit">회원ID</strong> <div class="txt-area"> <em class="accent">IDTd******</em> </div> </li> <li> <strong class="info-tit">이름</strong> <div class="txt-area"> <em class="accent">홍길동</em> </div> </li> </ul> </div> </section> </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> <h3>summary-img</h3> <div> <div class="summary-page"> <div class="l-area"> <div class="img-area"> <img src="/resources/front/site/SITE_00000/images/common/ico-summary/ico-summary-message.svg" alt="" aria-hidden="true"> </div> <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="r-area"> <div class="btn-group"><button class="btn sm ico-help secondary">학교체험 프로그램 Q&A</button> </div> </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 title="선택"> <option>search option 1_1</option> <option>search option 1_2</option> </select> <select title="선택"> <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>  </article> <article> <h3>Textarea</h3> <p>Textarea는 기본적으로 5줄까지 표시하며 나머지 구조는 Input과 같습니다.</p> <div> <textarea placeholder="Placeholder" title="텍스트 입력"></textarea> </div>  </article> <article> <h3>checkradio</h3> <div> <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> <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>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" title="정렬 선택"> <option>최신순</option> </select> <select class="border-none"> <option>24개씩 보기</option> </select> <fieldset class="search-area"> <legend>검색</legend> <div class="search-option" title="검색 옵션 선택"> <select title="선택"> <option>구분</option> <option>구분1</option> </select> <select title="선택"> <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> <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> <div class="chip-area"> <span class="chip">span(텍스트)</span> <span class="chip">span(텍스트) <button class="ico-close sm primary">삭제</button></span> <span class="chip"><a href="#none">a(다운로드, 링크)</a><button class="ico-close sm primary">삭제</button></span> </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-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-adjust</h5> <i class="ico-adjust"></i> </li> <li> <h5>ico-sound-mute</h5> <i class="ico-sound-mute"></i> </li> <li> <h5>ico-link-item</h5> <i class="ico-link-item"></i> </li> <li> <h5>ico-shuffle</h5> <i class="ico-shuffle"></i> </li> <li> <h5>ico-repeat</h5> <i class="ico-repeat"></i> </li> <li> <h5>ico-arrows</h5> <i class="ico-arrows"></i> </li> <li> <h5>ico-arrow-up-right</h5> <i class="ico-arrow-up-right"></i> </li> <li> <h5>ico-arrow-up-left</h5> <i class="ico-arrow-up-left"></i> </li> <li> <h5>ico-arrow-down-right</h5> <i class="ico-arrow-down-right"></i> </li> <li> <h5>ico-arrow-down-left</h5> <i class="ico-arrow-down-left"></i> </li> <li> <h5>ico-chevron-left</h5> <i class="ico-chevron-left"></i> </li> <li> <h5>ico-chevron-right</h5> <i class="ico-chevron-right"></i> </li> <li> <h5>ico-chevron-up</h5> <i class="ico-chevron-up"></i> </li> <li> <h5>ico-chevron-down</h5> <i class="ico-chevron-down"></i> </li> <li> <h5>ico-chevron-double-left</h5> <i class="ico-chevron-double-left"></i> </li> <li> <h5>ico-chevron-double-right</h5> <i class="ico-chevron-double-right"></i> </li> <li> <h5>ico-chevron-double-up</h5> <i class="ico-chevron-double-up"></i> </li> <li> <h5>ico-chevron-double-down</h5> <i class="ico-chevron-double-down"></i> </li> <li> <h5>ico-caret-left</h5> <i class="ico-caret-left"></i> </li> <li> <h5>ico-caret-right</h5> <i class="ico-caret-right"></i> </li> <li> <h5>ico-caret-up</h5> <i class="ico-caret-up"></i> </li> <li> <h5>ico-caret-down</h5> <i class="ico-caret-down"></i> </li> <li> <h5>ico-caret-sort</h5> <i class="ico-caret-sort"></i> </li> <li> <h5>ico-sprout</h5> <i class="ico-sprout"></i> </li> <li> <h5>ico-clover</h5> <i class="ico-clover"></i> </li> <li> <h5>ico-tree</h5> <i class="ico-tree"></i> </li> <li> <h5>ico-code-scan</h5> <i class="ico-code-scan"></i> </li> <li> <h5>ico-circle-play</h5> <i class="ico-circle-play"></i> </li> <li> <h5>ico-circle-pause</h5> <i class="ico-circle-pause"></i> </li> <li> <h5>ico-circle-stop</h5> <i class="ico-circle-stop"></i> </li> <li> <h5>ico-present</h5> <i class="ico-present"></i> </li> <li> <h5>ico-text-scale</h5> <i class="ico-text-scale"></i> </li> <li> <h5>ico-siren</h5> <i class="ico-siren"></i> </li> <li> <h5>ico-megaphone</h5> <i class="ico-megaphone"></i> </li> <li> <h5>ico-mortarboard</h5> <i class="ico-mortarboard"></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> </article> <article> <h3>Profile</h3> <h5>프로필</h5> <div class="profile sm"> <div class="img-area"> <figure> <img src="/resources/front/site/SITE_00000/images/common/profile/profile.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.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.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.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> </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> <ul class="tabs-nav-lg"> <li><button type="button" class="is-active">tabs1</button></li> <li><button type="button">tabs2</button></li> <li><button type="button">tabs3</button></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"> <li><button type="button" class="is-active">tabs1</button></li> <li><button type="button">tabs2</button></li> <li><button type="button">tabs3</button></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> <ul class="tabs-nav full"> <li><button type="button" class="is-active">tabs1</button></li> <li><button type="button">tabs2</button></li> <li><button type="button">tabs3</button></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> <ul class="tabs-nav-sm"> <li><button type="button" class="is-active">tabs1</button></li> <li><button type="button">tabs2</button></li> <li><button type="button">tabs3</button></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> <ul class="tabs-nav-xsm"> <li><button type="button" class="is-active">tabs1</button></li> <li><button type="button">tabs2</button></li> <li><button type="button">tabs3</button></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 info">label info</span> <span class="label success">label success</span> <span class="label warning">label warning</span> <span class="label danger">label danger</span> <span class="label primary">label primary</span> <span class="label secondary">label secondary</span> <span class="label accent">label accent</span> </div> <div class="label-area"> <span class="label inverse">label inverse</span> <span class="label info-inverse">label info-inverse</span> <span class="label success-inverse">label success-inverse</span> <span class="label warning-inverse">label warning-inverse</span> <span class="label danger-inverse">label danger-inverse</span> <span class="label primary-inverse">label primary-inverse</span> <span class="label secondary-inverse">label secondary-inverse</span> <span class="label accent-inverse">label accent-inverse</span> </div> <div class="label-area"> <button type="button" class="label">label button</button> <button type="button" class="label info">label info button</button> <button type="button" class="label success">label success button</button> <button type="button" class="label warning">label warning button</button> <button type="button" class="label danger">label danger button</button> </div> <div class="label-area"> <a href="#none" class="label">label a</a> <a href="#none" class="label info">label info button</a> <a href="#none" class="label success">label success button</a> <a href="#none" class="label warning">label warning button</a> <a href="#none" class="label danger">label danger 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 info</span> <span class="label lg green">label success</span> <span class="label lg yellow">label warning</span> <span class="label lg red">label danger</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> <span class="label-cont-conts">콘텐츠</span> <span class="label-cont-url">URL</span> <span class="label-cont-whiteboard">화이트보드</span> <span class="label-cont-activity">평가지</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 info">온세종</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 info">온세종</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" title="보기 개수 선택"> <option>10개씩 보기</option> </select> <fieldset class="search-area"> <legend>검색</legend> <div class="search-option"> <select title="선택"> <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:64px"> <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> <span class="table-info"><i class="ico-comment sm"> 댓글</i>4</span> </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> <span class="table-info"><i class="ico-comment sm">댓글</i>4</span> </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> </p> </li> <li class="is-active"> <span class="num">2</span> <p> <strong>진행중</strong> </p> </li> <li class="is-current"> <span class="num">3</span> <p> <strong>진행후</strong> </p> </li> <li> <span class="num">4</span> <p> <strong>진행완료</strong> </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 scope="row">ID<i class="required">필수</i></th> <td> <div class="input-flex-area"> <input type="text" placeholder="회원 Id를 입력하세요." title="아이디 입력" class="flex1"> <button type="button" class="btn primary">중복 확인</button> </div> <p class="msg">영어소문자, 숫자를 조합해서 입력 후 중복여부를 확인하세요.</p> </td> </tr> <tr> <th scope="row">비밀번호<i class="required">필수</i></th> <td> <div class="form-row input-box input-pw-area"> <input type="password" class="pw-input input" placeholder="비밀번호를 입력하세요." title="비밀번호를 입력하세요"> <button type="button" class="btn-pw-toggle">비밀번호보기</button> </div> <p class="msg">영문 대문자, 영문 소문자, 숫자, 특수문자 중 2종류 이상을 조합하여 최소 10자리 이상으로 구성하세요.</p> </td> </tr> <tr> <th scope="row">휴대전화 번호<i class="required">필수</i></th> <td> <ul class="form-list initial"> <li> <div class="form-tit-area"> <div class="l-area"> <strong class="form-tit">핸드폰번호</strong> </div> </div> <div class="form-cont"> <div class="form-row"> <div class="input-phone-area"> <div class="phone"> <select title="전화번호 앞자리 선택"> <option value="010">010</option> <option value="011">011</option> </select> <span aria-hidden="true">-</span> <input type="tel" inputmode="numeric" maxlength="4" pattern="[0-9]*" title="전화번호 가운데자리 입력"> <span aria-hidden="true">-</span> <input type="tel" inputmode="numeric" maxlength="4" pattern="[0-9]*" title="전화번호 뒷자리 입력"> </div> <div class="fnc"> <button type="button" class="btn primary">인증번호 발송</button>  </div> </div> </div> </div> </li> <li> <div class="form-tit-area"> <div class="l-area"> <strong class="form-tit">인증번호 입력</strong> </div> </div> <div class="form-cont"> <div class="form-row"> <input type="number" placeholder="전송된 인증번호를 입력하세요." title="전송된 인증번호를 입력"> <button type="submit" class="btn primary fixw">확인</button> </div> </div> <p class="msg"><i class="ico-hourglass sm"></i>인증유효시간 2:59</p> </li> </ul> </td> </tr> <tr> <th scope="row">이메일</th> <td> <div class="input-email-area"> <div class="email-id"> <input type="email" title="이메일 아이디 입력"> <span aria-hidden="true">@</span> </div> <div class="email-domain"> <select title="도메인 선택">  <option>직접입력</option> </select> <input type="text" class="domain-custom" placeholder="직접 입력" title="직접 입력"> </div> </div> </td> </tr> <tr> <th scope="row">학년/반/번호<i class="required">필수</i></th> <td> <div class="input-flex-area"> <div class="input-box flex1"> <select class="input" title="학년 선택"> <option>학년</option> <option>1</option> <option>2</option> </select> <span>학년</span> </div> <div class="input-box flex1"> <input type="number" class="input q0" title="반 입력"> <span>반</span> </div> <div class="input-box flex1"> <input type="number" class="input q0" title="번호 입력"> <span>번</span> </div> </div> </td> </tr> <tr> <th scope="row">이용시간<i class="required">필수</i></th> <td> <select title="이용할 시간 선택"> <option value="">이용할 시간 선택</option> </select> <div class="chip-area"> <span class="chip">09:00~10:00 <button class="ico-close sm primary">삭제</button></span> <span class="chip">09:00~10:00 <button class="ico-close sm primary">삭제</button></span> <span class="chip">09:00~10:00 <button class="ico-close sm primary">삭제</button></span> </div> </td> </tr> <tr> <th scope="row">첨부파일</th> <td> <div class="file-custom"> <span class="btn secondary ico-upload">파일 찾기</span> <p class="msg">파일 첨부 20MB 이하의 파일을 등록할 수 있습니다.</p> </div> <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> </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">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>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>  </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>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>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 danger">어려움</span> <i class="ico-layer" title="세트문항"></i>  </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>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 sm"></i> <strong class="info-tit">제목</strong> <div class="txt-area"> 내용 </div> </li> <li> <i class="ico-calendar sm"></i> <div class="txt-area"> 내용 </div> </li> </ul> <ul class="info-inline-list u-block"> <li> <strong class="info-tit">학습과정 u-block</strong> <div class="txt-area"> 학습과정 내용 </div> </li> <li> <i class="ico-calendar sm"></i> <strong class="info-tit">제목</strong> <div class="txt-area"> 내용 </div> </li> <li> <i class="ico-calendar sm"></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 sm"></i> <strong class="info-tit"> 제목</strong> <div class="txt-area"> 내용 </div> </li> <li> <i class="ico-calendar sm"></i> <div class="txt-area"> 내용 </div> </li> </ul> <h4>info-box-list</h4> <ul class="info-box-list"> <li> <strong><i class="ico-calendar"></i>제목</strong> <div class="txt-area"> <em>26</em> <small>/100점 만점</small> </div> </li> <li> <strong>최고 점수</strong> <div class="txt-area"> <em>26점</em> </div> </li> <li> <strong>최저 점수</strong> <div class="txt-area"> <em>26점</em> </div> </li> <li> <strong>평균응시시간</strong> <div class="txt-area"> <em>5분 24초</em> </div> </li> <li> <strong>참여인원</strong> <div class="txt-area"> <em>17</em> <small>/20명</small> </div> </li> </ul> <ul class="info-box-list col3"> <li> <strong>info-box-list</strong> <div class="txt-area"> <em>col3</em> </div> </li> <li> <strong>최고 점수</strong> <div class="txt-area"> <em>26점</em> </div> </li> <li> <strong>최저 점수</strong> <div class="txt-area"> <em>26점</em> </div> </li> <li> <strong>평균응시시간</strong> <div class="txt-area"> <em>5분 24초</em> </div> </li> <li> <strong>참여인원</strong> <div class="txt-area"> <em>17</em> <small>/20명</small> </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-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">  </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/txt-none.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/txt-none.svg" alt="콘텐츠 없음"> </figure> <p>콘텐츠가 없습니다.</p> <div class="btn-area"> <a href="#none" class="btn sm ico-arrow-left">이전으로</a> </div> </div> </article> </section> </body> </html>