<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>부동산 일간 뉴스레터</title> <!-- 외부 라이브러리 CDN --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=SUITE:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'SUITE', sans-serif; background-color: #f8f9fa; color: #262626; line-height: 1.6; } .container { max-width: 1400px; margin: 0 auto; padding: 20px; } /* 헤더 */ .header { background: linear-gradient(135deg, #ff671d, #ff8a4d); color: white; padding: 30px; border-radius: 15px; margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 8px 25px rgba(255, 103, 29, 0.3); } .header h1 { font-size: 2.5rem; font-weight: 700; margin: 0; } .header .date { font-size: 1.2rem; font-weight: 500; opacity: 0.9; } /* 메인 레이아웃 */ .main-content { display: grid; grid-template-columns: 60% 40%; gap: 30px; } /* 카드 공통 스타일 */ .card { background: white; border-radius: 15px; padding: 30px; margin-bottom: 30px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } .card-title { font-size: 1.8rem; font-weight: 600; color: #191051; margin-bottom: 25px; border-bottom: 3px solid #ff671d; padding-bottom: 10px; } /* 하이라이트 박스 */ .highlight-box { background-color: #ece4d0; border-left: 5px solid #961e1e; padding: 20px; margin: 20px 0; border-radius: 8px; font-weight: 500; } /* 핵심 수치 요약 */ .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 25px 0; } .stat-box { text-align: center; padding: 20px; background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius: 12px; border: 2px solid #dee2e6; transition: all 0.3s ease; } .stat-box:hover { border-color: #ff671d; transform: translateY(-3px); } .stat-number { font-size: 2.2rem; font-weight: 700; color: #961e1e; display: block; } .stat-label { font-size: 0.9rem; color: #666; margin-top: 8px; } /* 차트 컨테이너 */ .chart-container { position: relative; height: 300px; margin: 25px 0; } /* 포인트 리스트 */ .points-list { list-style: none; margin: 20px 0; } .points-list li { display: flex; align-items: center; margin: 15px 0; padding: 15px; background: #f8f9fa; border-radius: 8px; transition: background-color 0.3s ease; } .points-list li:hover { background: #e9ecef; } .points-list i { color: #ff671d; margin-right: 15px; font-size: 1.2rem; width: 20px; } /* 탭 인터페이스 */ .tabs { margin: 25px 0; } .tab-buttons { display: flex; border-bottom: 2px solid #dee2e6; margin-bottom: 20px; } .tab-button { background: #ece4d0; border: none; padding: 12px 24px; cursor: pointer; border-radius: 8px 8px 0 0; margin-right: 5px; font-family: 'SUITE', sans-serif; font-weight: 500; transition: all 0.3s ease; } .tab-button.active { background: #a38862; color: white; } .tab-content { display: none; padding: 20px 0; } .tab-content.active { display: block; } /* 팩터 박스 */ .factor-box { background: linear-gradient(135deg, #fff5f0, #ffe8d6); border: 2px solid #ff671d; border-radius: 12px; padding: 20px; margin: 15px 0; display: flex; align-items: center; } .factor-box i { color: #ff671d; font-size: 1.5rem; margin-right: 15px; } /* 뉴스 리스트 */ .news-list { max-height: 600px; overflow-y: auto; } .news-item { border-bottom: 1px solid #dee2e6; padding: 20px 0; cursor: pointer; transition: background-color 0.3s ease; } .news-item:hover { background-color: #f8f9fa; border-radius: 8px; padding: 20px 15px; } .news-title { font-weight: 600; color: #191051; margin-bottom: 8px; font-size: 1.1rem; } .news-source { color: #ff671d; font-size: 0.9rem; font-weight: 500; margin-bottom: 8px; } .news-summary { color: #666; font-size: 0.95rem; line-height: 1.5; } /* 모달 */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .modal-content { background-color: white; margin: 5% auto; padding: 30px; border-radius: 15px; width: 80%; max-width: 800px; max-height: 80vh; overflow-y: auto; position: relative; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; position: absolute; right: 20px; top: 15px; } .close:hover { color: #ff671d; } /* 푸터 */ .footer { background-color: #2d2d2d; color: white; text-align: center; padding: 30px; border-radius: 15px; margin-top: 40px; } /* 반응형 디자인 */ @media (max-width: 768px) { .main-content { grid-template-columns: 1fr; } .header { flex-direction: column; text-align: center; gap: 15px; } .header h1 { font-size: 2rem; } .stats-grid { grid-template-columns: 1fr; } .tab-buttons { flex-wrap: wrap; } .modal-content { width: 95%; margin: 10% auto; padding: 20px; } } /* 스크롤바 스타일링 */ .news-list::-webkit-scrollbar { width: 6px; } .news-list::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } .news-list::-webkit-scrollbar-thumb { background: #ff671d; border-radius: 3px; } .news-list::-webkit-scrollbar-thumb:hover { background: #e55a19; } </style> </head> <body> <div class="container"> <!-- 헤더 --> <header class="header"> <h1><i class="fas fa-home"></i> 부동산 일간 뉴스레터</h1> <div class="date">2025년 5월 26일</div> </header> <!-- 메인 콘텐츠 --> <div class="main-content"> <!-- 좌측 컬럼 --> <div class="left-column"> <!-- 첫 번째 카드: 시장 전망 --> <div class="card"> <h2 class="card-title">2025년 부동산 시장 전망</h2> <div class="highlight-box"> <strong>핵심 포인트:</strong> 서울 주요 재건축 단지를 중심으로 가격 강세가 지속되고 있으며, 정부는 추가 규제를 검토 중입니다. 목동, 여의도 등 개발 호재 지역에 시장 관심이 집중되고 있습니다. </div> <div class="stats-grid"> <div class="stat-box"> <span class="stat-number">184.7%</span> <div class="stat-label">목동 거래량 증가율</div> </div> <div class="stat-box"> <span class="stat-number">26억원</span> <div class="stat-label">목동 2단지 신고가</div> </div> <div class="stat-box"> <span class="stat-number">6.7억원</span> <div class="stat-label">여의도 재건축 분담금</div> </div> </div> <div class="chart-container"> <canvas id="priceChart"></canvas> </div> </div> <!-- 두 번째 카드: 시장 영향 변수 --> <div class="card"> <h2 class="card-title">시장 영향 주요 변수</h2> <ul class="points-list"> <li> <i class="fas fa-exclamation-triangle"></i> <span>정부의 토지거래허가구역 확대 검토로 규제 강화 우려</span> </li> <li> <i class="fas fa-building"></i> <span>PF 대출 시장 경색으로 신규 주택 공급 차질 가능성</span> </li> <li> <i class="fas fa-globe-asia"></i> <span>중국인 투자자의 고급주택 매입 증가 추세</span> </li> <li> <i class="fas fa-hammer"></i> <span>1기 신도시 재건축 이주대책 마련 난항</span> </li> </ul> <div class="chart-container"> <canvas id="factorsChart"></canvas> </div> </div> <!-- 세 번째 카드: 부동산 트렌드 --> <div class="card"> <h2 class="card-title">새로운 부동산 트렌드</h2> <div class="tabs"> <div class="tab-buttons"> <button class="tab-button active" onclick="showTab('reconstruction')">재건축 시장</button> <button class="tab-button" onclick="showTab('foreign')">외국인 투자</button> <button class="tab-button" onclick="showTab('policy')">정책 변화</button> </div> <div id="reconstruction" class="tab-content active"> <p>목동, 여의도 등 주요 재건축 단지에서 사업 추진 기대감이 높아지면서 거래량과 가격이 급증하고 있습니다.</p> <div class="factor-box"> <i class="fas fa-chart-line"></i> <div> <strong>목동 신시가지:</strong> 올해 거래량 390건으로 전년 대비 184.7% 증가 </div> </div> </div> <div id="foreign" class="tab-content"> <p>중국인 투자자들의 국내 부동산 매입이 다시 증가하며, 특히 서울 고급주택 시장에 집중되고 있습니다.</p> <div class="factor-box"> <i class="fas fa-coins"></i> <div> <strong>투자 규모:</strong> 4월 월간 1000건 돌파, 100억원 현금 매입 사례 등장 </div> </div> </div> <div id="policy" class="tab-content"> <p>정부는 서울 집값 상승에 대응하여 조정대상지역, 투기과열지구, 토지거래허가구역 추가 지정을 검토 중입니다.</p> <div class="factor-box"> <i class="fas fa-gavel"></i> <div> <strong>규제 강화:</strong> 부동산 시장 안정화를 위한 추가 조치 예고 </div> </div> </div> </div> </div> </div> <!-- 우측 컬럼 --> <div class="right-column"> <!-- 첫 번째 카드: 주요 뉴스 --> <div class="card"> <h2 class="card-title">오늘의 주요 뉴스</h2> <div class="news-list" id="newsList"> <!-- 뉴스 항목들이 JavaScript로 동적 생성됩니다 --> </div> </div> <!-- 두 번째 카드: PF 대출 현황 --> <div class="card"> <h2 class="card-title">PF 대출 시장 현황</h2> <p>프로젝트 파이낸싱(PF) 시장의 경색이 지속되면서 신축매입약정 사업 등 정부 주택 공급 정책에 차질이 우려되고 있습니다.</p> <div class="chart-container"> <canvas id="pfChart"></canvas> </div> <div class="factor-box"> <i class="fas fa-exclamation-circle"></i> <div> <strong>공급 차질:</strong> 신축매입약정 5만 가구 목표 달성 어려움 </div> </div> </div> <!-- 세 번째 카드: 지역별 전망 --> <div class="card"> <h2 class="card-title">지역별 주택가격 전망</h2> <div class="chart-container"> <canvas id="regionChart"></canvas> </div> <div class="factor-box"> <i class="fas fa-map-marker-alt"></i> <div> <strong>핫스팟:</strong> 목동, 여의도, 고덕동 등 개발 호재 지역 주목 </div> </div> </div> </div> </div> <!-- 푸터 --> <footer class="footer"> <p><strong>성성 프리미엄 부동산</strong> | 전화: 010-8282-8684</p> <p>신뢰할 수 있는 부동산 정보와 전문 컨설팅을 제공합니다.</p> </footer> </div> <!-- 뉴스 모달 --> <div id="newsModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <h2 id="modalTitle"></h2> <p id="modalSource"></p> <div id="modalContent"></div> <a id="modalLink" href="#" target="_blank" style="color: #ff671d; text-decoration: none; font-weight: 500;"> <i class="fas fa-external-link-alt"></i> 원문 보기 </a> </div> </div> <script> // 뉴스 데이터 const newsData = [ { title: "재건축 빨라진 목동, 거래 됐다하면 신고가", source: "중앙일보", summary: "서울 양천구 목동 신시가지 아파트의 재건축 사업이 속도를 내면서 시장의 관심이 집중되고 있습니다. 최근 2단지 95㎡형이 26억원에 실거래 신고되었으며, 올해 목동 신시가지 전체 거래량은 390건으로 작년 같은 기간보다 184.7% 급증했습니다.", link: "https://www.joongang.co.kr/realestate", content: "서울 양천구 목동 신시가지 아파트는 재건축 사업이 가시화되면서 시장의 뜨거운 감자로 부상하고 있습니다. 목동은 대표적인 노후 계획도시 중 하나로, 14개 단지, 약 2만 6600가구 규모의 대단지가 재건축을 추진 중입니다. 10여 년 전부터 재건축이 논의되었으나 안전진단 규제와 사업 방식에 대한 조합원 간 갈등으로 지지부진했던 과거와 달리, 최근에는 사업 속도에 대한 기대감이 커지고 있습니다." }, { title: "토허구역 추가 고민하는 정부… 서울 집값 상승 어느정도길래", source: "머니투데이", summary: "최근 서울 아파트 가격의 변동성이 커지자 정부가 추가적인 시장 안정 조치를 고려하고 있습니다. 필요시 조정대상지역, 투기과열지구, 토지거래허가구역을 추가로 지정할 수 있다는 방침입니다.", link: "https://v.daum.net/v/20250526040401632", content: "정부는 지난 5월 23일 기획재정부 1차관과 국토교통부 1차관 공동 주재로 열린 '제16차 부동산 시장 및 공급상황 점검 태스크포스(TF)' 회의에서 부동산 시장 동향을 면밀히 모니터링하면서 필요하다고 판단될 경우 조정대상지역, 투기과열지구, 토지거래허가구역(토허제) 등을 추가로 지정하는 방안을 강구하겠다고 밝혔습니다." }, { title: "PF대출 안 나와 신축매입 5만가구 무산 위기", source: "파이낸셜뉴스", summary: "정부가 추진 중인 신축매입약정 사업이 프로젝트 파이낸싱(PF) 대출 문제로 난항을 겪고 있습니다. 총사업비 불확실성으로 인해 HUG 등의 보증 발급이 지연되면서, 약 5만 가구의 주택 공급 목표 달성에 차질이 우려됩니다.", link: "https://www.fnnews.com/news/202505251827081515", content: "건설비 연동형 사업의 경우, 사업 초기 단계에서 총사업비가 확정되지 않는 구조적 특성으로 인해 주택도시보증공사(HUG) 등 보증기관의 PF 대출 보증서 발급이 지연되거나 거절되는 사례가 발생하고 있습니다. 이는 건설사들의 원활한 자금 조달을 어렵게 만들어 신규 주택 착공을 위축시키고 있습니다." }, { title: "빨간불 켜진 분당 재건축… 이주지원주택 마련 난항", source: "파이낸셜뉴스", summary: "1기 신도시의 대표 주자인 분당의 재건축 사업이 이주지원주택 확보 문제로 어려움을 겪고 있습니다. 정부가 계획했던 야탑동 공공주택 공급이 주민 반발로 무산된 데 이어, 성남시가 제시한 대체 부지들도 부적합 판정을 받았습니다.", link: "https://www.fnnews.com/news/202505251827066512", content: "분당 지역 재건축 사업의 원활한 추진을 위해 정부가 계획했던 성남시 분당구 야탑동 공공주택 공급 계획이 인근 주민들의 강력한 반발로 인해 사실상 백지화되었습니다. 성남시가 대안으로 제시했던 5곳의 이주단지 후보지 역시 국토교통부 검토 결과 2029년까지 입주가 어렵다는 등의 이유로 부적합 판정을 받았습니다." }, { title: "카타르 뚫은 삼성물산… QFZA와 인프라 사업", source: "한국경제", summary: "삼성물산이 카타르 경제자유구역청(QFZA)과 손잡고 현지에서 태양광 발전, 데이터센터 구축 등 미래 인프라 사업을 본격적으로 추진합니다. 이번 협력은 삼성물산의 해외 사업 다각화 및 신성장 동력 확보 전략의 일환입니다.", link: "https://www.hankyung.com/all-news-realestate", content: "삼성물산 건설부문이 카타르 경제자유구역청(QFZA)과 협력하여 현지에서 태양광 발전 시설 및 데이터센터 구축 등 미래 핵심 인프라 사업을 본격적으로 추진하기로 했습니다. 국내 건설 경기가 다소 불확실한 상황에서, 이와 같은 해외 대규모 사업 수주는 건설사들에게 새로운 성장 동력을 확보하고 사업 포트폴리오를 다각화하는 데 중요한 의미를 지닙니다." } ]; // 뉴스 리스트 생성 function createNewsList() { const newsList = document.getElementById('newsList'); newsData.forEach((news, index) => { const newsItem = document.createElement('div'); newsItem.className = 'news-item'; newsItem.onclick = () => openModal(index); newsItem.innerHTML = ` <div class="news-title">${news.title}</div> <div class="news-source">${news.source}</div> <div class="news-summary">${news.summary}</div> `; newsList.appendChild(newsItem); }); } // 모달 열기 function openModal(index) { const modal = document.getElementById('newsModal'); const news = newsData[index]; document.getElementById('modalTitle').textContent = news.title; document.getElementById('modalSource').textContent = `출처: ${news.source}`; document.getElementById('modalContent').textContent = news.content; document.getElementById('modalLink').href = news.link; modal.style.display = 'block'; } // 모달 닫기 document.querySelector('.close').onclick = function() { document.getElementById('newsModal').style.display = 'none'; } window.onclick = function(event) { const modal = document.getElementById('newsModal'); if (event.target == modal) { modal.style.display = 'none'; } } // 탭 전환 function showTab(tabName) { // 모든 탭 버튼과 콘텐츠 비활성화 document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active')); document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); // 선택된 탭 활성화 event.target.classList.add('active'); document.getElementById(tabName).classList.add('active'); } // 차트 생성 function createCharts() { console.log('Creating charts...'); // Chart.js가 로드되었는지 확인 if (typeof Chart === 'undefined') { console.error('Chart.js is not loaded'); return; } try { // 가격 트렌드 차트 const priceCanvas = document.getElementById('priceChart'); if (priceCanvas) { console.log('Creating price chart...'); const priceCtx = priceCanvas.getContext('2d'); new Chart(priceCtx, { type: 'line', data: { labels: ['1월', '2월', '3월', '4월', '5월'], datasets: [{ label: '서울 아파트 가격 지수', data: [100, 102, 105, 108, 112], borderColor: '#ff671d', backgroundColor: 'rgba(255, 103, 29, 0.1)', tension: 0.4, fill: true }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: false, min: 95 } } } }); } // 시장 영향 요인 차트 const factorsCanvas = document.getElementById('factorsChart'); if (factorsCanvas) { console.log('Creating factors chart...'); const factorsCtx = factorsCanvas.getContext('2d'); new Chart(factorsCtx, { type: 'doughnut', data: { labels: ['재건축 기대감', '정부 규제', 'PF 대출 문제', '외국인 투자'], datasets: [{ data: [35, 25, 20, 20], backgroundColor: ['#ff671d', '#961e1e', '#191051', '#a38862'] }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } } }); } // PF 대출 차트 const pfCanvas = document.getElementById('pfChart'); if (pfCanvas) { console.log('Creating PF chart...'); const pfCtx = pfCanvas.getContext('2d'); new Chart(pfCtx, { type: 'bar', data: { labels: ['2024년 1분기', '2024년 2분기', '2024년 3분기', '2024년 4분기', '2025년 1분기'], datasets: [{ label: 'PF 대출 승인율 (%)', data: [85, 78, 65, 52, 45], backgroundColor: '#ff671d' }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, max: 100 } } } }); } // 지역별 전망 차트 const regionCanvas = document.getElementById('regionChart'); if (regionCanvas) { console.log('Creating region chart...'); const regionCtx = regionCanvas.getContext('2d'); new Chart(regionCtx, { type: 'bar', data: { labels: ['목동', '여의도', '고덕동', '분당', '강남'], datasets: [{ label: '가격 상승률 (%)', data: [15.2, 12.8, 10.5, 8.3, 6.7], backgroundColor: ['#ff671d', '#ff8a4d', '#ffb380', '#191051', '#a38862'] }] }, options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { beginAtZero: true } } } }); } } catch (error) { console.error('Error creating charts:', error); } } // 페이지 로드 시 초기화 document.addEventListener('DOMContentLoaded', function() { console.log('DOM loaded'); createNewsList(); // Chart.js 로드 대기 if (typeof Chart !== 'undefined') { createCharts(); } else { // Chart.js가 아직 로드되지 않았다면 잠시 대기 setTimeout(() => { createCharts(); }, 500); } }); // 윈도우 로드 이벤트에도 차트 생성 시도 window.addEventListener('load', function() { console.log('Window loaded'); if (typeof Chart !== 'undefined') { // 기존 차트가 있다면 제거하고 다시 생성 const canvases = ['priceChart', 'factorsChart', 'pfChart', 'regionChart']; canvases.forEach(id => { const canvas = document.getElementById(id); if (canvas && canvas.chart) { canvas.chart.destroy(); } }); createCharts(); } }); </script> </body> </html>
Made with Bullet