기본적인 뉴스티커(News ticker) 기능 구현

안녕하세요 :0

원래는 JavaScript도 기본부터 정리를 할까 했는데, 게으른 저 때문에 많이 지연되고 있어서

일단은 기본은 잠시 내려두고 학원에서 배운 내용과 포트폴리오에서 사용되는 기능들

위주로 정리를 해서 업로드를 하면서, 중간중간에 기본 내용들은 정리하는 식으로 할까 합니다.

포트폴리오에서 사용되는 js에 관한 소스들이나, 디자인 요소들의 유입이 많아서 최대한 빨리 포트폴리오에 도움이 되는 게시글로 자주 찾아뵙겠습니다

 

오늘은 뉴스티커 기능을 구현해볼까 합니다.

 

뉴스티커란?

네이버 웹페이지에서 많이 볼 수 있는 기능으로 최근에 없어진 실시간 검색어나, 뉴스 등 한 줄씩 보여주면서 위로 올라가는 기능인데, 예시로 네이버 뉴스를 보여드리고 시작하도록 하겠습니다.

네이버 뉴스티커

위의 영상에서 빨간색 상자 부분이 뉴스티커입니다.

위로 올라가는 것도 있고 왼쪽으로 가는 것도 있고 다 똑같은 방법으로 만들어지는 것입니다.

자 그러면 이제 시작해볼까요??

 

---

먼저 들어갈 내용을 html으로 작성부터 해야겠죠??

 

<div id="container">
	<ul id="rolling">
		<li>1. Time is gold.</li>
		<li>2. No sweat, no sweet.</li>
		<li>3. Asking costs noting.</li>
		<li>4. Step by step goes a long way</li>
		<li>5. You will never know untill you try.</li>
	</ul>
</div>

ul태그와 li태그를 이용하여 리스트를 작성해주면 끝!!

이쁘게 CSS 입혀봅시다

 

#container {
	height: 2em;
	overflow: hidden;
	border: 10px solid goldenrod;
	margin: 200px auto;
	width: 25em;
}

#rolling > li {
	height: 2em;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	line-height: 2em;
	padding-left: 1em;
	font-weight: bold;
}

▼ 소스코드 살펴보기

2 : #container 요소의 영역에 li  요소 하나만 표시되도록 #container 요소의 높이 설정

3 : #container 요소의 영역에 표시되는 li요소를 제외하고 다른 요소들이 보이지 않도록 설정 

10 : #container 요소의 영역에 li  요소 하나만 표시되도록 li 요소의 높이 설정

 

 

어렵지 않게 여기까지 왔을 거라 생각합니다.

CSS 이해 안 되는 부분은 댓글에 남겨주시면 친절히 알려드리겠습니다.

여기까지 해서 실행을 시켜보면 결과는??

뉴스티커 기본

저의 소스로는 이렇게 나오지 않을 겁니다.

저는 reset.css를 이용하여, 전체적으로 초기화를 해주고 css를 입혀 이와 같이 나온 겁니다.

해당 css파일은 검색해서도 다운로드할 수 있지만 제가 올려놓을게요

다운로드하셔서 링크 걸어서 사용하시면 됩니다ㅎㅎ

https://chpofo.tistory.com/24?category=897046 

CSS 삽입방법

해당 글 중간 부분에 삽입 방법과 다운로드 방법이 개시되어 있습니다.

확인하셔서 다운받으시면 될 거 같습니다.

---

이제 네이버처럼 움직이는 뉴스티커를 만들어야겠죠??

순서 먼저 정리를 해보면

 

1. 일정한 시간마다

2. #rolling 요소를 li요소의 높이만큼 위로 이동시킨다

 

var rolling = document.getElementById("rolling");

var i = 1;

window.setInterval(function(){
	rolling.style.marginTop = (i*-2) + "em";

	i++;

	i%=5;
},2000);

▼ 소스코드 살펴보기

1 : 프로그램에서 잠 조하는 요소 미리 탐색

3 : #rolling 요소에 설정할 margin-rop 스타일 속성의 값을 계산하기 위한 인덱스 변수

5 : 일정한 시간마다 -> window.setInterval 메서드로 타이머를 등록해서 구현

    이 함수는 setInterval 메서드로 등록한 타이머에 의해 2000ms마다 실행

6: #rolling 요소를 li 요소의 높이만큼 위로 이동(margin-top이용)

   margin-top : -2em, -4em, -6em, -8em, 0 , -2em, -4em,...

   i = 1, 2, 3, 4, 0, 1, 2, 3,...

8 : 이 함수가 다시 실행됐을 때 설정할 margin-top 속성 값을 계산하기 위해 인덱스 변수 증가

10 : i가 5보다 큰 숫자가 되면 i를 0으로 다시 초기화하기 위한 코드

 

JavaScript까지 작성을 하고 실행을 시켜보면

기본적인 뉴스티커

 

아직은 네이버처럼 자연스럽게 위로 올라가는 뉴스티커는 아니지만

오늘은 여기까지 기본적인 뉴스티커였습니다.

다음번에는 향상된 뉴스티커 기능을 가지고 오겠습니다.

처음부터 복잡한 뉴스티커를 한다고 하면 이해하기도 어렵고,

생각보다 원하는 대로 잘 안 나오더라고요

학원에서도 마찬가지 나눠서 조금씩 향상된 소스를 가지고 수업을 진행하다 보니까

좀 더 이해가 잘 되고 무리 없이 만들었던 거 같아서 저도 나눠서 정리를 해보도록 하겠습니다.

향상된 뉴스티커를 이해하기 위해서는 기본적인 뉴스티커 개념을 이해하시고 오시면 되겠습니다.

그러면 다음번에 향상된 뉴스티커를 업로드를 하도록 하겠습니다.

 

 

 

 

궁금하신 점이나 이해하기 어려운 부분은

댓글로 달아주시면 제가 친절하고 아는 선에서 알려드릴게요^^

 

 

 

 

 

 

댓글과 하트는 저에게 많은 힘이 됩니다 :)