............ > 팁자료실

<div class="container">

  <div class="row">

    <div class="col">

      <nav class="navbar navbar-expand-lg navbar-light bg-light">

        <!-- 네비게이션 메뉴의 기본 구조 -->

        <a class="navbar-brand" href="#">로고</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

          <span class="navbar-toggler-icon"></span>

        </button>

        <div class="collapse navbar-collapse" id="navbarNav">

          <ul class="navbar-nav">

            <li class="nav-item active">

              <a class="nav-link" href="#">홈 <span class="sr-only">(현재)</span></a>

            </li>

            <li class="nav-item">

              <a class="nav-link" href="#">기능</a>

            </li>

            <li class="nav-item">

              <a class="nav-link" href="#">가격</a>

            </li>

            <li class="nav-item">

              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">비활성</a>

            </li>

          </ul>

        </div>

      </nav>

    </div>

  </div>

</div>

<!-- 본문 내용 -->

<div class="container">

  <div class="row">

    <div class="col-8">

      <h1>스티키 메뉴 테스트</h1>

      <p>부트스트랩에서 스티키 메뉴를 적용하는 방법을 확인합니다.</p>

    </div>

    <div class="col-4">

      <div class="position-sticky" style="top: 10px;">

        <div class="p-4 bg-light rounded">

          <h4 class="fst-italic">부트스트랩 스티키</h4>

          <p class="mb-0">여기에 사이드 메뉴 또는 추가 콘텐츠를 배치할 수 있습니다.</p>

        </div>

      </div>

    </div>

  </div>

</div>