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

-

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

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

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

필요한 것 / 데이터와 기능

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

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

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

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

페이지 번호 계산하기

.

댓글

댓글 쓰기

이 블로그의 인기 게시물

귀문과 혼문 뜻 어떤 영(靈)들이 드나드는 문

-
이미지
무속에는 ` 귀문과 혼문 `이란 영적 존재들이 드나드는 문이 있다고 한다. 단어 그대로 ` 귀문은 귀신이 드나드는 문 `을 ` 혼문은 혼백이 드나드는 문 `을 의미한다. 귀문은 보통 부정적인 의미가 강하고, 사람들이 신경쓰는 부분이며, 혼문은 중간적인 의미가 강하다. 특히, 애니메이션 ` 케이팝 데몬 헌터스 `에서 귀문과 혼문이란 단어가 언급되어 궁금증을 자아낸다. 애니메이션에서 언급한 ` 귀문과 혼문 `은 각각 부정과 긍정의 비유를 들고 있다. 정확한 표현을 알고자 하면 한문과 영어를 함께 비교해 보면 된다. 귀문과 혼문 뜻 어떤 영(靈)들이 드나드는 문 The Meaning Of Ghost Gate Or Soul Gate / 귀문과 혼문 뜻 어떤 영(靈)들이 드나드는 문 무속에 대해 관심이 있다면 ` 귀문, 혼문 `이란 단어를 한번쯤 봤을 것이다. 보이지 않는 모든 영들은 현실세계를 드나들 때 그들만의 문(door)를 사용한다. 영화나 드라마 혹은 무속과 관련된 내용들을 보면  같은 시간대에 같은 공간을 다른 차원들이 공유되는 것 같고, 어떤 존재가 서로 다른 차원을 이동하기 위한 어떤 문이 존재하는데, 이것을 무속에서 ` 귀문 혹은 혼문 `이라 칭하는 듯 하다. 여기서는 ` 차원 `이라 언급했지만, 무속에선 ` 사후세계 `로 이해할 수 있다. `귀문과 혼문`은 어쨌든 ` 문 `이며, 귀신 또는 혼령이 공간을 이동할 수 있는 수단을 의미한다. 이것을 구체적으로 알기 위해 한자와 영어 단어를 같이 살펴볼 필요가 있다. 케이팝 데몬 헌터스 ( 케데헌 ) KPOP Demon Hunters ` 귀문과 혼문 `이란 단어를 사람들이 접한 계기라면 아마도 2025년 넷플릭스에서 공개한 애니메이션 ` 케이팝 데몬 헌터스 (케데헌 / KPOP Demon Hunters) `일 것이다. 애니메이션에서 언급하는 `귀문과 혼문`의 의미는 명확하다. 사람들의 혼을 뺏기 위해 인간 세상에 오는 악귀들은 ` 귀문 `으로 악귀들을 막기 위해 사람들의 영(령)을 정화...
자세한 내용 보기

윈도우 캡쳐 이미지 자동 저장 위치 찾기

-
이미지
윈도우 사용시 ` 캡쳐 도구 `를 사용해 화면을 캡쳐하면 자동 저장 되며, ` 윈도우 탐색기 `의 좌측 메뉴의 ` 사진 `폴더의 ` 스크린샷 `를 클릭하면  과거부터 지금까지 캡쳐한 모든 이미지를 볼 수 있다. 폴더 위치를 확인했다면 필요없는 파일들은 삭제하도록 하자. 사용할 수 있는 드라이브 용량을 늘릴 수 있다. 윈도우 캡쳐 이미지 자동 저장 위치 찾기 윈도우 캡쳐 이미지 자동 저장 위치 찾기  / Windows Capture Save Location 컴퓨터를 하다보면 캡쳐할 일이 생긴다. 윈도우는 여러가지 캡쳐 도구를 제공하며, 보통 단축키 `Shift+윈도우키+S`키를 활용한 캡쳐를 이용할 것이다. 하지만, 캡쳐를 한 후 보통 이미지가 저장된다고 생각하지 않지만, 실제로 윈도우는 ` 캡쳐 후 자동 저장 `한다. 먼저, 자신이 최소 1번이라도 윈도우 캡쳐를 했다면 ` 윈도우 탐색기를 열고, 좌측 메뉴의 사진 폴더를 선택 후 우측의 스크린샷 폴더 `를 선택해 보자. 지금까지 캡쳐한 이미지들이 저장되어 있을 것이고, 사용하지 않는 이미지들이 용량을 차지하고 있는 것을 볼 수 있다. 탐색기 > 사진 > 스크린샷 Shift + 윈도우키 + S / 윈도우 캡쳐도구 단축키 윈도우에서 화면을 캡쳐할 때 사용하는 단축키는 ` Shift + 윈도우키 + S `이다. 화면을 캡쳐하는 목적이야 여러가지가 있지만, 보통 화면 전체를 또는 일부를 스크린샷하여 저장할 필요가 생긴다. 윈도우 캡쳐 도구를 사용하기 위한 단축키는 아래와 같다. 윈도우 캡쳐 단축키 캡쳐는 했지만, 이미지가 저장되어 있는지 확인을 하고 싶을 수 있다. 보통은 자신에게 익숙한 그림판 또는 파워포인트 등에 붙여넣기 하고 사용했을 것이다. 윈도우에 대한 별도의 설정을 하지 않았다면, 윈도우 캡쳐는 자동 저장이 기본 설정이며, ` 사진 > 스크린샷 `폴더에서 캡쳐된 모든 이미지를 볼 수 있다. 캡쳐 이미지 찾아보기 윈도우에서 화면을 캡쳐하면 자동 저장된다. 이미지가 자동 저장되었...
자세한 내용 보기

포토피아 모자이크 효과 만들기 인터넷 포토샵 사용

-
이미지
이미지에 모자이크(Mosaic)를 적용하면 특정 부분을 왜곡하여 가리고 노출을 방지할 수 있다. 포토피아 (Photopea)에서 선택도구와 필터를 사용하면 모자이크 효과를 적용할 수 있다. 간단하다. 모자이크를 설정할 이미지의 특정영역을 선택도구로 선택한 후, 필터에서 모자이크 항목을 선택하면 된다. photopea 모자이크 효과 만들기 인터넷 포토샵 사용 Creating a Photopia Mosaic Effect Photopea 모자이크 효과 만들기 인터넷 포토샵 사용 블로그나 웹사이트 등 콘텐츠를 발행할 때  특정 업체, 지명 또는 인명 등의 정보는 민감하고 가릴 필요가 있다. 물론, 이런 이미지들을 사용하는 경우는 거의 없을 것이지만 말이다. 이미지의 특정 부분을 모자이크 하면 그 부분은 왜곡이 되고, 노출과 공개를 방지할 수 있다. photopea 접속하기 이미지 불러오기 선택 도구 선택 필터 선택 > 픽셀화 선택 > 모자이크 선택 > 확인 모자이크된 왜곡된 이미지 확인 순서는 위의 순서와 같다. 하나씩 진행 해보자. 1. photopea 인터넷 포토샵 접속하기 photopea ( 이하 포토피아 )는 보통 인터넷 포토샵으로 유명하다. 과거 구버전의 포토샵과 비슷한 화면구성을 하고 있으며, 단축키도 비슷하다. 물론, 웹이라는 한계가 있기에 차이가 존재하긴 하지만, 어지간한 기능들은 모두 사용할 수 있다. 단점이라면 의도치않은 광고들이 나타난다는 점인데, 무료로 사용하는 만큼 이정도는 감내하자. 포토피아로 접속하는 주소는 다음과 같다. [ 포토피아 바로가기 ] 포토피아(photopea) 메인 2. 이미지 불러오기 포토피아의 좋은 점은 이미지를 불러오는 방법이 여러가지에 있다. 내 PC에 있는 이미지를 열기 할 수 있지만, 외부 이미지 URL을 알고 있다면 그대로 열기 할 수 있다. 포토피아 이미지 열기 인터넷에 있는 이...
자세한 내용 보기

Featured Post

채권 종목 찾기 / 토스앱 전체 메뉴를 살펴보자.

-
주식 투자도 좋지만, 주식보다 변동성이 낮고, 예금, 적금보다 많은 이자 수익을 원한다면 채권 투자에도 관심을 가져보는 것도 좋다. 채권은 일정 기간 동안 돈을 빌려주고 원금과 이자를 받는 투자 방식이다. 다만, 투자라는 점에서 선뜻 접근이 어려울 수 있지만, 주식보다는 안전하다는 점에서 주목할 만하다. 그렇다면, 채권 투자를 위한 종목을 찾아보자. 가장 편한 것은 토스앱을 사용해 보는 것이다. ( 광고 X, 제일 편할 뿐이다. ) ▣  채권 투자 ▣  토스앱 ▣  종목 찾기 토스앱 열기 전체 메뉴 열기 토스뱅크 상품 선택 ( 아래로 스크롤 ) 목돈 굴리기 > 채권, 발행어음, RP 선택 묶어두는 상품 > 상품 필터 선택 채권 선택 금리순 또는 기간순으로 확인하기 ▣  채권 투자도 손해는 존재한다.
댓글 쓰기