페이지네이션(Pagination)이란 무엇인가? 페이지네이션이란 여러개의 컨텐츠를 여러 페이지로 나누고 페이지 번호 버튼, 이전 버튼, 다음 버튼을 눌러서 페이지를 이동하는 기능입니다. 페이지네이션 조건 한 페이지에 보여주고자 하는 페이지 버튼의 개수 한 페이지에 보여주고자 하는 컨텐츠의 개수 이전, 다음 버튼 위 조건 외에도 처음으로 버튼, 맨 마지막으로 버튼이 추가될 수 있습니다. 위 조건을 그림으로 표현하면 다음과 같습니다. 한 페이지에 보여주고자 하는 페이지 버튼 개수 : 5개 한 페이지에 보여주고자 하는 컨텐츠의 개수 : 10개 페이지네이션 개발에 필요한 4가지 값 총 페이지 개수 화면에 보여질 페이지 그룹 화면에 보여질 페이지의 첫번째 페이지 번호 화면에 보여질 페이지의 마지막 페이지 번호 총..

1. 표준 웹 통신 웹 브라우저는 서버에게 파일을 요청하게 됩니다. 이때 서버는 요청한 파일이 있으면 파일의 내용을 읽어 응답결과로 클라이언트에게 전달하게 됩니다. 응답 결과를 받은 웹 브라우저는 데이터를 분석하여 자신이 스스로 처리하게 됩니다. 2. 표준 웹 통신의 문제점 표준 웹 통신은 클라이언트 브라우저가 서버에게 응답 결과를 받게 되면 브라우저가 스스로 처리하려고 합니다. 브라우저가 처리할 수 있는 데이터면 스스로 처리하고 그렇지 않으면 다운로드가 됩니다. 만약 응답 결과가 html 코드이면 html 코드를 통해 만들어 화면을 변경하고 이미지, 사운드, 동영상 등 미디어 데이터면 미디어 데이터를 처리할 수 있는 화면으로 변겨오디어 처리를 하게 됩니다. 즉, 웹 브라우저는 처리할 수 있는 데이터를 ..

1. 애니메이션 jQuery는 개발자가 직접 애니메이션을 만들어 사용할 수 있도록 지원하고 있습니다. 선택된 태그에 css 값을 새롭게 설정해 주면 중간의 애니메이션을 모두 만들어 주고 태그에 변화를 주게 됩니다. 2. 애니메이션 사용하기 animate : 지정된 css 속성을 애니메이션 효과와 함께 지정합니다. animate({ }) : 지정된 객체의 css 속성들을 애니메이션 효과와 함께 지정합니다. size 설정 opacity 설정 위치 설정 종합 설정 순차 설정 Reference source code : https://github.com/yonghwankim-dev/jQuery_study/tree/main/Animate/src/main/webapp 윤재성의 처음 시작하는 jQuery Program..

1. jQuery 효과 jQuery는 선택자로 선택된 태그를 사라지게 하거나 나타나게 할 수 있습니다. 이 때, 몇가지 효과를 제공하고 있음 2. hide/show hide : 선택된 태그를 사라지게 한다 show : 선택된 태그를 나타나게 한다 toggle : 사라지거나 나타나는 상태를 전환한다 hide(시간), show(hide), toggle(시간) : 지정된 시간만큼 애니메이션 효과가 나타난다. 시간 : 밀리초 단위 시간은 “slow”라는 문자열을 넣어주면 적당히 느린 시간, “fast”를 넣어주면 적당히 짧은 시간이 설정된다. hide show toggle 위 결과에서 hide를 누르면 노란색 박스가 없어지고 show 박스를 누르면 노란색 박스가 다시 나타납니다. toogle 버튼을 눌렀을때 노..

1. 태그 탐색 jQuery는 선택자를 통해 태그를 선택한 후 선택된 태그를 기준으로 다른 태그들을 탐색 할 수 있음 태그 탐색은 html 문서를 탐색할 경우 사용하지만 xml 문서를 탐색하는 용도로 사용하기도 함 2. 같은 계층의 태그 선택하기 siblings : 선택된 태그와 같은 계층의 모든 태그들이 선택됨, (선택된 태그는 선택 제외됨) siblings(선택자2) : 선택된 태그와 같은 계층의 모든 태그 중 선택자2에 해당하는 태그들이 선택됨 next : 선택된 태그 다음 태그가 선택됨 nextAll : 선택된 태그의 다음 태그들이 모두 선택됨 nextUntil(선택자2) : 선택된 태그 다음 태그들 중 선택자2 까지의 모든 태그들이 선택됨 prev : 선택된 태그 이전 태그가 선택됨 prevAl..

1. 태그 탐색 jQuery는 선택자를 통해 태그를 선택한 후 선택된 태그를 기준으로 다른 태그들을 탐색할 수 있습니다. 태그 탐색은 html 문서를 탐색할 경우 사용하지만 xml 문서를 탐색하는 용도로 사용하기도 한다. 2. 부모 태그 탐색 parent : 선택된 태그의 부모 태그를 선택함 parents : 선택된 태그의 모든 부모 태그를 선택함 parents(선택자2) : 선택된 태그의 모든 부모 태그 중 선택자 2에 해당하는 태그들이 선택됨 parentsUnitil(선택자2) : 선택된 태그에서 선택자2 태그까지의 모든 부모 태그(시작과 목적지 태그는 미포함)들이 선택됨 div tag 1 div tag 2 div tag 3 div tag 4 3. 자식 태그 탐색 children : 선택된 태그의 자..