동적 페이지 네비게이션 바 만들기 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 `이다. 화면을 캡쳐하는 목적이야 여러가지가 있지만, 보통 화면 전체를 또는 일부를 스크린샷하여 저장할 필요가 생긴다. 윈도우 캡쳐 도구를 사용하기 위한 단축키는 아래와 같다. 윈도우 캡쳐 단축키 캡쳐는 했지만, 이미지가 저장되어 있는지 확인을 하고 싶을 수 있다. 보통은 자신에게 익숙한 그림판 또는 파워포인트 등에 붙여넣기 하고 사용했을 것이다. 윈도우에 대한 별도의 설정을 하지 않았다면, 윈도우 캡쳐는 자동 저장이 기본 설정이며, ` 사진 > 스크린샷 `폴더에서 캡쳐된 모든 이미지를 볼 수 있다. 캡쳐 이미지 찾아보기 윈도우에서 화면을 캡쳐하면 자동 저장된다. 이미지가 자동 저장되었...
자세한 내용 보기

구글 스프레드시트 행 높이 크기 조절하는 방법

-
이미지
구글 스프레드시트에서 행 높이를 지정하려면 픽셀로 지정하여 설정할 수 있다. 마우스로 행 높이를 조절할 곳을 선택한 후 행 높이 조절 을 선택한다. 그리고, 높이를 숫자로 입력하면 된다. 기본값은 픽셀이다. 단어가 다를 뿐이지만, 엑셀과 사용법은 같다. 구글 스프레드시트 행 높이 조절하는 방법 구글 스프레드시트 행 높이 크기 수정하는 방법 스프레드시트는 구글에서 무료로 제공하는 엑셀과 비슷한 프로그램이다. 웹, PC, 모바일 등 딱히 기기를 가리지 않고 사용할 수 있다. 조금 불편할 따름이지만 말이다. 구글 스프레드시트에서 문서를 작성하다보면 엑셀과는 다른 불편함이 있는데 행 높이를 수정하는 것이 그렇다. 마이크로소프트의 엑셀과 사용법이 비슷하긴 하지만, 용어가 다르기에 조금 난해하다. 용어의 비교 구글 스프레드시트를 사용하고 있다면 엑셀과 비슷한 느낌을 받을 수 있지만, 용어에 차이가 있기에 난해하고 비슷한 기능을 찾는데 애로 사항이 생긴다. 일단 엑셀과 스프레드시트의 용어를 비교해 보자. 엑셀의 경우 행 높이 로 표현하지만 스프레드시트는 행 크기 조절 로 메뉴에 표현된다. 기능은 비슷하지만, 용어가 다르기에 엑셀을 잘 다루는 사람도 스프레드시트에서 헷갈리는 경우가 생긴다. 행 크기를 조절하는 방법 구글 스프레드시트에서 행 크기를 조절하는 방법은 엑셀의 행 높이를 조절하는 것과 같다. 스프레드시트의 행을 선택 후 마우스 오른쪽 버튼을 클릭하고 행 크기를 입력해 주면 된다. 아래는 스프레드시트의 행 크기를 조절하는 방법이다. 구글 스프레드시트를 실행한다. 변경할 행을 선택하고 마우스 오른쪽 버튼을 클릭한다. 메뉴 하단의 행 크기 조절을 선택한다. 행 크기를 조절할 수치를 입력한다. 위의 과정이 불편하다면 마우스로 단순히 행 높이를 조절할 수도 있다. 과정 보기 위의 방법을 이용하여 실제로 구글 스프레드시트에서 행 높이를 조절해 보자. 먼저, 구글 스프레드시트를 실행한 후에 시트에서 행을 마우스로 선택해 주도록 하자. 행을 선택...
자세한 내용 보기

Featured Post

신탁회사 뜻 / 다른 사람이나 조직의 자산을 관리하는 회사

-
이미지
부동산의 등기부등본이나 분양 관련 서류를 보면 신탁회사라는 표현을 접할 때가 있다. 부동산의 소유자 부분에 신탁회사 이름이 적혀 있으면 `왜 이 회사가 소유자로 되어 있지?`라는 의문이 생긴다. 신탁회사 를 쉽게 표현하면 다른 사람에게서 재산을 맡아 정해진 목적에 따라 관리하거나 처분하는 업무를 하는 회사 정도로 볼 수 있다. 다만, 신탁은 재산의 관리와 보관에 있어 법률의 관계가 복잡하다. 신탁회사 뜻 다른 사람이나 조직의 자산을 관리하는 회사 ▣ 단어의 뜻 신탁회사는 다른 사람이나 기관으로부터 금전, 부동산, 유가증권 등의 재산을 맡아 정해진 목적에 따라 관리, 운용, 처분하는 업무를 하는 회사이다. 신탁법에서 신탁은 위탁자가 수탁자에게 특정 재산을 이전하거나 처분하고, 수탁자가 수익자의 이익 또는 특정 목적을 위하여 그 재산을 관리, 운용, 처분하도록 하는 법률관계로 규정한다. 신탁회사는 영어로 `Trust Company`이며, 한자로 `信託會社`이다. 신탁회사 Trust Company Trust 신뢰하다, 신임하다. Company 회사 信託會社 信 믿을 신, 託 부탁하다 탁, 會 모일 회, 社 토지신 사 신탁회사 는 다른 사람이나 조직의 돈이나 재산을 관리하는 회사를 의미하지만, 신탁( Trust , 信託 )이란 표현을 사용한 것을 보면, 서로간의 신뢰관계를 기반으로 하고 있다는 것을 볼 수 있다. 즉, 신탁회사는 어떤 사람 또는 기관의 재산이나 권리를 믿고 맡기고, 운용하는 회사를 뜻한다. 보통, 금융투자업자를 `신탁업자`이기도 하다. 신탁회사 - 단어의 뜻 ▣ 신탁회사 역할 신탁회사 는 고객이 맡긴 재산을 목적과 계약 내용에 따라 관리, 운용, 처분하는 회사를 뜻한다. ` 자본시장과 금융투자업에 관한 법률 `에서는 ` 신탁업자 `를 금융투자업자 중 신탁업을 영위하는 자로 규정하고 있으며, ` 신탁업 `을 영위하려면 금융위원회의 금융투자업 인가를 받아야 한다. 신탁 의 기본 구조는 재산을 맡기는 위탁자 , 재산을 맡아 관리하는 수탁자 , 신탁으로부터 ...
댓글 쓰기