RSS코드 이용해 관심 정보를 쉽고 편하게 공유하는 동적 RSS 베너 코드

RSS 활용코드

RSS(Really Simple Syndication)는 웹사이트의 정보를 쉽게 확인할 수 있고 그 정보를 공유할 수 있는 좋은 방법입니다. RSS 코드를 이용해 정보를 쉽게 파악할 수 있을 뿐만 아니라 RSS 코드를 활용하면 다양한 정보를 자신의 사이트에 노출시켜 사이트 방문자에게 새로운 정보를 공유하게 해줄 수 있는 방법이기도 합니다.

자신이 관심이 있는 새로운 정보를 알기 위해서는 매번 정보 제공 사이트를 방문해서 정보를 확인해야 하지만 RSS 코드를 이용하면 쉽고 간편하게 해당 자료를 자신의 사이트에서 확인할 수 있을 뿐만 아니라 미처 사용자에게 제공하지 못하는 새로운 정보를 제공해줄 수 있는 역할까지 할 수 있어 콘텐츠의 다양성을 확보할 수 있습니다.

아래 RSS 코드를 이용하시면 쉽고 편하게 자신이 운영하는 사이트에서 관련 정보를 자동으로 수집해서 볼 수 있을 뿐만 아니라 사이트를 방문하는 같은 관심을 가지고 있는 사용자에게도 좀 더 편리하게 자신이 제공하지 못하는 정보까지 제공해 줄 수 있는 코드입니다.

RSS 스크립트

RSS주소를 const rssUrl에 설정해주시면 해당 RSS를 불러와서 사용할수 있습니다.

<script defer>
    async function fetchRSS() {
        const rssUrl = 'https://api.rss2json.com/v1/api.json?rss_url=https://rss.etnews.com/12.xml';
        try {
            const response = await fetch(rssUrl);
            const { items } = await response.json();

            const limitedItems = items.slice(0, 30); 
            const descriptions = limitedItems.map(item => item.title).join(', ');

            const scrollingText = document.querySelector('.scrolling-text');
            scrollingText.textContent = descriptions;
        } catch (error) {
            console.error('RSS 피드를 가져오는 데 오류가 발생했습니다:', error);
        }
    }
    document.addEventListener('DOMContentLoaded', fetchRSS);
</script>

RSS 주소

아래는 대표적인 RSS 사이트 주소입니다. 그외 RSS 주소는 인터넷을 검색하시면 쉽게 확인 할수 있습니다.

• 조선닷컴 뉴스 https://www.chosun.com/arc/outboundfeeds/rss/?outputType=xml
• 중앙일보 뉴스 http://www.joongang.tv/rss/allArticle.xml
• 매일경제 https://www.mk.co.kr/rss/40300001
• 한국경제 https://www.hankyung.com/feed/all-news
• 헤럴드경제 http://biz.heraldm.com/rss/010000000000.xml
• 연합뉴스 https://www.yna.co.kr/rss/news.xml

✔ 예시

한국경제 뉴스

HTML 코드

아래 코드는 간단하게 한줄로 흘러가는 베너형태의 RSS를 표시해 주는 코드입니다. 이외에도 다양한 코드를 사용해서 RSS의 정보를 제공할수 있습니다.

</script>   
      <style>
        @keyframes scroll {
            0% {
                transform: translateX(100%);
            }
            10% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }
    </style>
  <p style="font-size: 1.5em;">RSS제목</p>
<div class="scrolling-text-container" style="overflow: hidden;
                                            white-space: nowrap;
                                            width: 100%;
                                            box-sizing: border-box;
                                            border: 1px solid #ddd;
                                            background-color: #222;
                                            padding: 10px;
                                            margin-top: 20px;
                                            position: relative;
                                            height: 400px;">

    <div class="scrolling-text" style="display: inline-block;
                                      animation: scroll 60s linear infinite;
                                      color: #fff;
                                      padding: 10px;
                                      font-size: 1em;
                                      height: 80px;
                                      overflow: hidden;
                                      white-space: nowrap;"> 
        
    </div>
  </div>

아래는 코드에대한 설명입니다 참고하시면 됩니다.

이 코드는 HTML과 CSS를 사용하여 텍스트를 좌측으로 무한 스크롤하는 애니메이션을 구현한 예시입니다.

<style> 태그 안에 @keyframes를 사용하여 scroll이라는 이름의 애니메이션을 정의했습니다.
이 애니메이션은 0%에서 시작하여 오른쪽으로 100%만큼 이동하도록 transform 속성을 사용하며,
10% 지점에서는 원래 위치로 돌아오고(translateX(0)),
100% 지점에서는 왼쪽으로 100%만큼 이동하게 됩니다(translateX(-100%)).
</style>

<p> "RSS제목" 표시</p>

<div> 태그를 사용하여 스크롤 가능한 텍스트 컨테이너를 만들었습니다. 
이 컨테이너는 다음과 같은 스타일 속성들을 지정합니다
- overflow: hidden; (넘치는 부분을 숨김 처리)
- white-space: nowrap; (텍스트가 줄 바꿈되지 않고 한 줄에 표시되도록 설정)
- width: 100%; (부모 요소 너비에 맞춤)
- box-sizing: border-box; (패딩과 경계선을 포함한 요소의 전체 너비/높이 계산)
- border: 1px solid #ddd; (테두리 스타일)
- background-color: #222; (배경색)
- padding: 10px; (안쪽 여백)
- margin-top: 20px; (위쪽 마진)
- position: relative; (상대적 위치)
- height: 400px; (높이)

<div> 태그 내부에 스크롤링 텍스트를 표시하기 위한 또 다른 <div> 요소가 있습니다.
이 요소는 다음과 같은 스타일 속성들을 가지고 있습니다:
- display: inline-block; (인라인 블록 요소로 설정)
- animation: scroll 60s linear infinite; 
(scroll 애니메이션을 적용, 60초 동안 선형으로 무한 반복)
- color: #fff; (글자색을 흰색으로 설정)
- padding: 10px; (안쪽 여백)
- font-size: 1em; (글꼴 크기)
- height: 80px; (높이)
- overflow: hidden; (넘치는 부분 숨김 처리)
- white-space: nowrap; (텍스트가 줄 바꿈되지 않고 한 줄에 표시되도록 설정)
</div>
</div>
애니메이션은 60초 동안 10%에서 원래 위치로 되돌아오는 애니메이션 효과를 주어 
좌우로 무한 스크롤되는 효과를 만듭니다.

RSS코드를 이용해 다양한 정보공유