스크립트 indexpage = 1;은 현재 페이지를 나타내는 변수입니다. 초기값은 1로 설정되었습니다. isLoading = false;는 추가 데이터를 로드 중인지 확인하는 변수입니다. 로딩 중일 때는 true, 아닐 때는 false로 설정됩니다. 스크롤 이벤트 : window.addEventListener('scroll', () => {...}) 부분은 사용자가 스크롤을 내렸을 때 실행됩니다. scrollTop, scrollHeight, clientHeight는 각각 스크롤 위치, 전체 페이지 높이, 현재 화면 높이를 의미합니다. 스크롤이 거의 바닥에 도달했을 때(scrollTop + clientHeight >= scrollHeight - 5) 데이터를 추가로 로드하기 위해 loadMore() 함수를..
JavaScript, jQuery, Ajax
html 알림 메시지 스크립트 css.userHeader_login { display: flex; gap: 5px; /* 버튼 간의 간격 */ /* margin-right: 1.5%; */ align-items: center; /* 수직 중앙 정렬 */ } .userHeader_login .icon { width: 3.5vw; /* 화면 너비의 3.5%에 해당하는 크기 */ height: 3.5vw; /* 화면 너비의 3.5%에 해당하는 크기 */ display: flex; justify-content: center; /* 수평 가운데 정렬 */ align-items: center; /* 수직 가운데 정렬 */ } .userHeader_login .icon.round { border-radius: 50%..
스크립트 html 회원가입 | 로그인 css/* 회원가입,로그인 모달 스타일 */ #user_modal { display: none; /* 기본적으로 숨김 */ position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); /* 배경 어두운 색상 */ overflow: auto; padding-top: 60px; } .user_modal-content { background-color: #fff; margin: 5% auto; padding: 20px; border: none; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); width: 40%;..
스크립트 css/* 다크모드 스타일 */ body.dark-mode { background-color: #1e1e1e; color: #ffffff; } body.dark-mode header, body.dark-mode nav, body.dark-mode section { background-color: #1e1e1e; } body.dark-mode .listDiv { background-color: #333333; box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); } body.dark-mode a { color: #ffffff; } body.dark-mode input { background-color: #333333; color: #ffffff; } body.dark..
ajax를 활용하여 요청페이지로 파라미터 보내기 클릭!! sample.jsp
XML다목적 마크업 언어HTML 형식처럼 태그로 데이터를 표현데이터를 저장하고 전달할 목적으로만 만들어졌다HTML 태그처럼 미리 정의되어 있지 않고, 사용자가 직접 정의할 수 있다서로 다른 시스템끼지 다양한 종류의 데이터를 손쉽게 교활할 수 있도록 해준다텍스트 형식의 언어로 모든 XML 문서는 유니코드 문자로만 이루어진다새로운 태그를 만들어 추가해도 동작하므로, 확장성이 좋다 Servers 폴더의 web.xml 파일의 기본 설정이 index.??? 으로 되어있기 때문에 프로젝트 경로로 이동시 index 파일의 주소를 대문페이지로 들어가게 된다 이것이 자바다 한빛미디어 홍길동 34,000원 이것이 MySQL이다 한빛미디어 김길동 30,000원 명품 웹 프로그래밍 명품미디어 박길동 32,000원 도서 정보 ..
index.html ajax 공부 페이지 jQuery를 사용하여 ajax 통신 jQuery를 사용하여 info 통신 first.html 응답데이터입니다. info.html 나를 소개합니다 이름 : 홍길동 나이 : 20 연락처 : 010-1111-1111
자바스크립트의 라이브러리 중 하나 비동기식 자바스크립트와 xml의 약자 장점 웹페이지의 속도향상 서버의 처리가 완료될 때까지 기다리지 않고 처리 가능 단점 히스토리 관리가 안되어서 보안에 좀 더 신경을 써야한다 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다 http://www. .com/project/board/list.html http:// www. .com/ project/board/ list.html 프로토콜 도메인(ip) 경로 파일 경로에서 / 가 있으면 도메인 주소 바로 뒤 해당 경로로 이동 http://www. .com/list.html /가 없으면 상대경로 http://www. .com/project/board/list.html index.html ajax 공부 페이지 첫번째 aja..
밑의 링크를 타고 들어가면 JQUERY를 다운받을 수 있는 사이트로 들어간다https://jquery.com/download/ Download jQuery | jQueryDownload jQuery link Latest version To locally download these files, right-click the link and select "Save as..." from the menu. Download the compressed, production version: Download jQuery 3.7.1 The slim build is a smaller version, that excludes the ajaxjquery.com 첫번째 링크에서 마우스 오른쪽 클릭하고 다른 이름으로 링크 저장..
DOCTYPE html> 객체의 속성 변경하기 button{ border: 2px solid royalblue; color: royalblue; font-weight: bold; background-color: white; border-radius: 5px; width: 100px; height: 35px; } button:hover{ background-color: royalblue; color: white; } function DoChange(){ //class가 msg인 객체를 찾아서 let item = document.getElementsByClassName("msg")[0]; //문단 영역입니다를 변경된 문자열입니다로 변경하는 내용을 작성 item.innerHTML = '변경된 문자열입니다'; ..
