연습문제 2
다음과 같은 동작은 HTML 문서와 JavaScript 프로그램을 작성하라.
- 네이버 첫 화면의 "인기 검색어"와 비슷하게 여러 항목 중 한 항목만 특정 영역에 나오는 HTML 문서 작성
- 여러 항목들이 특정 영역에 순차적으로 돌아가면서 나오도록 하는 JavaScript 프로그램 작성
- transition 스타일 속성을 사용해 부드럽게 움직이도록 작성
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>demo</title>
<link rel="stylesheet" href="reset.css">
<style>
#container {
width: 500px;
height: 100px;
margin: 100px auto;
border: 5px solid rgb(6, 170, 6);
overflow: hidden;
}
#rolling {
background-color: #ddd;
}
#rolling > li {
font-size: 28px;
height: 100px;
line-height: 100px;
text-align: center;
}
#rolling > li > span {
font-size: 30px;
font-weight: 900;
color: rgb(6, 170, 6);
padding-right: 15px;
}
</style>
</head>
<body>
<div id="container">
<ul id="rolling">
<li><span>1</span>Time is gold</li>
<li><span>2</span>No sweat, no sweet</li>
<li><span>3</span>Asking costs nothing</li>
<li><span>4</span>Step by step goes a long way</li>
<li><span>5</span>You will never know until you try</li>
</ul>
</div>
<script>
//------------------------------------------------------------------------------
// 1. 일정한 시간마다
// 2. #rolling 요소를 li 요소 하나의 높이만큼 위로 이동시킨다.
// 3. #rolling 요소의 움직임이 끝나면
// 4. #rolling 요소에 적용했던 스타일 속성을 제거하고
// 5. #rolling 요소의 첫 번째 자식 요소를 #rolling 요소의 마지막으로 옮긴다.
//------------------------------------------------------------------------------
// 프로그램에서 참조하는 요소를 미리 탐색
var rolling = document.getElementById("rolling");
// 1. 일정한 시간마다
// → window.setInterval 메서드로 타이머를 등록해서 구현(2초마다 실행)
window.setInterval(function () {
// 2. #rolling 요소를 li 요소 하나의 높이만큼 위로 이동시킨다.
rolling.style.marginTop = "-100px";
rolling.style.transition = "0.4s";
// 3. #rolling 요소의 움직임이 끝나면
// → #rolling 요소는 위에서 적용한 transition 스타일 속성 때문에 0.4초에 걸쳐
// 움직임이 진행된다. 따라서 아래 기능들은 이 시간이 지난 후에 실행되어야 한다.
// → 0.4초가 지난 후에
// → window.setTimeout 메서드로 타이머를 등록해서 구현
// 타이머를 실행하는 시간이 0.4초가 아닌 타이머에서 등록된 함수가 실행되는 시간이 0.4초
// 즉, #rolling 요소에 적용된 스타일 속성이 0.4초(transition)동안
// 실행된 후에 setTimeout 타이머에 등록된 함수가 실행된다.
window.setTimeout(function () {
// 4. #rolling 요소에 적용했던 스타일 속성을 제거하고
rolling.removeAttribute("style");
// removeAttribute는 #rolling 요소에 적용되었던 inline 스타일 속성을 제거하기 위한 메서드
// → 여기서는 2가지의 스타일 속성을 제거하게 된다.
// rolling.style.marginTop = "";
// rolling.style.transition = "";
// 5. #rolling 요소의 첫 번째 자식 요소를 #rolling 요소의 마지막으로 옮긴다.
rolling.appendChild(rolling.firstElementChild);
}, 400); // window.setTimeout
}, 2000); // window.setInterval
</script>
</body>
</html>
