20260205 업데이트(컨텐츠 페이지 연결)
This commit is contained in:
@@ -18,19 +18,19 @@
|
||||
<div class="comp-contact">
|
||||
<ul class="footer-menu">
|
||||
<li>
|
||||
<a href="value.html">KNGIL</a>
|
||||
<a href="value.php">KNGIL</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="provided.html">제공데이터</a>
|
||||
<a href="provided.php">제공데이터</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="primary.html">주요기능</a>
|
||||
<a href="primary.php">주요기능</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="analysis.html">데이터분석</a>
|
||||
<a href="analysis.php">데이터분석</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="results.html">성과품</a>
|
||||
<a href="results.php">성과품</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="footer-family">
|
||||
|
||||
@@ -143,6 +143,7 @@ $isCompanyAdmin = in_array($auth, ['BS100100', 'BS100200', 'BS100300', 'BS100400
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<?php include __DIR__ . "/_nav.php";?>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -154,14 +155,14 @@ $isCompanyAdmin = in_array($auth, ['BS100100', 'BS100200', 'BS100300', 'BS100400
|
||||
<div class="floating-menu">
|
||||
<ul>
|
||||
<li class="floating-faq">
|
||||
<a href="/kngil/skin/faq_list.skin.php">
|
||||
<a href="/kngil/skin/qa_list.skin.php">
|
||||
<i class="ico-faq"></i>
|
||||
<span>FAQ</span>
|
||||
<span>Q&A</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="floating-buy">
|
||||
<a href="/kngil/?page=buy">
|
||||
<a href="/kngil/skin/buy.php">
|
||||
<i class="ico-buy"></i>
|
||||
<span>구매하기</span>
|
||||
</a>
|
||||
|
||||
@@ -1,46 +1,65 @@
|
||||
<ul class="sitemap">
|
||||
<li>
|
||||
<a href="value.html">
|
||||
<li class="value">
|
||||
<a href="/kngil/skin/value.php">
|
||||
<span>KNGIL</span>
|
||||
<p>
|
||||
공공데이터 기반으로 기초자료를<br>
|
||||
<em>보고서 형태로 제공</em>하는 서비스
|
||||
공공데이터 기반으로<br>
|
||||
<em>기초자료를 보고서 형태로 제공</em>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="provided.html">
|
||||
<div class="bg-line down"></div>
|
||||
</li>
|
||||
<li class="provided">
|
||||
<a href="/kngil/skin/provided.php">
|
||||
<span>제공데이터</span>
|
||||
<p>
|
||||
<em>쉽고 편리하게 작업</em> 할 수 있는<br>
|
||||
다양한 기능 탑재
|
||||
<p>
|
||||
항목별 공공데이터를 기반으로<br>
|
||||
<em>공간정보(SHP), 통계자료, <br>
|
||||
응용데이터(추가 예정)</em> 등을<br>
|
||||
제공합니다.
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="primary.html">
|
||||
<div class="bg-line up"></div>
|
||||
</li>
|
||||
<li class="primary">
|
||||
<a href="/kngil/skin/primary.php">
|
||||
<span>주요기능</span>
|
||||
<p>
|
||||
<em>편의성, 직관성, 효율성 향상</em>을 위한 <br>
|
||||
다양한 기능을 제공
|
||||
<p>
|
||||
기초현황 보고서 설정 등에 대한 <br>
|
||||
<em>사용자 중심의 편의성, 직관성, <br>
|
||||
효율성 향상을 위해 <br>
|
||||
다양한 기능을 제공</em>합니다.
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="analysis.html">
|
||||
<div class="bg-line down"></div>
|
||||
</li>
|
||||
<li class="analysis">
|
||||
<a href="/kngil/skin/analysis.php">
|
||||
<span>데이터분석</span>
|
||||
<p>
|
||||
위치 및 속성 정보 등을 정확히 매칭,<br>
|
||||
<em>신뢰도 높은 분석 결과 제공</em>
|
||||
</p>
|
||||
데이터의 특성과 형태에 따라 <br>
|
||||
위치(좌표)및 속성(SHP) 정보 등을 <br>
|
||||
정확하게 매칭하여 <br>
|
||||
<em>신뢰도 높은 분석 결과</em> 제공합니다.
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="results.html">
|
||||
<div class="bg-line up"></div>
|
||||
</li>
|
||||
<li class="results">
|
||||
<a href="/kngil/skin/results.php">
|
||||
<span>성과품</span>
|
||||
<p>
|
||||
<em>항목별 자동생성</em><br>
|
||||
보고서 제공
|
||||
데이터 분석 결과를 기반으로<br>
|
||||
항목별 성과품을 <em>자동생성된<br>
|
||||
보고서 형태로 제공</em>합니다.
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
365
kngil/skin/analysis.php
Normal file
365
kngil/skin/analysis.php
Normal file
@@ -0,0 +1,365 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<?php include __DIR__ . "/_head.php"; ?>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<?php include __DIR__ . "/_header.php"; ?>
|
||||
<!-- container -->
|
||||
<div class="container analysis">
|
||||
<section class="sub-header">
|
||||
<div class="page-title js-dark">
|
||||
<h2 data-aos="fade-down" data-aos-duration="1000">데이터분석</h2>
|
||||
<p class="sub-txt">데이터의 특성과 형태에 따라 위치(좌표)및 속성(SHP) 정보 등을 <br>
|
||||
정확하게 매칭하여 신뢰도 높은 분석 결과 제공합니다.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Content Section -->
|
||||
<section class="sub-content">
|
||||
<div class="sub-tit-box">
|
||||
<h3 class="sub-tit">
|
||||
사업대상지역 내 데이터를 수집·분석·시각화하여<br>
|
||||
<strong>의사결정에 활용 가능한 정보</strong>로 제공
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="condition">
|
||||
<div class="diagram-wrap" data-aos="fade-up" data-aos-duration="1000" aria-label="데이터 분석 프로세스 다이어그램">
|
||||
<div class="dia-circles-wrap">
|
||||
<div class="circle-dash" aria-hidden="true"></div>
|
||||
<div class="circle-belt" aria-hidden="true"></div>
|
||||
<div class="circle-core">
|
||||
<span>신뢰도 높은</span>
|
||||
<span>분석결과</span>
|
||||
</div>
|
||||
<div class="circle-dots move" aria-hidden="true">
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
<div class="circle-dots" aria-hidden="true">
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dia-element-ring" aria-label="데이터 항목 링">
|
||||
<div class="dia-element dia-element01" style="--angle: 0deg;">
|
||||
<div class="dia-tit">
|
||||
<i aria-hidden="true"></i>
|
||||
<span><strong>공간정보</strong> 데이터</span>
|
||||
</div>
|
||||
<div class="line" aria-hidden="true"></div>
|
||||
</div>
|
||||
<div class="dia-element dia-element02" style="--angle: 120deg;">
|
||||
<div class="dia-tit">
|
||||
<i aria-hidden="true"></i>
|
||||
<span><strong>속성정보</strong><br>데이터</span>
|
||||
</div>
|
||||
<div class="line" aria-hidden="true"></div>
|
||||
</div>
|
||||
<div class="dia-element dia-element03" style="--angle: 240deg">
|
||||
<div class="dia-tit">
|
||||
<i aria-hidden="true"></i>
|
||||
<span><strong>통계정보</strong><br>데이터</span>
|
||||
</div>
|
||||
|
||||
<div class="line" aria-hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Spatial Analysis Section -->
|
||||
<section class="key spatial layout-fix-left" aria-label="공간정보 데이터 분석">
|
||||
<nav class="left" aria-label="공간정보 분석 네비게이션">
|
||||
<div class="mid-tit">
|
||||
<span data-aos="fade-right" data-aos-duration="600">
|
||||
공간정보<br>
|
||||
<strong>데이터 분석</strong>
|
||||
</span>
|
||||
</div>
|
||||
<ul
|
||||
data-aos="fade-right"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="300"
|
||||
class="js-fixLeft-tit"
|
||||
role="tablist"
|
||||
aria-label="공간정보 분석 목록"
|
||||
>
|
||||
<li class="on" role="tab" aria-selected="true" tabindex="0">
|
||||
<span><strong>01</strong>단면분석</span>
|
||||
</li>
|
||||
<li role="tab" aria-selected="false" tabindex="-1">
|
||||
<span><strong>02</strong>지진발생</span>
|
||||
</li>
|
||||
<li role="tab" aria-selected="false" tabindex="-1">
|
||||
<span><strong>03</strong>공공하수처리시설</span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="right js-fixLeft-secs" role="tabpanel">
|
||||
<article class="spatial01" id="spatial01" aria-labelledby="spatial01-title">
|
||||
<h4 id="spatial01-title" class="sub-tit">단면분석</h4>
|
||||
<div class="sub-text">
|
||||
사업대상 구역 내 <strong>지정한 2개의 축 기준으로 지형의 높낮이</strong>를 거리별로 분석하고, 그 결과를 선형 형태로 가시화 합니다.
|
||||
</div>
|
||||
<figure class="sub-figs" aria-label="단면분석 시각화">
|
||||
<img
|
||||
src="/kngil/img/analysis/img_spatial_01.svg"
|
||||
alt="단면분석 결과 선형 그래프"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
<div class="apx">
|
||||
<img
|
||||
data-src="/kngil/img/analysis/img_spatial_01_apx.svg"
|
||||
alt="단면분석 상세 시각화"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
</figure>
|
||||
</article>
|
||||
|
||||
<article class="spatial02" id="spatial02" aria-labelledby="spatial02-title">
|
||||
<h4 id="spatial02-title" class="sub-tit">지진발생</h4>
|
||||
<div class="sub-text">
|
||||
사업대상구역을 포함한 주변 지역 내 <strong>과거 지진 발생 이력 정보</strong>를 분석하고, 그 결과를 위치도 형태로 시각화 합니다.
|
||||
</div>
|
||||
<figure class="sub-figs" aria-label="지진발생 위치도 시각화">
|
||||
<img
|
||||
src="/kngil/img/analysis/img_spatial_02.png"
|
||||
alt="지진발생 위치도"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
<div class="apx">
|
||||
<img
|
||||
data-src="/kngil/img/analysis/img_spatial_02_apx.svg"
|
||||
alt="지진발생 상세 위치도"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
</figure>
|
||||
</article>
|
||||
|
||||
<article class="spatial03" id="spatial03" aria-labelledby="spatial03-title">
|
||||
<h4 id="spatial03-title" class="sub-tit">공공하수처리시설</h4>
|
||||
<div class="sub-text">
|
||||
사업대상구역 내 <strong>기반시설(공공하수처리시설 등)의 좌표 정보</strong>를 분석하고, 그 결과를 위치도 형태로 시각화 합니다.
|
||||
</div>
|
||||
<figure class="sub-figs" aria-label="공공하수처리시설 위치도 시각화">
|
||||
<img
|
||||
src="/kngil/img/analysis/img_spatial_03.png"
|
||||
alt="공공하수처리시설 위치도"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
<div class="apx">
|
||||
<img
|
||||
src="/kngil/img/analysis/img_spatial_03_apx.svg"
|
||||
alt="공공하수처리시설 상세 위치도"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Statistics Analysis Section -->
|
||||
<section class="key statistics layout-fix-left" aria-label="통계정보 데이터 분석">
|
||||
<nav class="left" aria-label="통계정보 분석 네비게이션">
|
||||
<div class="mid-tit">
|
||||
<span data-aos="fade-right" data-aos-duration="600">
|
||||
통계정보<br>
|
||||
<strong>데이터 분석</strong>
|
||||
</span>
|
||||
</div>
|
||||
<ul
|
||||
data-aos="fade-right"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="300"
|
||||
class="js-fixLeft-tit"
|
||||
role="tablist"
|
||||
aria-label="통계정보 분석 목록"
|
||||
>
|
||||
<li class="on" role="tab" aria-selected="true" tabindex="0">
|
||||
<span><strong>01</strong>현상일수</span>
|
||||
</li>
|
||||
<li role="tab" aria-selected="false" tabindex="-1">
|
||||
<span><strong>02</strong>과거인구</span>
|
||||
</li>
|
||||
<li role="tab" aria-selected="false" tabindex="-1">
|
||||
<span><strong>03</strong>문화재</span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="right js-fixLeft-secs" role="tabpanel">
|
||||
<article class="statistics01" id="statistics01" aria-labelledby="statistics01-title">
|
||||
<h4 id="statistics01-title" class="sub-tit">현상일수</h4>
|
||||
<div class="sub-text">
|
||||
사업대상 구역 내 기상 현상별(맑음, 강수, 눈, 폭풍 등)로 분석하고, 그 결과를 이미지&그래프 혼합 형태로 시각화 합니다.
|
||||
</div>
|
||||
<figure class="sub-figs" aria-label="현상일수 시각화">
|
||||
<img
|
||||
src="/kngil/img/analysis/img_statistics_01.png"
|
||||
alt="기상 현상별 현상일수 그래프"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
<div class="apx">
|
||||
<img
|
||||
data-src="/kngil/img/analysis/img_statistics_01_apx.svg"
|
||||
alt="현상일수 상세 시각화"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
</figure>
|
||||
</article>
|
||||
|
||||
<article class="statistics02" id="statistics02" aria-labelledby="statistics02-title">
|
||||
<h4 id="statistics02-title" class="sub-tit">과거인구</h4>
|
||||
<div class="sub-text">
|
||||
사업대상구역 내 과거 연도별(인구, 세대수, 증감율 등) 추이를 분석하고, 그 결과를 그래프 형태로 시각화 합니다.
|
||||
</div>
|
||||
<figure class="sub-figs" aria-label="과거인구 추이 그래프">
|
||||
<img
|
||||
src="/kngil/img/analysis/img_statistics_02.svg"
|
||||
alt="과거인구 연도별 추이 그래프"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
<div class="apx">
|
||||
<img
|
||||
data-src="/kngil/img/analysis/img_statistics_02_apx.svg"
|
||||
alt="과거인구 상세 그래프"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
</figure>
|
||||
</article>
|
||||
|
||||
<article class="statistics03" id="statistics03" aria-labelledby="statistics03-title">
|
||||
<h4 id="statistics03-title" class="sub-tit">문화재</h4>
|
||||
<div class="sub-text">
|
||||
사업대상구역 내 지정된 문화재(문화유산, 자연유산 등)로 분석하고, 그 결과를 그래프&테이블 형태로 시각화 합니다.
|
||||
</div>
|
||||
<figure class="sub-figs" aria-label="문화재 분석 시각화">
|
||||
<img
|
||||
src="/kngil/img/analysis/img_statistics_03.png"
|
||||
alt="문화재 분석 그래프 및 테이블"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
<div class="apx">
|
||||
<img
|
||||
data-src="/kngil/img/analysis/img_statistics_03_apx.svg"
|
||||
alt="문화재 상세 분석 시각화"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Attribute Analysis Section -->
|
||||
<section class="key attribute layout-fix-left" aria-label="속성정보 데이터 분석">
|
||||
<nav class="left" aria-label="속성정보 분석 네비게이션">
|
||||
<div class="mid-tit">
|
||||
<span data-aos="fade-right" data-aos-duration="600">
|
||||
속성정보<br>
|
||||
<strong>데이터 분석</strong>
|
||||
</span>
|
||||
</div>
|
||||
<ul
|
||||
data-aos="fade-right"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="300"
|
||||
class="js-fixLeft-tit"
|
||||
role="tablist"
|
||||
aria-label="속성정보 분석 목록"
|
||||
>
|
||||
<li class="on" role="tab" aria-selected="true" tabindex="0">
|
||||
<span><strong>01</strong>국토환경성평가</span>
|
||||
</li>
|
||||
<li role="tab" aria-selected="false" tabindex="-1">
|
||||
<span><strong>02</strong>지목별</span>
|
||||
</li>
|
||||
<li role="tab" aria-selected="false" tabindex="-1">
|
||||
<span><strong>03</strong>토지형상</span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="right js-fixLeft-secs" role="tabpanel">
|
||||
<article class="attribute01" id="attribute01" aria-labelledby="attribute01-title">
|
||||
<h4 id="attribute01-title" class="sub-tit">국토환경성평가</h4>
|
||||
<div class="sub-text">
|
||||
사업대상 구역 내 국토환경성평가를 등급별(1등급~5등급)로 분석하고, 그 결과를 해치 형태로 시각화 합니다.
|
||||
</div>
|
||||
<figure class="sub-figs" aria-label="국토환경성평가 해치 시각화">
|
||||
<img
|
||||
src="/kngil/img/analysis/img_attribute_01.png"
|
||||
alt="국토환경성평가 등급별 해치 지도"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</figure>
|
||||
</article>
|
||||
|
||||
<article class="attribute02" id="attribute02" aria-labelledby="attribute02-title">
|
||||
<h4 id="attribute02-title" class="sub-tit">지목별</h4>
|
||||
<div class="sub-text">
|
||||
사업대상구역 내 토지 사용 목적에 따른 지목별(전, 답, 도로 등)로 분석하고, 그 결과를 해치 형태로 시각화 합니다.
|
||||
</div>
|
||||
<figure class="sub-figs" aria-label="지목별 해치 시각화">
|
||||
<div class="imgs">
|
||||
<img
|
||||
src="/kngil/img/analysis/img_attribute_02.png"
|
||||
alt="지목별 해치 지도"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
</figure>
|
||||
</article>
|
||||
|
||||
<article class="attribute03" id="attribute03" aria-labelledby="attribute03-title">
|
||||
<h4 id="attribute03-title" class="sub-tit">토지형상</h4>
|
||||
<div class="sub-text">
|
||||
사업대상구역 내 토지 모양에 따른 형상별(정방형, 장방형 등)로 분석하고, 그 결과를 해치 형태로 시각화 합니다.
|
||||
</div>
|
||||
<figure class="sub-figs" aria-label="토지형상 해치 시각화">
|
||||
<div class="imgs">
|
||||
<img
|
||||
src="/kngil/img/analysis/img_attribute_03.png"
|
||||
alt="토지형상별 해치 지도"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- // Main Container -->
|
||||
|
||||
<?php include __DIR__ . "/_footer.php"; ?>
|
||||
</div>
|
||||
|
||||
<script src="/kngil/js/layout-fix.js"></script>
|
||||
<script src="/kngil/js/analysis.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
107
kngil/skin/buy.php
Normal file
107
kngil/skin/buy.php
Normal file
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<?php include __DIR__ . "/_head.php"; ?>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<?php include __DIR__ . "/_header.php"; ?>
|
||||
<!-- container -->
|
||||
<div class="container buy">
|
||||
<section class="sub-header">
|
||||
<div class="page-title">
|
||||
<h2 data-aos="fade-down" data-aos-duration="1000">구매하기</h2>
|
||||
<p class="sub-txt">KNGIL 구매문의 및 제품 안내</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="contents-wrap">
|
||||
<div class="inner">
|
||||
<h3 class="cont-tit"><span class="logo-c">KNGIL</span>로 <strong>기초조사 업무의 효율성</strong>을 높여보세요</h3>
|
||||
<div class="cont-wrapper">
|
||||
<div class="cont-left">
|
||||
|
||||
<ul class="cont-list feature-list">
|
||||
<li class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="ico-natural"></i>
|
||||
</div>
|
||||
<div class="feature-decoration"></div>
|
||||
<h4 class="feature-title">자연조건 사회특성</h4>
|
||||
<p class="feature-desc">항목별 현황 분석<br> 프로그램</p>
|
||||
</li>
|
||||
<li class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="ico-gis"></i>
|
||||
</div>
|
||||
<div class="feature-decoration"></div>
|
||||
<h4 class="feature-title">GIS 기반</h4>
|
||||
<p class="feature-desc">지형/공간 정보<br> 분석 환경</p>
|
||||
</li>
|
||||
<li class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="ico-data"></i>
|
||||
</div>
|
||||
<div class="feature-decoration"></div>
|
||||
<h4 class="feature-title">데이터 항목 다량</h4>
|
||||
<p class="feature-desc">도시계획, 상하수도 분야 설계 기초자료 제공</p>
|
||||
</li>
|
||||
<li class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="ico-coordinate"></i>
|
||||
</div>
|
||||
<div class="feature-decoration"></div>
|
||||
<h4 class="feature-title">다양한 좌표계 지원</h4>
|
||||
<p class="feature-desc">좌표(Bessel, GRS80) 시각화 및 손쉬운 전환</p>
|
||||
</li>
|
||||
<li class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<i class="ico-standard"></i>
|
||||
</div>
|
||||
<div class="feature-decoration"></div>
|
||||
<h4 class="feature-title">최신 기준 설정</h4>
|
||||
<p class="feature-desc">추정사업비, 비작업일수 관련 기준/지침 업데이트</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="cont-right">
|
||||
<div class="contact-area">
|
||||
<div class="tit-box">
|
||||
<h4 class="tit">구매 상담</h4>
|
||||
<p class="sub-text">KNGIL 담당자에게 직접 문의하기</p>
|
||||
</div>
|
||||
<ul class="contact-info">
|
||||
<li class="tel">
|
||||
<i></i>
|
||||
<strong>02-2131-7448</strong>
|
||||
</li>
|
||||
<li class="mail">
|
||||
<i></i>
|
||||
<strong>baroncs@baroncs.co.kr</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-wrap">
|
||||
<a href="/kngil/skin/faq_list.skin.php" class="btn-contact">
|
||||
<i class="ico-contact"></i>
|
||||
KNGIL 구매문의
|
||||
</a>
|
||||
<a href="/kngil/download/KNGIL_leaflet.pdf" download class="btn-brochure">
|
||||
<i class="ico-brochure"></i>
|
||||
브로슈어
|
||||
</a>
|
||||
</div>
|
||||
<p class="info-msg">
|
||||
<i class="ico-alert"></i>
|
||||
<span>라이선스 중복 시 <strong>이용이 제한</strong>될 수 있습니다.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- // container -->
|
||||
<?php include __DIR__ . "/_footer.php"; ?>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -14,19 +14,26 @@
|
||||
<div class="container">
|
||||
<section class="main-contents">
|
||||
<div class="bg-video">
|
||||
<a href="./value.html" class="main-link" id="main_video_link">
|
||||
<a href="./value.html" class="main-link" id="main_video_link" aria-label="메인 비디오 - 상세 페이지로 이동">
|
||||
<video id="video_play" autoplay muted>
|
||||
<source src="/kngil/img/video/main_1.mp4" type="video/mp4" class="main-video-01">
|
||||
<source src="/kngil/img/video/main_1.mp4" type="video/mp4" >
|
||||
</video>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="main-pagination">
|
||||
<li><div class="page-01 page-on" data-page="1"><img src="/kngil/img/logo_kngil.svg" alt="KNGIL"></div><span>01</span></li>
|
||||
<li><div class="page-02" data-page="2">제공데이터</div><span>02</span></li>
|
||||
<li><div class="page-03" data-page="3">주요기능</div><span>03</span></li>
|
||||
<li><div class="page-04" data-page="4">데이터분석</div><span>04</span></li>
|
||||
<li><div class="page-05" data-page="5">성과품</div><span>05</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="main-pagination">
|
||||
<ul >
|
||||
<li><button
|
||||
type="button" class="page-01 page-on" data-page="1"><img src="/kngil/img/logo_kngil.svg" alt="KNGIL"></button><span class="page-number">01</span></li>
|
||||
<li><button
|
||||
type="button" class="page-02" data-page="2">제공데이터</button><span class="page-number">02</span></li>
|
||||
<li><button
|
||||
type="button" class="page-03" data-page="3">주요기능</button><span class="page-number">03</span></li>
|
||||
<li><button
|
||||
type="button" class="page-04" data-page="4">데이터분석</button><span class="page-number">04</span></li>
|
||||
<li><button
|
||||
type="button" class="page-05" data-page="5">성과품</button><span class="page-number">05</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
@@ -34,6 +41,23 @@
|
||||
<!-- // container -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Intro Screen -->
|
||||
<div class="intro-wrap" aria-hidden="true">
|
||||
<div class="intro-mask"></div>
|
||||
<div class="intro-txt">
|
||||
<div class="txt-mask">
|
||||
<span><strong>설계실무자</strong>를 위한</span>
|
||||
</div>
|
||||
<div class="txt-mask">
|
||||
<span class="slogan-c"><img src="/kngil/img/slogan_c.svg" alt="KNGIL Korea National Geographic Information Library" width="auto" height="auto"></span>
|
||||
</div>
|
||||
<div class="txt-mask">
|
||||
<span><strong>기초조사 업무의 효율성</strong>을 높여줍니다.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // Intro Screen -->
|
||||
</div>
|
||||
<?php
|
||||
include __DIR__ . "/pop_login.php";
|
||||
|
||||
32
kngil/skin/pop_temp.php
Normal file
32
kngil/skin/pop_temp.php
Normal file
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
@@include("_include/_head_pop_temp.html")
|
||||
<script src="./js/common.js"></script>
|
||||
<title>팝업 테스트 - KNGIL</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap" style="padding: 40px; min-height: 100vh;">
|
||||
<h1 style="font-size: 18px; margin-bottom: 16px;">팝업 테스트</h1>
|
||||
<p style="color: #666; margin-bottom: 8px;">URL 파라미터 <code>pop</code>으로 팝업을 엽니다.</p>
|
||||
<p style="color: #888; font-size: 13px; margin-bottom: 20px;">
|
||||
예: <code>?pop=login</code> / <code>?pop=privacy&tab=agreement</code>
|
||||
</p>
|
||||
<ul style="color: #666; font-size: 13px; line-height: 1.8;">
|
||||
<li><code>pop=login</code> 로그인</li>
|
||||
<li><code>pop=join</code> 회원가입</li>
|
||||
<li><code>pop=agreement</code> 이용약관(가입)</li>
|
||||
<li><code>pop=mypage01</code> 마이페이지 1</li>
|
||||
<li><code>pop=mypage02</code> 마이페이지 2</li>
|
||||
<li><code>pop=mypage03</code> 마이페이지 3 (정보수정)</li>
|
||||
<li><code>pop=search</code> ID/PW 찾기</li>
|
||||
<li><code>pop=password</code> 비밀번호 재설정 안내</li>
|
||||
<li><code>pop=privacy</code> 개인정보처리방침 · <code>pop=privacy&tab=agreement</code> 이용약관 탭</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@include("_include/_popups.html")
|
||||
|
||||
<script src="./js/pop_temp.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
269
kngil/skin/primary.php
Normal file
269
kngil/skin/primary.php
Normal file
@@ -0,0 +1,269 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<?php include __DIR__ . "/_head.php"; ?>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<?php include __DIR__ . "/_header.php"; ?>
|
||||
|
||||
<!-- Main Container -->
|
||||
<div class="container primary">
|
||||
<!-- Header Section -->
|
||||
<section class="sub-header">
|
||||
<div class="page-title js-dark">
|
||||
<h2 data-aos="fade-down" data-aos-duration="1000">주요기능</h2>
|
||||
<p class="sub-txt">
|
||||
기초현황 보고서 설정 등에 대한 사용자 중심의 <br>
|
||||
편의성, 직관성, 효율성 향상을 위해 다양한 기능을 제공합니다.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Content Section -->
|
||||
<section class="sub-content">
|
||||
<div class="sub-tit-box">
|
||||
<h3 class="sub-tit">
|
||||
설계분야 및 대상구역 범위에 따른 <strong>보고서 설정</strong> 관련하여 <br>
|
||||
<strong>사용자 맞춤형 방식</strong>으로 다양한 기능을 제공
|
||||
</h3>
|
||||
</div>
|
||||
<div class="diagram-wrap aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" aria-label="주요기능 다이어그램">
|
||||
<div class="dia-circles-wrap">
|
||||
<div class="circle-core">
|
||||
<span>
|
||||
<img
|
||||
src="/kngil/img/logo_kngil.svg"
|
||||
alt="KNGIL 로고"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</span>
|
||||
<strong>주요기능</strong>
|
||||
</div>
|
||||
<div class="circle-dots" aria-hidden="true">
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dia-element e01">
|
||||
<i aria-hidden="true"></i>
|
||||
<span class="dia-tit">다양한 사업대상구역<br> 입력방식 선택</span>
|
||||
</div>
|
||||
<div class="dia-element e02">
|
||||
<i aria-hidden="true"></i>
|
||||
<span class="dia-tit">효율적인 사용자 설정<br> 구성 및 시각화</span>
|
||||
</div>
|
||||
<div class="dia-element e03">
|
||||
<i aria-hidden="true"></i>
|
||||
<span class="dia-tit">사용자가 신청한<br> 목록 및 진행단계 <br class="mo-only"> 실시간 제공</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Key Features Section -->
|
||||
<section class="key location layout-fix-left" aria-label="주요 기능 상세">
|
||||
<nav class="left" aria-label="기능 네비게이션">
|
||||
<div class="mid-tit">
|
||||
<span data-aos="fade-right" data-aos-duration="600">
|
||||
다양하고 효율적인<br>
|
||||
<strong>사용자 중심의 설정<br>기능 제공</strong>
|
||||
</span>
|
||||
</div>
|
||||
<ul
|
||||
data-aos="fade-right"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="300"
|
||||
class="js-fixLeft-tit"
|
||||
role="tablist"
|
||||
aria-label="주요 기능 목록"
|
||||
>
|
||||
<li class="on" role="tab" aria-selected="true" tabindex="0">
|
||||
<span><strong>01</strong>사업구역 입력</span>
|
||||
</li>
|
||||
<li role="tab" aria-selected="false" tabindex="-1">
|
||||
<span><strong>02</strong>보고서 관련 설정</span>
|
||||
</li>
|
||||
<li role="tab" aria-selected="false" tabindex="-1">
|
||||
<span><strong>03</strong>진행과정(4단계) 실시간 표시</span>
|
||||
</li>
|
||||
<li role="tab" aria-selected="false" tabindex="-1">
|
||||
<span><strong>04</strong>사업비 및 작업일수 기준</span>
|
||||
</li>
|
||||
<li role="tab" aria-selected="false" tabindex="-1">
|
||||
<span><strong>05</strong>데이터 항목 선택</span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="right js-fixLeft-secs" role="tabpanel">
|
||||
<article class="sec-area-input" id="sec-area-input" aria-labelledby="area-input-title">
|
||||
<h4 id="area-input-title" class="sub-tit">사업구역 입력</h4>
|
||||
<div class="sub-text">
|
||||
사업의 규모 및 범위를 고려하여 실무자가 상황에 맞게 유연하게 활용할 수 있도록 <br>
|
||||
<strong>4가지 입력 방식</strong>을 제공합니다.
|
||||
</div>
|
||||
<div class="sub-figs area">
|
||||
<img src="/kngil/img/primary/img_area_01.png"/>
|
||||
<div class="dim-layer">
|
||||
</div>
|
||||
<div class="apx apx-01">
|
||||
<img src="/kngil/img/primary/img_area_01_apx.png" />
|
||||
<span class="rect-box"></span>
|
||||
<span class="key-point">
|
||||
<img src="/kngil/img/primary/img_key_point.svg" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="apx apx-02">
|
||||
<img src="/kngil/img/primary/img_area_02_apx.png" />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sec-report-config" id="sec-report-config" aria-labelledby="report-config-title">
|
||||
<h4 id="report-config-title" class="sub-tit">보고서 관련 설정</h4>
|
||||
<div class="sub-text">
|
||||
사용자에게 제공되는 보고서에 영향을 미치는 <strong>항목별 설정은 최소화</strong>하고,<br>
|
||||
직관적으로 쉽게 선택할 수 있도록 <strong>시각화</strong>에 중점을 두었습니다.
|
||||
</div>
|
||||
<div class="sub-figs report">
|
||||
<img
|
||||
src="/kngil/img/primary/img_report_01.png"
|
||||
alt="보고서 관련 설정 화면"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
<div class="apx apx-01">
|
||||
<img src="/kngil/img/primary/img_report_02.png" />
|
||||
</div>
|
||||
<div class="apx apx-02">
|
||||
<img src="/kngil/img/primary/img_report_03.png" />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sec-progress-realtime" id="sec-progress-realtime" aria-labelledby="progress-title">
|
||||
<h4 id="progress-title" class="sub-tit">진행과정(4단계) 실시간 표시</h4>
|
||||
<div class="sub-text">
|
||||
사용자는 신청건의 처리과정을 4단계로 <strong>실시간 확인 가능</strong>하며, 기존 신청 이력에 대해서는 <br>
|
||||
일정 기간 내 <strong>재신청 및 다운로드를 반복적으로 수행</strong> 할 수 있습니다.
|
||||
</div>
|
||||
<div class="sub-figs sub-figs-bg-slide" aria-label="">
|
||||
<span class="bg-slide-layer" data-bg="1" aria-hidden="true"></span>
|
||||
<span class="bg-slide-layer" data-bg="2" aria-hidden="true"></span>
|
||||
<span class="bg-slide-layer" data-bg="3" aria-hidden="true"></span>
|
||||
<span class="bg-slide-layer" data-bg="4" aria-hidden="true"></span>
|
||||
</div>
|
||||
|
||||
<div class="sub-figs progress">
|
||||
<img
|
||||
src="/kngil/img/primary/img_progress_01.png"
|
||||
alt="진행과정 4단계 시각화"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
<div class="apx apx-01">
|
||||
<img src="/kngil/img/primary/img_progress_02.png" />
|
||||
<div class="sub-apx-slide">
|
||||
<div class="sub-apx-slide-item">
|
||||
<img src="/kngil/img/primary/img_progress_step_01.png" />
|
||||
</div>
|
||||
<div class="sub-apx-slide-item">
|
||||
<img src="/kngil/img/primary/img_progress_step_02.png" />
|
||||
</div>
|
||||
<div class="sub-apx-slide-item">
|
||||
<img src="/kngil/img/primary/img_progress_step_03.png" />
|
||||
</div>
|
||||
<div class="sub-apx-slide-item">
|
||||
<img src="/kngil/img/primary/img_progress_step_04.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="apx apx-02">
|
||||
<img src="/kngil/img/primary/img_progress_03.png" />
|
||||
</div>
|
||||
<div class="apx apx-03">
|
||||
<img src="/kngil/img/primary/img_progress_04.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
<article class="sec-cost-criteria" id="sec-cost-criteria" aria-labelledby="cost-title">
|
||||
<h4 id="cost-title" class="sub-tit">사업비 및 작업일수 기준</h4>
|
||||
<div class="sub-text">
|
||||
주요 지표, 추정사업비, 비작업일수 등 <strong>항목별 기준값</strong>을 사용자가 손쉽게 수정·적용할 수 있으며, <br>
|
||||
위치 정보 기반의 특정 데이터는 화면에 시각적으로 표시하여 <strong>선택을 위한 가이드</strong>를 제공합니다.
|
||||
</div>
|
||||
<div class="sub-figs sub-figs-bg-slide" aria-label="사업비 및 작업일수 기준 시각화">
|
||||
<span class="bg-slide-layer" data-bg="1" aria-hidden="true"></span>
|
||||
<span class="bg-slide-layer" data-bg="2" aria-hidden="true"></span>
|
||||
<span class="bg-slide-layer" data-bg="3" aria-hidden="true"></span>
|
||||
<span class="bg-slide-layer" data-bg="4" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="sub-figs cost">
|
||||
<img
|
||||
src="/kngil/img/primary/img_cost_01.png"
|
||||
alt="사업비 및 작업일수 기준 시각화"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
<div class="dim-layer"></div>
|
||||
<div class="apx apx-01">
|
||||
<img src="/kngil/img/primary/img_cost_01_apx.png" />
|
||||
<span class="zoom-box">
|
||||
<img src="/kngil/img/primary/img_cost_01_zoom.png" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="apx apx-02">
|
||||
<img src="/kngil/img/primary/img_cost_02_apx.png" />
|
||||
<span class="zoom-box">
|
||||
<img src="/kngil/img/primary/img_cost_02_zoom.png" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="apx apx-03">
|
||||
<img src="/kngil/img/primary/img_cost_03_apx.png" />
|
||||
<span class="zoom-box">
|
||||
<img src="/kngil/img/primary/img_cost_03_zoom.png" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sec-data-select" id="sec-data-select" aria-labelledby="data-select-title">
|
||||
<h4 id="data-select-title" class="sub-tit">데이터 항목 선택</h4>
|
||||
<div class="sub-text">
|
||||
업무 활용을 위해 개별 Row 데이터만 필요한 경우, <br>
|
||||
정보의 유사성을 기준으로 그룹화된 항목 중 사용자가 <strong>선택한 데이터를 제공</strong> 받을 수 있습니다.
|
||||
</div>
|
||||
<div class="sub-figs sub-figs-bg-slide" aria-label="데이터 항목 선택 시각화">
|
||||
<span class="bg-slide-layer" data-bg="1" aria-hidden="true"></span>
|
||||
<span class="bg-slide-layer" data-bg="2" aria-hidden="true"></span>
|
||||
<span class="bg-slide-layer" data-bg="3" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="sub-figs data">
|
||||
<img src="/kngil/img/primary/img_data_01.png" />
|
||||
<div class="apx apx-01">
|
||||
<img src="/kngil/img/primary/img_data_02.png" />
|
||||
</div>
|
||||
<div class="apx apx-02">
|
||||
<img src="/kngil/img/primary/img_data_03.png" />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- // Main Container -->
|
||||
|
||||
<?php include __DIR__ . "/_footer.php"; ?>
|
||||
</div>
|
||||
|
||||
<script src="/kngil/js/layout-fix.js"></script>
|
||||
<script src="/kngil/js/primary.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
418
kngil/skin/provided.php
Normal file
418
kngil/skin/provided.php
Normal file
@@ -0,0 +1,418 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<?php include __DIR__ . "/_head.php"; ?>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<?php include __DIR__ . "/_header.php"; ?>
|
||||
|
||||
<!-- Main Container -->
|
||||
<div class="container provided">
|
||||
<!-- Header Section -->
|
||||
<section class="sub-header">
|
||||
<div class="page-title">
|
||||
<h2 data-aos="fade-down" data-aos-duration="1000">제공데이터</h2>
|
||||
<p class="sub-txt">
|
||||
항목별 공공데이터를 기반으로<br>
|
||||
공간정보(SHP), 통계자료, 응용데이터(추가 예정)등을 제공합니다.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Content Section -->
|
||||
<section class="sub-content">
|
||||
<div class="sub-tit-box">
|
||||
<h3 class="sub-tit">
|
||||
<strong>공간정보 및 통계자료</strong> 등<br>
|
||||
항목별 기초현황 데이터를 다양하게 제공
|
||||
</h3>
|
||||
</div>
|
||||
<div class="data-wrap">
|
||||
<div class="data-inner">
|
||||
<div class="data-core">
|
||||
<div class="core-oval">공공데이터 기반의 <strong>제공데이터</strong></div>
|
||||
</div>
|
||||
<div class="data-provision">
|
||||
<div class="data-bullet" aria-hidden="true"></div>
|
||||
<div class="data-bullet bullet-2" aria-hidden="true"></div>
|
||||
|
||||
<div class="data-categories">
|
||||
<!-- 공간정보 -->
|
||||
<div class="category-item spatial" aria-labelledby="spatial-title">
|
||||
<div class="category-images">
|
||||
<div class="image-item">
|
||||
<img
|
||||
src="/kngil/img/provided/img_provided_spatial.png"
|
||||
alt="공간정보 데이터 시각화"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-circle">
|
||||
<div class="category-icon">
|
||||
<img
|
||||
src="/kngil/img/ico/ico_map_marker.svg"
|
||||
alt="지도 마커 아이콘"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
<h3 id="spatial-title" class="category-title">공간정보</h3>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 통계자료 -->
|
||||
<div class="category-item statistical" aria-labelledby="statistical-title">
|
||||
<div class="category-images">
|
||||
<div class="image-item">
|
||||
<img
|
||||
src="/kngil/img/provided/img_provided_stat.png"
|
||||
alt="통계자료 데이터 시각화"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-circle">
|
||||
<div class="category-icon">
|
||||
<img
|
||||
src="/kngil/img/ico/ico_chart_3d.svg"
|
||||
alt="차트 아이콘"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
<h3 id="statistical-title" class="category-title">통계자료</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<article class="data-categories-list">
|
||||
<ul class="fix spatial" aria-label="공간정보 데이터 항목">
|
||||
<li>
|
||||
<div class="fix-01"><p>행정경계</p></div>
|
||||
<div class="dot f-01" aria-hidden="true"></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="fix-02"><p>건물통합정보</p></div>
|
||||
<div class="dot f-02" aria-hidden="true"></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="fix-03"><p>생태자연</p></div>
|
||||
<div class="dot f-03" aria-hidden="true"></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="fix-04"><p>토지이용계획</p></div>
|
||||
<div class="dot f-04" aria-hidden="true"></div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="fix statistical" aria-label="통계자료 데이터 항목">
|
||||
<li>
|
||||
<div class="fix-01"><p>인구</p></div>
|
||||
<div class="dot f-01" aria-hidden="true"></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="fix-02"><p>기상</p></div>
|
||||
<div class="dot f-02" aria-hidden="true"></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="fix-03"><p>문화재</p></div>
|
||||
<div class="dot f-03" aria-hidden="true"></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="fix-04"><p>기반시설</p></div>
|
||||
<div class="dot f-04" aria-hidden="true"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Process Section -->
|
||||
<section class="layout-fix-left process">
|
||||
<nav class="left" data-aos="fade-right" data-aos-duration="1000" aria-label="데이터 분류 네비게이션">
|
||||
<div class="bg js-fixLeft-bg on" aria-hidden="true"></div>
|
||||
<div class="bg js-fixLeft-bg" aria-hidden="true"></div>
|
||||
<ul
|
||||
class="js-fixLeft-tit"
|
||||
role="tablist"
|
||||
aria-label="데이터 분류 목록"
|
||||
>
|
||||
<li class="on" role="tab" aria-selected="true" tabindex="0">
|
||||
<span><strong>01</strong>자연조건</span>
|
||||
</li>
|
||||
<li role="tab" aria-selected="false" tabindex="-1">
|
||||
<span><strong>02</strong>사회특성</span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="right js-fixLeft-secs">
|
||||
<section class="natural" aria-labelledby="natural-tit">
|
||||
<h2 id="natural-tit" class="sub-tit">
|
||||
<i class="ico-natural" aria-hidden="true"></i>
|
||||
자연적 환경 요소인 <strong>지형, 기후, 생태자연, 도시주거</strong> 항목을<br class="pc-only">
|
||||
<strong>자연조건</strong>으로 분류하여 제공
|
||||
</h2>
|
||||
<ul class="cont-list">
|
||||
<li class="cont-item">
|
||||
<dl>
|
||||
<dt>
|
||||
<i class="ico-location" aria-hidden="true"></i>
|
||||
지역의 개황
|
||||
</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>위치 및 행정구역</li>
|
||||
<li>지형 및 지세</li>
|
||||
<li>지진</li>
|
||||
</ul>
|
||||
</dd>
|
||||
<dd>
|
||||
<figure class="sub-figs">
|
||||
<div class="imgs">
|
||||
<img
|
||||
src="/kngil/img/provided/img_provided_natural_01.png"
|
||||
alt="지진발생 데이터 시각화"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
<figcaption class="fig-caption">지진발생</figcaption>
|
||||
</figure>
|
||||
</dd>
|
||||
</dl>
|
||||
</li>
|
||||
|
||||
<li class="cont-item">
|
||||
<dl>
|
||||
<dt>
|
||||
<i class="ico-weather" aria-hidden="true"></i>
|
||||
기상 및 자연재해
|
||||
</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>기상</li>
|
||||
<li>풍수해</li>
|
||||
</ul>
|
||||
</dd>
|
||||
<dd>
|
||||
<figure class="sub-figs">
|
||||
<div class="imgs">
|
||||
<img
|
||||
src="/kngil/img/provided/img_provided_natural_02.png"
|
||||
alt="현상일수 데이터 시각화"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
<figcaption class="fig-caption">현상일수</figcaption>
|
||||
</figure>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="cont-item">
|
||||
<dl>
|
||||
<dt>
|
||||
<i class="ico-eco" aria-hidden="true"></i>
|
||||
생태 및 자연환경
|
||||
</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>생태자연도</li>
|
||||
<li>국토환경성 평가</li>
|
||||
<li>임상도</li>
|
||||
</ul>
|
||||
</dd>
|
||||
<dd>
|
||||
<figure class="sub-figs">
|
||||
<div class="imgs">
|
||||
<img
|
||||
src="/kngil/img/provided/img_provided_natural_03.png"
|
||||
alt="국토환경성 평가 데이터 시각화"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
<figcaption class="fig-caption">국토환경성 평가</figcaption>
|
||||
</figure>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
<section class="social" aria-labelledby="social-tit">
|
||||
<h2 id="social-tit" class="sub-tit">
|
||||
<i class="ico-social" aria-hidden="true"></i>
|
||||
사회적 구조 요소인 <strong>인구, 토지, 건축물, 사회기반시설</strong> 항목을<br class="pc-only">
|
||||
<strong>사회특성</strong>으로 분류하여 제공
|
||||
</h2>
|
||||
<ul class="cont-list">
|
||||
<li class="cont-item">
|
||||
<dl>
|
||||
<dt>
|
||||
<i class="ico-population"></i>
|
||||
인구
|
||||
</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>과거인구 추이</li>
|
||||
<li>행정구역별 인구</li>
|
||||
<li>연령(5세별) 및 성별 인구</li>
|
||||
</ul>
|
||||
</dd>
|
||||
<dd>
|
||||
<figure class="sub-figs">
|
||||
<div class="imgs">
|
||||
<img
|
||||
src="/kngil/img/provided/img_provided_social_01.png"
|
||||
alt="연령 및 성별 인구 데이터 시각화"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
<figcaption class="fig-caption">연령 및 성별 인구</figcaption>
|
||||
</figure>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="cont-item">
|
||||
<dl>
|
||||
<dt>
|
||||
<i class="ico-land" aria-hidden="true"></i>
|
||||
토지
|
||||
</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>용도지정</li>
|
||||
<li>보호구역</li>
|
||||
<li>토지이용</li>
|
||||
</ul>
|
||||
</dd>
|
||||
<dd>
|
||||
<figure class="sub-figs">
|
||||
<div class="imgs">
|
||||
<img
|
||||
src="/kngil/img/provided/img_provided_social_02.png"
|
||||
alt="토지이용(소유자별) 데이터 시각화"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
<figcaption class="fig-caption">토지이용(소유자별)</figcaption>
|
||||
</figure>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="cont-item">
|
||||
<dl>
|
||||
<dt>
|
||||
<i class="ico-building" aria-hidden="true"></i>
|
||||
건축물
|
||||
</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>용도/구조/층수/경과연도</li>
|
||||
<li>연면적/건폐율/용적률</li>
|
||||
</ul>
|
||||
</dd>
|
||||
<dd>
|
||||
<figure class="sub-figs">
|
||||
<div class="imgs">
|
||||
<img
|
||||
src="/kngil/img/provided/img_provided_social_03.png"
|
||||
alt="건축물(용도별) 데이터 시각화"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
<figcaption class="fig-caption">건축물(용도별)</figcaption>
|
||||
</figure>
|
||||
</dd>
|
||||
</dl>
|
||||
</li>
|
||||
|
||||
<li class="cont-item">
|
||||
<dl>
|
||||
<dt>
|
||||
<i class="ico-society" aria-hidden="true"></i>
|
||||
사회기반시설
|
||||
</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>교통/공간/유통업무</li>
|
||||
<li>상수도</li>
|
||||
<li>환경기초</li>
|
||||
<li>방재/기타</li>
|
||||
</ul>
|
||||
</dd>
|
||||
<dd>
|
||||
<figure class="sub-figs">
|
||||
<div class="imgs">
|
||||
<img
|
||||
src="/kngil/img/provided/img_provided_social_04.png"
|
||||
alt="상수도(배수지) 데이터 시각화"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
<figcaption class="fig-caption">상수도(배수지)</figcaption>
|
||||
</figure>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
</li>
|
||||
<li class="cont-item">
|
||||
<dl>
|
||||
<dt>
|
||||
<i class="ico-city" aria-hidden="true"></i>
|
||||
도시 및 주거환경
|
||||
</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>지역안전지수</li>
|
||||
<li>노후/불량 건축물</li>
|
||||
<li>호수밀도/접도율</li>
|
||||
<li>토지 형상</li>
|
||||
</ul>
|
||||
</dd>
|
||||
<dd>
|
||||
<figure class="sub-figs">
|
||||
<div class="imgs">
|
||||
<img
|
||||
src="/kngil/img/provided/img_provided_natural_04.png"
|
||||
alt="노후/불량 건축물 데이터 시각화"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
<figcaption class="fig-caption">노후/불량 건축물</figcaption>
|
||||
</figure>
|
||||
</dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- // Main Container -->
|
||||
|
||||
<?php include __DIR__ . "/_footer.php"; ?>
|
||||
</div>
|
||||
|
||||
<script src="/kngil/js/provided.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -63,7 +63,7 @@
|
||||
</ul>
|
||||
</section>
|
||||
<section class="sub-content">
|
||||
<h3 class="sub-tit">1:1 문의하기</h3>
|
||||
<h3 class="sub-tit">문의하기(Q&A)</h3>
|
||||
<form class="qa-controls" method="get" action="">
|
||||
<div class="search-wrap">
|
||||
<div class="filters">
|
||||
@@ -119,124 +119,127 @@
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="board-wrap">
|
||||
<div class="board-list">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style="width:5%"><col style="width:7%"><col style="width:12%"><col style="width:12%">
|
||||
<col style="width:7%"><col style="width:auto"><col style="width:9%"><col style="width:9%">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>번호</th><th>구분</th><th>회사</th><th>부서</th>
|
||||
<th>작성자</th><th>제목</th><th>등록일</th><th>상태</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
$totalIndex = $totalCount - ($page - 1) * $pageSize;
|
||||
$idx = 0;
|
||||
?>
|
||||
<?php foreach($posts as $row): ?>
|
||||
<?php
|
||||
$isNotice = ($row['category'] === '공지사항');
|
||||
$rowNumber = $totalIndex - $idx; // 연속 번호 재계산
|
||||
?>
|
||||
<?php $isNotice = ($row['category'] === 'notice'); ?>
|
||||
<tr class="<?= $isNotice ? 'row-notice' : '' ?>" onclick="location.href='/kngil/bbs/qa_detail.php?id=<?= urlencode($row['post_id']) ?>'" style="cursor:pointer;">
|
||||
<!-- 번호: 공지 or 연속번호 -->
|
||||
<td><?= $isNotice ? '공지' : $rowNumber ?></td>
|
||||
<!-- 구분 -->
|
||||
<td><?= htmlspecialchars($row['category']) ?></td>
|
||||
<!-- 회사 -->
|
||||
<td><?= htmlspecialchars($row['display_company']) ?></td>
|
||||
<!-- 부서 -->
|
||||
<td><?= htmlspecialchars($row['dept_nm'] ?? '') ?></td>
|
||||
<!-- 작성자 -->
|
||||
<td><?= htmlspecialchars($row['display_name']) ?></td>
|
||||
<!-- 제목 -->
|
||||
<td class="left">
|
||||
<?php if (($row['is_secret'] ?? 'N') === 'Y'): ?>
|
||||
<small style="color:#999">[비밀글]</small>
|
||||
<?php endif; ?>
|
||||
|
||||
<span class="title-text">
|
||||
<?= htmlspecialchars($row['title']) ?>
|
||||
</span>
|
||||
|
||||
<!-- 댓글 개수 -->
|
||||
<?php if (!empty($row['comment_count'])): ?>
|
||||
<span class="badge badge-comment" style="color:#007bff; margin-left:5px;">
|
||||
<i class="fa fa-commenting-o"></i> <?= $row['comment_count'] ?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 첨부파일 개수 -->
|
||||
<?php if (!empty($row['file_count'])): ?>
|
||||
<span class="badge badge-file" style="color:#28a745; margin-left:5px;">
|
||||
<i class="fa fa-paperclip"></i> <?= $row['file_count'] ?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
|
||||
<!-- 등록일 -->
|
||||
<td><?= htmlspecialchars(substr($row['created_at'],0,10)) ?></td>
|
||||
<!-- 상태 -->
|
||||
<td>
|
||||
<?php if ($row['category'] === '공지사항'): ?>
|
||||
<!-- 공지사항이면 상태값 안 보여줌 -->
|
||||
<span></span>
|
||||
<?php else: ?>
|
||||
<span class="status-<?= htmlspecialchars($row['status']) ?>">
|
||||
<?= $row['status']==='wait' ? '문의접수'
|
||||
: ($row['status']==='review' ? '문의검토'
|
||||
: ($row['status']==='deep' ? '정밀검토'
|
||||
: ($row['status']==='patch' ? '패치예정'
|
||||
: ($row['status']==='done' ? '답변완료'
|
||||
: '')))) ?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style="width:5%"><col style="width:7%"><col style="width:12%"><col style="width:12%">
|
||||
<col style="width:7%"><col style="width:auto"><col style="width:9%"><col style="width:9%">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>번호</th><th>구분</th><th>회사</th><th>부서</th>
|
||||
<th>작성자</th><th>제목</th><th>등록일</th><th>상태</th>
|
||||
</tr>
|
||||
<?php $idx++; ?>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<?php if ($totalPages > 1): ?>
|
||||
<div class="pagination">
|
||||
<?php if ($page > 1): ?>
|
||||
<a href="?<?= http_build_query(array_merge($_GET, ['page'=>$page-1])) ?>" class="prev">이전</a>
|
||||
<?php else: ?><span class="prev">이전</span><?php endif ?>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
$totalIndex = $totalCount - ($page - 1) * $pageSize;
|
||||
$idx = 0;
|
||||
?>
|
||||
<?php foreach($posts as $row): ?>
|
||||
<?php
|
||||
$isNotice = ($row['category'] === '공지사항');
|
||||
$rowNumber = $totalIndex - $idx; // 연속 번호 재계산
|
||||
?>
|
||||
<?php $isNotice = ($row['category'] === 'notice'); ?>
|
||||
<tr class="<?= $isNotice ? 'row-notice' : '' ?>" onclick="location.href='/kngil/bbs/qa_detail.php?id=<?= urlencode($row['post_id']) ?>'" style="cursor:pointer;">
|
||||
<!-- 번호: 공지 or 연속번호 -->
|
||||
<td><?= $isNotice ? '공지' : $rowNumber ?></td>
|
||||
<!-- 구분 -->
|
||||
<td><?= htmlspecialchars($row['category']) ?></td>
|
||||
<!-- 회사 -->
|
||||
<td><?= htmlspecialchars($row['display_company']) ?></td>
|
||||
<!-- 부서 -->
|
||||
<td><?= htmlspecialchars($row['dept_nm'] ?? '') ?></td>
|
||||
<!-- 작성자 -->
|
||||
<td><?= htmlspecialchars($row['display_name']) ?></td>
|
||||
<!-- 제목 -->
|
||||
<td class="left">
|
||||
<?php if (($row['is_secret'] ?? 'N') === 'Y'): ?>
|
||||
<small style="color:#999">[비밀글]</small>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php
|
||||
$blockSize = 10;
|
||||
$currentBlock= ceil($page / $blockSize);
|
||||
$start = ($currentBlock - 1) * $blockSize + 1;
|
||||
$end = min($totalPages, $currentBlock * $blockSize);
|
||||
<span class="title-text">
|
||||
<?= htmlspecialchars($row['title']) ?>
|
||||
</span>
|
||||
|
||||
for ($i = $start; $i <= $end; $i++):
|
||||
?>
|
||||
<?php if ($i == $page): ?>
|
||||
<!-- ✅ 여기! 현재 페이지는 span.current -->
|
||||
<span class="current"><?= $i ?></span>
|
||||
<?php else: ?>
|
||||
<a href="?<?= http_build_query(array_merge($_GET, ['page'=>$i])) ?>"><?= $i ?></a>
|
||||
<?php endif ?>
|
||||
<?php endfor ?>
|
||||
<!-- 댓글 개수 -->
|
||||
<?php if (!empty($row['comment_count'])): ?>
|
||||
<span class="badge badge-comment" style="color:#007bff; margin-left:5px;">
|
||||
<i class="fa fa-commenting-o"></i> <?= $row['comment_count'] ?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($page < $totalPages): ?>
|
||||
<a href="?<?= http_build_query(array_merge($_GET, ['page'=>$page+1])) ?>" class="next">다음</a>
|
||||
<?php else: ?><span class="next">다음</span><?php endif ?>
|
||||
<!-- 첨부파일 개수 -->
|
||||
<?php if (!empty($row['file_count'])): ?>
|
||||
<span class="badge badge-file" style="color:#28a745; margin-left:5px;">
|
||||
<i class="fa fa-paperclip"></i> <?= $row['file_count'] ?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
|
||||
<!-- 등록일 -->
|
||||
<td><?= htmlspecialchars(substr($row['created_at'],0,10)) ?></td>
|
||||
<!-- 상태 -->
|
||||
<td>
|
||||
<?php if ($row['category'] === '공지사항'): ?>
|
||||
<!-- 공지사항이면 상태값 안 보여줌 -->
|
||||
<span></span>
|
||||
<?php else: ?>
|
||||
<span class="status-<?= htmlspecialchars($row['status']) ?>">
|
||||
<?= $row['status']==='wait' ? '문의접수'
|
||||
: ($row['status']==='review' ? '문의검토'
|
||||
: ($row['status']==='deep' ? '정밀검토'
|
||||
: ($row['status']==='patch' ? '패치예정'
|
||||
: ($row['status']==='done' ? '답변완료'
|
||||
: '')))) ?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
</tr>
|
||||
<?php $idx++; ?>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<?php if ($totalPages > 1): ?>
|
||||
<div class="pagination">
|
||||
<?php if ($page > 1): ?>
|
||||
<a href="?<?= http_build_query(array_merge($_GET, ['page'=>$page-1])) ?>" class="prev">이전</a>
|
||||
<?php else: ?><span class="prev">이전</span><?php endif ?>
|
||||
|
||||
|
||||
</div>
|
||||
<?php
|
||||
$blockSize = 10;
|
||||
$currentBlock= ceil($page / $blockSize);
|
||||
$start = ($currentBlock - 1) * $blockSize + 1;
|
||||
$end = min($totalPages, $currentBlock * $blockSize);
|
||||
|
||||
for ($i = $start; $i <= $end; $i++):
|
||||
?>
|
||||
<?php if ($i == $page): ?>
|
||||
<!-- ✅ 여기! 현재 페이지는 span.current -->
|
||||
<span class="current"><?= $i ?></span>
|
||||
<?php else: ?>
|
||||
<a href="?<?= http_build_query(array_merge($_GET, ['page'=>$i])) ?>"><?= $i ?></a>
|
||||
<?php endif ?>
|
||||
<?php endfor ?>
|
||||
|
||||
<?php if ($page < $totalPages): ?>
|
||||
<a href="?<?= http_build_query(array_merge($_GET, ['page'=>$page+1])) ?>" class="next">다음</a>
|
||||
<?php else: ?><span class="next">다음</span><?php endif ?>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<div class="btn-wrap right">
|
||||
<button type="button" class="btn-primary" onclick="location.href='/kngil/skin/qa_write.skin.php'">
|
||||
<i class="fa fa-pencil" aria-hidden="true"></i> 문의등록
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
207
kngil/skin/results.php
Normal file
207
kngil/skin/results.php
Normal file
@@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<?php include __DIR__ . "/_head.php"; ?>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<?php include __DIR__ . "/_header.php"; ?>
|
||||
|
||||
<!-- container -->
|
||||
<div class="container results">
|
||||
<section class="sub-header">
|
||||
<div class="page-title js-dark">
|
||||
<h2 data-aos="fade-down" data-aos-duration="1000">성과품</h2>
|
||||
<p class="sub-txt">
|
||||
<span class="txt-line">데이터 분석 결과를 기반으로 항목별 성과품을</span>
|
||||
<span class="txt-line">자동생성된 보고서 형태로 제공합니다.</span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Content Section -->
|
||||
<section class="sub-content">
|
||||
<div class="sub-tit-box">
|
||||
<h3 class="sub-tit">
|
||||
<span class="txt-line">사업대상지역의 <strong>환경·사회·사업비 요소를 분석 및 시각화</strong>하여,</span>
|
||||
<span class="txt-line">항목별 최적화된 보고서 형태로 제공</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="condition">
|
||||
<div class="diagram-wrap" data-aos="fade-up" data-aos-duration="1000" aria-label="성과품 다이어그램">
|
||||
<div class="dia-circles-wrap">
|
||||
<div class="circle-dash" aria-hidden="true"></div>
|
||||
<div class="circle-belt" aria-hidden="true"></div>
|
||||
<div class="circle-core">
|
||||
<span>고품질의</span>
|
||||
<span>성과품</span>
|
||||
</div>
|
||||
<div class="circle-dots move" aria-hidden="true">
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
<div class="circle-dots" aria-hidden="true">
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
<div class="dia-element-ring" aria-label="데이터 항목 링">
|
||||
<?php
|
||||
$diaItems = [
|
||||
["angle" => "0deg", "pos" => "1", "label" => "토지"],
|
||||
["angle" => "60deg", "pos" => "2", "label" => "인구"],
|
||||
["angle" => "120deg", "pos" => "3", "label" => "기반시설"],
|
||||
["angle" => "180deg", "pos" => "4", "label" => "도시&주거"],
|
||||
["angle" => "240deg", "pos" => "5", "label" => "생태&자연"],
|
||||
["angle" => "300deg", "pos" => "6", "label" => "기상"]
|
||||
];
|
||||
foreach ($diaItems as $item): ?>
|
||||
<div class="dia-element dia-pos-<?=$item['pos']?>" style="--angle: <?=$item['angle']?>">
|
||||
<span class="dia-tit"><i></i><em><?=$item['label']?></em></span>
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Category Tabs Section: 자연조건 / 사회특성 / 추정사업비 -->
|
||||
<section class="sub-category" aria-label="성과품 카테고리">
|
||||
<div class="results-wrap">
|
||||
<nav aria-label="데이터 카테고리 네비게이션">
|
||||
<ul class="tab-list" role="tablist" aria-label="데이터 카테고리 목록">
|
||||
<li class="on">
|
||||
<a
|
||||
href="#key-natural"
|
||||
role="tab"
|
||||
aria-selected="true"
|
||||
aria-controls="key-natural"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="ico-nature" aria-hidden="true"></i>
|
||||
자연조건 데이터
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#key-social"
|
||||
role="tab"
|
||||
aria-selected="false"
|
||||
aria-controls="key-social"
|
||||
tabindex="-1"
|
||||
>
|
||||
<i class="ico-social" aria-hidden="true"></i>
|
||||
사회특성 데이터
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#key-cost"
|
||||
role="tab"
|
||||
aria-selected="false"
|
||||
aria-controls="key-cost"
|
||||
tabindex="-1"
|
||||
>
|
||||
<i class="ico-cost" aria-hidden="true"></i>
|
||||
추정사업비 데이터
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="tab-panels" role="tabpanel">
|
||||
<?php
|
||||
function renderTabPanel($data) {
|
||||
?>
|
||||
<div id="<?=$data['id']?>" class="tab-content <?=$data['tabClass']?><?=$data['isActive']?>" role="tabpanel" aria-labelledby="<?=$data['titleId']?>">
|
||||
<div class="section-hero">
|
||||
<div class="section-hero-left">
|
||||
<h3 id="<?=$data['titleId']?>" class="section-title-large">
|
||||
<span class="watermark" aria-hidden="true">Excel</span>
|
||||
<?=$data['title']?>
|
||||
</h3>
|
||||
<p class="section-desc"><?=$data['desc']?></p>
|
||||
</div>
|
||||
<div class="section-hero-right">
|
||||
<div class="report-stack">
|
||||
<div class="report-page" style="--index: 0">
|
||||
<span class="report-pick" aria-hidden="true"></span>
|
||||
<img src="/kngil/img/results/imb_report_<?=$data['imgPrefix']?>_1.png" alt="<?=$data['alt1']?>">
|
||||
</div>
|
||||
<div class="report-page" style="--index: 1"><img src="/kngil/img/results/imb_report_<?=$data['imgPrefix']?>_2.png" alt="<?=$data['alt2']?>"></div>
|
||||
<div class="report-page" style="--index: 2"><img src="/kngil/img/results/imb_report_<?=$data['imgPrefix']?>_3.png" alt="<?=$data['alt3']?>"></div>
|
||||
<div class="report-page" style="--index: 3"><img src="/kngil/img/results/imb_report_<?=$data['imgPrefix']?>_4.png" alt="<?=$data['alt4']?>"></div>
|
||||
<div class="report-page" style="--index: 4"><img src="/kngil/img/results/imb_report_<?=$data['imgPrefix']?>_5.png" alt="<?=$data['alt5']?>"></div>
|
||||
<div class="report-page" style="--index: 5"><img src="/kngil/img/results/imb_report_<?=$data['imgPrefix']?>_6.png" alt="<?=$data['alt6']?>"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
|
||||
renderTabPanel([
|
||||
"id" => "key-natural",
|
||||
"tabClass" => "natural",
|
||||
"isActive" => " on",
|
||||
"title" => "자연조건 데이터",
|
||||
"titleId" => "title-natural",
|
||||
"desc" => "지역의 개황, 기상 및 자연재해,<br>생태 및 자연환경, 도시 및 주거환경<br>관련 데이터를 제공합니다.",
|
||||
"imgPrefix" => "natural",
|
||||
"alt1" => "지역의 개황",
|
||||
"alt2" => "기상 및 자연재해",
|
||||
"alt3" => "지역의 개황",
|
||||
"alt4" => "기상 및 자연재해",
|
||||
"alt5" => "생태 및 자연환경",
|
||||
"alt6" => "도시 및 주거환경"
|
||||
]);
|
||||
|
||||
renderTabPanel([
|
||||
"id" => "key-social",
|
||||
"tabClass" => "social",
|
||||
"isActive" => "",
|
||||
"title" => "사회특성 데이터",
|
||||
"titleId" => "title-social",
|
||||
"desc" => "인구, 토지, 건축물, 사회기반시설 관련<br>데이터를 제공합니다.",
|
||||
"imgPrefix" => "social",
|
||||
"alt1" => "지역의 개황",
|
||||
"alt2" => "기상 및 자연재해",
|
||||
"alt3" => "지역의 개황",
|
||||
"alt4" => "기상 및 자연재해",
|
||||
"alt5" => "생태 및 자연환경",
|
||||
"alt6" => "도시 및 주거환경"
|
||||
]);
|
||||
|
||||
renderTabPanel([
|
||||
"id" => "key-cost",
|
||||
"tabClass" => "cost",
|
||||
"isActive" => "",
|
||||
"title" => "추정사업비 데이터",
|
||||
"titleId" => "title-cost",
|
||||
"desc" => "산정기준, 총사업비, 보상비,<br>공사비, 설계비, 부대비<br>관련 데이터를 제공합니다.",
|
||||
"imgPrefix" => "cost",
|
||||
"alt1" => "지역의 개황",
|
||||
"alt2" => "기상 및 자연재해",
|
||||
"alt3" => "지역의 개황",
|
||||
"alt4" => "기상 및 자연재해",
|
||||
"alt5" => "생태 및 자연환경",
|
||||
"alt6" => "도시 및 주거환경"
|
||||
]);
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- // Main Container -->
|
||||
|
||||
<?php include __DIR__ . "/_footer.php"; ?>
|
||||
</div>
|
||||
|
||||
<script src="/kngil/js/results.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
268
kngil/skin/value.php
Normal file
268
kngil/skin/value.php
Normal file
@@ -0,0 +1,268 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<?php include __DIR__ . "/_head.php"; ?>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<?php include __DIR__ . "/_header.php"; ?>
|
||||
|
||||
<!-- Main Container -->
|
||||
<div class="container value">
|
||||
<!-- Visual Section -->
|
||||
<div class="visual">
|
||||
<section class="sub-header">
|
||||
<div class="page-title">
|
||||
<h2 data-aos="fade-down" data-aos-duration="1000">KNGIL 소개</h2>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sub-content">
|
||||
<div class="sub-tit-box" data-aos="fade-up" data-aos-duration="1000">
|
||||
<p class="sub-tit">
|
||||
설계 실무자를 위한 기초현황 보고서 자동생성으로<br>
|
||||
<strong>기초조사 업무의 효율성</strong>을 높여줍니다.<br><br>
|
||||
KNGIL은 공공데이터 기반으로<br>
|
||||
대상지역 내 지형, 인구, 기상, 기반시설 등 기초자료를<br>
|
||||
<strong>보고서 형태로 제공하는 서비스</strong> 입니다.
|
||||
</p>
|
||||
<div class="slogan-box">
|
||||
<img
|
||||
src="/kngil/img/slogan.png"
|
||||
alt="KNGIL Korea National Geographic Information Library"
|
||||
width="627"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service">
|
||||
<div class="step-list">
|
||||
<p class="step-desc">
|
||||
분야별 설계 업무는 일반적으로 <br class="mo-only"/> <strong>5단계의 프로세스</strong>를 통하여 수행하며<br>
|
||||
<span class="bg-yellow">큰길서비스는 <strong>1단계 (기초현황 조사)</strong></span>
|
||||
</p>
|
||||
<div></div>
|
||||
<div class="step-flow-box">
|
||||
<div class="step-flow-item active">
|
||||
<div class="step-box">
|
||||
<div class="step-title">큰길서비스</div>
|
||||
<div class="step-subtitle">1단계 <strong>기초현황 조사</strong></div>
|
||||
<div class="step-icon">
|
||||
<img
|
||||
src="/kngil/img/value/img_document.png"
|
||||
alt="기초현황 조사 문서 아이콘"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ol class="step-flow" aria-label="설계 업무 프로세스 단계">
|
||||
<li class="step-item">
|
||||
<div class="step-box">
|
||||
<div class="step-title">2단계 <strong>현장조사</strong></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="step-item">
|
||||
<div class="step-box">
|
||||
<div class="step-title">3단계 <strong>지표 및 계획</strong></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="step-item">
|
||||
<div class="step-box">
|
||||
<div class="step-title">4단계 <strong>기본 및 실시설계</strong></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="step-item">
|
||||
<div class="step-box">
|
||||
<div class="step-title">5단계 <strong>성과품 작성</strong></div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="data-comparison">
|
||||
<div class="bg-line" aria-hidden="true">
|
||||
<span class="ico-arrow"></span>
|
||||
</div>
|
||||
<div class="comparison-item">
|
||||
<p class="comparison-label">
|
||||
<strong class="data">데이터 수집 및 보관</strong> 방식은 <br>
|
||||
<strong class="fw-big">디지털 전환</strong> 완료
|
||||
</p>
|
||||
<div class="data-type-box analog">
|
||||
<h4 class="data-type-title"><strong>아날로그</strong>(문서)</h4>
|
||||
<ul class="data-type-list">
|
||||
<li><span>데이터 문서 수집</span></li>
|
||||
<li><span>데이터 문서 보관</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="data-type-box digital">
|
||||
<h4 class="data-type-title"><strong>전산화</strong>(파일)</h4>
|
||||
<ul class="data-type-list">
|
||||
<li><span>데이터 파일 다운로드</span></li>
|
||||
<li><span>개인 PC 내 저장</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comparison-item">
|
||||
<p class="comparison-label">
|
||||
반면에,<br>
|
||||
<strong class="report">데이터 정리 및 보고서 작성</strong>은 <br>
|
||||
<strong class="fw-big">엔지니어의 수작업</strong> 진행
|
||||
</p>
|
||||
<div class="work-method-box manual">
|
||||
<h4 class="work-method-title"><strong>기존 업무 방식</strong>(수동화)</h4>
|
||||
<ul class="work-method-list">
|
||||
<li>
|
||||
<div class="work-image">
|
||||
<img
|
||||
src="/kngil/img/value/img_manual_01.png"
|
||||
alt="데이터 정리 수작업 이미지"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
<span>데이터 정리 수작업</span>
|
||||
</li>
|
||||
<li>
|
||||
<div class="work-image">
|
||||
<img
|
||||
src="/kngil/img/value/img_manual_02.png"
|
||||
alt="보고서 파일 작성 이미지"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
<span>보고서 파일 작성</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="work-method-box automated">
|
||||
<h4 class="work-method-title"><strong>큰길서비스 활용</strong>(자동화)</h4>
|
||||
<ul class="work-method-list">
|
||||
<li>
|
||||
<div class="work-image">
|
||||
<img
|
||||
src="/kngil/img/value/img_automated_01.png"
|
||||
alt="데이터DB화 이미지"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
<span><strong>데이터DB화</strong></span>
|
||||
</li>
|
||||
<li>
|
||||
<div class="work-image">
|
||||
<img
|
||||
src="/kngil/img/value/img_automated_02.png"
|
||||
alt="보고서 자동 생성 이미지"
|
||||
width="auto"
|
||||
height="auto"
|
||||
>
|
||||
</div>
|
||||
<span><strong>보고서 자동 생성</strong></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Summary Section -->
|
||||
<section class="summary">
|
||||
<dl>
|
||||
<dt class="big-tit" data-aos="fade-down" data-aos-duration="1000">
|
||||
<span class="logo-c" aria-label="KNGIL">KNGIL</span> 특징
|
||||
</dt>
|
||||
<dd data-aos="fade-up" data-aos-duration="1000">
|
||||
데이터 분석 및 보고서 생성을 위한 실무자 중심의 편리한 기능을 적용한<br>
|
||||
<strong>기초 현황 보고서 제공서비스</strong> 입니다.
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<div class="line" aria-hidden="true"></div>
|
||||
<div class="dot" aria-hidden="true"></div>
|
||||
</section>
|
||||
|
||||
<!-- Value Features Section -->
|
||||
<section class="value-features js-ani" aria-label="KNGIL 주요 기능">
|
||||
<article class="feature-card feature-gis" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
|
||||
<dl>
|
||||
<dt class="sub-tit">
|
||||
<i aria-hidden="true"></i>
|
||||
GIS 기반<br class="pc-only"> 지형 및 공간정보 분석
|
||||
</dt>
|
||||
<dd>자연조건 및 사회특성으로 분류된 <br class="pc-only"/>
|
||||
항목별 데이터 정보를 면밀히 분석하여 <br class="pc-only"/>정밀도를 높였습니다.</dd>
|
||||
</dl>
|
||||
</article>
|
||||
|
||||
<article class="feature-card feature-data" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
|
||||
<dl>
|
||||
<dt class="sub-tit">
|
||||
<i aria-hidden="true"></i>
|
||||
기초 현황 데이터<br class="pc-only"> 항목 최다 제공
|
||||
</dt>
|
||||
<dd>
|
||||
도시계획, 상하수도분야 등 관련 <br class="pc-only"/>
|
||||
현황데이터(99개)를 제공함으로써 <br class="pc-only"/>
|
||||
활용범위의 확장성을 높였습니다.
|
||||
</dd>
|
||||
</dl>
|
||||
</article>
|
||||
|
||||
<article class="feature-card feature-map" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
|
||||
<dl>
|
||||
<dt class="sub-tit">
|
||||
<i aria-hidden="true"></i>
|
||||
다양한 좌표계 지원 및<br class="pc-only"> 시각화
|
||||
</dt>
|
||||
<dd>
|
||||
Bessel(지리원 표준)및 GRS80<br class="pc-only"/>
|
||||
(국토지리원정보 표준) 좌표계를 <br class="pc-only"/>
|
||||
제공하며, 사용자가 원하는 좌표로 <br class="pc-only"/>
|
||||
변환하기 쉽도록 선택 시 화면에 <br class="pc-only"/>
|
||||
위치를 표출 하였습니다.
|
||||
</dd>
|
||||
</dl>
|
||||
</article>
|
||||
|
||||
<article class="feature-card feature-custom" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
|
||||
<dl>
|
||||
<dt class="sub-tit">
|
||||
<i aria-hidden="true"></i>
|
||||
기준값 설정 관련<br class="pc-only"> 커스터마이징
|
||||
</dt>
|
||||
<dd>개략사업비, 비작업일수 산정을 위해<br class="pc-only"/> 관련법, 지침 및 기준 등 사용자가 <br class="pc-only"/>
|
||||
쉽게 변경할 수 있도록 편의 기능을<br class="pc-only"/>
|
||||
강화하였습니다.</dd>
|
||||
</dl>
|
||||
</article>
|
||||
|
||||
<!-- Line Animation (Decorative) -->
|
||||
<div class="lines" aria-hidden="true">
|
||||
<div class="v1"></div>
|
||||
<div class="v2"></div>
|
||||
<div class="v3"></div>
|
||||
<div class="h"></div>
|
||||
<div class="d1"></div>
|
||||
<div class="d2"></div>
|
||||
<div class="d3"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- // Main Container -->
|
||||
|
||||
<?php include __DIR__ . "/_footer.php"; ?>
|
||||
</div>
|
||||
|
||||
<script src="/kngil/js/value.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user