본문 바로가기

비개발자의 개발 일지

현장 팀장에서 수출 ERP까지 — AI와 함께 시스템을 만든 기록

시리즈 보기
php

부트스트랩 네비게이션 · 페이지네이션 · 패널 완전 정리

by 왕진 2026. 7. 17.
반응형

 

 

Bootstrap Components

부트스트랩 네비게이션 · 페이지네이션 · 패널 완전 정리

Bootstrap 3 네비게이션, 페이지 이동, 패널 컴포넌트를 사용 목적과 구조 중심으로 정리합니다.

0 오늘 분석할 코드
<ul class="nav nav-tabs">
  <li class="active"><a href="#">메뉴1</a></li>
  <li class="dropdown">
    <a data-toggle="dropdown" href="#">여기 클릭 <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
      <li><a role="menuitem" href="#">메뉴 1</a></li>
    </ul>
  </li>
</ul>
<ol class="breadcrumb"><li><a href="#">Home</a></li><li class="active">submenu</li></ol>
<ul class="pagination"><li class="disabled"><span>«</span></li><li class="active"><span>1</span></li></ul>
<div class="panel panel-primary"><div class="panel-heading">Panel title</div><div class="panel-body">Panel content</div></div>
navBootstrap 네비게이션의 기본 클래스입니다.
nav-tabs탭 모양 네비게이션입니다.
nav-pills알약 모양 네비게이션입니다.
dropdown하위 메뉴를 여는 드롭다운 구조입니다.
breadcrumb현재 위치 경로를 보여 주는 목록입니다.
pagination번호 기반 페이지 이동 UI입니다.
pager이전/다음 중심 페이지 이동 UI입니다.
panelBootstrap 3의 박스형 콘텐츠 컴포넌트입니다.
1 문서 전체 구조

99번 폴더는 Bootstrap 3의 네비게이션, breadcrumb, pagination, pager, panel을 한 번에 다룹니다. 모두 사용자가 페이지 안에서 이동하거나 정보를 묶어 읽도록 돕는 UI 컴포넌트입니다.

  • navigation은 메뉴 구조를 만듭니다.
  • pagination과 pager는 목록 페이지 이동을 제공합니다.
  • panel은 제목, 본문, 하단, 테이블, 리스트를 박스로 묶습니다.
  • dropdown은 Bootstrap JavaScript와 jQuery가 필요합니다.
2 탭형 네비게이션

nav nav-tabs는 메뉴를 탭처럼 보여 줍니다. li.active를 붙이면 현재 선택된 메뉴가 강조됩니다.

클래스 역할 주의
nav 네비게이션 기본 단독으로는 형태가 약합니다.
nav-tabs 탭 모양 상단 탭 UI에 적합합니다.
active 현재 항목 표시 하나만 활성화하는 것이 자연스럽습니다.
disabled 비활성 항목 표시 링크 동작 차단은 별도 확인이 필요합니다.
3 알약형 네비게이션

nav nav-pills는 둥근 버튼형 메뉴를 만듭니다. nav-stacked를 붙이면 수직 메뉴가 되고, nav-justified를 붙이면 항목 폭이 균등해집니다.

클래스 역할 주의
nav-pills 알약형 메뉴 버튼형 메뉴에 적합합니다.
nav-stacked 수직 배치 사이드 메뉴에 적합합니다.
nav-justified 양쪽 정렬 항목 폭을 균등하게 맞춥니다.
clearfix float 정리 컬럼 뒤 흐름 정리에 필요할 수 있습니다.

 

반응형

 

4 드롭다운 네비게이션

드롭다운은 li.dropdown 안에 data-toggle="dropdown" 링크와 ul.dropdown-menu를 넣습니다. divider는 메뉴 그룹 사이 구분선입니다.

  1. li에 dropdown 클래스를 붙입니다.
  2. a에 data-toggle="dropdown"을 둡니다.
  3. caret으로 아래 화살표를 표시합니다.
  4. dropdown-menu 안에 role="menuitem" 링크를 둡니다.
  5. jQuery와 bootstrap.min.js를 로드합니다.
5 breadcrumb

breadcrumb는 Home, menu1, submenu처럼 현재 위치 경로를 보여 줍니다. 마지막 항목은 active로 표시하고 링크를 제거하는 것이 일반적입니다.

클래스 역할 주의
breadcrumb 경로 목록 ol 태그에 붙입니다.
li a 이전 경로 링크 상위 페이지로 이동합니다.
active 현재 위치 마지막 항목에 사용합니다.
구분자 Bootstrap CSS가 처리 직접 슬래시를 넣지 않아도 됩니다.
6 pagination

pagination은 번호가 많은 목록 페이지에 적합합니다. 이전/다음 기호와 번호 링크를 li 안에 배치하고, 현재 페이지는 active로 표시합니다.

클래스 역할 주의
pagination 번호 페이지 UI 게시판 목록에 적합합니다.
active 현재 페이지 현재 번호 하나에만 사용합니다.
disabled 이동 불가 첫 페이지의 이전 버튼 등에 사용합니다.
sr-only 현재 페이지 보조 문구 스크린리더용 설명입니다.
7 pagination 크기

pagination-lg와 pagination-sm은 페이지네이션 크기를 바꿉니다. 화면 밀도와 터치 대상 크기를 고려해 선택합니다.

  • pagination-lg는 큰 버튼이 필요할 때 사용합니다.
  • 기본 pagination은 일반 게시판에 적합합니다.
  • pagination-sm은 좁은 영역이나 보조 목록에 적합합니다.
  • 모바일에서는 너무 작은 페이지 번호가 누르기 어려울 수 있습니다.
8 pager

pager는 번호 전체를 보여 주기보다 이전/다음 이동만 제공하는 단순 UI입니다. previous와 next 클래스로 양 끝 정렬을 만들 수 있습니다.

클래스 역할 주의
pager 이전/다음 UI 블로그 글 이동에 적합합니다.
previous 왼쪽 정렬 이전 글 링크에 사용합니다.
next 오른쪽 정렬 다음 글 링크에 사용합니다.
disabled 비활성 첫 글이나 마지막 글에서 사용합니다.
9 기본 패널

panel panel-default는 Bootstrap 3의 기본 박스 컴포넌트입니다. panel-body만 넣으면 단순 박스가 되고, panel-heading과 panel-footer를 추가하면 제목과 하단 영역이 생깁니다.

클래스 역할 주의
panel 패널 기본 반드시 의미 색상과 함께 씁니다.
panel-default 기본 패널 색상 일반 콘텐츠에 적합합니다.
panel-heading 상단 제목 영역 텍스트나 panel-title을 넣습니다.
panel-body 본문 영역 주요 콘텐츠를 넣습니다.
panel-footer 하단 영역 보조 안내나 버튼을 넣습니다.
10 패널 색상

panel-primary, panel-success, panel-info, panel-warning, panel-danger는 버튼 색상처럼 의미를 전달합니다. 단순 장식보다 콘텐츠 성격에 맞춰 골라야 합니다.

클래스 역할 주의
panel-primary 주요 패널 대표 정보
panel-success 성공 패널 완료나 정상
panel-info 정보 패널 안내
panel-warning 주의 패널 확인 필요
panel-danger 위험 패널 오류나 삭제 경고
11 패널 안의 테이블

패널 내부에 table.table을 넣으면 테이블이 패널과 자연스럽게 연결됩니다. panel-body가 있으면 본문 설명 뒤에 테이블이 나오고, panel-body 없이 테이블만 넣으면 더 밀착된 목록 박스가 됩니다.

  • panel-heading은 테이블 제목 역할을 합니다.
  • panel-body는 테이블 위 설명 영역입니다.
  • table class="table"은 Bootstrap 테이블 기본 스타일을 적용합니다.
  • 패널 안 테이블은 게시판 요약에 적합합니다.
12 패널 안의 리스트 그룹

패널 안에 list-group을 넣으면 목록형 콘텐츠를 패널 테두리와 연결할 수 있습니다. 공지 목록, 설정 메뉴, 링크 목록에 자주 쓰입니다.

클래스 역할 주의
list-group 목록 그룹 패널 내부 목록
list-group-item 개별 항목 li에 붙입니다.
panel-body 목록 전 설명 있어도 되고 없어도 됩니다.
panel-heading 목록 제목 패널 상단 제목
13 JavaScript 의존성

탭 모양 자체와 패널은 CSS만으로도 보이지만, dropdown 동작은 jQuery와 bootstrap.min.js가 필요합니다. 원문도 문서 하단에 두 스크립트를 로드합니다.

  1. jQuery를 먼저 로드합니다.
  2. 그 다음 bootstrap.min.js를 로드합니다.
  3. data-toggle="dropdown" 요소를 클릭해 메뉴가 열리는지 확인합니다.
  4. 콘솔 오류가 있으면 스크립트 경로와 로드 순서를 확인합니다.
14 Bootstrap 3 기준

panel, pager, nav-stacked 같은 표현은 Bootstrap 3 문법입니다. Bootstrap 4/5에서는 card, pagination, nav 구조로 바뀐 부분이 있으므로 최신 버전으로 옮길 때는 그대로 복사하면 안 됩니다.

클래스 역할 주의
panel Bootstrap 3 컴포넌트 최신 버전에서는 card로 대체
pager Bootstrap 3 페이지 UI 최신 버전에서는 pagination 조합 검토
nav-stacked 수직 nav 최신 버전 display/flex 유틸 확인
glyphicon 없음 이 문서에는 직접 사용 안 함 Bootstrap 3 주변 예제에서 주의
15 실전 선택 기준
목표 추천 컴포넌트 이유
상단 메뉴 nav-tabs 또는 nav-pills 현재 섹션을 표시하기 쉽습니다.
사이드 메뉴 nav-pills nav-stacked 세로 탐색에 적합합니다.
게시판 페이지 pagination 번호 이동이 필요합니다.
블로그 글 이동 pager 이전/다음만 있으면 충분합니다.
정보 묶음 panel 제목과 본문을 박스로 구분합니다.
16 검증 체크리스트
  • nav의 active 항목이 현재 페이지와 일치합니다.
  • disabled 항목의 실제 클릭 동작을 확인합니다.
  • dropdown에 jQuery와 bootstrap.min.js가 로드되어 있습니다.
  • pagination 현재 페이지에는 active와 sr-only 설명이 있습니다.
  • panel 색상은 콘텐츠 의미와 맞습니다.
  • Bootstrap 3 기준 컴포넌트인지 확인합니다.
17 컴포넌트 적용 순서
  1. 탐색 구조: 메뉴인지, 경로인지, 페이지 번호인지 먼저 구분합니다.
  2. 상태 표시: 현재 위치에는 active, 이동 불가 항목에는 disabled를 붙입니다.
  3. 동작 확인: dropdown처럼 JavaScript가 필요한 컴포넌트는 스크립트 로드 순서를 확인합니다.
  4. 의미 색상: panel 색상은 정보 성격에 맞춰 primary, success, warning, danger 중 선택합니다.
  5. 반응형 확인: nav-justified와 pagination이 좁은 화면에서 깨지지 않는지 확인합니다.
18 접근성 점검
  • 현재 페이지 링크에는 시각적 active뿐 아니라 스크린리더용 설명을 함께 고려합니다.
  • disabled 링크는 색상만 바꾸지 말고 실제 클릭과 키보드 포커스 동작도 확인합니다.
  • dropdown 메뉴는 키보드로 열고 이동할 수 있는지 확인합니다.
  • pagination의 «, » 기호만으로 의미가 부족하면 aria-label이나 숨김 텍스트를 보완합니다.
  • panel 제목은 단순 장식이 아니라 박스 콘텐츠의 제목 역할을 해야 합니다.
  • 패널 안의 테이블과 리스트는 제목 없이 단독으로 놓였을 때도 의미가 전달되는지 확인합니다.
M 자주 하는 실수
실수 문제 해결
dropdown 스크립트 누락 메뉴가 열리지 않습니다. jQuery 다음 bootstrap.min.js를 로드합니다.
disabled를 시각 효과로만 처리 링크가 여전히 클릭될 수 있습니다. href와 이벤트 동작을 함께 확인합니다.
active 항목 여러 개 현재 위치가 혼란스럽습니다. 현재 페이지 하나만 active로 둡니다.
panel 색상 남용 정보 의미가 흐려집니다. 콘텐츠 성격에 맞는 색상만 사용합니다.
Bootstrap 버전 혼동 panel이 최신 버전에서 보이지 않을 수 있습니다. Bootstrap 3 기준 예제임을 확인합니다.

핵심 한 줄 요약

navnav-tabs와 nav-pills는 메뉴 형태를, active와 disabled는 상태를 표현합니다.
pagepagination은 번호 이동, pager는 이전/다음 이동에 적합합니다.
panelpanel은 제목, 본문, 하단, 테이블, 리스트를 하나의 박스로 묶습니다.

Tags

#Bootstrap#navigation#nav-tabs#nav-pills#dropdown#pagination#pager#panel#Bootstrap3#티스토리
▼ 티스토리 태그 입력란 복사용
Bootstrap, navigation, nav-tabs, nav-pills, dropdown, pagination, pager, panel, Bootstrap3, 티스토리
반응형

'php' 카테고리의 다른 글

부트스트랩 라벨 · 배지 · 알림 · 목록그룹 완전 정리  (0) 2026.07.18
부트스트랩 드롭다운 · 점보트론 · 내비게이션바 · 진행바 완전 정리  (0) 2026.07.18
부트스트랩 타이포그래피 · 반응형 유틸리티 완전 정리  (0) 2026.07.17
부트스트랩 그리드 완전 정리  (0) 2026.07.17
부트스트랩 폼 완전 정리  (0) 2026.07.17

관련글

댓글

티스토리툴바