[ 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
✔ 예시
한국경제 뉴스
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%에서 원래 위치로 되돌아오는 애니메이션 효과를 주어
좌우로 무한 스크롤되는 효과를 만듭니다.
'IT.생활정보' 카테고리의 다른 글
모니터 불량 갑자기 동작 안될 경우 점검사항 및 모니터 자가수리 방법 (7) | 2024.09.29 |
---|---|
[ 광고 노출 ]과 블로그 수익의 상관 관계와 고민할 점 (6) | 2024.09.28 |
도시 근교 가을 여행지 남산공원 도시숲 소개 (5) | 2024.09.25 |
이용 - 잊혀진 계절 (9) | 2024.09.24 |
간단한 [ 복리이자계산기 ] 복리의 이중성 복리 이론과 역복리 (6) | 2024.09.23 |