동적 페이지 네비게이션 바 만들기 html5, css3, javascript 사용

`페이지 네비게이션`은 많은 정보를 보여주기 위한 사용자 인터페이스이다.
`이전 | 다음 | 페이지 번호 | 다음 | 끝`의 형태를 가지고 있으며, 
과거엔 `페이징`이란 단어를 사용하기도 했다.
페이징은 DB의 SELECT 구문과 같이 사용할 수 있다.
페이지 네비게이션은 사용자로 하여금 수많은 자료를 검색하고, 페이지를 탐색할 수 있도록 도와주며,
동적으로 동작할 수록 사소하지만, 사용자에 많은 편의성을 제공할 수 있다.

Creating A Dynamic Page Navigation Bar
동적 페이지 네비게이션 바 만들기
html5, css3, javascript 사용

페이징 또는 동적 페이지 네비게이션은 게시판을 만들 때 중요한 것 중 하나이다.
많은 데이터를 정해진 갯수로 한 화면에 표현하여 
사용자가 데이터를 편하게 찾아 보도록 하는데 있다.
지금은 거의 간략화 되어 이전, 다음의 형태만 있거나 
혹은 자동 스크롤을 많이 사용한다.
하지만, ERP, MES, LMS 등의 업무 화면인 경우 업무 담당자를 위한 페이징의 기능은 
많아질 수 있다.
기본적인 구조부터 살펴보면 다음과 같다.

필요한 것 / 데이터와 기능

`동적 페이지 네비게이션`의 구조를 먼저 살펴보면 다음과 같다.
`처음, 이전, 페이지 번호 10개, 다음, 마지막`의 기능을 가지고 있다.
각 페이지는 개발자가 지정한 갯수( 보통 한 페이지당 10개 게시물)만큼
화면에 보여주도록 한다.

페이지 번호에 따라 데이터를 보여줘야 하기 때문에
필요한 데이터는 `전체 데이터 갯수`가 된다.
`전체 데이터 갯수`를 알고 있다면 전체 페이지 갯수와 함께 페이지 번호를 알 수 있다.
페이지 번호는 DB에서 사용할 Offset Index가 될 것이다.

모든 데이터를 화면에 나눠서 보여줘야 하기 때문에 몇가지 기능이 필요하다.
`처음, 이전, 페이지 번호, 다음, 마지막`이다.
각 항목은 클릭할 때마다
지정된 페이지 번호에 맞는 데이터를 화면에 보여주게 될 것이다.

• 필요한 것
• 데이터
• 전체 데이터 갯수
• 기능
• 처음
• 이전
• 페이지번호 10개
• 다음
• 마지막

페이지 번호 계산하기

.