환경 : Visual Studio Code / Spring Tool Suite 4 1. (스프링) 프로젝트 생성 후 java 파일을 생성 하여 아래 코드 작성 - 백그라운드 코딩 - AjaxRestController.java package com.kh.spring11.restcontroller; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; //@Controller //사용자에게 화면을 전송하는 컨트롤러 @CrossOrig..

[ 비동기 통신(AJAX) ] ajax(Asynchronous Javascript And XML) : 비동기적인 웹 애플리케이션의 제작을 위해 XMLHttpRequest를 사용하여 통신을 하는 기술 페이지의 본래 목적이 아닌 내용을 처리하기 위한 통신 화면을 그대로 유지한 채 백그라운드에서 통신 페이지의 본래 목적 달성에 도움을 주기 위해서 사용 사용자의 사용성을 향상시키기 위해서 사용 사용 명령 : $.ajax({option}) 회원 가입 같은 것이 동기 통신. 근데 아이디 중복검사가 비동기통신. DB에 접근할 수 있는 건 스프링 뿐! 현재 페이지를 유지시키면서 몇번이고 발생할 수 있는것이 비동기 통신 [ 동기 / 비동기 통신 비교 ] 1. 동기 통신: 실시간 통신 송신자가 메시지를 보내면, 수신자는 ..

환경 : Visual Studio Code [ 주요 코드 ] - Style 태그 색상 참고 : https://cssgradient.io/ (+) 해당 사이트에서 제공하는 코드를 그대로 복붙함 - script 태그 (+) 각각 버튼을 누르면, guage 클래스를 찾아 폭을 각각의 퍼센트로 progressbar 클래스에서 디자인을 적용한다 [ 전체 코드 ] 진행바(progressbar) 20% 40% 60% 80% 100% 개인 공부 기록용입니다.

환경 : Visual Studio Code [ 주요 코드 ] .next(항목) 뒤 태그 선택 / .prev(항목) 앞 태그 선택 .parent(항목) 위 태그 선택 / .children(항목) 아래 태그 선택' - 방법 1 //[1] 모든 페이지를 다 숨기고 1페이지 표시 $(".page").hide().first().show(); // $(".page").hide().eq(0).show(); // $(".page:gt(0)").hide();//권장하지 않음(jQuery일 때만 됨) (+) 모든 페이지를 다 숨기고, 1번째 페이지를 표시하는 식을 한 번에 작성할 수 있다. (+) 이에 대한 방법이 위와 같이 총 3가지이다. //[2] 다음 버튼을 누르면 버튼이 있는 페이지는 숨기고 다음 페이지를 표시 $..

환경 : Visual Studio Code [ 주요 코드 ] - 방법 1 : css를 활용하기 (+) css의 속성 값을 "" 로 준다면, 기존에 적용한 디자인이 삭제됨. 원래대로 복구되는 효과를 얻는다 - 방법 2 : show(), hide(), toggle() 메소드 사용 - 방법 3 : fadeIn(), fadeOut(), fadeToggle() 메소드 사용 - 방법 4 : slideDown(), slideUp(), slidToggle() 메소드 사용 [ 전체 코드 ] jQuery 표시 제어 표시 숨김 토글 Hello jQuery 개인 공부 기록용입니다:)

환경 : Visual Studio Code 전체선택 체크박스에 대한 이벤트 구현 - .check-all은 전체 선택 체크박스 - .check-item은 개별 항목 체크박스 - jquery에서는 태그의 속성을 .prop() 명령으로 제어 또는 확인 //var checked = this.checked;//JS var checked = $(this).prop("checked");//jQuery (+) JS / jQuery의 속성을 가져오는 코드 비교해서 이해 $(".check-item").change(function(){ //총 ?개 중 ?개가 선택되었는지를 파악하여 처리 var countAll = $(".check-item").length; var countChecked = $(".check-item:che..