[HTML/CSS] 홈페이지에 rss로 최신 뉴스기사 불러오기 (닷홈빌더 활용)

 

누군가에게 필요할까 싶어서 써보는

닷홈빌더로 만든 홈페이지에 rss로 최신 뉴스기사 불러오기

 

사이트 이름은 가렸음

 

빠르게 홈페이지를 만들고 싶어서 뭘 써볼까 고민하다가

닷홈에서 손쉽게 홈페이지를 만드는 기능이 있는 걸 발견했다.

그래서 닷홈빌더를 활용해서 친구들과 사용할 홈페이지를 만들었다. 놀랍게도 하루만에 만들었다.

그런데 홈페이지가 너무 허전해서 최신정보를 볼 수 있는 메뉴를 만들었다.

 

완성 화면

 

 

1. 프레임을 나누고 요소 코드를 추가해준다.

 

그럼 아래처럼 화면이 된다.

2. 코드를 입력하고 적용하기

<style>
    .news-widget-box {
        font-family: 'Malgun Gothic', sans-serif;
        border: 1px solid #ddd;
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
        max-width: 100%;
        margin-bottom: 20px; /* 박스 간 간격 */
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .news-widget-header {
        background: #0b0e23; /* 배경색 */
        color: #fff;
        padding: 15px;
        font-weight: bold;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .news-widget-list { padding: 0; margin: 0; list-style: none; }
    .news-widget-item { padding: 15px; border-bottom: 1px solid #eee; transition: background 0.2s; }
    .news-widget-item:hover { background-color: #f9fbfc; }
    .news-widget-item a { text-decoration: none; color: #333; font-size: 15px; font-weight: 500; display: block; margin-bottom: 5px; }
    .news-widget-item a:hover { color: #1a73e8; text-decoration: underline; }
    .news-widget-meta { font-size: 12px; color: #888; }
    .news-loading { padding: 20px; text-align: center; color: #666; }
</style>

<script>
    // 이 함수가 뉴스를 가져와서 박스에 넣어줍니다.
    function loadNewsWidget(boxId, searchKeyword, titleText) {
        // 1. 박스 찾기
        const box = document.getElementById(boxId);
        if (!box) return;

        // 2. 제목 설정
        const titleArea = box.querySelector('.widget-title-text');
        if (titleArea) titleArea.innerText = titleText || searchKeyword + " 뉴스";

        // 3. RSS 주소 생성
        const baseUrl = "https://news.google.com/rss/search";
        const params = `?q=${encodeURIComponent(searchKeyword)}&hl=ko&gl=KR&ceid=KR:ko`;
        const apiUrl = `https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(baseUrl + params)}`;

        // 4. 데이터 가져오기
        fetch(apiUrl)
        .then(res => res.json())
        .then(data => {
            const listArea = box.querySelector('.news-widget-list');
            
            if (data.status === 'ok' && data.items.length > 0) {
                let html = '';
                data.items.slice(0, 5).forEach(item => {
                    // 날짜 포맷
                    let dateStr = item.pubDate;
                    try {
                        const d = new Date(item.pubDate);
                        dateStr = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')} ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
                    } catch(e) {}

                    html += `
                        <div class="news-widget-item">
                            <a href="${item.link}" target="_blank">${item.title}</a>
                            <div class="news-widget-meta">${dateStr} | ${item.author || '뉴스'}</div>
                        </div>`;
                });
                listArea.innerHTML = html;
            } else {
                listArea.innerHTML = '<div class="news-loading">검색 결과가 없습니다.</div>';
            }
        })
        .catch(err => {
            const listArea = box.querySelector('.news-widget-list');
            if(listArea) listArea.innerHTML = '<div class="news-loading">불러오기 실패</div>';
        });
    }
</script>

<div id="news-1" class="news-widget-box">
    <div class="news-widget-header">
        <span class="widget-title-text">뉴스 로딩 중...</span>
        <span style="font-size:11px; opacity:0.8;">Live</span>
    </div>
    <div class="news-widget-list">
        <div class="news-loading">뉴스를 검색하고 있습니다...</div>
    </div>
</div>

<script>
    // loadNewsWidget('아이디', '검색어', '박스제목');
    loadNewsWidget('news-1', '핸드볼', '핸드볼 최신 뉴스');
</script>

첫번째 code/ 박스  

<div id="news-2" class="news-widget-box">
    <div class="news-widget-header">
        <span class="widget-title-text">뉴스 로딩 중...</span>
        <span style="font-size:11px; opacity:0.8;">Live</span>
    </div>
    <div class="news-widget-list">
        <div class="news-loading">뉴스를 검색하고 있습니다...</div>
    </div>
</div>

<script>
    // 아이디를 news-2 로 맞춰줍니다.
    loadNewsWidget('news-2', '여자축구', '여자축구 최신 뉴스');
</script>

두번째 code/ 박스

style 과 script 는 이미 첫번째 박스에서 써서 훨씬 간단하게 작성할 수 있다. 

 

 

코드 전문 맨 아래에 있는

loadNewsWidget('아이디', '검색어', '박스제목');

아이디만 각 박스 별 div id와 맞추고,  검색어와 박스제목만 바꿔주면 끝~

 

 

구글서치콘솔에 등록했는데 한번 실패하고 다시 개선해서 재등록 중이다.

등록이 잘 되길...

 

끝