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/vendor/swiper/swiper-bundle.js"></script> <script src="/resources/front/site/SITE_00000/js/common/vendor/etc/jQuery.tagify.min.js"></script>  <script src="/resources/front/site/SITE_00000/js/common/vendor/chart/chart4.3.0.js"></script> <script src="/resources/front/site/SITE_00000/js/common/vendor/chart/chartjs-plugin-datalabels@2.0.js"></script>    <script src="/resources/front/site/SITE_00000/js/_layout.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>  </head> <body> <div class="accessibility"> <a href="#skipToContents" title="콘텐츠를 바로 볼 수 있도록 건너뛰기합니다.">콘텐츠 바로가기</a> </div>  <div class="container">  <header class="site-header"></header> <div class="site-body" id="skipToContents"> <div class="wrap"> <ul class="breadcrumb"> <li><a href="#none" class="home">홈</a></li> <li><a href="#none">1depth</a></li> <li><a href="#none">2depth</a></li> </ul> <div class="page-tit-area"> <div class="l-area"> <h2 class="title-xlg">예약하기</h2> </div> </div> <div class="img-swiper-area"> <div class="img-area"> <div class="swiper img-swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <figure> <img src="/resources/front/site/SITE_00000/images/temp/img_space.png" alt="시설 이미지"> </figure> </div> <div class="swiper-slide"> <figure> <img src="/resources/front/site/SITE_00000/images/temp/img_space.png" alt="시설 이미지"> </figure> </div> <div class="swiper-slide"> <figure> <img src="/resources/front/site/SITE_00000/images/temp/img_space.png" alt="시설 이미지"> </figure> </div> <div class="swiper-slide"> <figure> <img src="/resources/front/site/SITE_00000/images/temp/img_space.png" alt="시설 이미지"> </figure> </div> <div class="swiper-slide"> <figure> <img src="/resources/front/site/SITE_00000/images/temp/img_space.png" alt="시설 이미지"> </figure> </div> <div class="swiper-slide"> <figure> <img src="/resources/front/site/SITE_00000/images/temp/img_space.png" alt="시설 이미지"> </figure> </div> <div class="swiper-slide"> <figure> <img src="/resources/front/site/SITE_00000/images/temp/img_space.png" alt="시설 이미지"> </figure> </div> </div> </div> <div class="swiper-fnc"> <button type="button" class="swiper-button-prev">이전</button> <button type="button" class="swiper-button-next">다음</button> </div> </div> <div class="img-thumb-area"> <div class="swiper img-thumb-swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <figure> <img src="/resources/front/site/SITE_00000/images/temp/img_space.png" alt="시설 이미지"> </figure> </div> <div class="swiper-slide"> <figure> <img src="/resources/front/site/SITE_00000/images/temp/img_space.png" alt="시설 이미지"> </figure> </div> <div class="swiper-slide"> <figure> <img src="/resources/front/site/SITE_00000/images/temp/img_space.png" alt="시설 이미지"> </figure> </div> <div class="swiper-slide"> <figure> <img src="/resources/front/site/SITE_00000/images/temp/img_space.png" alt="시설 이미지"> </figure> </div> <div class="swiper-slide"> <figure> <img src="/resources/front/site/SITE_00000/images/temp/img_space.png" alt="시설 이미지"> </figure> </div> <div class="swiper-slide"> <figure> <img src="/resources/front/site/SITE_00000/images/temp/img_space.png" alt="시설 이미지"> </figure> </div> <div class="swiper-slide"> <figure> <img src="/resources/front/site/SITE_00000/images/temp/img_space.png" alt="시설 이미지"> </figure> </div> </div> </div> <div class="swiper-fnc vertical"> <button type="button" class="swiper-button-prev sm">이전</button> <button type="button" class="swiper-button-next sm">다음</button> </div> </div> </div> <section class="section"> <header class="section-tit-area"> <div class="l-area"> <h3 class="title-lg">시설이용 정보</h3> </div> </header> <div class="write-type"> <table> <caption>시설이용 정보</caption> <colgroup> <col style="width: 240px;"> <col> <col style="width: 240px;"> <col> </colgroup> <tbody> <tr> <th scope="row">시설위치</th> <td colspan="3"> <ul class="info-inline-list"> <li> <div class="txt-area">온세종학교</div> </li> <li> <div class="txt-area">세종특별자치시 산울3로 140, 온세종학교 (산울동)</div> </li> </ul> </td> </tr> <tr> <th scope="row">시설명</th> <td>스튜디오1</td> <th scope="row">상태</th> <td>신청</td> </tr> <tr> <th scope="row">담당자</th> <td>김담당</td> <th scope="row">이용날짜</th> <td>2025월 8월 29일 (금)</td> </tr> <tr> <th scope="row">이용시간<i class="required">필수</i></th> <td colspan="3"> <select title="이용할 시간 선택"> <option value="">이용할 시간 선택</option> </select> <div class="chip-area"> <span class="chip-tag">09:00~10:00 <button class="ico-close">삭제</button></span> <span class="chip-tag">09:00~10:00 <button class="ico-close">삭제</button></span> <span class="chip-tag">09:00~10:00 <button class="ico-close">삭제</button></span> </div> </td> </tr> <tr> <th scope="row">이용인원<i class="required">필수</i></th> <td colspan="3"> <div class="input-box"> <input type="number" class="input q0" title="인원 수 입력"> <span>명</span> </div> </td> </tr> <tr> <th scope="row">시설이용 목적<i class="required">필수</i></th> <td colspan="3"> <fieldset class="checkradio-area"> <legend>시설이용 목적 선택</legend> <div class="checkradio"> <input type="radio" id="purpose1" name="purpose" checked> <label for="purpose1">수업</label> </div> <div class="checkradio"> <input type="radio" id="purpose2" name="purpose"> <label for="purpose2">교내행사</label> </div> <div class="checkradio"> <input type="radio" id="purpose3" name="purpose"> <label for="purpose3">학급 활동</label> </div> <div class="checkradio"> <input type="radio" id="purpose4" name="purpose"> <label for="purpose4">동아리 활동</label> </div> <div class="checkradio"> <input type="radio" id="purpose5" name="purpose"> <label for="purpose5">기타</label> <fieldset class="checkradio-option"> <legend>기타 내용입력</legend> <input type="text" placeholder="내용을 입력하세요." title="기타 내용 입력"> </fieldset> </div> </fieldset> </td> </tr> <tr> <th scope="row">첨부파일</th> <td colspan="3"> <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> </section> <section class="section"> <header class="section-tit-area"> <div class="l-area"> <h3 class="title-lg">예약자정보</h3> </div> </header> <div class="write-type"> <table> <caption>예약자정보</caption> <colgroup> <col style="width: 240px;"> <col> <col style="width: 240px;"> <col> </colgroup> <tbody> <tr> <th scope="row">이름</th> <td>홍길동</td> <th scope="row">소속</th> <td>온세종학교</td> </tr> <tr> <th scope="row">휴대전화번호<i class="required">필수</i></th> <td colspan="3"> <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> </td> </tr> <tr> <th scope="row">이메일<i class="required">필수</i></th> <td colspan="3">z112344@naver.com</td> </tr> </tbody> </table> </div> </section> <section class="section"> <header class="section-tit-area"> <div class="l-area"> <h3 class="title-lg">개인정보 수집 및 이용에 대한 동의</h3> </div> </header> <div class="agree-box"> <div class="agree-txt-area"> <p>시설 이용과 관련하여 아래와 같이 개인정보를 수집 · 이용하고자 합니다. 내용을 자세히 읽으신 후 동의 여부를 결정하여 주십시오.</p><br> <ul class="bullet"> <li>항목: 신청자 이름, 소속, 연락처</li> <li>수집 · 이용 목적: 세종특별자치시교육청교육원 시설이용</li> <li>보유기간: 1년</li> </ul> </div> <div class="agree-fnc"> <div class="checkradio"> <input type="checkbox" id="agree"> <label for="agree">동의합니다.</label> </div> </div> </div> </section> <section class="section"> <header class="section-tit-area"> <div class="l-area"> <h3 class="title-lg">시설물 사용 유의사항</h3> </div> </header> <div class="bg-box"> <ul class="bullet font-color-default-secondary"> <li>관리자를 통해 등록된 유의사항 표시</li> <li>시설물 및 장비 보호 : 시설물을 임의로 변경하거나 파손하는 행위는 금지되며, 사용한 기물은 깨끗하게 정리해야 합니다.</li> <li>사용 금지 행위 : 흡연, 음주, 폭죽놀이 등 화기 사용은 금지됩니다. 고성방가나 주류 반입, 애완동물 동반 등 다른 이용자에게 피해를 주는 행위도 금지될 수 있습니다.</li> <li>사용 목적 준수 : 허가된 사용 목적 범위 내에서만 시설을 이용해야 하며, 정치·종교적 행사 등 특정 단체의 이익을 위한 사용은 제한될 수 있습니다.</li> <li>안전 수칙 준수 : 안전 사고 예방을 위해 비상구 위치를 파악하고, 무리한 행동이나 장난은 삼가야 합니다. 안전 장비가 있다면 올바르게 착용하고, 자신의 체력 상태에 맞는 운동을 해야 합니다.</li> <li>정리정돈 : 시설물 사용을 마친 후에는 사용한 장비를 제자리에 정리하고, 흘린 땀이나 이물질을 닦아 다음 사용자를 위해 깨끗하게 정리해야 합니다.</li> <li>해당 시설의 이용 규정 : 각 시설마다 고유의 이용 규정, 운영 수칙, 안전 수칙이 있으므로, 이용 전에 반드시 확인해야 합니다.</li> <li>안전 점검 결과 : 시설물의 안전 상태를 파악하기 위해 정기적으로 실시되는 안전 점검 및 진단 결과를 확인하는 것이 중요합니다.</li> <li>비상 연락망 및 비상구 : 위급 상황 발생 시 신속하게 대처할 수 있도록 비상 연락망과 비상구의 위치를 미리 파악해 두어야 합니다.</li> </ul> </div> </section> <div class="btn-cont"><a href="#none" class="btn lg primary">예약 신청하기</a></div> </div> </div> <footer class="site-footer"></footer> </div>  <div class="toast"></div>  <div class="dim"></div> </body> </html>