<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>부동산 뉴스 대시보드</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <style> /* SUITE 폰트 적용을 위한 @font-face 규칙입니다. SUITE.ttf 파일을 HTML 파일과 동일한 디렉토리에 위치시키거나, src url() 경로를 웹폰트 경로로 수정해주세요. */ /* @font-face { font-family: 'SUITE'; src: url('SUITE.ttf') format('truetype'); font-weight: normal; font-style: normal; } */ body { /* font-family: 'SUITE', 'Helvetica Neue', Helvetica, Arial, sans-serif; */ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* SUITE 폰트 없을 시 대체 폰트 */ margin: 0; background-color: #fcfbf7; /* 베이지계열 배경 */ color: #2d2d2d; /* 블랙 텍스트 */ line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } /* 헤더 스타일 */ header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #ece4d0; /* 베이지계열 구분선 */ margin-bottom: 20px; } .main-title { font-size: 2em; color: #781b1b; /* 주요 색상: 와인 */ margin: 0; } .header-info { text-align: right; font-size: 0.9em; color: #a38862; /* 브라운계열 */ } /* 슬라이드쇼 컨테이너 */ .slideshow-container { position: relative; background-color: #ffffff; /* 카드형 컴포넌트 배경 */ border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 미세한 그림자 */ overflow: hidden; /* 내용이 넘치지 않도록 */ } .slide { display: none; /* 기본적으로 슬라이드 숨김 */ padding: 25px 30px; animation: fadeEffect 1s; min-height: 500px; /* 슬라이드 최소 높이 확보 */ box-sizing: border-box; } @keyframes fadeEffect { from {opacity: .4} to {opacity: 1} } .slide.active { display: block; } .slide-content { display: flex; gap: 30px; /* 좌우 컬럼 간격 */ } .left-column { width: 60%; display: flex; flex-direction: column; } .right-column { width: 40%; display: flex; flex-direction: column; gap: 20px; } .slide-title { font-size: 1.8em; color: #871316; /* 주요 색상: 와인 */ margin-top: 0; margin-bottom: 15px; } .summary-text { font-size: 1em; margin-bottom: 20px; color: #2d2d2d; } .key-data-highlight { background-color: #ece4d0; /* 베이지계열 */ padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; } .key-data-highlight .data-value { font-size: 1.8em; font-weight: bold; color: #781b1b; /* 와인색 */ display: block; } .key-data-highlight .data-value i { margin-right: 10px; } .key-data-highlight .data-label { font-size: 0.9em; color: #a38862; /* 브라운 */ } .key-points { margin-bottom: 20px; padding-left: 20px; } .key-points h3 { font-size: 1.2em; color: #ae926d; /* 브라운계열 */ margin-bottom: 10px; } .key-points ul { list-style: none; padding-left: 0; } .key-points li { margin-bottom: 8px; font-size: 0.95em; position: relative; padding-left: 20px; } .key-points li::before { content: "\f00c"; /* Font Awesome check icon */ font-family: "Font Awesome 6 Free"; font-weight: 900; color: #961e1e; /* 와인색 */ position: absolute; left: 0; top: 2px; } .emphasis-sentence { font-size: 1.1em; font-weight: bold; color: #007bff; /* 요청된 블루 색상 */ padding: 10px; background-color: #e7f3ff; /* 연한 파란색 배경 */ border-left: 4px solid #007bff; margin-top: auto; /* 왼쪽 컬럼 하단에 위치하도록 */ } .factor-box { background-color: #f8f9fa; border: 1px solid #ddcb97; /* 브라운계열 테두리 */ border-radius: 8px; padding: 20px; font-size: 0.9em; } .factor-box-title { font-size: 1.1em; font-weight: bold; color: #781b1b; /* 와인색 */ margin-bottom: 10px; } .factor-box-title i { margin-right: 8px; } .chart-container { padding: 15px; background-color: #fcfbf7; /* 베이지 배경 */ border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); height: auto; /* 높이 자동 조절 */ min-height: 200px; /* 최소 높이 설정 */ } .chart-container canvas { max-width: 100%; height: auto !important; /* 차트 높이 자동, !important로 우선순위 */ } /* 슬라이드 네비게이션 버튼 */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: #781b1b; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; background-color: rgba(221, 203, 151, 0.7); /* 브라운계열 반투명 */ } .next { right: 0; border-radius: 3px 0 0 3px; } .prev { left: 0; } .prev:hover, .next:hover { background-color: #961e1e; /* 와인색 */ color: white; } /* 슬라이드 인디케이터 (점) */ .dots-container { text-align: center; padding: 15px 0; background-color: #ece4d0; /* 베이지계열 배경 */ } .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 5px; background-color: #baa17f; /* 브라운계열 */ border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .dot.active, .dot:hover { background-color: #781b1b; /* 와인색 */ } /* 푸터 스타일 */ footer { text-align: center; padding: 25px 0; margin-top: 30px; border-top: 1px solid #ece4d0; /* 베이지계열 구분선 */ font-size: 0.9em; color: #a38862; /* 브라운계열 */ } /* 모바일 반응형 스타일 */ @media (max-width: 768px) { .main-title { font-size: 1.5em; } .header-info { font-size: 0.8em; } .slide-content { flex-direction: column; /* 세로 정렬 */ } .left-column, .right-column { width: 100%; } .slide-title { font-size: 1.5em; } .emphasis-sentence { margin-top: 20px; /* 모바일에서 상단 여백 추가 */ } .prev, .next { font-size: 16px; padding: 12px; } .dot { height: 12px; width: 12px; } } </style> </head> <body> <div class="container"> <header> <h1 class="main-title">부동산 시장 동향 대시보드</h1> <div class="header-info"> <span id="current-date">2025년 5월 8일</span><br> 출처: 종합 부동산 뉴스 분석 </div> </header> <main> <div class="slideshow-container"> <div class="slide active"> <div class="slide-content"> <div class="left-column"> <h2 class="slide-title">3단계 스트레스 DSR, 이달 중 발표 예정</h2> <p class="summary-text">김병환 금융위원장은 7월부터 적용될 3단계 스트레스 DSR 시행 방안을 이달 중 발표할 것이라고 밝혔습니다. 이 방안은 수도권과 지방 간의 차이를 두어 규제 강화 속도를 조절하는 것을 목표로 합니다.</p> <div class="key-points"> <h3><i class="fas fa-check-circle"></i> 핵심 포인트</h3> <ul> <li>7월부터 3단계 스트레스 DSR 시행 예정</li> <li>수도권·지방 간 규제 속도 차등화</li> <li>가계부채 관리 강화 목적</li> </ul> </div> <p class="emphasis-sentence">"수도권과 지방 간 차등을 두어, 규제 강화 속도의 차이를 두겠다는 취지입니다."</p> </div> <div class="right-column"> <div class="key-data-highlight"> <span class="data-value"><i class="fas fa-layer-group"></i> 스트레스 DSR 3단계</span> <span class="data-label">7월 시행 예정</span> </div> <div class="key-data-highlight"> <span class="data-value"><i class="fas fa-balance-scale-right"></i> 수도권 vs 지방 차등</span> <span class="data-label">규제 속도 조절</span> </div> <div class="factor-box"> <h4 class="factor-box-title"><i class="fas fa-info-circle"></i> 스트레스 DSR이란?</h4> <p>변동금리 대출 등에 대해 미래 금리 인상 가능성을 고려하여 가산금리를 부과, 총부채원리금상환비율(DSR)을 산정하는 제도입니다. 대출 한도를 줄여 가계부채 증가를 억제하는 효과가 있습니다.</p> </div> </div> </div> </div> <div class="slide"> <div class="slide-content"> <div class="left-column"> <h2 class="slide-title">시장 불확실성 속 '똘똘한 한 채' 집중, 가격 양극화 역대 최대</h2> <p class="summary-text">경제 불확실성이 커지면서 안전자산으로 여겨지는 '똘똘한 한 채'에 대한 선호가 더욱 강해지고 있습니다. 이로 인해 서울 주요 단지에서는 신고가가 이어지는 반면, 전국 아파트 가격 5분위 배율은 11.5배로 역대 최고치를 기록하며 양극화가 심화되고 있습니다.</p> <div class="key-points"> <h3><i class="fas fa-check-circle"></i> 핵심 포인트</h3> <ul> <li>경제 불확실성 증가로 안전자산 선호</li> <li>'똘똘한 한 채' 중심 수요 집중, 주요 단지 신고가</li> <li>아파트 가격 양극화 심화 (5분위 배율 11.5배)</li> <li>고가 아파트 상승, 저가 아파트 하락</li> </ul> </div> <p class="emphasis-sentence">"불확실한 경제 상황 속에서 안전자산을 선호하는 경향이 강해지면서 지역 시세를 이끄는 단지들에 수요가 몰리고 있습니다."</p> </div> <div class="right-column"> <div class="key-data-highlight"> <span class="data-value"><i class="fas fa-exchange-alt"></i> 11.5배</span> <span class="data-label">전국 아파트 5분위 배율 (역대 최대)</span> </div> <div class="chart-container"> <canvas id="polarizationChart"></canvas> </div> </div> </div> </div> <div class="slide"> <div class="slide-content"> <div class="left-column"> <h2 class="slide-title">5월 분양 물량 올해 최대, 토지거래허가구역 내 '신고가' 여전</h2> <p class="summary-text">2025년 6월 대선을 앞두고 건설사들이 분양을 서두르면서 5월 전국 아파트 분양 예정 물량이 약 2만 3천 가구로 올해 최대치를 기록했습니다. 한편, 토지거래허가구역으로 지정된 강남3구와 용산구에서는 거래량 급감에도 불구하고 신고가 거래가 지속되고 있어 '똘똘한 한 채'에 대한 수요가 견고함을 보여줍니다.</p> <div class="key-points"> <h3><i class="fas fa-check-circle"></i> 핵심 포인트</h3> <ul> <li>5월 전국 분양 예정 물량 2.3만 가구 (올해 최대)</li> <li>대선 전 분양 일정 본격화</li> <li>토지거래허가구역: 거래량 급감 (-96%)</li> <li>규제에도 불구, '똘똘한 한 채' 선호로 신고가 지속</li> </ul> </div> <p class="emphasis-sentence">"허가구역 지정으로 거래량은 감소했지만 '똘똘한 한 채' 수요는 여전해 실거래가 상승세가 이어지고 있습니다."</p> </div> <div class="right-column"> <div class="key-data-highlight"> <span class="data-value"><i class="fas fa-building"></i> 23,197 가구</span> <span class="data-label">5월 전국 분양 예정 물량 (올해 최대)</span> </div> <div class="key-data-highlight"> <span class="data-value"><i class="fas fa-chart-line-down"></i> 거래량 96%<span style="font-size:0.6em; vertical-align:middle;">▼</span></span> <span class="data-label">토지거래허가구역 (단, 10건 중 4건 신고가)</span> </div> <div class="factor-box"> <h4 class="factor-box-title"><i class="fas fa-map-marked-alt"></i> 토지거래허가구역이란?</h4> <p>토지의 투기적인 거래가 성행하거나 지가가 급격히 상승하는 지역 및 우려가 있는 지역에 대해 시·도지사가 지정하는 구역입니다. 이 구역 내 토지 거래 시 관할 시장·군수·구청장의 허가를 받아야 합니다.</p> </div> </div> </div> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div> <div class="dots-container"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> </main> <footer> <p>정보 제공: 성성 프리미엄 부동산 (010-8282-8684)</p> <p>© <span id="current-year"></span> 부동산 뉴스 대시보드. All Rights Reserved.</p> </footer> </div> <script> // 날짜 및 연도 자동 업데이트 // const dateElement = document.getElementById('current-date'); // const today = new Date(); // dateElement.textContent = `${today.getFullYear()}년 ${today.getMonth() + 1}월 ${today.getDate()}일`; // -> 요청에 따라 2025년 5월 8일로 고정. 필요시 위 주석 해제하여 동적 날짜 사용. document.getElementById('current-year').textContent = new Date().getFullYear(); // 슬라이드쇼 로직 let slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { let i; let slides = document.getElementsByClassName("slide"); let dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].classList.remove("active"); } for (i = 0; i < dots.length; i++) { dots[i].classList.remove("active"); } slides[slideIndex-1].classList.add("active"); dots[slideIndex-1].classList.add("active"); // 두 번째 슬라이드가 활성화될 때 차트 그리기 if (slideIndex === 2) { renderPolarizationChart(); } } // 양극화 차트 렌더링 함수 (슬라이드 2) let polarizationChartInstance = null; // 차트 인스턴스를 저장할 변수 function renderPolarizationChart() { const ctx = document.getElementById('polarizationChart'); if (!ctx) return; // canvas 요소가 없으면 종료 // 기존 차트가 있으면 파괴 if (polarizationChartInstance) { polarizationChartInstance.destroy(); } // 5분위 배율 11.5배를 시각화하기 위해 // 하위 20% 가격을 1로 가정, 상위 20% 가격을 11.5로 표현 polarizationChartInstance = new Chart(ctx.getContext('2d'), { type: 'bar', data: { labels: ['하위 20% 평균가 대비', '상위 20% 평균가'], datasets: [{ label: '가격 수준 (하위 20% = 1 기준)', data: [1, 11.5], backgroundColor: [ '#ddcb97', // 브라운계열 '#961e1e' // 와인계열 ], borderColor: [ '#a38862', '#781b1b' ], borderWidth: 1 }] }, options: { responsive: true, maintainAspectRatio: false, // 컨테이너 크기에 맞게 조절 indexAxis: 'y', // 가로 막대 차트 scales: { x: { beginAtZero: true, title: { display: true, text: '상대적 가격 수준 (배)' } } }, plugins: { title: { display: true, text: '아파트 가격 5분위 배율 시각화 (11.5배)', font: { size: 16 }, color: '#2d2d2d' }, tooltip: { callbacks: { label: function(context) { let label = context.dataset.label || ''; if (label) { label += ': '; } if (context.parsed.x !== null) { label += context.parsed.x + ' 배'; } return label; } } } } } }); } // 초기 로드 시 첫 번째 슬라이드에 맞는 처리 (차트가 첫 슬라이드에 있다면 여기서 호출) // 현재는 showSlides 내부에서 처리 </script> </body> </html>
Made with Bullet