무한 스크롤(infinite scroll)은 웹 페이지에 새로운 내용을 동적으로 불러와 보여주는 기능입니다. 사용자가 스크롤을 아래로 내릴 때마다 추가 콘텐츠가 자동으로 로드되어 화면에 표시됩니다. 이를 위해 JavaScript와 AJAX(Asynchronous JavaScript and XML)를 사용합니다. 아래는 단계별로 무한 스크롤을 구현하는 예제 코드와 설명입니다.
1. HTML 파일 생성하기
HTML 파일을 생성합니다. 이 예제에서는 간단한 목록을 생성하고 이 목록을 무한 스크롤로 확장합니다. 파일을 "index.html"로 저장하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
<title>무한 스크롤 예제</title>
</head>
<body>
<div class="container" id="container">
<!-- 초기 목록 아이템 -->
<div class="item">아이템 1</div>
<div class="item">아이템 2</div>
<!-- 새로운 아이템이 여기에 추가될 것입니다 -->
</div>
</body>
</html>
2. CSS 스타일 시트 생성하기
스타일을 정의하는 CSS 파일을 생성합니다. 이 파일을 "styles.css"로 저장하세요.
/* styles.css */
body {
font-family: Arial, sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
.item {
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
3. JavaScript 파일 생성하기
무한 스크롤을 구현하기 위한 JavaScript 파일을 생성합니다. 이 파일을 "script.js"로 저장하세요.
// script.js
document.addEventListener("DOMContentLoaded", function () {
const container = document.getElementById("container");
let page = 1; // 초기 페이지 번호
const perPage = 11; // 한 번에 로드할 아이템 수
// 아이템을 로드하고 컨테이너에 추가하는 함수
function loadItems() {
for (let i = 0; i < perPage; i++) {
const item = document.createElement("div");
item.className = "item";
item.textContent = "아이템 " + ((page - 1) * perPage + i + 1);
container.appendChild(item);
}
page++;
}
// 스크롤 이벤트를 감지하여 아이템 로드
window.addEventListener("scroll", function () {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const windowHeight = window.innerHeight;
const scrollHeight = document.documentElement.scrollHeight;
if (scrollTop + windowHeight >= scrollHeight - 200) {
loadItems();
}
});
// 초기 아이템 로드
loadItems();
});
4. 무한 스크롤 실행하기
위의 코드를 모두 작성한 후, HTML 파일을 브라우저에서 열어서 테스트하세요. 초기에는 몇 개의 아이템이 보이고, 스크롤을 아래로 내리면 새로운 아이템이 동적으로 추가되는 것을 확인할 수 있습니다.
5. 결과
화면을 11번 보다 작게 한다음 스크롤을 작동 시켜보세요 아래처럼 무한하게 나옵니다.
'HTML 예제' 카테고리의 다른 글
| 실시간 시계: JavaScript로 현재 시간을 실시간으로 표시 (0) | 2023.12.05 |
|---|---|
| 플립 카드: CSS로 카드 뒤집기 애니메이션 적용 (0) | 2023.12.05 |
| 모달 팝업: 모달 창을 HTML과 CSS로 만들어 팝업 레이어 생성 (0) | 2023.12.05 |
| 스크롤 이벤트: 스크롤 위치에 따라 요소가 나타나거나 사라지는 효과 (0) | 2023.12.05 |
| 회전하는 로고: CSS로 로고 이미지 회전 애니메이션 (0) | 2023.12.05 |
