285 lines
8.9 KiB
Plaintext
285 lines
8.9 KiB
Plaintext
---
|
|
title: DX도입 배경(슬라이드6:4)
|
|
sidebar:
|
|
order: 5
|
|
tableOfContents: false
|
|
---
|
|
|
|
<style>{`
|
|
/* 1. 전체 폭 강제 사용 및 패딩 제거 */
|
|
.content-panel, .sl-container, .sl-markdown-content {
|
|
max-width: 100% !important; padding: 0 !important; margin: 0 !important;
|
|
}
|
|
.padding-vert--lg { padding-top: 0 !important; padding-bottom: 0 !important; }
|
|
|
|
/* 2. 리스트 스타일 잡기 */
|
|
.slide-content ul { padding-left: 20px; margin-top: 10px; }
|
|
.slide-content li { margin-bottom: 8px; }
|
|
`}</style>
|
|
|
|
{/* 👇 슬라이드 컨테이너: 높이를 화면 크기에서 [제목+여백]만큼 뺀 값으로 자동 계산 */
|
|
/* calc(100vh - 140px) : 140px은 상단 시스템 제목과 헤더가 차지하는 대략적인 높이입니다. */
|
|
}
|
|
<div className="slide-container" style={{
|
|
height: 'calc(100vh - 140px)',
|
|
width: '100%',
|
|
overflow: 'hidden',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
padding: '0 40px'
|
|
}}>
|
|
|
|
{/* 본문 영역 (6:4 분할) */}
|
|
<div style={{
|
|
flex: '1 1 auto', /* 남은 공간을 꽉 채움 */
|
|
display: 'flex',
|
|
gap: '40px',
|
|
alignItems: 'stretch', /* ⭐ 핵심: 자식 요소들을 높이 끝까지 강제로 늘림 */
|
|
marginTop: '10px',
|
|
marginBottom: '20px'
|
|
}}>
|
|
|
|
{/* 🟢 [왼쪽 60%] */}
|
|
<div className="slide-content" style={{
|
|
flex: 6,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'flex-start', /* 내용은 중앙 정렬하되 */
|
|
height: '100%', /* ⭐ 박스 자체는 100% 높이 유지 */
|
|
borderRight: '1px solid #e0e0e0',
|
|
paddingRight: '40px'
|
|
}}>
|
|
|
|
<h2 style={{ fontSize: '1.6rem', fontWeight: 'bold', marginBottom: '0px', borderBottom: '1px solid #ddd', paddingBottom: '00px' }}>
|
|
1. 건설산업의 낮은 생산성
|
|
</h2>
|
|
|
|
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333' }}>
|
|
<p>
|
|
* **건설산업** 생산성 성장률은 **1%**, 제조업(**3.6%**) 대비 **심각한 정체** 상태.
|
|
|
|
|
|
* 국내 건설기업의 **노동 생산성**또한 **제조업의 53.2%** 수준에 불과함.
|
|
|
|
|
|
* **건설산업**은 **효율성 혁신 지체**로, 여전히 전통적인 **노동 집약적 생산 방식**에 머물러 있음.
|
|
|
|
<br/>
|
|
<br/>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<h2 style={{ fontSize: '1.6rem', fontWeight: 'bold', marginBottom: '0px', borderBottom: '1px solid #ddd', paddingBottom: '00px' }}>
|
|
2. 디지털화와 건설산업의 현재
|
|
</h2>
|
|
|
|
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333' }}>
|
|
<p>
|
|
* 세계적으로 산업별 **디지털화 수준과 생산성은 정비례**함.
|
|
|
|
* 건설산업의 디지털화 지수는 **농업보다도 낮은 최하위권**에 머물러 있음.
|
|
|
|
* 디지털 전환을 위한 **노력 부족**과 건설산업에 맞는 **디지털 기술 부족**이 그 원인.
|
|
|
|
* 디지털 기술이 발전한 현재, 생산성 혁신을 위해 **건설산업 전반의 디지털 전환(DX)** 이 필요.
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
{/* ================= [핵심 요약] 박스 ================= */}
|
|
<div style={{
|
|
marginTop: '30px', /* 위쪽 내용과 간격 */
|
|
padding: '20px', /* 박스 내부 여백 */
|
|
backgroundColor: '#f6f8fa', /* 연한 회색 배경 (취향에 따라 #e6f7ff 등 변경 가능) */
|
|
borderLeft: '5px solid #0056b3', /* 왼쪽 굵은 파란 선 */
|
|
borderRadius: '4px', /* 모서리 둥글게 */
|
|
fontSize: '1rem'
|
|
}}>
|
|
{/* 제목 부분 */}
|
|
<div style={{ fontWeight: 'bold', marginBottom: '10px', color: '#0056b3' }}>
|
|
핵심 요약
|
|
</div>
|
|
|
|
{/* 내용 부분 */}
|
|
<ul style={{ margin: 0, paddingLeft: '20px' }}>
|
|
<li>
|
|
건설산업은 디지털전환을 통해 <strong>Process의 혁신</strong>과
|
|
<strong> Products의 변화</strong>를 일으켜야 한다.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* 🟠 [오른쪽 40%] */}
|
|
<div style={{
|
|
flex: 4,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'flex-start',
|
|
alignItems: 'left',
|
|
paddingLeft: '10px',
|
|
height: '100%'
|
|
}}>
|
|
|
|
|
|
{/* 👇 주석 없이 깔끔한 이미지 태그 */}
|
|
<img
|
|
src="/assets/images/그림4.png"
|
|
alt="건설산업 생산성 추이"
|
|
className="zoomable"
|
|
style={{
|
|
maxWidth: '100%',
|
|
maxHeight: '40vh',
|
|
objectFit: 'contain',
|
|
borderRadius: '8px',
|
|
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
|
|
marginBottom: '0px'
|
|
}}
|
|
/>
|
|
|
|
<p style={{ fontSize: '0.9rem', textAlign: 'center', color: '#666', marginTop: '0' }}>
|
|
*[그림 1] 국내외 건설산업 생산성 추이 (출처: McKinsey / 한국은행)*<br/>
|
|
</p>
|
|
|
|
<br/>
|
|
<br/>
|
|
|
|
|
|
|
|
{/* 👇 주석 없이 깔끔한 이미지 태그 */}
|
|
<img
|
|
src="/assets/images/그림3.png"
|
|
alt="건설산업 생산성 추이"
|
|
className="zoomable"
|
|
style={{
|
|
maxWidth: '100%',
|
|
maxHeight: '40vh',
|
|
objectFit: 'contain',
|
|
borderRadius: '8px',
|
|
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
|
|
marginBottom: '0px'
|
|
}}
|
|
/>
|
|
|
|
<p style={{ fontSize: '0.9rem', textAlign: 'center', color: '#666', marginTop: '0' }}>
|
|
*[그림 2] 산업별 디지털화 지수 비교 (출처: McKinsey 보고서, 2018)*<br/>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* ================================================================================== */}
|
|
{/* 👇 [팝업 기능 최종본] 가림 현상 해결 + 정중앙 정렬 (기존 코드 지우고 붙여넣기) */}
|
|
{/* ================================================================================== */}
|
|
|
|
<style>{`
|
|
.zoomable { cursor: zoom-in; transition: transform 0.2s; }
|
|
.zoomable:hover { transform: scale(1.02); }
|
|
|
|
/* 팝업 배경 설정 */
|
|
#image-modal {
|
|
display: none; /* 평소엔 숨김 */
|
|
|
|
/* ⭐ 핵심 1: 정중앙 정렬을 위한 Flexbox 도입 */
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
position: fixed;
|
|
left: 0; top: 0; width: 100%; height: 100%;
|
|
|
|
/* ⭐ 핵심 2: 사이트 메뉴바보다 무조건 위에 뜨게 Z-Index를 엄청 높게 설정 */
|
|
z-index: 2147483647;
|
|
|
|
background-color: rgba(0,0,0,0.9); /* 배경을 더 어둡게 */
|
|
backdrop-filter: blur(5px);
|
|
padding: 20px; /* 가장자리 여백 확보 */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 팝업 이미지 설정 */
|
|
#modal-content {
|
|
max-width: 60%;
|
|
max-height: 95vh;
|
|
object-fit: contain; /* 비율 유지하며 화면에 딱 맞춤 */
|
|
border-radius: 4px;
|
|
box-shadow: 0 0 30px rgba(0,0,0,0.5);
|
|
animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
/* 닫기 버튼 설정 */
|
|
#modal-close {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 30px;
|
|
color: white;
|
|
font-size: 50px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
z-index: 2147483648; /* 이미지보다도 더 위에 */
|
|
line-height: 1;
|
|
text-shadow: 0 0 10px rgba(0,0,0,0.5);
|
|
}
|
|
#modal-close:hover { color: #ff6b6b; transform: scale(1.1); transition: 0.2s; }
|
|
|
|
@keyframes popUp { from {transform:scale(0.8); opacity:0;} to {transform:scale(1); opacity:1;} }
|
|
`}</style>
|
|
|
|
{/* 팝업창 HTML 구조 */}
|
|
<div id="image-modal">
|
|
<span id="modal-close">×</span>
|
|
<img id="modal-content" />
|
|
</div>
|
|
|
|
{/* 스크립트 */}
|
|
<script>{`
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const modal = document.getElementById('image-modal');
|
|
const modalImg = document.getElementById('modal-content');
|
|
const closeBtn = document.getElementById('modal-close');
|
|
const images = document.querySelectorAll('.zoomable');
|
|
|
|
// 1. 이미지 클릭 시 열기
|
|
images.forEach(img => {
|
|
img.addEventListener('click', function(e) {
|
|
e.preventDefault(); // 혹시 모를 기본 동작 차단
|
|
modal.style.display = "flex"; // ⭐ block 대신 flex로 열어야 중앙 정렬됨
|
|
modalImg.src = this.src;
|
|
modalImg.alt = this.alt;
|
|
});
|
|
});
|
|
|
|
// 2. 닫기 기능 함수
|
|
function closeModal() {
|
|
modal.style.display = "none";
|
|
}
|
|
|
|
// 3. 닫기 버튼 클릭
|
|
if (closeBtn) closeBtn.onclick = closeModal;
|
|
|
|
// 4. 배경 클릭 시 닫기
|
|
if (modal) {
|
|
modal.onclick = function(event) {
|
|
// 이미지를 제외한 배경(div)을 눌렀을 때만 닫기
|
|
if (event.target === modal) {
|
|
closeModal();
|
|
}
|
|
}
|
|
}
|
|
|
|
// 5. ESC 키 누르면 닫기 (추가 편의기능)
|
|
document.addEventListener('keydown', function(event) {
|
|
if (event.key === "Escape" && modal.style.display === "flex") {
|
|
closeModal();
|
|
}
|
|
});
|
|
});
|
|
`}</script> |