본문 바로가기
openipc.kr
IT.생활정보

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

목차

    반응형

    RSS 베너 코드

    [ RSS 베너 코드 ] 는 웹사이트의 정보를 쉽게 확인할 수 있고 그 정보를 공유할 수 있는 좋은 방법입니다. 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

    RSS 베너 코드
    RSS 베너 코드


    예시



    한국경제 뉴스

    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%에서 원래 위치로 되돌아오는 애니메이션 효과를 주어 
    좌우로 무한 스크롤되는 효과를 만듭니다.


    반응형