분류 전체보기 (26) 썸네일형 리스트형 [FullCalendar] 풀캘린더를 활용해서 일정관리를 구현해보았다. KH 파이널 프로젝트 때 일정관리를 맡게 되어 사용하게 된 풀캘린더!! 시행착오도 매우매우 많았고, 솔직히 아직 모르는게 더 많은 것 같지만 ㅎㅎㅎ 티스토리에 기록해 놓으려 한다. 1. 개발환경 SpringFramework(STS3), jdk8, oracle11 HTML, CSS(Bootstrap4), JavaScript, jQuery FullCalendar5.8.0 * FullCalendar 홈페이지 FullCalendar - JavaScript Event Calendar Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source c.. [jQuery] 10. 시각적인 효과 메소드 시각적인 효과 (Effect 메소드) 페이지 내에 애니메이션 효과를 만들기 위해 사용되는 메소드 집합 show()와 hide(), toggle() 선택된 요소가 점점 커지면서 보여지고, 점점 작아지면서 사라지게 하는 메소드 fadeIn()과 fadeOut(), fadeToggle() 선택된 요소가 점점 투명해지면서 사라지고 점점 선명해지면서 보여지게 해주는 메소드 opacity : 투명도 slideDown()과 slidUp() 선택된 요소가 슬라이드 효과로 아래로 나타나거나 위로 사라지게 해주는 메소드 시간부여도 가능 [jQuery] 09. 이벤트 이벤트 핸들러(이벤트발생시 실행될 function) 연결 방법 종류 방법1. 이벤트 메소드를 통한 연결 $("선택자").이벤트메소드(function(){ 해당 요소에 해당 이벤트 발생시 실행할 내용; }); 클릭해보세요 방법2. on메소드를 이용한 방법 $("선택자").on("이벤트명", function(){ 해당 요소에 해당 이벤트 발생시 실행할 내용; }); on 메소드를 통해 이벤트 연결시 한 요소에 다중으로 이벤트걸기 가능 마우스 클릭 및 올려보세요 방법3. $("상위요소선택자").on("이벤트명","하위요소선택자",function(){ 선택된 상위요소 안에 존재하는 해당 하위요소에 해당 이벤트가 발생했을때 실행할 내용; }) 동적으로 만들어진 요소에도 동일한 이벤트를 적용시키고자 한다면 반드시 .. [jQuery] 08. 추가적인 메소드 each 메소드 배열의 모든 인덱스에 순차적으로 접근하고자 할 때, 객체가 가지고 있는 모든 속성에 순차적으로 접근하고자 할 때 사용 for in문과 유사하게 수행되는 메소드 표현법 $.each(객체|배열, function([매개변수1, 매개변수2]){ 순차적으로 접근해서 실행할 내용; }); 객체|배열.each(function([매개변수1, 매개변수2]){ 순차적으로 접근해서 실행할 내용; }); 만약 객체를 제시했다면, 첫번째 매개변수에는 순차적으로 접근된 객체의 속성명(키 값)이 담김 두번째 매개변수에는 해당 속성값(밸류)이 담김 만약 배열을 제시했다면, 첫번째 매개변수에는 순차적적으로 접근된 배열의 인덱스수가 담김 두번째 매개변수에는 해당 인덱스값이 담김 item-1 item-2 item-3 it.. [jQuery] 07. 요소생성 및 제거 요소 생성 및 제거 동적으로 요소 생성 삽입 관련 메소드 part1 선택된 요소를 기준으로 새로이 생성된 요소를 추가하는 메소드 $(A).append(B) : A요소 내의 뒷부분에 B를 추가 (자손/하위) $(A).prepend(B) : A요소 내의 앞부분에 B를 추가 (자손/하위) $(A).before(B) : A요소 앞부분에 B를 추가 (동위) $(A).after(B) : A요소 뒷부분에 B를 추가 (동위) 삽입 관련 메소드 part2 $(B).appendTo(A) : B를 A요소 내의 뒷부분에 추가 (자손/하위) $(B).preparedTo(A) : B를 A요소 내의 앞부분에 추가 (자손/하위) $(B).insertBefore(A) : B를 A요소 앞에 추가 (동위) $(B).insertAfter(.. [jQuery] 06. Content영역 관련 메소드 Content 영역(innerHTML, innerText) 관련 메소드 html(["문구"]) 메소드 : innerHTML 속성과 관련된 메소드 선택된 요소의 content영역(시작태그와 종료태그 사이)을 리턴해주거나 또는 변경해주는 메소드 $("선택자").html() : 선택된 요소의 content영역 값을 반환해줌 (이 때 html태그까지 포함) $("선택자").html("문구") : 선택된 요소의 content영역 값을 해당 문구로 변경해줌 (전달하는 문구에 html태그가 있을 경우 태그로서 해석해줌) text(["문구"]) 메소드 : innerText 속성과 관련된 메소드 선택된 요소의 content영역의 텍스트만 리턴해주거나 변경해주는 메소드 $("선택자").text() : 선택된 요소의 con.. [jQuery] 05. 탐색(순회)메소드 탐색(순회) 메소드 (Traversing) Anscestors(조상) 메소드 : 기준이 되는 요소의 상위요소들을 선택할 수 있는 메소드 $("선택자").parent() : 선택된 요소의 바로 위 상위(부모)요소 하나만을 선택 $("선택자").parents() : 선택된 요소의 모든 상위요소들을 다 선택 $("선택자").parents("선택자") : 선택된 요소의 모든 상위요소들 중 제시한 값과 일치하는 상위요소들만 선택 $("선택자").parentsUntil("선택자") : 선택된 요소부터 제시한 값까지의 모든 상위요소들 선택 Descendants (자손, 후손) 메소드 : 기준이 되는 요소의 하위요소들을 선택할 수 있는 메소드 $("선택자").children() : 선택된 요소의 모든 자손(바로하위) .. [jQuery] 04. 필터링관련선택자 및 메소드 필터 관련 선택자 $("대상:선택자") 이름 혈액형 거주지 홍길동 A형 서울 김영희 B형 경기도 김삼순 O형 부산 총인원 3명 필터링과 관련된 메소드 기준이 되는 요소 중에서 특정 요소만을 걸러서 선택해주는 메소드 $("대상").필터링메소드() first(), last(), filter(), not(), eq(index)-인덱스지정 [선택자 종류 참고] http://www.tcpschool.com/jquery/jq_elementSelection_jqSelector 이전 1 2 3 4 다음
