안녕하세요. 이번 예제에서는 Bootstrap을 사용하여 버튼 클릭시 스크롤 위치 이동하는 기능을 만들어보겠습니다. 이 기능을 Scrollspy 라고 합니다.
1. Scrollspy란?
Scrollspy는 웹 페이지에서 스크롤 이벤트를 사용하여 사용자가 스크롤할 때 특정 섹션 또는 요소가 화면에 보이는지 감지하는 기능입니다. 이를 통해 페이지 내 탐색을 돕고 사용자 경험을 향상시킬 수 있습니다. 주로 단일 페이지 애플리케이션(SPA) 또는 긴 페이지가 있는 웹사이트에서 사용됩니다.
2. 전체코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding: 20px; text-align: center;">
<div class="row">
<div class="col-4" style="position: fixed;">
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
</div>
<div class="col-8" style="margin-left: 400px;">
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
<h4 id="list-item-1">Item 1</h4>
<p>부트스트랩은 HTML, CSS, JavaScript로 구성된 가장 인기 있는 오픈 소스 프론트엔드 프레임워크 중 하나입니다. 트위터에서 만들어졌으며, 모바일 우선 접근 방식을 채택하여 모든 종류의 디바이스에서 웹 페이지를 쉽게 디자인할 수 있습니다. 부트스트랩은 그리드 시스템, 테이블, 폼, 버튼, 네비게이션 등의 다양한 컴포넌트를 제공하여 웹 개발을 더욱 효율적으로 만들어줍니다. 또한, 반응형 웹 디자인을 구현할 때 유용하며, 사용자 정의가 가능한 CSS 클래스와 JavaScript 플러그인을 제공하여 개발자가 더 많은 유연성을 가질 수 있습니다. 부트스트랩은 쉽게 배울 수 있고, 다양한 프로젝트에 적용할 수 있어 웹 개발자들 사이에서 널리 사용되고 있습니다</p>
<h4 id="list-item-2">Item 2</h4>
<p>부트스트랩은 HTML, CSS, JavaScript로 구성된 가장 인기 있는 오픈 소스 프론트엔드 프레임워크 중 하나입니다. 트위터에서 만들어졌으며, 모바일 우선 접근 방식을 채택하여 모든 종류의 디바이스에서 웹 페이지를 쉽게 디자인할 수 있습니다. 부트스트랩은 그리드 시스템, 테이블, 폼, 버튼, 네비게이션 등의 다양한 컴포넌트를 제공하여 웹 개발을 더욱 효율적으로 만들어줍니다. 또한, 반응형 웹 디자인을 구현할 때 유용하며, 사용자 정의가 가능한 CSS 클래스와 JavaScript 플러그인을 제공하여 개발자가 더 많은 유연성을 가질 수 있습니다. 부트스트랩은 쉽게 배울 수 있고, 다양한 프로젝트에 적용할 수 있어 웹 개발자들 사이에서 널리 사용되고 있습니다</p>
<h4 id="list-item-3">Item 3</h4>
<p>부트스트랩은 HTML, CSS, JavaScript로 구성된 가장 인기 있는 오픈 소스 프론트엔드 프레임워크 중 하나입니다. 트위터에서 만들어졌으며, 모바일 우선 접근 방식을 채택하여 모든 종류의 디바이스에서 웹 페이지를 쉽게 디자인할 수 있습니다. 부트스트랩은 그리드 시스템, 테이블, 폼, 버튼, 네비게이션 등의 다양한 컴포넌트를 제공하여 웹 개발을 더욱 효율적으로 만들어줍니다. 또한, 반응형 웹 디자인을 구현할 때 유용하며, 사용자 정의가 가능한 CSS 클래스와 JavaScript 플러그인을 제공하여 개발자가 더 많은 유연성을 가질 수 있습니다. 부트스트랩은 쉽게 배울 수 있고, 다양한 프로젝트에 적용할 수 있어 웹 개발자들 사이에서 널리 사용되고 있습니다</p>
<h4 id="list-item-4">Item 4</h4>
<p>부트스트랩은 HTML, CSS, JavaScript로 구성된 가장 인기 있는 오픈 소스 프론트엔드 프레임워크 중 하나입니다. 트위터에서 만들어졌으며, 모바일 우선 접근 방식을 채택하여 모든 종류의 디바이스에서 웹 페이지를 쉽게 디자인할 수 있습니다. 부트스트랩은 그리드 시스템, 테이블, 폼, 버튼, 네비게이션 등의 다양한 컴포넌트를 제공하여 웹 개발을 더욱 효율적으로 만들어줍니다. 또한, 반응형 웹 디자인을 구현할 때 유용하며, 사용자 정의가 가능한 CSS 클래스와 JavaScript 플러그인을 제공하여 개발자가 더 많은 유연성을 가질 수 있습니다. 부트스트랩은 쉽게 배울 수 있고, 다양한 프로젝트에 적용할 수 있어 웹 개발자들 사이에서 널리 사용되고 있습니다</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
3. 결과
4. 출처
'JavaScript' 카테고리의 다른 글
| [JavaScript] 탭 레이아웃 만들기 (0) | 2024.03.24 |
|---|---|
| [JavaScript] 리뷰 만들기 (0) | 2024.03.23 |
| [JavaScript] CoinGecko API 와 chart api를 사용하여 암호화폐 시장 데이터를 실시간으로 받아와 차트로 시각화하기 (0) | 2024.03.19 |
| [JavaScript] 카운터 만들기 (0) | 2024.03.17 |
| [JavaScript] 웹페이지 로딩화면 (0) | 2024.03.14 |
