부트스트랩 - Scrollspy: 초보자 가이드
안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 부트스트랩의 흥미로운 기능인 Scrollspy에 대해 깊이 탐구해보겠습니다. 프로그래밍에 처음이라도 걱정하지 마세요. 저는 이 주제를 단계별로 안내해드릴게요. 그럼 커피 한 잔을 마시면서 시작해보세요!
Scrollspy는 무엇인가요?
기술적인 부분을 접하기 전에 Scrollspy가 무엇인지 이해해보겠습니다. 인터넷에서 긴 기사를 읽다가 스크롤을 내리다가, 네비게이션 메뉴가 자동으로 현재 읽고 있는 섹션을 강조해주는 기능을 상상해보세요. 바로 Scrollspy입니다! 이 작은 기능은 사용자가 콘텐츠 내에서 현재 위치를 시각적으로 확인할 수 있도록 해서 사용자 경험을 향상시킵니다.
어떻게 작동하나요?
Scrollspy는 웹페이지의 스크롤 위치를 모니터링하고, 네비게이션 아이템의 활성 상태를 그에 따라 업데이트합니다. 마치 작은 스파이(이름 그대로!)가 페이지에서 사용자의 위치를 관찰하고, 네비게이션 메뉴에게 "이제 사용자가 여기에 있습니다!"라고 알리는 것과 같습니다.
기본적인 예제를 보겠습니다:
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
<div id="navbar-example">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link" href="#section1">섹션 1</a></li>
<li class="nav-item"><a class="nav-link" href="#section2">섹션 2</a></li>
</ul>
</div>
<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0">
<h4 id="section1">섹션 1</h4>
<p>...</p>
<h4 id="section2">섹션 2</h4>
<p>...</p>
</div>
</body>이 예제에서 우리는 부트스트랩에게 스크롤 위치를 감시하도록 (data-bs-spy="scroll")하고, #navbar-example 네비게이션을 업데이트하도록 지정했습니다. 콘텐츠를 스크롤하면서 해당 네비게이션 아이템이 강조됩니다.
네비게이션 바
Scrollspy의 가장 일반적인 사용 사례 중 하나는 네비게이션 바와 함께 사용하는 것입니다. 더 자세한 예제를 보겠습니다:
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">네비게이션 바</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">첫 번째</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">두 번째</a>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="scrollspyHeading1">첫 번째 헤딩</h4>
<p>...</p>
<h4 id="scrollspyHeading2">두 번째 헤딩</h4>
<p>...</p>
</div>이 예제에서 네비게이션 바에 두 개의 링크가 있습니다. 콘텐츠를 스크롤하면서 해당 네비게이션 아이템이 강조됩니다. 마치 웹페이지의 GPS와 같습니다!
중첩된 네비게이션
때로는 중첩된 네비게이션 아이템을 사용하고 싶을 수 있습니다. Scrollspy는 이를 처리할 수 있습니다! 다음과 같이 합니다:
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
<a class="navbar-brand" href="#">네비게이션 바</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">아이템 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">아이템 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">아이템 1-2</a>
</nav>
<a class="nav-link" href="#item-2">아이템 2</a>
</nav>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
<h4 id="item-1">아이템 1</h4>
<p>...</p>
<h5 id="item-1-1">아이템 1-1</h5>
<p>...</p>
<h5 id="item-1-2">아이템 1-2</h5>
<p>...</p>
<h4 id="item-2">아이템 2</h4>
<p>...</p>
</div>이렇게 하면 중첩된 네비게이션 구조를 만들어 콘텐츠와 서브 콘텐츠를 스크롤하면서 업데이트할 수 있습니다. 마치 책의 장과 서브 장을 상호작용적으로 만드는 것과 같습니다!
리스트 그룹
Scrollspy는 네비게이션 바뿐만 아니라 리스트 그룹과도 함께 사용할 수 있습니다:
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">아이템 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">아이템 2</a>
</div>
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="list-item-1">아이템 1</h4>
<p>...</p>
<h4 id="list-item-2">아이템 2</h4>
<p>...</p>
</div>이렇게 하면 콘텐츠를 스크롤하면서 리스트 그룹이 업데이트됩니다. 마치 책의 목차가 사용자의 현재 위치를 알고 있는 것처럼!
단순 앵커
때로는 전체 네비게이션 바나 리스트 그룹 대신 단순 앵커 링크를 사용하고 싶을 수 있습니다:
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">네비게이션 바</a>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
</div>이렇게 하면 단순 앵커 링크가 스크롤에 따라 업데이트됩니다. 마치 웹페이지의 책갈피가 사용자가 도달할 때 빛나는 것처럼!
비可视 요소
Scrollspy는 초기에 보이지 않는 요소들과도 작동할 수 있습니다:
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">네비게이션 바</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
<h4 id="one">one</h4>
<p>...</p>
<h4 id="two">two</h4>
<p>...</p>
<h4 id="three">three</h4>
<p>...</p>
</div>
<script>
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example2'
})
</script>이 예제에서 일부 요소가 초기에 보이지 않더라도, Scrollspy는 그 요소들이 시야에 들어올 때 작동합니다. 마치 스파이가 벽을 통과할 수 있는 것처럼!
사용법
Scrollspy를 사용하려면 다음 세 가지를 해야 합니다:
- 스크롤을 감시할 요소에
data-bs-spy="scroll"을 추가합니다 ( 일반적으로<body>). -
data-bs-target="#navId"를 추가하여 Scrollspy가 사용할 네비게이션을 지정합니다. -
data-bs-offset=""를 추가하여 스크롤 위치 계산 시 상단에서 얼마나 떨어져야 하는지 지정합니다.
다음은 사용할 수 있는 모든 데이터 속성의 표입니다:
| 속성 | 설명 |
|---|---|
| data-bs-spy | Scrollspy를 활성화합니다 |
| data-bs-target | Scrollspy가 사용할 네비게이션을 지정합니다 |
| data-bs-offset | 스크롤 위치 계산 시 상단에서 얼마나 떨어져야 하는지 지정합니다 |
| data-bs-method | 스파이된 요소가 현재 어떤 섹션에 있는지 찾는 방법 |
옵션
JavaScript를 사용하여 Scrollspy를 초기화할 수도 있습니다:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})다음은 사용할 수 있는 모든 옵션의 표입니다:
| 옵션 | 유형 | 기본값 | 설명 |
|---|---|---|---|
| offset | number | 10 | 스크롤 위치 계산 시 상단에서 얼마나 떨어져야 하는지 지정합니다 |
| method | string | 'auto' | 스파이된 요소가 현재 어떤 섹션에 있는지 찾는 방법 |
| target | string | '' | Scrollspy가 사용할 네비게이션을 지정합니다 |
CSS 속성
Scrollspy는 다음과 같은 CSS 속성을 사용하여 기능을 수행합니다:
.scrollspy-example {
position: relative;
height: 200px;
margin-top: .5rem;
overflow: auto;
}position: relative과 overflow: auto 속성은 Scrollspy가 올바르게 작동하기 위해 필수입니다.
이제 부트스트랩의 Scrollspy 기능을 사용할 준비가 되었습니다. 연습이 완벽함을 기억하며, 이 예제들을 실험해보세요. 행복한 코딩 되세요! 여러분의 스크롤이 항상 부드럽기를 바랍니다!
Credits: Image by storyset