297 lines
15 KiB
HTML
297 lines
15 KiB
HTML
<!DOCTYPE html><html lang="ko"><head>
|
||
<meta charset="UTF-8">
|
||
<title>건설 정책 로드맵 및 목표</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
|
||
body { margin: 0; padding: 0; font-family: 'Noto Sans KR', sans-serif; background: #fff; height: 100%; overflow: hidden; }
|
||
html { height: 100%; overflow: hidden; }
|
||
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
|
||
th { background: #f1f3f5; border: 1px solid #ddd; padding: 8px; text-align: center; }
|
||
td { border: 1px solid #ddd; padding: 8px; vertical-align: middle; }
|
||
ul { padding-left: 20px; margin-top: 5px; }
|
||
li { margin-bottom: 5px; }
|
||
img { max-width: 100%; border-radius: 8px; }
|
||
blockquote { margin: 10px 0; padding: 10px 15px; border-left: 4px solid #0056b3; background: #f8f9fa; }
|
||
|
||
/* 컬럼 리사이즈 핸들 */
|
||
.col-resize-handle {
|
||
width: 6px;
|
||
cursor: col-resize;
|
||
background: transparent;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
z-index: 10;
|
||
transition: background 0.2s;
|
||
}
|
||
.col-resize-handle:hover, .col-resize-handle.dragging {
|
||
background: #0056b3;
|
||
border-radius: 3px;
|
||
}
|
||
.col-resize-handle::after {
|
||
content: '⋮';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
color: #999;
|
||
font-size: 14px;
|
||
pointer-events: none;
|
||
}
|
||
.col-resize-handle:hover::after, .col-resize-handle.dragging::after {
|
||
color: #fff;
|
||
}
|
||
|
||
/* 표 리사이즈 */
|
||
table {
|
||
position: relative;
|
||
}
|
||
.table-wrapper {
|
||
position: relative;
|
||
margin-top: 10px;
|
||
}
|
||
.table-col-grip {
|
||
position: absolute;
|
||
top: 0;
|
||
width: 8px;
|
||
height: 100%;
|
||
cursor: col-resize;
|
||
z-index: 10;
|
||
background: transparent;
|
||
}
|
||
.table-col-grip:hover {
|
||
background: rgba(0, 86, 179, 0.25);
|
||
}
|
||
.table-row-grip {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 8px;
|
||
cursor: row-resize;
|
||
z-index: 10;
|
||
background: transparent;
|
||
}
|
||
.table-row-grip:hover {
|
||
background: rgba(0, 86, 179, 0.25);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body style="">
|
||
<div style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-direction: column; padding: 15px 40px; box-sizing: border-box;">
|
||
|
||
<div id="colContainer" style="flex: 1 1 auto; display: flex; align-items: stretch; margin-top: 10px; margin-bottom: 10px;">
|
||
|
||
<div id="leftCol" style="flex: 4.5 1 0%; display: flex; flex-direction: column; padding-right: 20px; overflow-y: auto; padding-top: 5px;">
|
||
<h2 style="font-size: 1.5rem; font-weight: bold; border-bottom: 2px solid #333;
|
||
padding-bottom: 10px; margin-bottom: 15px; margin-top: 7px;">1. 건설 정책 로드맵 및 목표</h2>
|
||
<div style="font-size: 1rem; line-height: 1.6; color: #333;"><p>정부는 <strong>디지털 전환(DX)</strong> 을 통해 정체된 건설산업을 <strong>국가 신성장 동력</strong>으로 재도약시키고자, 건설산업을 정보화하고 스마트 건설을 도입하기위해 다양한 국가연구개발사업 및 건설 정책을 시행하고있다.</p>
|
||
|
||
<div style="text-align: center; margin: 15px 0;">
|
||
<img src="/assets/images/04.png" alt="건설 정책 로드맵" style="max-height: 35vh; object-fit: contain;">
|
||
<p style="font-size: 0.9rem; color: #666; margin-top: 5px;"><em>[사진 1] 건설산업DX 정책 로드맵</em></p>
|
||
</div>
|
||
|
||
<h3 style="font-size:1.3rem; font-weight:bold; border-bottom:1px solid #999; padding-bottom:8px; margin-top:25px; margin-bottom:10px;">2. 건설산업 BIM 기본 지침</h3>
|
||
<p>2020년 「<strong>건설산업 BIM 기본지침</strong>」, 2022년 「<strong>건설산업 BIM 시행지침</strong>」을 발의하여 건설산업의 <strong>생산성 향상</strong>과 <strong>품질, 안전 및 친환경의 극대화</strong>를 핵심 목표로 설정하였으며, 설계·시공·유지관리 등 건설산업 전반의 <strong>디지털 전환을 가속화</strong>하고자 한다.</p>
|
||
<p><strong>정부 BIM 도입 개요 (건설산업 BIM 기본지침)</strong></p>
|
||
<ul>
|
||
<li><strong>비전</strong>: 디지털 전환을 통해 건설산업을 국가 신성장 동력으로 재도약</li>
|
||
<li><strong>목표</strong>: 건설산업의 생산성 향상과 품질, 안전 및 친환경의 극대화</li>
|
||
<li><strong>기대 효과</strong>:</li>
|
||
<ul><li><strong>비용/공기</strong>: 건설 비용 감소 및 기간 단축</li></ul>
|
||
<ul><li><strong>품질/안전</strong>: 설계·시공 오류 최소화, 프로젝트 리스크 저감</li></ul>
|
||
<ul><li><strong>협업</strong>: 협업과 의사소통 강화, 건설정보 통합관리</li></ul>
|
||
</ul>
|
||
|
||
<div style="text-align: center; margin: 15px 0;">
|
||
<img src="/assets/images/09.png" alt="건설산업 BIM 기본 지침" style="max-height: 35vh; object-fit: contain;">
|
||
<p style="font-size: 0.9rem; color: #666; margin-top: 5px;"><em>[사진 1] 건설산업 BIM 기본 지침 및 시행지침</em></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-resize-handle" id="colResizeHandle"></div>
|
||
|
||
|
||
<div id="rightCol" style="flex: 5.5 1 0%; display: flex; flex-direction: column; padding-left: 20px; overflow-y: auto;">
|
||
<h2 style="font-size: 1.5rem; font-weight: bold; border-bottom: 2px solid #333;
|
||
padding-bottom: 10px; margin-bottom: 15px; margin-top: -3px;">3. 스마트 건설 활성화 방안</h2>
|
||
<div style="font-size: 1rem; line-height: 1.6; color: #333;"><p>2022년 7월 국토교통부가 발표한 '<strong>스마트 건설 활성화 방안</strong>'은 건설산업의 디지털화와 자동화를 위한 핵심 전략을 포함한다.</p>
|
||
<p><strong>스마트 건설 활성화 방안 주요내용</strong></p>
|
||
<div class="table-wrapper"><table style="width:100%; border-collapse:collapse; margin-top:10px; font-size:0.9rem; table-layout:fixed;"><thead><tr><th style="background:#f1f3f5; border:1px solid #ddd; padding:8px; text-align:left; width:30%;">구분</th><th style="background:#f1f3f5; border:1px solid #ddd; padding:8px; text-align:left; width:70%;">주요 내용</th></tr></thead><tbody><tr><td style="border:1px solid #ddd; padding:8px; vertical-align:middle; text-align:left;"><strong>BIM</strong><br>(Building Information Modeling)</td><td style="border:1px solid #ddd; padding:8px; vertical-align:middle; text-align:left;"><strong>건설산업의 자동화, 지능화 등 스마트 건설을 실현하기 위한 기본 도구</strong><br>건설정보 기반의 Process와 Products를 제공하여 디지털 전환의 기반을 마련함</td></tr><tr><td style="border:1px solid #ddd; padding:8px; vertical-align:middle; text-align:left;"><strong>OSC</strong><br>(Off-Site Construction)</td><td style="border:1px solid #ddd; padding:8px; vertical-align:middle; text-align:left;"><strong>탈현장 건설 (공장 제작 시공)</strong><br>단위부재 또는 유닛(여러 부재가 합쳐진 모듈 등)을 공장에서 사전 제작한 이후, 현장으로 이동하여 레고 블럭처럼 조립하는 방식</td></tr></tbody></table><div class="table-col-grip" data-col-index="0" style="left: 305px; height: 191px;"></div><div class="table-row-grip" data-row-index="0" style="top: 36px; width: 1009px;"></div><div class="table-row-grip" data-row-index="1" style="top: 99px; width: 1009px;"></div></div>
|
||
|
||
<div style="text-align: center; margin: 15px 0;">
|
||
<img src="/assets/images/05.png" alt="스마트 건설 활성화 방안" style="max-height: 35vh; object-fit: contain;">
|
||
<p style="font-size: 0.9rem; color: #666; margin-top: 5px;"><em>[사진 2] 스마트 건설 활성화 방안</em></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
<div style="padding: 20px 25px; background-color: #e7f5ff; border-left: 6px solid #0056b3;
|
||
border-radius: 6px; font-size: 1.1rem; line-height: 1.7; margin-top: 10px;">
|
||
<div style="font-weight: bold; margin-bottom: 8px; color: #0056b3; font-size: 1.15rem;">ℹ️ 핵심 요약</div>
|
||
<div style="color: #1a365d; font-weight: 500;"><ul>
|
||
<li>정부는 [건설산업 BIM 기본 지침], [스마트 건설 활성화 방안] 등을 통해 건설산업의 디지털 전환을 지속적으로 추진하고 있다.</li>
|
||
</ul></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<script>
|
||
// ===== 1. 컬럼 리사이즈 =====
|
||
(function() {
|
||
var handle = document.getElementById('colResizeHandle');
|
||
if (!handle) return;
|
||
|
||
var container = document.getElementById('colContainer');
|
||
var leftCol = document.getElementById('leftCol');
|
||
var rightCol = document.getElementById('rightCol');
|
||
if (!leftCol || !rightCol) return;
|
||
|
||
var dragging = false;
|
||
|
||
handle.addEventListener('mousedown', function(e) {
|
||
e.preventDefault();
|
||
dragging = true;
|
||
handle.classList.add('dragging');
|
||
document.body.style.cursor = 'col-resize';
|
||
document.body.style.userSelect = 'none';
|
||
});
|
||
|
||
document.addEventListener('mousemove', function(e) {
|
||
if (!dragging) return;
|
||
var rect = container.getBoundingClientRect();
|
||
var x = e.clientX - rect.left;
|
||
var totalW = rect.width;
|
||
var leftRatio = (x / totalW) * 10;
|
||
leftRatio = Math.max(2, Math.min(8, leftRatio));
|
||
var rightRatio = 10 - leftRatio;
|
||
leftCol.style.flex = leftRatio.toFixed(1);
|
||
rightCol.style.flex = rightRatio.toFixed(1);
|
||
});
|
||
|
||
document.addEventListener('mouseup', function() {
|
||
if (!dragging) return;
|
||
dragging = false;
|
||
handle.classList.remove('dragging');
|
||
document.body.style.cursor = '';
|
||
document.body.style.userSelect = '';
|
||
});
|
||
})();
|
||
|
||
// ===== 2. 표 셀 리사이즈 (오버레이 방식) =====
|
||
(function() {
|
||
document.querySelectorAll('table').forEach(function(table) {
|
||
table.style.tableLayout = 'fixed';
|
||
|
||
// 테이블을 wrapper로 감싸기
|
||
var wrapper = document.createElement('div');
|
||
wrapper.className = 'table-wrapper';
|
||
table.parentNode.insertBefore(wrapper, table);
|
||
wrapper.appendChild(table);
|
||
|
||
function createGrips() {
|
||
// 기존 그립 제거
|
||
wrapper.querySelectorAll('.table-col-grip, .table-row-grip').forEach(function(g) { g.remove(); });
|
||
|
||
var rows = table.querySelectorAll('tr');
|
||
if (rows.length === 0) return;
|
||
|
||
// 컬럼 그립 - 첫 행의 셀 경계에 배치
|
||
var cells = rows[0].querySelectorAll('th, td');
|
||
var cumX = 0;
|
||
for (var i = 0; i < cells.length - 1; i++) {
|
||
cumX += cells[i].offsetWidth;
|
||
var grip = document.createElement('div');
|
||
grip.className = 'table-col-grip';
|
||
grip.style.left = (cumX - 4) + 'px';
|
||
grip.style.height = table.offsetHeight + 'px';
|
||
grip.dataset.colIndex = i;
|
||
wrapper.appendChild(grip);
|
||
|
||
(function(colIdx, gripEl) {
|
||
var startX, startW, nextStartW, col, nextCol;
|
||
gripEl.addEventListener('mousedown', function(e) {
|
||
e.preventDefault();
|
||
startX = e.clientX;
|
||
col = [];
|
||
nextCol = [];
|
||
rows.forEach(function(row) {
|
||
var c = row.querySelectorAll('th, td');
|
||
if (c[colIdx]) col.push(c[colIdx]);
|
||
if (c[colIdx + 1]) nextCol.push(c[colIdx + 1]);
|
||
});
|
||
startW = col[0] ? col[0].offsetWidth : 100;
|
||
nextStartW = nextCol[0] ? nextCol[0].offsetWidth : 100;
|
||
document.body.style.cursor = 'col-resize';
|
||
document.body.style.userSelect = 'none';
|
||
|
||
function onMove(ev) {
|
||
var diff = ev.clientX - startX;
|
||
var newW = Math.max(40, startW + diff);
|
||
var newNextW = Math.max(40, nextStartW - diff);
|
||
col.forEach(function(c) { c.style.width = newW + 'px'; });
|
||
nextCol.forEach(function(c) { c.style.width = newNextW + 'px'; });
|
||
}
|
||
function onUp() {
|
||
document.removeEventListener('mousemove', onMove);
|
||
document.removeEventListener('mouseup', onUp);
|
||
document.body.style.cursor = '';
|
||
document.body.style.userSelect = '';
|
||
createGrips();
|
||
}
|
||
document.addEventListener('mousemove', onMove);
|
||
document.addEventListener('mouseup', onUp);
|
||
});
|
||
})(i, grip);
|
||
}
|
||
|
||
// 행 그립 - 각 행 하단에 배치
|
||
var cumY = 0;
|
||
for (var r = 0; r < rows.length - 1; r++) {
|
||
cumY += rows[r].offsetHeight;
|
||
var rowGrip = document.createElement('div');
|
||
rowGrip.className = 'table-row-grip';
|
||
rowGrip.style.top = (cumY - 4) + 'px';
|
||
rowGrip.style.width = table.offsetWidth + 'px';
|
||
rowGrip.dataset.rowIndex = r;
|
||
wrapper.appendChild(rowGrip);
|
||
|
||
(function(rowIdx, gripEl) {
|
||
var startY, startH;
|
||
gripEl.addEventListener('mousedown', function(e) {
|
||
e.preventDefault();
|
||
startY = e.clientY;
|
||
startH = rows[rowIdx].offsetHeight;
|
||
document.body.style.cursor = 'row-resize';
|
||
document.body.style.userSelect = 'none';
|
||
|
||
function onMove(ev) {
|
||
var diff = ev.clientY - startY;
|
||
rows[rowIdx].style.height = Math.max(20, startH + diff) + 'px';
|
||
}
|
||
function onUp() {
|
||
document.removeEventListener('mousemove', onMove);
|
||
document.removeEventListener('mouseup', onUp);
|
||
document.body.style.cursor = '';
|
||
document.body.style.userSelect = '';
|
||
createGrips();
|
||
}
|
||
document.addEventListener('mousemove', onMove);
|
||
document.addEventListener('mouseup', onUp);
|
||
});
|
||
})(r, rowGrip);
|
||
}
|
||
}
|
||
|
||
// 초기 그립 생성 (약간의 딜레이 후 — 렌더링 완료 대기)
|
||
setTimeout(createGrips, 100);
|
||
});
|
||
})();
|
||
</script>
|
||
|
||
</body></html> |